theme-customization
Customize or extend the theming system in kheMessage. Use when adding new themes, modifying colors, or enhancing theme switching.
来源信息
- 仓库
- HKTITAN/kheMessage
- 最近来源活动
- 2026年2月1日 11:49
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 1
- Forks
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- 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
└── ...
```
在 GitHub 查看