Backup_Repos/code-server
1
0
Fork 0
mirror of https://github.com/cdr/code-server.git synced 2025-12-06 08:27:17 +01:00
Code Issues Projects Releases Wiki Activity

style: add dark theme color scheme (#7118)

Browse source 
hen the user's browser does not support `light-dark`, fall back to the light theme color scheme.
This commit is contained in:
qupig 2024-12-19 05:37:53 +08:00 committed by GitHub
parent db311e6ff5
commit 318c582043
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/browser/pages/error.css
View file

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

2
src/browser/pages/error.html
View file

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

12
src/browser/pages/global.css
View file

@ -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;
}

3
src/browser/pages/login.css
View file

@ -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;
}

1
src/browser/pages/login.html
View file

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