Color Scheme

Colors in Monogram come from one place: the color scheme set in the Customizer. Everything on the page follows it, and keeps following it when a visitor switches between dark and light mode.

#Every element inherits the scheme until you override it

Text, headings, borders, and card surfaces read their color from the active scheme. This holds for WordPress blocks, Elementor widgets, and the theme widgets. There is no per-widget setting that turns inheritance on, because it is already on.

A color you set by hand replaces that. It is one fixed value, so it survives the switch: white text picked while the dark scheme was active stays white in light mode, where it disappears against the background.

#Where a fixed color comes from

The widget color field

Elementor widgets carry their own color controls on the Style tab. Image Box and Icon Box have Title Color and Description Color under Content. Heading and Text Editor have Text Color. Clear the field and inheritance returns.

Elementor default colors

Elementor can apply its own global palette to every widget it renders, which overrides the theme. Monogram turns this off during demo import. If it has been switched back on, tick Disable Default Colors at ElementorSettingsGeneral.

A color set on a WordPress block

Blocks keep a Color panel in the block sidebar. Clearing Text and Background there returns the block to the scheme.

#Getting started

Head to AppearanceCustomizeColor Scheme in your WordPress dashboard. You'll see a live preview of your site on the right as you make changes.

#Dark mode vs. light mode

At the top of the Color Scheme panel, you'll find a Dark/Light mode toggle. This controls the base appearance of your entire site:

• Light mode gives you a bright, clean look with light backgrounds and dark text - great for corporate sites, portfolios, and blogs.
• Dark mode flips things around with dark backgrounds and light text - perfect for creative agencies, photographers, and modern portfolios.

Switching between modes instantly updates all the default colors across your site.

#Accent color

The Accent Color is your brand's signature color. It appears in:

• Buttons and call-to-action elements
• Links and hover states
• Active menu items
• Highlighted UI elements like badges and icons

Pick a color that matches your brand identity and stands out against your chosen background.

#Customizing individual colors

Below the main toggle, you'll find fine-grained controls for both light and dark schemes:

• Background - the main page background color
• Text - the primary text color used for paragraphs and headings
• Border - the color used for dividers, card borders, and separators
• Surface - the color for cards, panels, and elevated UI elements (like dropdowns or modals)

Each of these can be set independently for light mode and dark mode, giving you full creative control.

#Give one element a different color in each mode

Sometimes a fixed color is what you want, and it has to work in both modes. Two ways to get there, depending on how much of the page is affected.

#A whole section

Set the scheme on the container and let everything inside inherit it. Select the container, open LayoutJKD Settings and set Color Scheme to Dark or Light. The section then keeps that appearance no matter which mode the visitor is in, which is what you want for something like a dark call-to-action band on an otherwise light page.

This covers every widget inside the container, Image Box and Icon Box included, along with their headings, buttons, and borders. Reach for it first: one setting on a container replaces per-widget colors that would otherwise have to be set one at a time and re-checked whenever you edit the section.

#A single heading or paragraph

Elementor Heading and Text Editor widgets can hold one color per scheme. Open the widget, go to StyleColor Scheme and turn on Separate Colors per Scheme, then set:

This overrides the Text Color field on the widget above it. If a widget sits inside a container that overrides the scheme, it follows the container rather than the page.

#Tips

Last updated 6 Sep 2026