OpenMirai
Website Builder and Pages

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