diff --git a/the_works/static/switchColorMode.js b/the_works/static/switchColorMode.js new file mode 100644 index 0000000..86739ac --- /dev/null +++ b/the_works/static/switchColorMode.js @@ -0,0 +1,79 @@ +/*! + * Minimal theme switcher using a checkbox + * + * Pico.css - https://picocss.com + * Copyright 2019-2025 - Licensed under MIT + * Modified by Yohn https://github.com/Yohn/PicoCSS + */ + +const SwitchColorMode = { + // Config + _scheme: "auto", + toggleSelector: "input[name='color-mode-toggle']", + rootAttribute: "data-theme", + localStorageKey: "picoPreferredColorScheme", + + // Init + init() { + this.checkbox = document.querySelector(this.toggleSelector); + if (!this.checkbox) { + console.error("Theme switcher toggle not found"); + return; + } + + // If first visit, use the theme from attribute; otherwise, use stored preference + this.scheme = this.schemeFromLocalStorage ?? this.schemeFromHTML; + + // Set checkbox state based on the applied theme + this.checkbox.checked = this.scheme === "dark"; + + // Listen for user changes + this.checkbox.addEventListener("change", () => { + this.scheme = this.checkbox.checked ? "dark" : "light"; + this.schemeToLocalStorage(); + }); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + return window.localStorage?.getItem(this.localStorageKey); + }, + + // Get the default theme from the attribute + get schemeFromHTML() { + return document.documentElement.getAttribute(this.rootAttribute) ?? "auto"; + }, + + // Preferred color scheme from system + get preferredColorScheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }, + + // Set scheme + set scheme(scheme) { + if (scheme === "auto") { + this._scheme = this.preferredColorScheme; + } else if (scheme === "dark" || scheme === "light") { + this._scheme = scheme; + } + this.applyScheme(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document.documentElement.setAttribute(this.rootAttribute, this._scheme); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + window.localStorage?.setItem(this.localStorageKey, this.scheme); + }, +}; + +// Init +SwitchColorMode.init(); \ No newline at end of file diff --git a/the_works/static/the_works.css b/the_works/static/the_works.css index c3e2578..fc00c2b 100644 --- a/the_works/static/the_works.css +++ b/the_works/static/the_works.css @@ -1,3 +1,63 @@ +nav { + a { + --pico-text-decoration: none; + } + ul { + margin-left: 0; + margin-right: 0; + + li#li-subtitle { + padding: 0; + } + + li.sun-moon-li { + padding-right: 0; + } + + li[aria-current=page]>a, + li[aria-current=page]>details>summary>a { + text-decoration: underline; + } + + a { + font-size: 1rem; + font-weight: bold; + text-align: right; + } + + details.dropdown { + margin-block-end: calc(var(--pico-spacing) * -1); + + >summary:not([role]) a, + li a { + color: var(--pico-primary); + } + + >summary:not([role]) { + background-color: inherit; + border: none; + padding-top: var(--pico-form-element-spacing-vertical); + } + } + + li a { + text-align: left; + } + } +} + +/* change color of sun icon to white*/ +#sun-moon:not(:checked)::before { + background-color: var(--pico-color); +} + +/* change background & border color of theme toggle */ +#sun-moon:not([aria-invalid]) { + background-color: var(--pico-primary-background); + border-color: var(--pico-primary-border); +} + + table.dataTable span.dt-column-order::before, table.dataTable span.dt-column-order::after { diff --git a/the_works/templates/_nav.html b/the_works/templates/_nav.html index d533729..9ed7c6d 100644 --- a/the_works/templates/_nav.html +++ b/the_works/templates/_nav.html @@ -1,4 +1,4 @@ -