theme-customization
Customize or extend the theming system in kheMessage. Use when adding new themes, modifying colors, or enhancing theme switching.
Source facts
- Repository
- HKTITAN/kheMessage
- Last source activity
- February 1, 2026 at 11:49
- Detected SKILL.md language
- English
- Stars
- 1
- Forks
- 0
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- theme-customization
- description
- Customize or extend the theming system in kheMessage. Use when adding new themes, modifying colors, or enhancing theme switching.
# Theme Customization Skill
Customize the theming system in kheMessage.
## When to Use
- Adding new color themes
- Modifying existing theme colors
- Enhancing theme switching behavior
- Adding theme persistence
- Creating custom cursor themes
## Current Theme System
Themes are defined using CSS custom properties:
```css
html, html.light {
--bg: #fafaf9;
--text: #1c1917;
--border: rgba(28, 25, 23, 0.1);
/* ... */
}
html.dark {
--bg: #1c1917;
--text: #fafaf9;
/* ... */
}
```
## Theme Variables
| Variable | Purpose |
|----------|---------|
| `--bg` | Background color |
| `--bg-elevated` | Elevated surface (cards, dropdowns) |
| `--text` | Primary text color |
| `--text-muted` | Secondary text color |
| `--border` | Border color |
| `--link` | Link color |
| `--link-hover` | Link hover color |
| `--code-bg` | Code block background |
| `--hover` | Hover state background |
| `--cursor-*` | Custom cursor URLs |
## Theme Switching
Theme is controlled via:
1. URL parameter: `?theme=light` or `?theme=dark`
2. System preference: `prefers-color-scheme`
3. Toggle button: `#theme-toggle`
## Adding a New Theme
1. Define CSS variables:
```css
html.new-theme {
--bg: #newcolor;
/* ... all variables */
}
```
2. Update theme toggle logic in JavaScript
3. Add cursor files if needed
4. Test all UI elements
## Custom Cursors
Cursors are loaded from:
```
windows_11_cursors_concept_by_jepricreations_densjkc/
├── light/
│ ├── arrow.cur
│ └── ...
└── dark/
├── arrow.cur
└── ...
```
View on GitHub