[feature/frontend] add light mode color scheme of base css, adapt to prefers-color-scheme (#3765)

This commit is contained in:
CDN 2025-02-09 19:22:41 +08:00 committed by GitHub
parent a6d1f5bf2c
commit 42bbbaadb2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 80 additions and 2 deletions

View file

@ -23,6 +23,10 @@
--blue2: var(--blurple5);
--blue3: var(--blurple6);
/* Use hardcoded grey as gray get restyled in light mode */
--gray1: #2a2b2f;
--gray2: #35363b;
/* Basic page styling (background + foreground) */
--bg: var(--blurple1);
--bg-accent: var(--white2);

View file

@ -63,6 +63,13 @@ html, body {
.profile .profile-header .basic-info .avatar-image-wrapper {
border: var(--single-border);
}
.profile .statuses .rss-icon .fa {
/* enforce dark mode style */
background: linear-gradient(to right, var(--almost-black) 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
}
.status .status-header > address > a .avatar {
border: var(--single-border);
}

View file

@ -17,6 +17,10 @@
--blue1: var(--acid-green-dark);
--blue2: var(--acid-green-light);
--blue3: var(--acid-green);
/* enforce dark mode style */
--white1: #fafaff;
--white2: #b3b5c6;
}
/* Main page background */

View file

@ -34,6 +34,9 @@
/* dark blues */
--gray2: #29485A; /* black forest blue */
--gray4: #2B3246; /* vintage dark blue */
/* enforce dark mode style */
--white1: #fafaff;
--white2: #b3b5c6;
/* statuses */
--status-bg: var(--dgreen1);
--status-focus-bg: var(--dgreen1);
@ -87,6 +90,12 @@ box-shadow: none; /* no "glow" for buttons */
border-top: 0.1rem solid var(--sunny);
}
/* RSS icon */
.profile .statuses .rss-icon .fa {
background: linear-gradient(to right, var(--gray2) 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
}
/* Block quotes */
blockquote {
background-color: var(--quotebg);

View file

@ -18,6 +18,12 @@
--orange2: var(--blue1);
--br: 0.8rem;
--br-inner: 0.4rem;
/* Use hardcoded grey as gray get re-styled in light mode */
--white1: #fafaff;
--gray1: #2a2b2f;
--gray2: #35363b;
--gray3: #45464e;
--gray8: #696a75;
/* Basic page styling (background + foreground) */
--bg: var(--soft-pink);

View file

@ -24,6 +24,8 @@
/* Color definitions */
/* Dark mode - default */
/* Foreground */
$white1: #fafaff; /* default text color, contrast >= 5.0 with all $grays */
$white2: #b3b5c6; /* less important text, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */
@ -94,7 +96,7 @@ $no-img-desc-fg: $gray1;
$bg-sensitive: $gray1;
$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0, 0, 0, 0.15);
$boxshadow-border: 0.08rem solid $gray1;
$avatar-border: $orange2;
@ -129,4 +131,41 @@ $plyr-badge-background: $bg-accent;
$plyr-video-controls-background: $bg-accent;
$plyr-badge-text-color: $fg;
$plyr-badge-border-radius: $br;
$plyr-video-progress-buffered-background: $gray8;
$plyr-video-progress-buffered-background: $gray8;
/* Light mode */
$white: #fafaff; /* we still use white for something */
@media (prefers-color-scheme: light) {
:root {
$white1: #000000; /* default text color, contrast >= 5.0 with all $grays */
$white2: #59595F; /* less important text, can be used with $gray1 (8.5) ~ $gray5 (5.0) */
/* Background shades, contrast >= 5.0 with $white1 (#000000) */
$gray1: #ffffff;
$gray2: #f6f6f6;
$gray3: #ededed;
$gray4: #e4e4e4;
$gray5: #dbdbdb;
$gray6: #d2d2d2;
$gray7: #c9c9c9;
$gray8: #c0c0c0;
$orange1: #c75300; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.5)*/
$orange2: #bd4f00; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.5) */
$blue1: #247cb3; /* lighter blue for smaller elements (borders), can only be used with $gray1 (4.5) */
$blue2: #166ba0; /* all-round accent color, can be used with $gray1 (5.7), $gray2 (5.3), $gray3 (4.9), $gray4 (4.5) */
$blue3: #106193; /* hover/selected accent to $blue2, can be used with $gray1 (6.6), $gray2 (6.1), $gray3 (5.6), $gray4 (5.2), $gray5 (4.8) */
$error1: #ffc1c1; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (13.6), $white2 (4.5) */
$error2: #aa0000; /* Error background text, can be used with $error1 (5.0), $gray1 (7.7), $gray2 (7.1), $gray3 (6.62) */
$error3: #d93636; /* Error button background text, can be used with $white1 (4.53) */
$error-link: #abd4ff; /* Error link text, can be used with $error2 (5.56) */
$green1: #367400;
$info-bg: $blue1;
}
}

View file

@ -70,6 +70,10 @@
.activitypub-logo {
background: $fg;
/* light mode */
@media (prefers-color-scheme: light) {
background: none;
}
box-shadow: $boxshadow;
border-radius: $br;
max-width: 100%;

View file

@ -298,6 +298,11 @@
*/
background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
/* light mode */
@media (prefers-color-scheme: light) {
background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
}
}
}