Skip to content

v2.3.0

Choose a tag to compare

@arnelirobles arnelirobles released this 09 Oct 04:20
· 7 commits to main since this release
6d4261c

Dark mode, and a Tailwind theme that reads the --rnx-* tokens. npm test
reports 907 passing, exit 0.

Added

  • Dark mode. setMode('light' | 'dark' | 'system'), getMode() and
    getResolvedMode() set data-mode on <html>, save the choice in
    localStorage (rnx-mode) and follow prefers-color-scheme live in
    system mode. The default stays light. css/rnx.css gains a dark token
    block on [data-mode="dark"] and [data-theme="dark"], and a test checks
    that it overrides every colour the Tailwind theme reads and that the text
    pairs reach AA on the dark tokens. setMode also sets data-bs-theme, so
    Bootstrap 5.3's own dark styling follows. The Tailwind checkbox tick, radio
    dot and modal and drawer scrims have dark variants. (#9)

Changed

  • The Tailwind theme reads --rnx-* tokens. Colours come from CSS
    variables with the old Tailwind hex as the fallback, so with nothing set the
    look is unchanged. Remapping colors.indigo in your Tailwind config no
    longer affects the theme; set the tokens instead. Tints, hover fills and
    focus rings use color-mix(), so browsers without it (Chrome 111, Safari
    16.2, Firefox 113) lose them. (#72, via #71)
  • The focus ring offset follows --rnx-surface instead of white. (#9)

Fixed

  • Toast dark styling in css/plugins.css used prefers-color-scheme, so it
    ignored setMode. It now follows data-mode and data-theme. (#9)
  • Toast, StatCard and TopAppBar build their spacing classes as literal
    strings, so Tailwind generates them. (#71)