Improbability Drive
Generates daisyUI 5 themes with OKLCH maths, checks their contrast live, and lets you wear one across this whole site.
· experiment · Astro · OKLCH · daisyUI 5 · TypeScript
It lives right here in the garden: /experiments/improbability-drive →
This site already lets you pick its colours from 35 daisyUI themes. This experiment makes new ones, and the best ones join the menu.
Making a theme
You pick a seed hue, how colourful it should be, how far apart text and surfaces sit, and a mood: calm, loud or dark. There are also the daisyUI shape knobs (three radii, border, depth, noise). Engage rolls all of it at once. Out comes the whole daisyUI 5 variable set, in OKLCH, ready to paste into a stylesheet.
I used OKLCH because lightness means the same thing at every hue. “Text is 45 points darker than the surface” holds for yellow and for blue, which is not true in HSL. Every colour is pulled back into sRGB before it is measured, so the number I show is the colour you actually get.
Contrast
Eleven pairs get checked: body text on the three surfaces, and each colour against its -content text. Each one shows the WCAG 2.x ratio and the APCA value for reference, as text plus a dot, never colour alone. Auto-fix moves only the lightness of the failing text colours until they reach 4.5:1.
The generator is allowed to miss. Roughly a third of random rolls have a pair just short of the mark, which is what the button is for. The readout (“Improbability: 2^… to 1”) is only a fingerprint of the theme, so the same theme always has the same odds. It is not real maths. Probably.
Wearing, saving, sharing
“Wear it” stores the variables in your browser and applies them to every page, before the first paint, so there is no flash of the wrong colours. Every other theme still works from the palette menu.
“Save” keeps a theme in a short list in your browser (up to 12, with rename and delete). Saved themes show up in the palette menu too, so you can switch between them anywhere on the site.
“Share” puts the whole theme inside a link, about 600 characters of it. Open the link and you get a preview, with the choice to wear it or save it. There is no server behind any of this, so nothing is sent anywhere and nothing needs hosting. A link that has been tampered with is ignored.
The palette menu also has a Curated group. There is no voting: when a shared theme is good, I paste its code into a file and it joins the menu.
Under the hood
The page is an Astro island in plain TypeScript, with no backend at all. The colour maths, the share codes and the saved list have unit tests.