diff --git a/installation.md b/installation.md index 0ffb3c5cf3..ee50d0529f 100644 --- a/installation.md +++ b/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. diff --git a/postcss.config.js b/postcss.config.js index 12a703d900..20965316b4 100644 --- a/postcss.config.js +++ b/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 +// (`
`). +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')], }; diff --git a/src/components/dynamic/TextElement.vue b/src/components/dynamic/TextElement.vue index d214603026..bb6b6dd553 100644 --- a/src/components/dynamic/TextElement.vue +++ b/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, diff --git a/src/components/dynamic/TxsElement.vue b/src/components/dynamic/TxsElement.vue index fa38232eb2..19fdd14061 100644 --- a/src/components/dynamic/TxsElement.vue +++ b/src/components/dynamic/TxsElement.vue @@ -47,7 +47,7 @@ const chain = useBlockchain(); {{ item.injected }} {{ item.hash }} - {{ + {{ item.hash }} diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue index e8c7bc597d..514da598a6 100644 --- a/src/modules/[chain]/account/[address].vue +++ b/src/modules/[chain]/account/[address].vue @@ -185,7 +185,7 @@ function mapAmount(events: { type: string; attributes: { key: string; value: str {{ format.calculatePercent(format.tokenAmountNumber(balanceItem), totalAmount) }}
-
+
${{ format.tokenValue(balanceItem) }}
@@ -204,7 +204,7 @@ function mapAmount(events: { type: string; attributes: { key: string; value: str {{ format.calculatePercent(format.tokenAmountNumber(delegationItem?.balance), totalAmount) }}
-
+
${{ format.tokenValue(delegationItem?.balance) }}
@@ -223,7 +223,7 @@ function mapAmount(events: { type: string; attributes: { key: string; value: str {{ format.calculatePercent(format.tokenAmountNumber(rewardItem), totalAmount) }}
-
+
${{ format.tokenValue(rewardItem) }} @@ -256,7 +256,7 @@ function mapAmount(events: { type: string; attributes: { key: string; value: str }}
-
+
${{ format.tokenValue({ @@ -450,14 +450,14 @@ function mapAmount(events: { type: string; attributes: { key: string; value: str {{ v.height }} {{ v.txhash }} @@ -502,14 +502,14 @@ function mapAmount(events: { type: string; attributes: { key: string; value: str {{ v.height }} {{ v.txhash }} diff --git a/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue b/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue index 3d8631409b..3c663abf68 100644 --- a/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue +++ b/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue @@ -265,7 +265,7 @@ const tab = ref('detail'); {{ resp.height }} -
+
{{ resp.txhash }}
diff --git a/src/modules/[chain]/cosmwasm/index.vue b/src/modules/[chain]/cosmwasm/index.vue index a1dc246f63..566a0daa4f 100644 --- a/src/modules/[chain]/cosmwasm/index.vue +++ b/src/modules/[chain]/cosmwasm/index.vue @@ -76,7 +76,7 @@ function gotoHistory() { {{ v.data_hash }} diff --git a/src/modules/[chain]/faucet/index.vue b/src/modules/[chain]/faucet/index.vue index 82b8954e1b..f1a453e233 100644 --- a/src/modules/[chain]/faucet/index.vue +++ b/src/modules/[chain]/faucet/index.vue @@ -87,7 +87,7 @@ onMounted(() => { viewBox="0 0 150.000000 132.000000" preserveAspectRatio="xMidYMid meet" > - + {{ resp.height }} -
+
{{ resp.txhash }}
- + {{ tx.tx_response.height }} diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue index cac82c2dbb..5eb9158228 100644 --- a/src/modules/wallet/accounts.vue +++ b/src/modules/wallet/accounts.vue @@ -232,7 +232,8 @@ async function loadBalances(chainName: string, endpoint: string, address: string
-

+

{{ $t('pages.title') }}

diff --git a/src/stores/useBlockchain.ts b/src/stores/useBlockchain.ts index d1421e8a38..22a3e5ad80 100644 --- a/src/stores/useBlockchain.ts +++ b/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 = [ {