diff --git a/package.json b/package.json index 377ebc0..6875d80 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fwdekker/template", - "version": "3.3.10", + "version": "3.4.0", "description": "The base template for pages on fwdekker.com.", "author": "Florine W. Dekker", "license": "MIT", diff --git a/src/main/css/snippets/colors.css b/src/main/css/snippets/colors.css index 853b925..52236b0 100644 --- a/src/main/css/snippets/colors.css +++ b/src/main/css/snippets/colors.css @@ -1,5 +1,6 @@ /* pico.css overrides, based on https://picocss.com/docs/customization.html */ -:root { +.fwd-nav, +:root[data-theme="light"] { --primary: rgb(0, 51, 204) !important; --primary-hover: rgb(0, 61, 245) !important; --primary-focus: rgba(0, 41, 163, 0.125) !important; @@ -12,3 +13,16 @@ --switch-color: var(--primary-inverse) !important; --switch-checked-background-color: var(--primary) !important; } + +:root[data-theme="dark"]: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; + + --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; +} diff --git a/src/main/css/snippets/common.css b/src/main/css/snippets/common.css index bfcc4e6..90c9f27 100644 --- a/src/main/css/snippets/common.css +++ b/src/main/css/snippets/common.css @@ -75,7 +75,7 @@ noscript.fwd-js-notice p { /* Header */ header.fwd-header a[href="."] { - color: black; + color: unset; } diff --git a/src/main/css/snippets/overrides.css b/src/main/css/snippets/overrides.css index 6101f54..80074e5 100644 --- a/src/main/css/snippets/overrides.css +++ b/src/main/css/snippets/overrides.css @@ -1,9 +1,16 @@ /* pico.css: Improved text contrast (see also picocss/pico#276) */ :root { --code-color: var(--color) !important; +} + +:root[data-theme="light"] { --muted-color: hsl(205deg, 15%, 41%) !important; } +:root[data-theme="dark"] { + --muted-color: hsl(205deg, 12%, 59%) !important; +} + /* pico.css: Bold labels, except for checkbox/radio labels */ :root { --form-label-font-weight: bold; diff --git a/src/main/js/Template.ts b/src/main/js/Template.ts index a614fca..c7b8926 100644 --- a/src/main/js/Template.ts +++ b/src/main/js/Template.ts @@ -243,9 +243,6 @@ function footerLink(prefix: string, text: string | null | undefined, url: string * not a valid value as a parameter for that function, its value is considered `undefined`. */ doAfterLoad(() => { - const html = $("html")!; - if (html.dataset["theme"] == null) html.dataset["theme"] = "light"; - const navTarget = $(getMetaProperty("fwd:nav:target")); if (navTarget != null) { navTarget.parentElement?.replaceChild(