diff --git a/style/shiny/base.css b/style/shiny/base.css index 6e2fe23..1206d04 100644 --- a/style/shiny/base.css +++ b/style/shiny/base.css @@ -17,6 +17,7 @@ background: var(--gradient) fixed; margin: 1em; + --text-col: white; --nsfw-sticker-rotate: 15deg; } @@ -30,9 +31,10 @@ h2 { font-size: 125%; } body { --shadow: hsl(42deg, 82%, 90%, 75%); + --border-col: var(--text-col); background: hsla(0, 0%, 0%, 60%); - border: 3px solid white; + border: 3px solid var(--border-col); box-shadow: 0 0 3em var(--shadow); position: relative; @@ -40,7 +42,7 @@ body { margin: 2em auto 3.5em; border-radius: 1.5em; - color: white; + color: var(--text-col); --text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%); text-shadow: var(--text-shadow); } @@ -77,3 +79,37 @@ footer { text-align: baseline; height: 1em; } + + +@media (prefers-color-scheme: dark) { + :root { + --gradient: + linear-gradient(135deg, + hsl(42deg, 27%, 25%), + hsl(348deg, 27%, 25%), + hsl(334deg, 32%, 25%), + hsl(234deg, 57%, 23%), + hsl(195deg, 27%, 20%), + hsl(155deg, 22%, 20%) + ); + --text-col: hsl(55deg, 60%, 90%); + } + + @media (prefers-contrast: high) { + :root { + --text-col: white; + background: black; + } + + body { + border: unset; + box-shadow: unset; + background: unset; + } + } + + body { + --shadow: hsl(42deg, 82%, 90%, 20%); + --border-col: black; + } +} diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css index 82e8bd1..5c0a176 100644 --- a/style/shiny/gallery.css +++ b/style/shiny/gallery.css @@ -32,7 +32,7 @@ body { .item:not(.year-marker) { box-shadow: var(--text-shadow); - border: var(--border-thickness) solid white; + border: var(--border-thickness) solid var(--text-col); border-radius: 0.5em; background: hsl(340, 45%, 65%); } @@ -48,7 +48,7 @@ figcaption { bottom: -1px; left: -1px; width: 100%; - border: 1px solid white; + border: 1px solid var(--text-col); display: block; text-align: center; background: hsl(0, 0%, 0%, 75%); diff --git a/style/shiny/single.css b/style/shiny/single.css index 111cead..c04cd33 100644 --- a/style/shiny/single.css +++ b/style/shiny/single.css @@ -13,7 +13,7 @@ body { width: min-content; position: relative; overflow: hidden; - border: 2px solid white; + border: 2px solid var(--text-col); border-radius: 1em; box-shadow: var(--text-shadow); background: hsl(340, 45%, 65%);