Pr/theme customisation

installation.md

@@ -80,3 +80,54 @@ server {
 }
 ```
 3. config your blockchain in [./chains/mainnet]()
+
+# Theming
+
+Colours live in the daisyUI themes in `tailwind.config.js`. Editing them re-themes
+the app; no component changes are needed.
+
+```js
+// tailwind.config.js
+daisyui: {
+  themes: [
+    {
+      light: {
+        ...require('daisyui/src/theming/themes')['[data-theme=light]'],
+        primary: '#0f766e',
+      },
+    },
+    {
+      dark: {
+        ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
+        primary: '#2dd4bf',
+        'base-100': '#0b1220', // cards, sidebar, header
+        'base-200': '#111a2e', // page bands, table headers
+      },
+    },
+  ],
+},
+```
+
+Spreading the stock theme first means you only list what you want to change.
+
+The tokens you will reach for most:
+
+| token | used for |
+| --- | --- |
+| `primary` | active nav, buttons, links, chart accent |
+| `base-100` | cards, sidebar, header |
+| `base-200` / `base-300` | page bands, table headers, hover |
+| `base-content` | default text colour |
+| `info` `success` `warning` `error` | status text, badges, vote bars |
+
+Full list: https://daisyui.com/docs/colors/
+
+Tailwind reads the config at startup, so restart the dev server after editing.
+
+Two caveats:
+
+- A component that hardcodes a colour (`text-gray-400`, `bg-green-500`, ...) will
+  not follow the theme. Those are gradually being moved onto tokens.
+- `@ping-pub/widget` injects its own daisyUI build at runtime, which would
+  otherwise override these values. `postcss.config.js` re-emits the theme at a
+  higher specificity so the app's config wins - keep that plugin if you fork.

postcss.config.js

@@ -1,6 +1,31 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+// @ping-pub/widget bundles its own Tailwind + daisyUI build and injects it into
+// the document at runtime. That stylesheet re-declares [data-theme=light] and
+// [data-theme=dark], and because it lands after the app's stylesheet it wins on
+// equal specificity - so a project that customises `daisyui.themes` silently
+// gets the widget's values back in the browser.
+//
+// This duplicates each daisyUI theme rule with an `html` prefix, raising it from
+// specificity (0,1,0) to (0,1,1) so the app's own theme wins. Values are copied
+// verbatim, so there is no visual change wherever the two already agree. The
+// original rule is kept, which preserves daisyUI's element-level theming
+// (`<div data-theme="...">`).
+const raiseThemeSpecificity = () => ({
+  postcssPlugin: 'raise-theme-specificity',
+  OnceExit(root) {
+    const clones = [];
+    root.walkRules((rule) => {
+      if (rule.__themeSpecificityRaised) return;
+      const targets = rule.selectors.filter((s) => /^\[data-theme=/.test(s.trim()));
+      if (!targets.length) return;
+      const clone = rule.clone({ selectors: targets.map((s) => `html${s.trim()}`) });
+      clone.__themeSpecificityRaised = true;
+      clones.push([rule, clone]);
+    });
+    clones.forEach(([rule, clone]) => rule.after(clone));
   },
+});
+raiseThemeSpecificity.postcss = true;
+
+module.exports = {
+  plugins: [require('tailwindcss'), raiseThemeSpecificity(), require('autoprefixer')],
 };

src/components/dynamic/TextElement.vue

@@ -142,7 +142,7 @@ const isConvertable = computed(() => {
     margin-bottom: 1rem;
   }
   a {
-    color: #666cff !important;
+    color: hsl(var(--p)) !important;
   }
   .h1 > a,
   .h2 > a,

src/modules/[chain]/faucet/index.vue

@@ -87,7 +87,7 @@ onMounted(() => {
           viewBox="0 0 150.000000 132.000000"
           preserveAspectRatio="xMidYMid meet"
         >
-          <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)" fill="#666CFF" class="" stroke="none">
+          <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)" fill="currentColor" class="text-primary" stroke="none">
             <path
               d="M500 1310 l-125 -5 -182 -315 c-100 -173 -182 -321 -182 -329 -1 -7
             81 -159 181 -337 l183 -324 372 0 371 0 186 325 c102 179 186 330 186 337 0 7

src/modules/wallet/accounts.vue

@@ -232,7 +232,8 @@ async function loadBalances(chainName: string, endpoint: string, address: string
         <div class="flex justify-self-center">
           <div class="mx-2 p-2">
             <svg
-              :fill="chainStore.current?.themeColor || '#666CFF'"
+              :fill="chainStore.current?.themeColor || 'currentColor'"
+              class="text-primary"
               height="28px"
               width="28px"
               version="1.1"

src/pages/index.vue

@@ -48,8 +48,8 @@ const chainStore = useBlockchain();
         >
           <g
             transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)"
-            :fill="chainStore.current?.themeColor || '#666CFF'"
-            class="dark:invert"
+            :fill="chainStore.current?.themeColor || 'currentColor'"
+            class="text-primary dark:invert"
             stroke="none"
           >
             <path

src/stores/useBlockchain.ts

@@ -63,7 +63,10 @@ export const useBlockchain = defineStore('blockchain', {
           document.body.style.setProperty('--p', `${themeColor}`);
           // document.body.style.setProperty('--p', `${this.current?.themeColor}`);
         } else {
-          document.body.style.setProperty('--p', '237.65 100% 70%');
+          // Fall back to the theme's primary rather than a duplicate of it. Setting
+          // it inline here beat `daisyui.themes`, so a configured primary never
+          // applied on any chain without its own theme_color.
+          document.body.style.removeProperty('--p');
         }
         currNavItem = [
           {