Add better colors for dark mode

AlexandruIstrate · Feb 5, 2024 · 7ba3182 · 7ba3182
1 parent 4ea55ad
commit 7ba3182
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/salary-calc/src/App.css b/salary-calc/src/App.css
@@ -6,4 +6,8 @@ main {
 
 .content {
     flex: 1;
+}
+
+.bg-tertiary-dark {
+    background-color: #2B3035;
 }
diff --git a/salary-calc/src/App.js b/salary-calc/src/App.js
@@ -43,7 +43,7 @@ polyfillCountryFlagEmojis();
 
 function Jumbotron({ title, subtitle, theme = null }) {
     return (
-        <Container className={`p-5 mb-4 rounded-3 ${theme.bsBackground}`}>
+        <Container className={`p-5 mb-4 rounded-3 ${theme.bkg}`}>
             <Container className="container-fluid py-5">
                 <h1 className="display-5 fw-bold">{title}</h1>
                 <p className="col-md-8 fs-4">{subtitle}</p>
@@ -323,6 +323,9 @@ function App() {
 
     // Detect when the theme preference is changed by either the system or the user
     useEffect(() => {
+        // First, make sure we remember this setting across sessions
+        LocalStorage.theme = themePref;
+
         // Store the theme here
         var selectedTheme = "light";
 
@@ -737,7 +740,7 @@ function App() {
             </div>
 
             {/* Footer */}
-            <footer className={`footer font-small blue ${theme.bsBackground} pt-4`}>
+            <footer className={`footer font-small blue ${theme.bkg} pt-4`}>
                 {/* Footer Content */}
                 <FooterContent />
 

diff --git a/salary-calc/src/themes/themes.js b/salary-calc/src/themes/themes.js
@@ -1,13 +1,13 @@
 // Define the themes
 export const lightTheme = {
     bsTheme: "light",
-    bsBackground: "bg-light",
+    bkg: "bg-light",
     countrySelStyle: {}
 };
 
 export const darkTheme = {
     bsTheme: "dark",
-    bsBackground: "bg-dark",
+    bkg: "bg-tertiary-dark",
     countrySelStyle: {
         container: (provided) => ({
             ...provided,