58 lines
2.3 KiB
Markdown
58 lines
2.3 KiB
Markdown
# 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 `<html>`.
|
|
|
|
- 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 `<img class="app-icon">` with inline `<svg class="jey-icon">` per current theme
|
|
- Each theme has its own `THEME_ICONS[themeName]` map with unique SVG paths
|
|
- Folder icons (`.folder-icon`) are converted to regular themed icons
|
|
- SVGs can have `cls` (e.g. `ico-buying`) for shared animations
|
|
- On theme switch, `jeyRebuildIcons()` tears down and rebuilds all icon DOM
|
|
|
|
## Rules
|
|
|
|
- Theme-specific CSS must be wrapped in `[data-jey-theme="themename"]` selector.
|
|
- Shared CSS (checkboxes, animations) lives in `shared.css` without theme selectors.
|
|
- CSS-only changes: clear browser cache. JS changes: `bench build --app jey_theme`.
|