opensource/code-server
1
0
Fork 0
mirror of https://github.com/coder/code-server.git synced 2025-09-19 03:03:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Softer dark mode (#7178)

Browse Source
This commit is contained in:
bilogic
2025-02-13 08:08:39 +08:00
committed by GitHub
parent d23d1a9541
commit 33aa21fd0f
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/browser/pages/global.css
View File

@ -11,7 +11,7 @@ body,
body { body {
background: rgb(244, 247, 252); background: rgb(244, 247, 252);
background: light-dark(rgb(244, 247, 252), #111); background: light-dark(rgb(244, 247, 252), #111827);
color: #111; color: #111;
color: light-dark(#111, #ddd); color: light-dark(#111, #ddd);
margin: 0; margin: 0;
@ -29,14 +29,15 @@ button {
.-button { .-button {
background-color: rgb(87, 114, 245); background-color: rgb(87, 114, 245);
background-color: light-dark(rgb(87, 114, 245), rgb(50, 85, 250)); background-color: light-dark(rgb(87, 114, 245), rgb(26, 86, 219));
border-radius: 5px; border-radius: 5px;
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
color: white; color: white;
color: light-dark(white, #ddd); color: light-dark(white, white);
cursor: pointer; cursor: pointer;
padding: 18px 20px; padding: 18px 20px;
font-weight: 500;
text-decoration: none; text-decoration: none;
} }
@ -53,10 +54,10 @@ button {
.card-box { .card-box {
background-color: rgb(250, 253, 258); background-color: rgb(250, 253, 258);
background-color: light-dark(rgb(250, 253, 258), #000); background-color: light-dark(rgb(250, 253, 258), #1f2937);
border-radius: 5px; border-radius: 5px;
box-shadow: box-shadow:
rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, light-dark(rgba(60, 66, 87, 0.117647), rgba(10, 10, 10, 0.617647)) 0px 7px 14px 0px,
rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px; rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
max-width: 650px; max-width: 650px;
width: 100%; width: 100%;
@ -64,9 +65,9 @@ button {
.card-box > .header { .card-box > .header {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
border-bottom: 1px solid light-dark(#ddd, #222); border-bottom: 1px solid light-dark(#ddd, #111827);
color: #444; color: #444;
color: light-dark(#444, #ccc); color: light-dark(#444, #fff);
padding: 30px; padding: 30px;
} }
@ -77,7 +78,7 @@ button {
.card-box > .header > .sub { .card-box > .header > .sub {
color: #555; color: #555;
color: light-dark(#555, #aaa); color: light-dark(#555, #9ca3af);
margin-top: 10px; margin-top: 10px;
} }

12
src/browser/pages/login.css
View File

@ -30,15 +30,23 @@ body {
.login-form > .field > .password { .login-form > .field > .password {
background-color: rgb(244, 247, 252); background-color: rgb(244, 247, 252);
background-color: light-dark(rgb(244, 247, 252), #222); background-color: light-dark(rgb(244, 247, 252), #374151);
border-radius: 5px; border-radius: 5px;
border: 1px solid #ddd; border: 1px solid #ddd;
border: 1px solid light-dark(#ddd, #333); border: 1px solid light-dark(#ddd, #4b5563);
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
padding: 16px; padding: 16px;
} }
.login-form > .field > .password::placeholder {
color: rgb(148 163 184);
}
.login-form > .field > .password:focus {
outline: 2px solid rgb(63, 131, 248);
}
.login-form > .user { .login-form > .user {
display: none; display: none;
} }