From d983d6854cb5a03fda08b13af412d5ba00e7aeac Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 11 Apr 2024 13:20:13 +0530
Subject: [PATCH] chore: add css variable for preferences background color
 [skip e2e]

---
 .../assets/com.standardnotes.theme-proton/index.css          | 1 +
 .../javascripts/Components/Preferences/PreferencesCanvas.tsx | 5 ++++-
 .../Components/Preferences/PreferencesMenuView.tsx           | 2 +-
 packages/web/src/stylesheets/_theme.scss                     | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/assets/com.standardnotes.theme-proton/index.css b/packages/web/src/components/assets/com.standardnotes.theme-proton/index.css
index d9c57d35d..3765b4aa2 100644
--- a/packages/web/src/components/assets/com.standardnotes.theme-proton/index.css
+++ b/packages/web/src/components/assets/com.standardnotes.theme-proton/index.css
@@ -40,6 +40,7 @@
   --sn-stylekit-accessory-tint-color-3: var(--warning);
   --sn-stylekit-accessory-tint-color-5: var(--success);
 
+  --preferences-background-color: var(--background-strong);
   --preferences-navigation-selected-background-color: var(--background-norm);
 }
 
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
index cb29a27bc..c991a22ac 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
@@ -9,7 +9,10 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = (props) => (
   <div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
     <PreferencesMenuView menu={props.menu} />
-    <div className="min-h-0 flex-grow overflow-auto bg-contrast" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}>
+    <div
+      className="min-h-0 flex-grow overflow-auto bg-[--preferences-background-color]"
+      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+    >
       <PaneSelector {...props} />
     </div>
   </div>
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
index 6758e58b9..74674b8bd 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -24,7 +24,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
+    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-[--preferences-background-color] md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem
diff --git a/packages/web/src/stylesheets/_theme.scss b/packages/web/src/stylesheets/_theme.scss
index 99e548fdb..c13f396b1 100644
--- a/packages/web/src/stylesheets/_theme.scss
+++ b/packages/web/src/stylesheets/_theme.scss
@@ -36,6 +36,7 @@
 
   --preferences-navigation-icon-color: var(--sn-stylekit-neutral-color);
   --preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color);
+  --preferences-background-color: var(--sn-stylekit-contrast-background-color);
 
   --dropdown-menu-radio-button-inactive-color: var(--sn-stylekit-passive-color-1);