mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-02-11 15:20:17 +00:00
[feature/frontend] add light mode color scheme of base css, adapt to prefers-color-scheme (#3765)
This commit is contained in:
parent
a6d1f5bf2c
commit
42bbbaadb2
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue