Skip to main content

Theme Colors

Tip: Read this after the basic content works. Background tone is not required in the first round. Make sure products, posts, menus, and contact entries work before polishing the visual style.

When to Adjust Colors​

Adjust the tone after:

  • Homepage text, images, and buttons are no longer template content.
  • Product categories, product details, and post details open correctly.
  • Header and footer menu links have been checked.
  • Notification email and contact information are correct.

If these basics are not finished, return to Homepage Basics. Do not start with color polishing.

Remember this first

The site supports changing the overall background tone and site-wide theme style. It does not support giving one single module its own separate background color. After editing, click Preview, then Publish; otherwise the frontend will not update.

Find the Page First​

Path: AllinCMS Workspace site list → Target site → Enter Admin → Themes → Current theme pages → Home or target page

1Enter the target site adminFind the site you want to edit and click Enter Admin
AllinCMS Workspace site list - the Enter Admin button is marked with a red box
2Open Themes and click PagesClick Pages on the card for the active theme
AllinCMS admin theme list - the Themes entry and Pages button on the active theme card are marked
3Find Home or the target pageFind Home or the page you want to edit in the current theme
AllinCMS admin theme page list - the Themes menu and target pages such as Home, Products, and Posts are visible

After opening the target page in the designer, use either method below.

Method 1: Ask AI Directly​

Use the AI input at the bottom of the editor and describe the tone clearly. Do not just say "make it nicer"; give a specific direction:

Change the site background to a warm color tone.
Make the overall site style light gray and business-like.
Change the background to a clean cream-white tone.

After AI updates the design, click Preview. Confirm that text is readable, product images do not look gray, and buttons are clear. Then click Publish.

Method 2: Choose a Preset in Theme​

Select the page, switch the right-side panel to Theme, and choose an existing preset under Themes. Preview a few presets, then keep the one that makes product images and text easiest to read.

AllinCMS admin changes the overall site background tone through an AI instruction in the editor
AI color instructionDescribe a warm, light gray, business, or clean overall tone.
AllinCMS admin Theme panel with preset themes for changing the overall site background and visual style
Theme presetsChoose a preset in Theme, then preview and publish.

What to Check After Editing​

Check at least 4 things before publishing:

CheckHow to judge
Text is readableBanner text, buttons, and headings are clear on the new background
Product images look normalImages do not look too gray or dirty because of background or mask settings
Buttons stand outGet a Quote, Contact Us, and similar buttons are easy to see
Mobile preview worksSwitch to mobile preview and confirm text and background do not crowd each other

Color is a finishing step, not the main site-building flow. If a new tone makes text harder to read, return to a default theme and prioritize content completeness.

Next​

Advanced Pages - after the basics work, add Cases, galleries, videos, and popups step by step.