5ae8ae6e53
- Delete default.css (redundant with dracula.css) - Add snazzy, catppuccin_mocha, tokyonight, rose_pine, onedark themes - Update docs/static/style.css to import dracula.css - Update themes/README.md and syntax-highlighting.md Theme collection now contains 10 well-designed options.
95 lines
2.7 KiB
Markdown
95 lines
2.7 KiB
Markdown
# Syntax Highlighting Themes
|
|
|
|
This directory contains CSS themes for sukr's syntax highlighting system.
|
|
|
|
## 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:
|
|
|
|
```css
|
|
@import "themes/dracula.css";
|
|
```
|
|
|
|
sukr uses [lightningcss](https://lightningcss.dev/) 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:
|
|
|
|
```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:
|
|
|
|
```html
|
|
<span class="hl-keyword-control-return">return</span>
|
|
```
|
|
|
|
Themes can style at any level of specificity:
|
|
|
|
```css
|
|
/* 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.
|