github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/theme.ts (about) 1 // Content managed by Project Forge, see [projectforge.md] for details. 2 import {els} from "./dom"; 3 4 const keys: string[] = []; 5 6 function call(mockup: Element, sel: string, f: (el: HTMLElement) => void) { 7 const q = mockup.querySelectorAll(sel); 8 if (q.length === 0) { 9 throw new Error("empty query selector [" + sel + "]"); 10 } 11 q.forEach((x) => f(x as HTMLElement)); 12 } 13 14 function setBG(mockup: Element, sel: string, v: string) { 15 call(mockup, sel, (el) => { 16 el.style.backgroundColor = v; 17 }); 18 } 19 20 function setFG(mockup: Element, sel: string, v: string) { 21 call(mockup, sel, (el) => { 22 el.style.color = v; 23 }); 24 } 25 26 function set(mode: string, key: string, v: string) { 27 const mockup = document.querySelector("#mockup-" + mode); 28 if (!mockup) { 29 console.error("can't find mockup for mode [" + mode + "]"); 30 return; 31 } 32 switch (key) { 33 case "color-foreground": 34 setFG(mockup, ".mock-main", v); 35 break; 36 case "color-background": 37 setBG(mockup, ".mock-main", v); 38 break; 39 case "color-foreground-muted": 40 setFG(mockup, ".mock-main .mock-muted", v); 41 break; 42 case "color-background-muted": 43 setBG(mockup, ".mock-main .mock-muted", v); 44 break; 45 case "color-link-foreground": 46 setFG(mockup, ".mock-main .mock-link", v); 47 break; 48 case "color-link-visited-foreground": 49 setFG(mockup, ".mock-main .mock-link-visited", v); 50 break; 51 case "color-nav-foreground": 52 setFG(mockup, ".mock-nav", v); 53 setFG(mockup, ".mock-nav .mock-link", v); 54 break; 55 case "color-nav-background": 56 setBG(mockup, ".mock-nav", v); 57 break; 58 case "color-menu-foreground": 59 setFG(mockup, ".mock-menu", v); 60 setFG(mockup, ".mock-menu .mock-link", v); 61 break; 62 case "color-menu-background": 63 setBG(mockup, ".mock-menu", v); 64 break; 65 case "color-menu-selected-foreground": 66 setFG(mockup, ".mock-menu .mock-link-selected", v); 67 break; 68 case "color-menu-selected-background": 69 setBG(mockup, ".mock-menu .mock-link-selected", v); 70 break; 71 default: 72 console.error("invalid key [" + key + "]"); 73 } 74 } 75 76 export function themeInit() { 77 for (const el of els<HTMLInputElement>(".color-var")) { 78 const v = el.dataset.var as string; 79 const m = el.dataset.mode as string; 80 keys.push(v); 81 if (!v || v.length === 0) { 82 continue; 83 } 84 el.oninput = () => { 85 set(m, v, el.value); 86 }; 87 } 88 }