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  }