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
- 포크
- 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에서 보기