Correctly load dark theme if dark is preferred
This commit is contained in:
parent
09cacd241f
commit
eb12f0473a
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "3.6.1",
|
"version": "3.6.2",
|
||||||
"description": "The base template for pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Florine W. Dekker",
|
"author": "Florine W. Dekker",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -1,27 +1,39 @@
|
||||||
/* pico.css overrides, based on https://picocss.com/docs/customization.html */
|
/* pico.css overrides, based on https://picocss.com/docs/customization.html */
|
||||||
|
|
||||||
|
/* Light (default) */
|
||||||
.fwd-nav,
|
.fwd-nav,
|
||||||
:root:not([data-theme]),
|
[data-theme="light"],
|
||||||
:root[data-theme="light"] {
|
:root:not([data-theme="dark"]) {
|
||||||
--primary: rgb(0, 51, 204) !important;
|
--primary: rgb(0, 51, 204) !important;
|
||||||
--primary-hover: rgb(0, 61, 245) !important;
|
--primary-hover: rgb(0, 61, 245) !important;
|
||||||
--primary-focus: rgba(0, 41, 163, 0.125) !important;
|
--primary-focus: rgba(0, 41, 163, 0.125) !important;
|
||||||
--primary-focus-opaque: rgb(0, 41, 163) !important;
|
--primary-focus-opaque: rgb(0, 41, 163) !important;
|
||||||
--primary-focus-dark: rgb(0, 29, 114) !important;
|
--primary-focus-dark: rgb(0, 29, 114) !important;
|
||||||
--primary-inverse: white !important;
|
--primary-inverse: white !important;
|
||||||
|
|
||||||
--form-element-active-border-color: var(--primary) !important;
|
|
||||||
--form-element-focus-color: var(--primary-focus) !important;
|
|
||||||
--switch-color: var(--primary-inverse) !important;
|
|
||||||
--switch-checked-background-color: var(--primary) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dark (auto) */
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]):not(.fwd-nav) {
|
||||||
|
--primary: #1e88e5 !important;
|
||||||
|
--primary-hover: #2196f3 !important;
|
||||||
|
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||||
|
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
||||||
|
--primary-inverse: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark (forced) */
|
||||||
:root[data-theme="dark"]:not(.fwd-nav) {
|
:root[data-theme="dark"]:not(.fwd-nav) {
|
||||||
--primary: #1e88e5 !important;
|
--primary: #1e88e5 !important;
|
||||||
--primary-hover: #2196f3 !important;
|
--primary-hover: #2196f3 !important;
|
||||||
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||||
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
||||||
--primary-inverse: white !important;
|
--primary-inverse: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Common */
|
||||||
|
:root {
|
||||||
--form-element-active-border-color: var(--primary) !important;
|
--form-element-active-border-color: var(--primary) !important;
|
||||||
--form-element-focus-color: var(--primary-focus) !important;
|
--form-element-focus-color: var(--primary-focus) !important;
|
||||||
--switch-color: var(--primary-inverse) !important;
|
--switch-color: var(--primary-inverse) !important;
|
||||||
|
|
Loading…
Reference in New Issue