Customize

Custom themes

Style token categories with CSS variables and classes.

Every category gets a class and a CSS variable. No inline colors, no re-highlighting when your theme changes.

Example

.my-code {
  --kirari-background: #f8f7fc;
  --kirari-text: #35313f;
  --kirari-keyword: #7452bd;
  --kirari-string: #247060;
  --kirari-variable: #35435f;
  --kirari-comment: #74717c;
}

.my-code .kirari-keyword { font-weight: 600; }

Variables need a theme file imported (theme.css or any from Themes); it maps each variable to its class. Set them on any ancestor. No theme file? Style .kirari-keyword and the other classes directly.

A token for every detail

--kirari-text
--kirari-keyword
--kirari-variable
--kirari-property
--kirari-function
--kirari-string
--kirari-number
--kirari-boolean
--kirari-null
--kirari-comment
--kirari-operator
--kirari-punctuation
--kirari-type
--kirari-regex
--kirari-inserted
--kirari-deleted
--kirari-heading
--kirari-tag
--kirari-attribute
--kirari-entity

Plain text renders without a span unless you assign it a custom class. --kirari-background controls the optional wrapper background.

Custom themes#

A token for every detail

Custom themes