style: add dark theme color scheme (#7118)

hen the user's browser does not support `light-dark`, fall back to the light theme color scheme.
coder · Dec 18, 2024 · 318c582 · 318c582
1 parent db311e6
commit 318c582
Show file tree

Hide file tree

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

diff --git a/src/browser/pages/error.html b/src/browser/pages/error.html
@@ -10,7 +10,7 @@
       http-equiv="Content-Security-Policy"
       content="style-src 'self'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
-
+    <meta name="color-scheme" content="light dark" />
     <title>{{ERROR_TITLE}} - code-server</title>
     <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />
     <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />

diff --git a/src/browser/pages/global.css b/src/browser/pages/global.css
@@ -1,3 +1,7 @@
+:root {
+  color-scheme: light dark;
+}
+
 html,
 body,
 #root {
@@ -7,7 +11,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",
     "Segoe UI Emoji", "Segoe UI Symbol";
@@ -23,10 +29,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;
   text-decoration: none;
@@ -45,6 +53,7 @@ button {
 
 .card-box {
   background-color: rgb(250, 253, 258);
+  background-color: light-dark(rgb(250, 253, 258), #000);
   border-radius: 5px;
   box-shadow:
     rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px,
@@ -55,7 +64,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;
 }
 
@@ -66,6 +77,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
@@ -30,10 +30,11 @@ 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;
-  color: black;
   flex: 1;
   padding: 16px;
 }

diff --git a/src/browser/pages/login.html b/src/browser/pages/login.html
@@ -10,6 +10,7 @@
       http-equiv="Content-Security-Policy"
       content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
+    <meta name="color-scheme" content="light dark" />
     <title>{{I18N_LOGIN_TITLE}}</title>
     <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />
     <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />