The colours of a site or an app from one colour or one image, light and dark, checked for contrast, as CSS or as hex.
(def t (from-seed "#24476b")) ; or (from-image bytes)
(css t) ; custom properties for a web page
(:dark (hex t)) ; a map of hex colours, e.g. for React Native
(remove :ok? (report t))
A theme has ten roles, in words that a beginner knows:
Each role is a token of tone in LCH, so its lightness is CIELAB's L*, like the tones of Material 3. Each pair that must contrast keeps its contrast, to within a few percent, whatever the seed's hue, and the lightness of each role leaves a margin for that. The accent, the link and the focus ring take the seed's hue and chroma, and the rest a hint of its hue, like the greys that Radix pairs with an accent.
There are two levels of contrast, :standard and :more, like those of Material 3 and Apple. The function css writes :more for prefers-contrast: more.
A theme is plain data, so you can set a role by hand, e.g. with assoc-in, and report checks it again. https://github.com/material-foundation/material-color-utilities/blob/main/concepts/contrast_for_accessibility.md https://www.radix-ui.com/themes/docs/theme/color
The colours of a site or an app from one colour or one image, light and
dark, checked for contrast, as CSS or as hex.
(def t (from-seed "#24476b")) ; or (from-image bytes)
(css t) ; custom properties for a web page
(:dark (hex t)) ; a map of hex colours, e.g. for React Native
(remove :ok? (report t))
A theme has ten roles, in words that a beginner knows:
- :background, the page, and :surface, a panel or a card on it
- :text, and :text-muted for what matters less, e.g. a date
- :border, the edge of a control, e.g. a field, and :divider, a line
between parts that marks nothing
- :accent, the fill of the main control, e.g. a button, and :on-accent,
the text on it
- :link, the colour of a link, and :focus, the ring of the focused
control
Each role is a token of tone in LCH, so its lightness is CIELAB's L*,
like the tones of Material 3. Each pair that must contrast keeps its
contrast, to within a few percent, whatever the seed's hue, and the
lightness of each role leaves a margin for that. The accent, the link and
the focus ring take the seed's hue and chroma, and the rest a hint of its
hue, like the greys that Radix pairs with an accent.
There are two levels of contrast, :standard and :more, like those of
Material 3 and Apple. The function css writes :more for
prefers-contrast: more.
A theme is plain data, so you can set a role by hand, e.g. with assoc-in,
and report checks it again.
https://github.com/material-foundation/material-color-utilities/blob/main/concepts/contrast_for_accessibility.md
https://www.radix-ui.com/themes/docs/theme/color(colours theme)(colours theme level)The colours of the theme at the level of contrast, by default
:standard, as a map of each appearance, :light and :dark, to a map of
each role to its colour.
The colours of the `theme` at the `level` of contrast, by default :standard, as a map of each appearance, :light and :dark, to a map of each role to its colour.
(css theme)(css theme
{:keys [selector prefix] :or {selector ":root" prefix "--"} :as opts})The theme as CSS, by the opts :selector, by default :root, and
:prefix, of the custom properties, by default --. It holds these:
The `theme` as CSS, by the `opts` :selector, by default :root, and :prefix, of the custom properties, by default --. It holds these: - a custom property for each role, e.g. --background, with light-dark() for light and dark - the level :more, under prefers-contrast: more - system colours, under forced-colors: active - color-scheme, which light-dark() needs, and accent-color, which colours checkboxes, radio buttons and range sliders
(design-tokens theme)(design-tokens theme level)The colours of the theme at the level of contrast, by default
:standard, as design tokens of the DTCG's format, a map with string keys
that JSON can encode, for tools such as Style Dictionary, which write
them for Android, iOS and Flutter.
The colours of the `theme` at the `level` of contrast, by default :standard, as design tokens of the DTCG's format, a map with string keys that JSON can encode, for tools such as Style Dictionary, which write them for Android, iOS and Flutter.
The grey that from-pixels takes as the seed of an image without an opaque pixel.
The grey that from-pixels takes as the seed of an image without an opaque pixel.
(from-image b)(from-image b roles)The theme of the image in the bytes b, e.g. a podcast's artwork, with
the roles of from-seed: from-pixels of the pixels that image/pixels
decodes. On the JVM it returns the theme, and in ClojureScript a promise
of it, which is nil where the platform can't decode the image.
The theme of the image in the bytes `b`, e.g. a podcast's artwork, with the `roles` of from-seed: from-pixels of the pixels that image/pixels decodes. On the JVM it returns the theme, and in ClojureScript a promise of it, which is nil where the platform can't decode the image.
(from-pixels pixels)(from-pixels pixels roles)The theme of the image whose pixels are vectors of red, green, blue and
alpha from 0 to 255, with the roles of from-seed. Its seed is the
image's commonest colour with a hue, by choose/seed, or else its
commonest colour.
The theme of the image whose `pixels` are vectors of red, green, blue and alpha from 0 to 255, with the `roles` of from-seed. Its seed is the image's commonest colour with a hue, by choose/seed, or else its commonest colour.
(from-seed seed)(from-seed seed roles)The theme of the colour seed, by the tokens of roles, by default
those of roles: a map of the :seed and of the colours of each role, by
level of contrast and appearance, e.g.
(get-in theme [:standard :dark :text]).
The theme of the colour `seed`, by the tokens of `roles`, by default those of roles: a map of the :seed and of the colours of each role, by level of contrast and appearance, e.g. (get-in theme [:standard :dark :text]).
(hex theme)(hex theme level)The colours of the theme at the level of contrast, by default
:standard, as hex colours, e.g. for React Native, which takes no
oklch(): {:light {:background "#ffffff" …} :dark {…}}.
The colours of the `theme` at the `level` of contrast, by default
:standard, as hex colours, e.g. for React Native, which takes no
oklch(): {:light {:background "#ffffff" …} :dark {…}}.(relative-css prop)(relative-css prop roles)The roles as CSS that derives each from the custom property prop,
e.g. --seed, with relative colours, so that a page changes its whole
theme by setting that one property. A browser clips a colour outside the
display's gamut, so the contrast can differ a little from that of
from-seed's colours.
The `roles` as CSS that derives each from the custom property `prop`, e.g. --seed, with relative colours, so that a page changes its whole theme by setting that one property. A browser clips a colour outside the display's gamut, so the contrast can differ a little from that of from-seed's colours.
(report theme)Each pair of roles of the theme that must contrast, at each level and
in each appearance, as a map of these:
Each pair of roles of the `theme` that must contrast, at each level and in each appearance, as a map of these: - :roles, the pair - :level and :appearance - :ratio, and :wants, the least that it should be - :ok?, whether it is
The pairs of roles that must contrast, and the least contrast ratio of each, by level of contrast: 4.5 for text and 3 for the parts of controls, or 7 and 4.5 at the level :more, which WCAG's AAA asks for.
The pairs of roles that must contrast, and the least contrast ratio of each, by level of contrast: 4.5 for text and 3 for the parts of controls, or 7 and 4.5 at the level :more, which WCAG's AAA asks for.
The tokens of each role, by level of contrast and appearance.
The tokens of each role, by level of contrast and appearance.
The system colour of each role, for forced colours.
The system colour of each role, for forced colours.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |