Themes and Customization

Created by Joseph Ross, Modified on Fri, 13 Feb at 7:35 PM by Joseph Ross

Your site's theme controls its overall look and feel -- the colors, fonts, spacing, and visual style that make your site uniquely yours. Changing your theme can completely transform how your website looks without affecting any of your content.

What Is a Theme?

A theme is a collection of visual styles applied to your entire site. It determines things like:

The colors used for buttons, links, backgrounds, and text
The style of your header and footer
The overall mood of your site (light and airy, dark and modern, warm and elegant, etc.)

Think of a theme as your site's outfit. Your content stays the same, but the way it is presented changes.

Tip: Changing your theme does not delete or move any of your content. Your pages, text, images, and layout all remain exactly as they are.

Available Themes

WebNesting includes several professionally designed themes. Each one offers a distinct look and feel.

Default

A clean, professional design with classic blue tones. This is a light theme that works well for a wide range of businesses and personal sites. If you are not sure which theme to pick, Default is a reliable choice.

Soft Elegant

A warm, refined look with gentle green accents. This light theme uses softer background tones and earthy colors that feel inviting and polished. It is a great fit for wellness brands, boutiques, creative professionals, and anyone who wants a calm, elegant feel.

Midnight Slate

A dark, sophisticated design with cyan-blue accents. This modern dark theme is eye-catching and gives your site a sleek, high-end feel. It works well for technology companies, portfolios, creative agencies, and anyone who wants a bold, contemporary look.

Tip: You can preview each theme on your actual site before committing. Take your time and try them all to see which one fits your brand best.

Choosing a Theme During Setup

When you first set up your site, a theme selection screen appears after you choose your starter template. Here is how it works:

You will see a grid of theme cards on the left side of the screen.
Each card shows the theme's name, a short description, and color dots representing its palette.
Click any theme card to preview it. A live preview of your site loads on the right side of the screen.
Click around in the preview to see how different pages look with that theme.
When you find a theme you like, click Choose Colors to move on to color selection.

Changing Your Theme After Setup

You are not locked into your initial theme choice. To change your theme at any time:

Go to Settings in the left sidebar of your Dashboard.
Look for the Theme section.
Select a different theme.
Save your changes.

Your site will update immediately with the new look.

Customizing Your Color Palette

Every theme comes with a default set of colors, but you can change them to match your brand. Your color palette is made up of five core colors that control the entire look of your site.

The Five Core Colors

Primary -- Your main brand color. This is used for buttons, links, and key highlights across your site. It is the color your visitors will notice the most.
Secondary -- A supporting accent color. This is used for secondary buttons, the header accent, footer accents, and other supporting elements. It complements your primary color.
Background -- The main background color of your pages. This is the color that fills the space behind your content. For a light site, this is typically a light gray or off-white. For a dark site, this would be a deep blue or charcoal.
Container -- The background color of content areas, cards, and boxes. This is usually white for light themes or a slightly lighter shade than the background for dark themes. It helps your content stand out from the page background.
Text -- The default color for body text on your site. Choose a color that is easy to read against your background and container colors.

Tip: You do not need to worry about getting every shade perfect. WebNesting automatically generates additional colors (like hover states, muted text, borders, and headings) based on your five core choices.

Using Preset Palettes

The easiest way to customize your colors is to use a preset palette:

During theme setup, click Choose Colors after selecting a theme.
You will see a list of pre-made color palettes. Each one shows colored dots for its main colors.
Palettes marked as Recommended at the top are designed to look best with your chosen theme.
Click any palette to preview it. The live preview updates instantly.
When you find one you like, click Apply Theme to save your choices.

Tip: Recommended palettes have been tested to look great with your selected theme. They are a quick and easy way to get a polished look.

Creating Custom Colors

If you want to set your own exact colors (for example, to match your existing brand), you can customize each color individually:

After selecting a theme and palette (or skipping the palette step), click the Customize button.
You will see a list of the five core colors, each with a colored square next to it.
Click on any colored square to open a color picker.
Use the color picker to choose your desired color. You can:
- Click and drag on the color area to find the shade you want
- Type in a specific color value if you know your brand's exact colors
- Adjust the hue and opacity sliders
Watch the live preview on the right side update in real time as you make changes.
Repeat for any other colors you want to adjust.
When you are happy with your colors, click Apply Theme.

If you make changes and want to start over:

Click Reset Colors to go back to either the preset palette you chose or the theme's default colors.

How Theme Changes Affect Your Existing Content

Switching themes or changing your colors is safe. Here is what stays the same and what changes:

What stays the same:

All your pages and their layout
All your text, images, and media
All your components and their positions
Your navigation menus and page structure

What changes:

Colors throughout your site (buttons, links, backgrounds, text)
Font styles and weights (font customization is managed through your theme -- each theme includes a curated set of fonts that work well together)
Header and footer appearance
Subtle details like shadows, borders, and spacing

In short, your content is completely untouched. Only the visual presentation changes.

Tip: If you have applied custom styles to individual components using the website builder's style controls, those custom styles will still be applied on top of the theme. The theme provides the base look, and your component-level customizations layer on top.

Previewing Theme Changes

WebNesting makes it easy to see changes before you commit:

During setup: The right side of the theme selector shows a full live preview of your actual site. Click links in the preview to navigate to different pages and see how the theme looks everywhere.
After setup: When you change themes or colors in Settings, you can preview the changes before publishing. If you are not happy, you can simply go back and change the theme again.

Tip: When previewing during setup, try clicking through to different pages in the preview. A theme might look perfect on your homepage but you will want to check how it looks on inner pages too.

Tips for Choosing the Right Look

Here are some guidelines to help you pick a theme and colors that work well for your brand.

Match Your Brand

If you already have brand colors (from a logo, business cards, or other materials), use those as your primary and secondary colors. This keeps your online presence consistent with everything else.

Consider Your Audience

Professional services (law firms, accounting, consulting) -- Clean, classic themes like Default with blue or neutral tones convey trust and reliability.
Creative businesses (design studios, photographers, artists) -- Dark themes like Midnight Slate or warm themes like Soft Elegant help your work stand out.
Wellness and lifestyle (spas, yoga studios, coaches) -- Soft Elegant with green or earth-toned palettes creates a calm, inviting feel.
Technology companies -- Midnight Slate with cyan or blue accents gives a modern, cutting-edge impression.

Keep It Readable

The most important thing is that your visitors can easily read your content.

For light themes, use dark text on light backgrounds.
For dark themes, use light text on dark backgrounds.
Make sure there is good contrast between your text color and your background and container colors.

Tip: If text feels hard to read on your site, try adjusting your text or background colors to increase the contrast between them.

Less Is More

You do not need to use dramatically different colors for primary and secondary. Colors that are related (like a dark blue and a slightly different blue) often look more polished than colors that clash. If you are unsure, start with a preset palette and adjust from there.

Try Before You Decide

There is no risk to experimenting. You can change your theme and colors as many times as you like. Try different combinations until your site feels right.

Where to Go Next

Site Settings -- Learn how to update your site name, logo, favicon, and other settings.
Styling Elements -- Learn how to customize individual elements on your pages beyond the theme defaults.
Setting Up Your Site -- Revisit the full setup process if you need a refresher.

Last updated: February 13, 2026