Add theme color preferences (JS) I hate the default blue convention.

Changes

3 changed files (+140/-0)

• embed/static/global.css
  • @@ -53,6 +53,42 @@
    --radii-sm: 3px; --radii-md: 6px; } + :root[data-theme-color="purple"] { + --color-link: var(--uchu-purple-8); + --color-decoration: var(--uchu-purple-6); + } + :root[data-theme-color="pink"] { + --color-link: var(--uchu-pink-9); + --color-decoration: var(--uchu-pink-6); + } + :root[data-theme-color="red"] { + --color-link: var(--uchu-red-8); + --color-decoration: var(--uchu-red-6); + } + :root[data-theme-color="orange"] { + --color-link: var(--uchu-orange-9); + --color-decoration: var(--uchu-orange-6); + } + :root[data-theme-color="yellow"] { + --color-link: var(--uchu-yellow-9); + --color-decoration: var(--uchu-yellow-6); + } + :root[data-theme-color="green"] { + --color-link: var(--uchu-green-9); + --color-decoration: var(--uchu-green-6); + } + :root[data-theme-color="gray"] { + --color-link: var(--uchu-yin-7); + --color-decoration: var(--uchu-gray-6); + } + @supports (color: color-mix(in oklab, var(--uchu-pink-6) 50%, var(--color-fg) 40%)) { + :root[data-theme-color="pink"] { + --color-link: color-mix(in oklab, var(--uchu-pink-6) 60%, var(--color-fg) 40%); + } + :root[data-theme-color="yellow"] { + --color-link: color-mix(in oklab, var(--uchu-yellow-5) 45%, var(--color-fg) 55%); + } + } @media (prefers-contrast: more) { :root {
  • @@ -61,6 +97,12 @@
    --color-fg-subtle: var(--uchu-yin-8); --color-link: var(--uchu-blue-9); } + :root[data-theme-color="purple"] { + --color-link: var(--uchu-purple-9); + } + :root[data-theme-color="red"] { + --color-link: var(--uchu-red-9); + } } @media (prefers-color-scheme: dark) {
  • @@ -74,6 +116,34 @@
    --color-decoration: var(--uchu-blue-4); --color-backdrop: oklch(var(--uchu-yin-9-raw) / 90%); } + :root[data-theme-color="purple"] { + --color-link: var(--uchu-purple-2); + --color-decoration: var(--uchu-purple-4); + } + :root[data-theme-color="pink"] { + --color-link: var(--uchu-pink-3); + --color-decoration: var(--uchu-pink-4); + } + :root[data-theme-color="red"] { + --color-link: var(--uchu-red-2); + --color-decoration: var(--uchu-red-4); + } + :root[data-theme-color="orange"] { + --color-link: var(--uchu-orange-2); + --color-decoration: var(--uchu-orange-4); + } + :root[data-theme-color="yellow"] { + --color-link: var(--uchu-yellow-2); + --color-decoration: var(--uchu-yellow-4); + } + :root[data-theme-color="green"] { + --color-link: var(--uchu-green-2); + --color-decoration: var(--uchu-green-4); + } + :root[data-theme-color="gray"] { + --color-link: var(--uchu-gray-2); + --color-decoration: var(--uchu-gray-4); + } } @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  • @@ -82,6 +152,27 @@
    --color-fg-subtle: var(--uchu-yin-2); --color-link: var(--uchu-blue-1); } + :root[data-theme-color="purple"] { + --color-link: var(--uchu-purple-1); + } + :root[data-theme-color="pink"] { + --color-link: var(--uchu-pink-1); + } + :root[data-theme-color="red"] { + --color-link: var(--uchu-red-1); + } + :root[data-theme-color="orange"] { + --color-link: var(--uchu-orange-1); + } + :root[data-theme-color="yellow"] { + --color-link: var(--uchu-yellow-1); + } + :root[data-theme-color="green"] { + --color-link: var(--uchu-green-1); + } + :root[data-theme-color="gray"] { + --color-link: var(--uchu-gray-1); + } } *, *::before, *::after {
• embed/static/preferences.js
  • @@ -37,6 +37,38 @@ function setupTabWidthSelector() {
    } } + function setupThemeColor() { + const LOCAL_STORAGE_KEY = "legit_theme_color"; + const VALID_COLORS = ["red", "orange", "green", "gray", "pink", "purple", "yellow"]; + + function applyThemeColor(color) { + if (color) { + localStorage.setItem(LOCAL_STORAGE_KEY, color); + document.documentElement.dataset.themeColor = color; + } else { + localStorage.removeItem(LOCAL_STORAGE_KEY); + document.documentElement.dataset.themeColor = ""; + } + } + + const saved = localStorage.getItem(LOCAL_STORAGE_KEY) || ""; + applyThemeColor(saved); + + const selector = document.getElementById("theme-color"); + if (selector) { + selector.value = saved; + + selector.addEventListener("change", event => { + const value = event.currentTarget.value; + if (value && !VALID_COLORS.includes(value)) { + return; + } + + applyThemeColor(value); + }); + } + } + function setupPreferencesDialog() { const preferences = document.getElementById("preferences-dialog"); document.getElementById("preferences-dialog-trigger")?.addEventListener("click", (event) => {
  • @@ -48,4 +80,5 @@ function setupPreferencesDialog() {
    } setupTabWidthSelector(); + setupThemeColor(); setupPreferencesDialog();
• embed/templates/site-footer.html.tmpl
  • @@ -31,6 +31,22 @@ SPDX-License-Identifier: MIT
    Changes the size of a tab character in code blocks and code previews. </p> </div> + <div class="preferences--field"> + <label for="theme-color">Theme color</label> + <select id="theme-color" aria-describedby="theme-color-description"> + <option value="">Blue (default)</option> + <option value="purple">Purple</option> + <option value="pink">Pink</option> + <option value="red">Red</option> + <option value="orange">Orange</option> + <option value="yellow">Yellow</option> + <option value="green">Green</option> + <option value="gray">Gray</option> + </select> + <p id="theme-color-description"> + Changes the primary color to use for links, buttons, and icons. + </p> + </div> <button id="preferences-dialog-closer">Close</button> </dialog> {{- if .Config.UI.Footer.PoweredBy }}