Foundations

Theming and dark mode

Every Rookery component reads its colours from five tokens. Change the tokens, or flip one attribute on the root, and the whole interface follows.

How a theme is applied

Rookery sets data-theme on the html element. Components never ask which theme is on; they only read tokens, so a third theme is one more block of variables.

Leave the attribute off to follow the visitor's system setting.

<html data-theme="dark">
  <!-- every component below reads --rk-* tokens -->
</html>

Colour tokens

These are the only colours components use. The column marked in use is the theme on this page right now.