From 9bb2fc98bc647a9c1797af3bc129977d3b503ae5 Mon Sep 17 00:00:00 2001
From: qupig <61939856+qupig@users.noreply.github.com>
Date: Sat, 14 Dec 2024 21:49:22 +0000
Subject: [PATCH 1/2] style: add dark theme color scheme
---
src/browser/pages/error.css | 2 +-
src/browser/pages/error.html | 2 +-
src/browser/pages/global.css | 20 ++++++++++++--------
src/browser/pages/login.css | 5 ++---
src/browser/pages/login.html | 1 +
5 files changed, 17 insertions(+), 13 deletions(-)
diff --git a/src/browser/pages/error.css b/src/browser/pages/error.css
index 15b7d4aca532..bbda7130ca40 100644
--- a/src/browser/pages/error.css
+++ b/src/browser/pages/error.css
@@ -10,7 +10,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
index 5131c6a3d931..b3ad56757ae2 100644
--- 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:;"
/>
-
+
{{ERROR_TITLE}} - code-server
diff --git a/src/browser/pages/global.css b/src/browser/pages/global.css
index e16b6ca887e5..80b48556ef34 100644
--- a/src/browser/pages/global.css
+++ b/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;
}
diff --git a/src/browser/pages/login.css b/src/browser/pages/login.css
index 026cac97f5d6..8180eac7c863 100644
--- a/src/browser/pages/login.css
+++ b/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;
}
diff --git a/src/browser/pages/login.html b/src/browser/pages/login.html
index fa4af8592edf..c7fb2f2ac67e 100644
--- 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:;"
/>
+
{{I18N_LOGIN_TITLE}}
From 42227eafa23e38259a9046f16f928fd09f32d17c Mon Sep 17 00:00:00 2001
From: qupig <61939856+qupig@users.noreply.github.com>
Date: Wed, 18 Dec 2024 03:55:53 +0000
Subject: [PATCH 2/2] =?UTF-8?q?style:=20keep=20old=20color=20values=20?=
=?UTF-8?q?=E2=80=8B=E2=80=8Bas=20fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
When the user's browser does not support `light-dark`, fall back to the light theme color scheme.
---
src/browser/pages/error.css | 1 +
src/browser/pages/global.css | 8 ++++++++
src/browser/pages/login.css | 2 ++
3 files changed, 11 insertions(+)
diff --git a/src/browser/pages/error.css b/src/browser/pages/error.css
index bbda7130ca40..d100ee5c4666 100644
--- 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
index 80b48556ef34..6ccbdc8367a6 100644
--- 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
index 8180eac7c863..1647c575f954 100644
--- 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;