The palettes
| Palette | Variants | Colors |
|---|---|---|
| Framework | follows the mode | Your CSS framework's, through its adapter (Bootstrap, Fluent UI, MudBlazor, Radzen), or Osirion's theme files without one. The default. |
| Osirion | light, dark | Osirion's own, kept even when a framework adapter is active |
| Commit | light, dark | Inspired by GitHub's Primer colors |
| Editor | light, dark | Inspired by Visual Studio Code's Light Modern and Dark Modern themes |
| Studio | light, dark | Approximates Visual Studio's Light and Dark themes |
| Studio Blue | light; dark uses Studio's | Approximates Visual Studio's Blue theme: a light page in a dark blue menu frame |
| Contrast | light, dark | High contrast, inspired by Visual Studio Code's High Contrast themes |
The library's tests check every variant against WCAG 2.2: text reaches 4.5:1 on its background and the focus indicator 3:1, and the Contrast palette holds text to 7:1. Code blocks follow the palette too. The Palettes page covers setup, how a palette is applied and where the colors come from; the ThemePicker is the list at the top of this page.
Make your own
A palette is a set of values for the tokens in the table below. To change one token of one palette, write a rule at least as specific as the palette's own in your stylesheet:
html:root[data-osirion-palette="commit"][data-osirion-theme="light"] {
--osirion-action-primary: #0969da;
}
A palette of your own follows the same pattern: set the tokens under
:root[data-osirion-palette="your-name"][data-osirion-theme="light"] and ...="dark"], and put the
data-osirion-palette attribute on <html> yourself, since ThemePalette only knows the palettes Osirion ships.
Keep the pairs in the table's last column apart: each text token at 4.5:1 on the backgrounds it is read on, and the focus colors at 3:1 on the page. Without a palette, the theme files and the framework adapter set these tokens; OsirionStyles describes the other ways to override them.