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
The drawer slides in from the side (e.g. right) over the current page. The rest of the app may dim. Closing it returns you to where you were (e.g. Settings → Appearance).
The header typically shows a title (e.g. "Theme" or "Theme Management") and a close button. The footer may offer Save, Reset, and Cancel (or Close).
Button states and unsaved-change warnings follow drawer state: has changes, is saving, can save, can reset, selected theme/palette, active mode (light/dark), and whether a palette modal is open.
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.
LTR / RTL preview: The drawer can preview any theme in both directions, so you can check how palettes and layouts look for right-to-left audiences (Arabic, Hebrew) before applying them.
Editing colors
Palette editor: Open a palette to edit color variables for the current mode (for example primary, accent, background). The layout is flat: color groups sit in one scrollable panel without nested cards or extra headers. Values stay in a draft until you Save.
Unsaved state: While the palette editor is open and you have pending changes, an Unsaved badge appears. It clears after a successful Save or when you Reset / Cancel and discard edits.
Live preview: Changes apply immediately to the FleekDash UI (and to embedded WordPress screens when relevant) so you see the result without reloading. Color dragging feels smoother than in earlier releases.
Transparency: On pale card styles, the transparency slider controls surface opacity predictably.
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 palette editor supports custom and synced palettes and offers an Import action so you can bring in palettes instead of building them from scratch.
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.
One panel to switch themes, edit palettes, and tweak colors with instant feedback. Full light and dark support, no code required.