/* Bulma redeclares every --bulma--* variable on the component's own rule, so setting one of them on an ancestor is inert. The levers that do reach a component from here are --bulma-scheme-*, the per-colour h/s/l channels and the --bulma-radius* trio; everything else needs a rule that targets the component itself, the way the blocks at the bottom of this file do. Read the computed value in a browser before believing a variable landed. */ /* Bulma 1.0 themes through HSL channels. Its own [data-theme=dark] block overrides lightness only and re-composes every colour from --bulma-scheme-h / -s, so hue and saturation set once here carry into both schemes. This file must load after bulma.min.css: the dark block below beats Bulma's only on source order, at equal specificity. */ :root { --bulma-family-primary: var(--hf-font-body); --bulma-family-secondary: var(--hf-font-heading); /* The guide specifies a single radius, so large collapses onto it: .box reads --bulma-radius-large, not --bulma-radius. */ --bulma-radius-small: 8px; --bulma-radius: var(--hf-radius); --bulma-radius-large: var(--hf-radius); --bulma-scheme-h: 218; --bulma-scheme-s: 36%; --bulma-primary-h: 158; --bulma-primary-s: 100%; --bulma-primary-l: 50%; --bulma-success-h: 158; --bulma-success-s: 100%; --bulma-success-l: 50%; --bulma-link-h: 207; --bulma-link-s: 88%; --bulma-link-l: 52%; /* Bulma's default pairs the link colour with white, which on Electric Blue is 3.40:1. Night on Blue is the pairing .button.is-primary already uses. Reaches .dropdown-item.is-active. */ --bulma-link-invert-l: 11%; --bulma-warning-h: 299; --bulma-warning-s: 93%; --bulma-warning-l: 73%; --bulma-danger-h: 352; --bulma-danger-s: 90%; --bulma-danger-l: 68%; } /* Bulma paints --bulma-body-background-color onto only; the element itself gets no background-color rule, so getComputedStyle(document.body) never sees it. Mirror the same variable onto body, theme-agnostic since it already flips per theme above. */ body { background-color: var(--bulma-body-background-color); } [data-theme="dark"] { --bulma-scheme-main-l: 11%; --bulma-scheme-main-bis-l: 15%; --bulma-scheme-main-ter-l: 20%; --bulma-background-l: 26%; --bulma-border-weak-l: 26%; --bulma-border-l: 32%; --bulma-text-weak-l: 58%; --bulma-text-l: 70%; --bulma-text-strong-l: 97%; /* The ramp above drives every derived hover and border. These are pinned to the exact brand hexes because they are what you actually look at, and the ramp only approximates them: Bulma resolves --bulma-body-color from --bulma-text, which at this hue and saturation gives a mid grey, and even --bulma-text-strong lands on rgb(245,247,250), not Cloud. */ --bulma-body-background-color: var(--hf-night); --bulma-body-color: var(--hf-cloud); } [data-theme="light"] { --bulma-scheme-main-l: 100%; --bulma-scheme-main-bis-l: 98%; --bulma-scheme-main-ter-l: 96%; --bulma-background-l: 96%; --bulma-border-weak-l: 93%; --bulma-border-l: 86%; --bulma-text-weak-l: 48%; --bulma-text-l: 29%; --bulma-text-strong-l: 21%; --bulma-body-background-color: var(--hf-cloud); --bulma-body-color: var(--hf-night); /* Orchid and the danger red are picked to sit on Night. .has-text-warning paints --bulma-warning directly, so on a white .box the brand value is 2.31:1; these are the darkened light-theme values the spec derived. */ --bulma-warning-s: 60%; --bulma-warning-l: 42%; --bulma-danger-s: 78%; --bulma-danger-l: 46%; } /* .box and .card redeclare --bulma-*-background-color on themselves (falling back to --bulma-scheme-main), so the variable set above on [data-theme] never reaches them: a directly-specified value always beats one inherited from an ancestor. Target the components themselves instead, with enough specificity to win over Bulma's own rule. */ [data-theme="dark"] .box, [data-theme="dark"] .card { --bulma-box-background-color: var(--hf-slate); --bulma-card-background-color: var(--hf-slate); } [data-theme="light"] .box, [data-theme="light"] .card { --bulma-box-background-color: #FFFFFF; --bulma-card-background-color: #FFFFFF; } /* The unselected top-count presets. Bulma composes .button.is-light from --bulma-light-*, which neither theme block flips, so both themes get its near-white default. The lightness is the --bulma-background step rather than Slate: these sit inside a Slate .box, and at 20% the chip and the panel are the same colour. Set on the button rather than on [data-theme] because --bulma-light-l is also the background lightness of .tag.is-warning.is-light, which stays pale. */ [data-theme="dark"] .button.is-light { --bulma-light-h: 218; --bulma-light-s: 36%; --bulma-light-l: 26%; --bulma-light-invert-l: 97%; } /* The table only ever appears inside a .box, and its own --bulma-table-background-color resolves to --bulma-scheme-main, which is a step darker than the panel. Let the panel show through instead of stacking a second surface on it. */ .table { --bulma-table-background-color: transparent; } /* --bulma-warning-l is both the warning fill and the colour .has-text-warning paints, and the light theme darkens it for the text. Bulma pairs the fill with a near-black warning-invert, so keep the fill at the brand Orchid in both themes; .is-light pins its own background. */ .notification.is-warning:not(.is-light) { --bulma-notification-background-l: 73%; }