sukr/themes/README.md

Syntax Highlighting Themes

This directory contains CSS themes for sukr's syntax highlighting system.

Attribution

These themes are adapted from the Helix editor theme collection.

Helix is licensed under the Mozilla Public License 2.0 (MPL-2.0). We are grateful to the Helix maintainers and contributors, as well as the original theme authors, for their excellent work.

Available Themes

Theme	Description
dracula.css	Classic Dracula colors
gruvbox.css	Warm retro palette
nord.css	Cool arctic colors
github_dark.css	GitHub's dark mode
github_light.css	GitHub's light mode
snazzy.css	Vibrant modern colors
catppuccin_mocha.css	Warm pastel dark theme
tokyonight.css	Japanese-inspired dark theme
rose_pine.css	Elegant soho-inspired theme
onedark.css	Classic Atom editor theme

Usage

1. Copy a theme to your project's static directory
2. Import it in your main CSS file:

@import "themes/dracula.css";

sukr uses lightningcss which bundles @import rules at build time—your final CSS will be a single minified file.

Customization

Themes use CSS custom properties for easy customization. Override any variable in your own CSS:

@import "themes/dracula.css";

/* Override just the keyword color */
:root {
  --hl-keyword: #e879f9;
}

Core Variables

All themes define these variables in :root:

Variable	Description
--hl-keyword	Keywords, control flow
--hl-string	String literals
--hl-function	Function names
--hl-comment	Comments
--hl-type	Type names
--hl-number	Numeric literals
--hl-variable	Variables
--hl-operator	Operators

Hierarchical Scopes

sukr generates hierarchical CSS classes for fine-grained styling:

<span class="hl-keyword-control-return">return</span>

Themes can style at any level of specificity:

/* All keywords */
.hl-keyword {
  color: var(--hl-keyword);
}

/* Just control-flow keywords */
.hl-keyword-control {
  color: #ff79c6;
}

/* Just return/break/continue */
.hl-keyword-control-return {
  font-weight: bold;
}

If a specific class isn't styled, highlighting falls back up the hierarchy.

Creating Custom Themes

Start with any theme (e.g., dracula.css) and modify the :root variables to create your own color scheme. The class rules reference these variables, so changing values updates the entire theme.

Note

These themes are not bundled into the sukr binary—they're provided as starting points. Copy what you need to your project and customize to match your site's design.