From d3281fc27f99416e007c6eb1003b00b7eb6cb64a Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 14 Jun 2024 06:17:15 +0000 Subject: [PATCH] add color theme option --- css/nav.css | 41 +++++++++++++++++++++++++++++++++-------- css/style.css | 42 ++++++++++++++++++++++++++++++++---------- scripts/account.js | 3 ++- scripts/index.js | 9 +++++---- scripts/login.js | 3 ++- scripts/settings.js | 8 +++++++- scripts/utils.js | 20 ++++++++++++++++++++ settings.html | 14 ++++++++++++++ 8 files changed, 115 insertions(+), 25 deletions(-) diff --git a/css/nav.css b/css/nav.css index 6cb667c..4de6013 100644 --- a/css/nav.css +++ b/css/nav.css @@ -1,15 +1,19 @@ :root { - --nav-bg-color: black; - --nav-text-color: white; - --nav-header-bg-color: #0f0; - --nav-header-text-color: black; - --nav-link-active-text-color: white; - --nav-link-active-bg-color: var(--main-bg-color, #404040); --nav-transition-speed: 250ms; } -@media screen and (prefers-color-scheme: light) { - :root { +@media screen and (prefers-color-scheme: dark) { + :root, :root.dark-theme { + --nav-bg-color: black; + --nav-text-color: white; + --nav-header-bg-color: #0f0; + --nav-header-text-color: black; + --nav-link-active-text-color: white; + --nav-link-active-bg-color: var(--main-bg-color, #404040); + + } + + :root.light-theme { --nav-bg-color: black; --nav-text-color: white; --nav-header-bg-color: #0f0; @@ -19,6 +23,27 @@ } } +@media screen and (prefers-color-scheme: light) { + :root, :root.light-theme { + --nav-bg-color: black; + --nav-text-color: white; + --nav-header-bg-color: #0f0; + --nav-header-text-color: black; + --nav-link-active-text-color: black; + --nav-link-active-bg-color: var(--main-bg-color, white); + } + + :root.dark-theme { + --nav-bg-color: black; + --nav-text-color: white; + --nav-header-bg-color: #0f0; + --nav-header-text-color: black; + --nav-link-active-text-color: white; + --nav-link-active-bg-color: var(--main-bg-color, #404040); + + } +} + header { display: grid; align-items: center; diff --git a/css/style.css b/css/style.css index 6a9e113..854e31d 100644 --- a/css/style.css +++ b/css/style.css @@ -3,16 +3,19 @@ --positive-color: #0f0; --highlight-color: yellow; --lightbg-text-color: black; - --main-bg-color: #404040; - --main-text-color: white; - --main-card-bg-color: #202020; - --main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%); - --main-table-header-bg-color: black; - --main-input-bg-color: #404040; } -@media screen and (prefers-color-scheme: light) { - :root { +@media screen and (prefers-color-scheme: dark) { + :root, :root.dark-theme { + --main-bg-color: #404040; + --main-text-color: white; + --main-card-bg-color: #202020; + --main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%); + --main-table-header-bg-color: black; + --main-input-bg-color: #404040; + } + + :root.light-theme { --main-bg-color: white; --main-text-color: black; --main-card-bg-color: white; @@ -22,6 +25,26 @@ } } +@media screen and (prefers-color-scheme: light) { + :root, :root.light-theme { + --main-bg-color: white; + --main-text-color: black; + --main-card-bg-color: white; + --main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%); + --main-table-header-bg-color: #808080; + --main-input-bg-color: white; + } + + :root.dark-theme { + --main-bg-color: #404040; + --main-text-color: white; + --main-card-bg-color: #202020; + --main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%); + --main-table-header-bg-color: black; + --main-input-bg-color: #404040; + } +} + html { box-sizing: border-box; } @@ -115,8 +138,7 @@ hr, * { .w3-select, select { padding: 8px; - -moz-appearance: none; - -webkit-appearance: none; + appearance: none; appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E:root%7Bcolor:%23fff%7D@media (prefers-color-scheme:light)%7B:root%7Bcolor:%23000%7D%7D%3C/style%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.707 14.707a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 12.586l4.293-4.293a1 1 0 111.414 1.414l-5 5z' fill='currentColor'/%3E%3C/svg%3E"); diff --git a/scripts/account.js b/scripts/account.js index 3871e5e..7e09de1 100644 --- a/scripts/account.js +++ b/scripts/account.js @@ -1,5 +1,5 @@ import { dialog } from "./dialog.js"; -import { requestAPI, goToPage, getCookie, setTitleAndHeader } from "./utils.js"; +import { requestAPI, goToPage, getCookie, setTitleAndHeader, setAppearance } from "./utils.js"; window.addEventListener("DOMContentLoaded", init); @@ -21,6 +21,7 @@ const prefixes = { }; async function init () { + setAppearance(); setTitleAndHeader(); const cookie = document.cookie; if (cookie === "") { diff --git a/scripts/index.js b/scripts/index.js index 30ed6bf..5100a6d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,13 +1,14 @@ -import { requestPVE, requestAPI, goToPage, setTitleAndHeader } from "./utils.js"; +import { requestPVE, requestAPI, goToPage, setTitleAndHeader, setAppearance } from "./utils.js"; import { alert, dialog } from "./dialog.js"; import { setupClientSync } from "./clientsync.js"; -import wf_align from "../modules/wfa.js"; +import wfAlign from "../modules/wfa.js"; window.addEventListener("DOMContentLoaded", init); let instances = []; async function init () { + setAppearance(); setTitleAndHeader(); const cookie = document.cookie; if (cookie === "") { @@ -78,9 +79,9 @@ async function populateInstances () { }; criteria = (a, b) => { // lower is better - const aAlign = wf_align(a.name.toLowerCase(), searchQuery.toLowerCase(), penalties); + const aAlign = wfAlign(a.name.toLowerCase(), searchQuery.toLowerCase(), penalties); const aScore = aAlign.score / a.name.length; - const bAlign = wf_align(b.name.toLowerCase(), searchQuery.toLowerCase(), penalties); + const bAlign = wfAlign(b.name.toLowerCase(), searchQuery.toLowerCase(), penalties); const bScore = bAlign.score / b.name.length; if (aScore === bScore) { return a.vmid > b.vmid ? 1 : -1; diff --git a/scripts/login.js b/scripts/login.js index 514df03..32363a1 100644 --- a/scripts/login.js +++ b/scripts/login.js @@ -1,9 +1,10 @@ -import { requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader } from "./utils.js"; +import { requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader, setAppearance } from "./utils.js"; import { alert } from "./dialog.js"; window.addEventListener("DOMContentLoaded", init); async function init () { + setAppearance(); setTitleAndHeader(); await deleteAllCookies(); const formSubmitButton = document.querySelector("#submit"); diff --git a/scripts/settings.js b/scripts/settings.js index ad86b36..f74afce 100644 --- a/scripts/settings.js +++ b/scripts/settings.js @@ -1,8 +1,9 @@ -import { setTitleAndHeader } from "./utils.js"; +import { setTitleAndHeader, setAppearance } from "./utils.js"; window.addEventListener("DOMContentLoaded", init); function init () { + setAppearance(); setTitleAndHeader(); const scheme = localStorage.getItem("sync-scheme"); if (scheme) { @@ -16,6 +17,10 @@ function init () { if (search) { document.querySelector(`#search-${search}`).checked = true; } + const theme = localStorage.getItem("appearance-theme"); + if (theme) { + document.querySelector("#appearance-theme").value = theme; + } document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false); } @@ -25,5 +30,6 @@ function handleSaveSettings (event) { localStorage.setItem("sync-scheme", form.get("sync-scheme")); localStorage.setItem("sync-rate", form.get("sync-rate")); localStorage.setItem("search-criteria", form.get("search-criteria")); + localStorage.setItem("appearance-theme", form.get("appearance-theme")); window.location.reload(); } diff --git a/scripts/utils.js b/scripts/utils.js index bb410a9..8716f70 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -267,3 +267,23 @@ export function setTitleAndHeader () { document.title = `${organization} - dashboard`; document.querySelector("h1").innerText = organization; } + +export function setAppearance () { + let theme = localStorage.getItem("appearance-theme"); + if (!theme) { + theme = "auto"; + localStorage.setItem("appearance-theme", "auto"); + } + + if (theme === "auto") { + document.querySelector(":root").classList.remove("dark-theme", "light-theme"); + } + else if (theme === "dark") { + document.querySelector(":root").classList.remove("light-theme"); + document.querySelector(":root").classList.add("dark-theme"); + } + else if (theme === "light") { + document.querySelector(":root").classList.add("light-theme"); + document.querySelector(":root").classList.remove("dark-theme"); + } +} diff --git a/settings.html b/settings.html index abf15a8..d822473 100644 --- a/settings.html +++ b/settings.html @@ -6,6 +6,7 @@ proxmox - dashboard + @@ -75,6 +76,19 @@

Sorts by best matching to worst matching.

+
+

Appearance

+
+ +
+