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.
This commit is contained in:
qupig
2024-12-19 05:37:53 +08:00
committed by GitHub
parent db311e6ff5
commit 318c582043
5 changed files with 17 additions and 2 deletions

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