Dev adventures, epic bugs, tiny wins, and the occasional meltdown. Zola 2026-08-09T00:00:00+00:00 https://golden-fox.dev/tags/duckquill/atom.xml 2026-08-09T00:00:00+00:00 2026-08-09T00:00:00+00:00 Aakriti Agarwal https://golden-fox.dev/til/accent-color-tinting/ <p>I was picking a theme today and went digging through Duckquill’s Sass, expecting to find a big list of hardcoded colours. Instead I found this:</p> <pre class="giallo" style="color-scheme: light dark; color: light-dark(#657B83, #839496); background-color: light-dark(#FDF6E3, #002B36);"><code data-lang="scss"><span class="giallo-l"><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;">//</span><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;"> light mode</span></span> <span class="giallo-l"><span>--bg-color</span><span>: color-mix(in srgb, var(</span><span>--accent-color</span><span>) 20%, white)</span><span>;</span></span> <span class="giallo-l"><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;">//</span><span style="color: light-dark(#93A1A1, #586E75);font-style: italic;"> dark mode</span></span> <span class="giallo-l"><span>--bg-color</span><span>: color-mix(in srgb, var(</span><span>--accent-color</span><span>) 10%, black)</span><span>;</span></span></code></pre> <p>The background isn’t a colour you set. It’s your accent colour <em>mixed into</em> white or black with plain CSS. So setting one hex value in the config:</p> <pre class="giallo" style="color-scheme: light dark; color: light-dark(#657B83, #839496); background-color: light-dark(#FDF6E3, #002B36);"><code data-lang="toml"><span class="giallo-l"><span style="color: light-dark(#268BD2, #268BD2);">accent_color</span><span> =</span><span style="color: light-dark(#2AA198, #2AA198);"> &quot;</span><span style="color: light-dark(#2AA198, #2AA198);">#e8a0bf</span><span style="color: light-dark(#2AA198, #2AA198);">&quot;</span></span></code></pre> <p>gives me a soft pink-tinted off-white background for free, with no second variable and no fiddling to make them match.</p> <p>That’s the trick behind why so many cozy-looking sites use a cream background instead of <code>#ffffff</code>. Pure white feels clinical. A warm off-white feels like paper. And <code>color-mix()</code> means you get it automatically without ever picking the cream by hand.</p> <p>The other neat bit: the text colour is computed in <code>oklch</code> from the same accent, so contrast stays readable no matter what hue I pick. I can’t easily choose a colour that breaks the site.</p> <p>Small thing, but it reframed how I think about theming. One input, whole palette.</p>