style: keep old color values as fallback

When the user's browser does not support `light-dark`, fall back to the light theme color scheme.
coder · Dec 18, 2024 · 42227ea · 42227ea
1 parent 9bb2fc9
commit 42227ea
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/src/browser/pages/error.css b/src/browser/pages/error.css
@@ -10,6 +10,7 @@
 }
 
 .error-display > .body {
+  color: #444;
   color: light-dark(#444, #ccc);
   font-size: 1.2rem;
 }

diff --git a/src/browser/pages/global.css b/src/browser/pages/global.css
@@ -10,7 +10,9 @@ body,
 }
 
 body {
+  background: rgb(244, 247, 252);
   background: light-dark(rgb(244, 247, 252), #111);
+  color: #111;
   color: light-dark(#111, #ddd);
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
@@ -26,10 +28,12 @@ button {
 }
 
 .-button {
+  background-color: rgb(87, 114, 245);
   background-color: light-dark(rgb(87, 114, 245), rgb(50, 85, 250));
   border-radius: 5px;
   border: none;
   box-sizing: border-box;
+  color: white;
   color: light-dark(white, #ddd);
   cursor: pointer;
   padding: 18px 20px;
@@ -48,6 +52,7 @@ button {
 }
 
 .card-box {
+  background-color: rgb(250, 253, 258);
   background-color: light-dark(rgb(250, 253, 258), #000);
   border-radius: 5px;
   box-shadow:
@@ -58,7 +63,9 @@ button {
 }
 
 .card-box > .header {
+  border-bottom: 1px solid #ddd;
   border-bottom: 1px solid light-dark(#ddd, #222);
+  color: #444;
   color: light-dark(#444, #ccc);
   padding: 30px;
 }
@@ -69,6 +76,7 @@ button {
 }
 
 .card-box > .header > .sub {
+  color: #555;
   color: light-dark(#555, #aaa);
   margin-top: 10px;
 }

diff --git a/src/browser/pages/login.css b/src/browser/pages/login.css
@@ -29,8 +29,10 @@ body {
 }
 
 .login-form > .field > .password {
+  background-color: rgb(244, 247, 252);
   background-color: light-dark(rgb(244, 247, 252), #222);
   border-radius: 5px;
+  border: 1px solid #ddd;
   border: 1px solid light-dark(#ddd, #333);
   box-sizing: border-box;
   flex: 1;