[FE] Add multiple colors to certificate page

src/views/Certs.tsx

@@ -1,13 +1,16 @@
-import { createSignal } from "solid-js";
+import { createSignal, onMount } from "solid-js";
 import { Search } from "./components/Search";
 import { Person } from "../types/Person";
 import { Registers } from "./components/Registers";
 import { NewRegister } from "./components/NewRegister";
+import { ensureColors } from "./components/colors";
 
 export function Certs() {
     const [person, setPerson] = createSignal<Person | null>(null);
     const [lastUpdate, setLastUpdate] = createSignal(0);
 
+    onMount(ensureColors);
+
     return (
         <div>
             <h1 class="px-4 py-2 text-2xl font-bold">

src/views/components/colors.ts

@@ -0,0 +1,166 @@
+import { isServer } from "solid-js/web";
+
+const accentOrange = "";
+
+const accentGreen = `
+:root {
+    --c-primary: #7cdc6d;
+    --c-on-primary: #003a02;
+    --c-primary-container: #005304;
+    --c-on-primary-container: #97f986;
+    --c-background: #1a1c18;
+    --c-on-background: #e2e3dd;
+    --c-surface: #1a1c18;
+    --c-on-surface: #e2e3dd;
+    --c-outline: #8d9387;
+    --c-surface-variant: #43483f;
+    --c-on-surface-variant: #c3c8bc;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-primary: #006e08;
+        --c-on-primary: #ffffff;
+        --c-primary-container: #97f986;
+        --c-on-primary-container: #002201;
+        --c-background: #fcfdf6;
+        --c-on-background: #1a1c18;
+        --c-surface: #fcfdf6;
+        --c-on-surface: #1a1c18;
+        --c-outline: #73796e;
+        --c-surface-variant: #dfe4d8;
+        --c-on-surface-variant: #43483f;
+    }
+}
+`;
+
+const accentBlue = `
+:root {
+    --c-primary: #adc6ff;
+    --c-on-primary: #002e69;
+    --c-primary-container: #0e448e;
+    --c-on-primary-container: #d8e2ff;
+    --c-background: #1b1b1f;
+    --c-on-background: #e3e2e6;
+    --c-surface: #1b1b1f;
+    --c-on-surface: #e3e2e6;
+    --c-outline: #8e9099;
+    --c-surface-variant: #44474f;
+    --c-on-surface-variant: #c4c6d0;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-primary: #315da8;
+        --c-on-primary: #ffffff;
+        --c-primary-container: #d8e2ff;
+        --c-on-primary-container: #001a41;
+        --c-background: #fefbff;
+        --c-on-background: #1b1b1f;
+        --c-surface: #fefbff;
+        --c-on-surface: #1b1b1f;
+        --c-outline: #74777f;
+        --c-surface-variant: #e1e2ec;
+        --c-on-surface-variant: #44474f;
+    }
+}
+`;
+
+const accentYellow = `
+:root {
+    --c-primary: #f5bf31;
+    --c-on-primary: #3f2e00;
+    --c-primary-container: #5b4300;
+    --c-on-primary-container: #ffdf9b;
+    --c-background: #1e1b16;
+    --c-on-background: #e9e1d9;
+    --c-surface: #1e1b16;
+    --c-on-surface: #e9e1d9;
+    --c-outline: #999080;
+    --c-surface-variant: #4d4639;
+    --c-on-surface-variant: #d0c5b4;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-primary: #785a00;
+        --c-on-primary: #ffffff;
+        --c-primary-container: #ffdf9b;
+        --c-on-primary-container: #251a00;
+        --c-background: #fffbff;
+        --c-on-background: #1e1b16;
+        --c-surface: #fffbff;
+        --c-on-surface: #1e1b16;
+        --c-outline: #7f7667;
+        --c-surface-variant: #ede1cf;
+        --c-on-surface-variant: #4d4639;
+    }
+}
+`;
+
+const accentPink = `
+:root {
+    --c-primary: #ffade5;
+    --c-on-primary: #5e0051;
+    --c-primary-container: #80156e;
+    --c-on-primary-container: #ffd7ef;
+    --c-background: #1f1a1d;
+    --c-on-background: #eae0e3;
+    --c-surface: #1f1a1d;
+    --c-on-surface: #eae0e3;
+    --c-outline: #9b8d94;
+    --c-surface-variant: #4f444a;
+    --c-on-surface-variant: #d2c2ca;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-primary: #9d3288;
+        --c-on-primary: #ffffff;
+        --c-primary-container: #ffd7ef;
+        --c-on-primary-container: #3a0031;
+        --c-background: #fffbff;
+        --c-on-background: #1f1a1d;
+        --c-surface: #fffbff;
+        --c-on-surface: #1f1a1d;
+        --c-outline: #81737a;
+        --c-surface-variant: #efdee6;
+        --c-on-surface-variant: #4f444a;
+    }
+}
+`;
+
+export const ensureColors = () => {
+    if (!isServer) {
+        console.log("Running in the client!");
+
+        const colorScheme = localStorage.getItem("color-scheme") ?? "orange";
+
+        const styleEl = document.createElement("style");
+
+        switch (colorScheme) {
+            case "orange": {
+                styleEl.innerHTML = accentOrange;
+                break;
+            }
+            case "green": {
+                styleEl.innerHTML = accentGreen;
+                break;
+            }
+            case "blue": {
+                styleEl.innerHTML = accentBlue;
+                break;
+            }
+            case "yellow": {
+                styleEl.innerHTML = accentYellow;
+                break;
+            }
+            case "pink": {
+                styleEl.innerHTML = accentPink;
+                break;
+            }
+        }
+
+        document.head.appendChild(styleEl);
+    }
+};