ali
/
jey_theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
jey_theme/CLAUDE.md

2.3 KiB
Raw Blame History

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.