Update Global Page Colors And Theme In The Web Editor
Learn how to use the Theme panel in the Web Editor to apply a style preset, adjust page-wide colors, optionally import a theme, undo a recent theme change, and handle restricted theme-editing states.
This guide explains how to use the Theme panel inside the Admin Web Editor.
Use it when you want to:
- change the overall visual style of a page
- apply a ready-made theme preset
- update page-wide colors more quickly
- keep the page visually consistent across many sections
- make broad brand-style changes without editing each block one by one
Before You Start
Open the Web Editor from System > Platform Customization.
Then open the page you want to edit.
Open The Theme Panel
Use the top builder controls to switch to Theme mode in the right-side panel.
Unlike Block Settings or Styling, the Theme panel is for wider page-level appearance changes instead of changes to one selected block.
This makes it useful when you want to update the visual direction of the page as a whole.
Use Theme After Block-Level Editing
The best working order is:
- finish block-level content and styling changes first
- open Theme when you want broader page-wide visual updates
- preview the page after each major theme change
- return to block mode afterward if a few sections still need individual fixes
Understand What The Theme Panel Is Best For
Use the Theme panel for broad style decisions such as:
- brand color updates
- quick visual direction changes with presets
- creating a more consistent look across multiple sections
If you only need to fix one section, one heading, or one button, use block-level tools instead.
Apply A Style Theme Preset
The Theme panel can include a Style Theme preset selector.
Use it when you want a faster starting point instead of changing each color manually.
The preset list can include:
- Platform Base Theme (Dark-Mode Adaptive)
- preset theme options
- Custom
Use Platform Base Theme (Dark-Mode Adaptive) when you want the page to follow light and dark mode background and text behavior automatically.
If you select a preset, OpenMirai may ask you to use Apply before the preset takes effect.
Some versions of the editor can keep the apply action unavailable until you choose a valid preset first.
Adjust Individual Colors
The Theme panel can also include color picker controls for direct color changes.
Use these controls when:
- your brand has exact color requirements
- a preset is close but not fully correct
- you want more control over the final page appearance
Color changes made here affect the broader page theme, so review the page carefully after each major update.
Import A Theme When The Option Is Available
Some Web Editor setups also include an Import theme action in the Theme panel.
Use it when you want to bring in theme styling through the import flow instead of updating every color manually.
When available, this opens a separate theme import window for that process.
Undo A Recent Theme Change
After a theme update, OpenMirai can show a confirmation message with an Undo action.
Use Undo right away if the new preset or color change is not what you expected.
This is especially useful after large page-wide appearance updates.
What To Expect If Theme Editing Is Restricted
If your account does not currently allow theme editing, the Theme panel can show a warning message instead of normal editing controls.
When this happens:
- review whether you are using the correct account or workspace
- confirm whether your team allows theme editing in this editor
- continue with block-level edits if only global theme changes are restricted
What To Do Next
- use theme presets first for faster page-wide changes
- switch to manual color controls when you need exact brand colors
- preview the page after major theme updates
- use block-level tools afterward if a few sections still need separate adjustments
Style A Block In The Web Editor
Learn how to use the Styling panel in the Web Editor to adjust spacing, layout, typography, color, and other visual settings for a selected block.
Add Images In The Web Editor With The Media Manager
Learn how to use the Web Editor media manager to add images by uploading a file or entering an image URL, follow upload progress, handle validation errors, and insert the selected image into your page.