# Jey Theme
Frappe theme override app. Custom UI/UX for ERPNext desk.
## Architecture
### Multi-theme system
The app supports multiple visual themes via `data-jey-theme` attribute on ``.
- Themes: **chrome** (metallic rings), **modern** (frosted glass)
- Theme is stored in `localStorage("jey-theme")` and set on page load
- Default theme: `chrome`
- No dark/light variants — each theme is self-contained
- Switching themes rebuilds icon DOM with per-theme SVGs
### File structure
```
css/
shared.css — checkboxes, icon animations, base desktop-icon sizing, theme switcher UI
theme_chrome.css — chrome theme visuals
theme_modern.css — modern theme visuals
js/
jey_theme.js — theme init, per-theme icon maps (THEME_ICONS), DOM building, theme switcher override
public/html/
erpnext_chrome_menu_v2(15).html — reference design for chrome theme
```
### Adding a new theme
1. Create `css/theme_mytheme.css` with `[data-jey-theme="mytheme"]` selectors
2. Prefix keyframes with theme name: `jey-mytheme-*`
3. Add icon set in `THEME_ICONS.mytheme` in `jey_theme.js` (falls back to chrome icons if key missing)
4. Add entry to `JEY_THEMES` array in the switcher section
5. Add CSS file to `app_include_css` list in `hooks.py`
### Theme scope
Themes can change **everything** — not just icons:
- CSS (`[data-jey-theme="..."]`): layout, positioning, colors, fonts, visibility, animations — any element on any page
- JS (`jeyRebuildIcons` / theme switch hooks): DOM restructuring, moving elements between containers, adding/removing components
- Per-theme SVG icon sets, per-theme DOM structure — all supported
### Desktop icons
- JS replaces `` with inline `