www

Personal website: https://www.jayvii.de
git clone https://src.jayvii.de/pub/www.git
Log | Files | Refs | Submodules | README

commit 1a363a6ac9fdb55e50066a68f81ae9a7819d9ef1
parent 21cf15e02ba8d548fb152da1e7de71a1f18577e8
Author: JayVii <jayvii@posteo.de>
Date:   Thu,  8 Jul 2021 10:29:54 +0200

implement dark mode

Diffstat:
Mstatic/css/custom.css | 67+++++++++++++++++++++++++++++++++++++++++++++----------------------
1 file changed, 45 insertions(+), 22 deletions(-)

diff --git a/static/css/custom.css b/static/css/custom.css @@ -1,17 +1,28 @@ +/* Dark Mode: Default */ :root { - --hl-fg: #f8f8f2; - --hl-fga: #f8f8f2AA; - --shadow: #00000080; + --fg1: #f8f8f2; + --bg1: #1d1e26; + --bg2: #000000CC; + --hl1: #ff80bf; + --hl2: #fffc81; +} + +/* Bright Mode */ +@media (prefers-color-scheme: light) { + :root { + --fg1: #1d1e26; + --bg1: #f8f8f2; + --bg2: #000000CC; + } } /* Background Colour */ body { - background-image: linear-gradient(-45deg, - rgba(255, 252, 129, 1.0), rgba(255, 128, 191, 0.9)); + background-image: linear-gradient(-45deg, var(--hl1), var(--hl2)); } #main { - background-color: #2a2c37DD; + background-color: var(--bg1); } #main .avatar::before { @@ -19,54 +30,60 @@ body { } #main .avatar img { - box-shadow: 0 0 0 0.5em #1d1e26CC; + box-shadow: 0 0 0 0.5em var(--bg2); } /* Text Colour */ h1, h2, h3, h4, h5, h6, p, span, details, summary { - color: var(--hl-fg); + color: var(--fg1); + font-size: 1.15em; } li { - color: var(--hl-fg); + color: var(--fg1); font-weight: bold; - font-size: 1.15em; } img.feed, li > img { filter: invert(100%); } +@media (prefers-color-scheme: light) { + img.feed, li > img { + filter: invert(0%) !important; + } +} /* URL Colour */ -a:hover { - color: var(--hl-fg); +a { + text-decoration: underline; + text-decoration-color: var(--fg1); + text-decoration-style: dotted; } - -a:active { - color: var(--hl-fg); +a:hover, a:active { + color: var(--fg1); } /* Footer Icons */ ul.icons li a::before { - text-shadow: 1.25px 0px 0px var(--shadow), -1.25px 0px 0px var(--shadow), - 0px 1.25px 0px var(--shadow), 0px -1.25px 0px var(--shadow); + text-shadow: 1.25px 0px 0px var(--bg2), -1.25px 0px 0px var(--bg2), + 0px 1.25px 0px var(--bg2), 0px -1.25px 0px var(--bg2); } ul.icons li a { - border: solid 1px var(--hl-fg); + border: solid 1px var(--fg1); } ul.icons li a:hover { - background: var(--hl-fga); + background: var(--fg1); border-color: #00000000; } ul.icons li a:hover::before { - text-shadow: 1.25px 0px 0px var(--shadow), -1.25px 0px 0px var(--shadow), - 0px 1.25px 0px var(--shadow), 0px -1.25px 0px var(--shadow); + text-shadow: 1.25px 0px 0px var(--bg2), -1.25px 0px 0px var(--bg2), + 0px 1.25px 0px var(--bg2), 0px -1.25px 0px var(--bg2); } /* Copyright */ ul.copyright li { - color: #1d1e26; + color: #000; } /* Main Section */ @@ -80,4 +97,10 @@ ul.copyright li { img[alt=✓] { width: auto; height: 1em; + filter: invert(100%); +} +@media (prefers-color-scheme: light) { + img[alt=✓] { + filter: invert(0%) !important; + } }