style: add dark theme color scheme

Author: qupig

src/browser/pages/error.css

@@ -10,7 +10,7 @@
 }
 
 .error-display > .body {
-  color: #444;
+  color: light-dark(#444, #ccc);
   font-size: 1.2rem;
 }
 

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" />

src/browser/pages/global.css

@@ -1,3 +1,7 @@
+:root {
+  color-scheme: light dark;
+}
+
 html,
 body,
 #root {
@@ -6,8 +10,8 @@ body,
 }
 
 body {
-  background: rgb(244, 247, 252);
-  color: #111;
+  background: light-dark(rgb(244, 247, 252), #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";
@@ -22,11 +26,11 @@ 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;
@@ -44,7 +48,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,
@@ -54,8 +58,8 @@ button {
 }
 
 .card-box > .header {
-  border-bottom: 1px solid #ddd;
-  color: #444;
+  border-bottom: 1px solid light-dark(#ddd, #222);
+  color: light-dark(#444, #ccc);
   padding: 30px;
 }
 
@@ -65,7 +69,7 @@ button {
 }
 
 .card-box > .header > .sub {
-  color: #555;
+  color: light-dark(#555, #aaa);
   margin-top: 10px;
 }
 

src/browser/pages/login.css

@@ -29,11 +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;
-  color: black;
   flex: 1;
   padding: 16px;
 }

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" />