One panel to switch themes and edit colors
The Theme Management drawer is the main place to change themes and palettes and edit colors with live preview.
Layout and controls
Position: Slides in from the side (e.g. right), over the current page. The rest of the app may dim; closing the drawer returns you to where you were (e.g. Settings → Appearance or the previous page).
Header: Typically shows a title (e.g. "Theme" or "Theme Management") and a close button. A footer may offer Save, Reset, and Cancel (or Close).
State: The drawer can expose state such as: has changes, is saving, can save, can reset, selected theme name, selected palette name, active mode (light/dark), and whether a palette modal is open. This drives button states and unsaved-change warnings.
Themes and palettes
Themes list: The drawer loads themes from the themes API (e.g. useThemesQuery()). Each theme can have multiple palettes. The active theme (and active palette) comes from active theme settings from the backend.
Palettes: For the selected theme, you see its palettes. You can select a palette to edit. Palettes have modes (e.g. light, dark); each mode has color variables (e.g. primary, accent, background, foreground). Bundled palettes are read-only or merged with presets; custom palettes are fully editable.
Light / dark mode toggle: A control in the drawer lets you switch the preview and editing context between light and dark. The same palette can define both modes; you edit the variables for the currently selected mode. The app's actual light/dark state (e.g. from useTheme()) can be toggled here so you see the live interface in the chosen mode.
Editing colors
Palette editor: The PaletteEditor (and related ColorEditor) components let you change color variables for the current mode (e.g. primary, accent, background). Values are stored as a draft in the drawer state; nothing is persisted until you Save.
Live preview: Changes are applied immediately to the FleekDash UI (and, when relevant, to iframes) so you see the result without reloading. This is "live editing" as in the feature reference.
Create palette: You can create a new palette (e.g. "Create palette" or "Add palette"). The new palette gets a default structure (e.g. light and dark modes with empty or preset variables); you then edit and save.
Import: The architecture supports custom and synced palettes; import or sync behavior depends on your version (e.g. import from file or copy from another theme). Check the drawer UI for "Import" or "Sync" if available.
Save / Reset / Cancel:
Save – Persists all pending changes (theme selection, palette edits, new palettes) to the backend. Invalidates theme/palette queries so the rest of the app (and Appearance summary) updates. Then the drawer can close or stay open.
Reset – Discards unsaved changes in the drawer and restores the last saved state (or reloads from API).
Cancel / Close – Closes the drawer; if there are unsaved changes, you may be prompted to save or discard.
Benefit: One panel to switch themes, edit palettes, and tweak colors with instant feedback; full light and dark support and no code required.