How to Create Dark Mode Designs with GeneratePress

Image created with AI for this article

Dark mode has become a popular design choice for modern websites. It can give a website a cleaner appearance, improve visual comfort in low-light environments, and make certain design elements stand out.

With GeneratePress, you can create a dark-mode design by taking advantage of its Global Colors system and a small amount of CSS. GeneratePress provides centralized color controls through Appearance → Customize → Colors, making it easier to manage a consistent color palette across your website.

Why Use Dark Mode?

A well-designed dark mode can:

• Create a modern and professional appearance
• Provide an alternative visual style for visitors
• Make accent colors stand out
• Keep your website’s color system organized
• Make large-scale color changes easier

The key is not simply making everything black. Good dark-mode design uses different shades for backgrounds, text, borders, cards, buttons, and other elements.

Step 1: Build Your Light Color Palette

Before creating dark mode, start with your normal light theme.

Go to:

Appearance → Customize → Colors

GeneratePress includes Global Colors such as Contrast, Base, and Accent. You can also create additional custom colors for your design.

For example, your light palette could use:

• Background: #ffffff
• Secondary background: #f5f6f8
• Main text: #222222
• Secondary text: #666666
• Accent: #3b82f6

Using Global Colors rather than repeatedly entering individual HEX values makes your design easier to maintain.

Step 2: Create Dark-Mode Colors

Next, create additional Global Colors specifically for dark mode.

For example:

• Dark background: #121212
• Secondary background: #1b1b1b
• Main text: #f5f5f5
• Secondary text: #b5b5b5
• Accent: #60a5fa

You could name these colors with a simple dm- convention, such as:

dm-base
dm-base-2
dm-contrast
dm-contrast-2
dm-accent

GeneratePress Global Colors are converted into CSS variables, which makes this approach practical for theme-wide color switching.

Step 3: Add Dark-Mode CSS

If you want the website to follow the visitor’s device preference, CSS’s prefers-color-scheme: dark feature can be used.

Get Nel Biswas Somir’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

A basic approach looks like this:

@media (prefers-color-scheme: dark) {
    :root {
        --base: var(--dm-base);
        --base-2: var(--dm-base-2);
        --contrast: var(--dm-contrast);
        --contrast-2: var(--dm-contrast-2);
        --accent: var(--dm-accent);
    }
}

The important idea is to switch the existing GeneratePress color variables to their dark-mode equivalents rather than individually restyling every element.

GeneratePress support discussions have documented this Global Colors + CSS approach for implementing dark mode.

Step 4: Check Your Blocks

Don’t forget about custom Gutenberg blocks.

If a block has a hard-coded background color, it may not automatically change when your Global Colors switch. Using Global Color variables for block backgrounds helps keep the design consistent.

For block backgrounds, GeneratePress recommends using predefined color variables instead of static color values when possible.

Step 5: Pay Attention to Contrast

Dark mode should still be easy to read.

Avoid using pure white text on every element. Instead, use several shades of light text for headings, paragraphs, metadata, and secondary information.

For example:

• Headings: #f5f5f5
• Body text: #d0d0d0
• Secondary text: #a0a0a0
• Background: #121212
• Cards: #1b1b1b

This creates visual hierarchy without making the page look flat.

Step 6: Test Your Website

After adding dark-mode styling, check:

• Homepage
• Blog posts
• Navigation
• Buttons
• Forms
• Footer
• Sidebar
• Gutenberg blocks
• Images and icons
• Links and hover states

Also test both light and dark system preferences to make sure important content remains readable.

Final Thoughts

Creating a dark-mode design with GeneratePress doesn’t require rebuilding your entire website. The combination of Global Colors, CSS variables, and prefers-color-scheme can provide a clean foundation for a responsive dark-mode design.

The most important part is to build a consistent color system first. Once your elements use Global Colors instead of scattered hard-coded colors, maintaining both light and dark designs becomes much easier.

A good dark mode isn’t just darker — it is a carefully planned color system that keeps the website readable, consistent, and visually balanced.