refactor: simplify background handling (#38913)

## **Description**

Simplify handling of dark/light theme background using the light-dark
function

Also fixes #38827 where the document needs to match the main container
background

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38913?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: #38827

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Simplifies global dark/light theming by using CSS light-dark and
consolidating document/background color handling in
`ui/css/base-styles.scss`.
> 
> - **Global CSS/Theming** (`ui/css/base-styles.scss`):
> - Use `color-scheme: dark light` and `light-dark(...)` in `:root` to
set default text and background colors.
> - Replace complex `prefers-color-scheme` and non-`data-theme`
conditionals with a single `html[data-theme]` rule for theme overrides.
> - Remove background styling coupling from `#app-content` so the
document and main container backgrounds align.
> - Keep base element resets; no structural layout changes beyond
background/color handling.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
de2fc83. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: n3ps

ui/css/base-styles.scss

@@ -9,11 +9,14 @@
   --width-max: 798px;
   --width-max-sidepanel: 490px;
   --header-height: 68px;
+
+  color-scheme: dark light;
+  color: light-dark(var(--brand-colors-grey-grey1000), var(--brand-colors-grey-grey050));
+  background-color: light-dark(var(--brand-colors-grey-grey050), var(--brand-colors-grey-grey1000));
 }
 
 html,
 body {
-  color: var(--color-text-default);
   width: 100%;
   height: 100%;
   margin: 0;
@@ -25,28 +28,9 @@ body {
   text-rendering: optimizeLegibility;
 }
 
-html {
-  @include design-system.screen-sm-max {
-    &:not([data-theme]) {
-      background-color: var(--color-background-default);
-    }
-  }
-
-  /*
-    Until we get the user's preference from React state,
-    assume the user is in dark mode, because the default
-    theme is system preference
-  */
-  @media (prefers-color-scheme: dark) {
-    &:not([data-theme]) {
-      color: var(--brand-colors-white);
-      background-color: var(--brand-colors-grey-grey900);
-
-      body {
-        color: var(--brand-colors-white);
-      }
-    }
-  }
+html[data-theme] {
+  color: var(--color-text-default);
+  background-color: var(--color-background-alternative);
 }
 
 /* stylelint-disable */
@@ -55,10 +39,6 @@ html {
   height: 100%;
   display: flex;
   flex-direction: column;
-
-  html[data-theme] & {
-    background: var(--color-background-alternative);
-  }
 }
 /* stylelint-enable */