sukr/themes/README.md

Syntax Highlighting Themes

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

Available Themes

Theme	Description
default.css	Dracula-inspired dark theme
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

Usage

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

@import "themes/default.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/default.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 default.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.