From 02849bfcf13780d447067d00d64a91d7995d98a5 Mon Sep 17 00:00:00 2001
From: Francis Nepomuceno <n3ps@users.noreply.github.com>
Date: Tue, 16 Dec 2025 14:37:29 -0500
Subject: [PATCH 1/3] refactor: simplify background handling

---
 ui/css/base-styles.scss | 30 ++++--------------------------
 1 file changed, 4 insertions(+), 26 deletions(-)

diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss
index 141d48af63e..55acb757372 100644
--- a/ui/css/base-styles.scss
+++ b/ui/css/base-styles.scss
@@ -9,6 +9,8 @@
   --width-max: 798px;
   --width-max-sidepanel: 490px;
   --header-height: 68px;
+  color-scheme: dark light;
+  background-color: light-dark(var(--brand-colors-grey-grey000), var(--brand-colors-grey-grey900));
 }
 
 html,
@@ -25,28 +27,8 @@ 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] {
+  background-color: var(--color-background-default);
 }
 
 /* stylelint-disable */
@@ -55,10 +37,6 @@ html {
   height: 100%;
   display: flex;
   flex-direction: column;
-
-  html[data-theme] & {
-    background: var(--color-background-alternative);
-  }
 }
 /* stylelint-enable */
 

From d4c94768afe4c4c2991380e511726fd290182ed7 Mon Sep 17 00:00:00 2001
From: Francis Nepomuceno <n3ps@users.noreply.github.com>
Date: Tue, 16 Dec 2025 14:53:31 -0500
Subject: [PATCH 2/3] tweak

---
 ui/css/base-styles.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss
index 55acb757372..07cf3318d7b 100644
--- a/ui/css/base-styles.scss
+++ b/ui/css/base-styles.scss
@@ -10,12 +10,12 @@
   --width-max-sidepanel: 490px;
   --header-height: 68px;
   color-scheme: dark light;
+  color: light-dark(var(--brand-colors-grey-grey900), var(--brand-colors-grey-grey000));
   background-color: light-dark(var(--brand-colors-grey-grey000), var(--brand-colors-grey-grey900));
 }
 
 html,
 body {
-  color: var(--color-text-default);
   width: 100%;
   height: 100%;
   margin: 0;
@@ -28,6 +28,7 @@ body {
 }
 
 html[data-theme] {
+  color: var(--color-text-default);
   background-color: var(--color-background-default);
 }
 

From 0fffcae5917cf566163ad4764bab0c8a0772848d Mon Sep 17 00:00:00 2001
From: Francis Nepomuceno <n3ps@users.noreply.github.com>
Date: Tue, 16 Dec 2025 21:14:55 -0500
Subject: [PATCH 3/3] tweak

---
 ui/css/base-styles.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss
index 07cf3318d7b..4dcc9acab4e 100644
--- a/ui/css/base-styles.scss
+++ b/ui/css/base-styles.scss
@@ -9,9 +9,10 @@
   --width-max: 798px;
   --width-max-sidepanel: 490px;
   --header-height: 68px;
+
   color-scheme: dark light;
-  color: light-dark(var(--brand-colors-grey-grey900), var(--brand-colors-grey-grey000));
-  background-color: light-dark(var(--brand-colors-grey-grey000), var(--brand-colors-grey-grey900));
+  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,
@@ -29,7 +30,7 @@ body {
 
 html[data-theme] {
   color: var(--color-text-default);
-  background-color: var(--color-background-default);
+  background-color: var(--color-background-alternative);
 }
 
 /* stylelint-disable */