add prefers-color-scheme dark

This commit is contained in:
Wouter Groeneveld 2022-01-19 11:33:39 +01:00
parent f30036b62b
commit 05980eeb3f
4 changed files with 83 additions and 1 deletions

View File

@ -0,0 +1,80 @@
$dark-accent: lightgreen
$dark-bg: #1f1f1f
$dark-bg-alt: #272822
$dark-nav: darken($dark-bg, 5%)
$dark-fg: #dddddd
\:root
color-scheme: light dark
@media (prefers-color-scheme: dark)
body, .toot
background-color: $dark-bg
color: $dark-fg
body > footer
background-color: $dark-nav
.search-form
input
background-color: $dark-bg-alt
border: 1px solid grey
button[type="submit"]
background-color: $dark-bg-alt
color: $dark-accent
&:hover
background-color: var(--accent)
a, a:visited, .link
color: $dark-accent
a:hover, a:visited:hover, .link:hover
color: $dark-fg
h1, h2, h3
color: $dark-accent
.intro
h1
text-shadow: black 0px 0px 10px
kbd
color: $dark-accent
border: 1px solid $dark-accent
code, pre
background-color: $dark-bg-alt
color: lightgrey
div.list h3
color: darken($dark-fg, 20%)
figure
img
filter: brightness(.8) contrast(1.2)
figcaption
color: darken($dark-fg, 20%)
.highlight
pre
background-color: $dark-bg-alt !important
color: $dark-fg !important
hr
border-top: 1px solid darken($dark-fg, 20%)
header
h1
color: $dark-accent
article a, article .link
color: $dark-accent
border-bottom: 1px solid $dark-accent
.belowsingle
background-color: $dark-bg-alt
border-bottom: 5px solid $dark-bg
nav,
background-color: $dark-nav

View File

@ -22,3 +22,4 @@ $belowsingle: rgba(243, 243, 243, 0.8)
@import 'goodreads'
@import 'forms'
@import 'toot'
@import 'brainbaking-dark'

View File

@ -3,6 +3,7 @@
{{ $logo := "img/avatar-icon.png" }}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="canonical" href="{{ $perm }}">
<link rel="me" title="Mastodon" href="{{ .Site.Author.mastodonlink }}" />
<link rel="me" title="Github" href="{{ .Site.Author.githublink }}" />

View File

@ -34,7 +34,7 @@
</symbol>
<symbol viewBox="0 0 24 24" id="mail" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
<path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="discuss" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M15,4V11H5.17L4,12.17V4H15M16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12V3A1,1 0 0,0 16,2M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z" />

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB