blog.ptheron.com

Custom Colors in WordPress

Written by

Philip

in

Results from chat in z.ai (GLM4.7)

Prompt

I want to use a dark mode in my existing WordPress blog site. Can you give me 5 options for a color palette that will work as well as how to implement it.

Result

Here are 5 distinct dark mode color palettes for your WordPress blog, followed by a guide on how to implement them.

When designing for dark mode, the golden rule is never use pure black (#000000) for backgrounds and never use pure white (#FFFFFF) for text. Pure black causes eye strain, and pure white creates too harsh a contrast.

Part 1: 5 Dark Mode Color Palettes

1. The “Classic Modern” (Best for general blogs)

This mimics the dark modes used by YouTube and Twitter. It’s safe, highly readable, and universally appealing.

  • Background: #121212 (Deep Charcoal)
  • Surface/Cards: #1E1E1E (Lighter Charcoal)
  • Body Text: #E0E0E0 (Soft Off-White)
  • Headings: #FFFFFF (Bright White)
  • Accent/Links: #64B5F6 (Calm Sky Blue)

2. The “Warm & Cozy” (Best for lifestyle, food, or literary blogs)

This palette reduces the blue light emitted by screens, making it incredibly easy to read before bed.

  • Background: #1A1612 (Dark Warm Brown)
  • Surface/Cards: #2A2520 (Muted Chocolate)
  • Body Text: #E8DDD0 (Warm Cream)
  • Headings: #F5EDE4 (Bright Cream)
  • Accent/Links: #FFB74D (Soft Amber/Orange)

3. The “Hacker/Tech” (Best for coding, tech, or developer blogs)

Inspired by GitHub’s dark mode, this uses a slight blue undertone to make code blocks and tech content pop.

  • Background: #0D1117 (Midnight Slate)
  • Surface/Cards: #161B22 (Dark Steel)
  • Body Text: #C9D1D9 (Cool Silver)
  • Headings: #F0F6FC (Ice White)
  • Accent/Links: #39D353 (Neon Green)

4. The “Midnight Elegance” (Best for luxury, fashion, or portfolio blogs)

A sophisticated, deep blue palette that feels premium and moody.

  • Background: #0A192F (Deep Navy)
  • Surface/Cards: #112240 (Dark Indigo)
  • Body Text: #CCD6F6 (Periwinkle Silver)
  • Headings: #E6F1FF (Ghost White)
  • Accent/Links: #64FFDA (Mint/Cyan)

5. The “Vintage Terminal” (Best for minimalist or retro blogs)

Inspired by retro terminal screens and the popular “Dracula” theme. It’s unique and incredibly easy on the eyes.

  • Background: #1C1C1A (Dark Olive/Gray)
  • Surface/Cards: #2C2C28 (Faded Olive)
  • Body Text: #E6E1CF (Parchment)
  • Headings: #F8F5E9 (Bright Parchment)
  • Accent/Links: #BD93F9 (Soft Lavender/Purple)

Part 2: How to Implement Dark Mode in WordPress

There are three main ways to do this, ranging from “no coding required” to “custom developer.”

Method 1: The Plugin Route (Easiest & Recommended for most)

If you don’t want to touch code, use a plugin. They automatically handle the toggle switch, save user preferences in cookies, and often let you customize the exact colors.

  • Top Plugin Choices:
    • WP Dark Mode: The most popular. It has an free version that does OS-level detection (auto-switches if the user’s phone/computer is in dark mode) and a floating toggle switch.
    • Dark Mode for WordPress: Very lightweight, simple, and free.
  • How to do it: Install the plugin -> Go to Settings -> Paste your chosen hex codes from above into the color settings -> Save.

Method 2: The Native Block Theme Route (If you use a modern theme)

If you are using a modern “Full Site Editing” theme (like Twenty Twenty-Four, Blockpress, etc.), WordPress has dark mode built right into the editor.

  1. Go to Appearance > Editor.
  2. Click on the Styles icon (the half-filled circle in the top right).
  3. Click on Browse (the grid icon at the bottom of the menu).
  4. Look for a dark mode variation. Many modern themes include these palettes out of the box. You can click it to activate it globally.

Method 3: Custom CSS Route (For Classic Themes & Control Freaks)

If you want to force dark mode based on the user’s operating system settings (without a toggle button), you can use the prefers-color-scheme CSS media query.

  1. Go to Appearance > Customize > Additional CSS.
  2. Paste the following code (using Palette 1 as an example):
/* Targets users who have Dark Mode turned on in their OS settings */
@media (prefers-color-scheme: dark) {

    /* Change the main background */
    body {
        background-color: #121212 !important;
        color: #E0E0E0 !important;
    }

    /* Change the background of content boxes, sidebars, and cards */
    .site-content, 
    .widget, 
    article, 
    .entry-content-wrapper,
    .page-header {
        background-color: #1E1E1E !important;
    }

    /* Make headings brighter */
    h1, h2, h3, h4, h5, h6 {
        color: #FFFFFF !important;
    }

    /* Change link colors */
    a {
        color: #64B5F6 !important;
    }

    /* Make images blend in better (prevents bright white boxes around images) */
    img {
        opacity: 0.9;
        border-radius: 5px;
    }
}

Note: Because every WordPress theme uses slightly different CSS classes (like .widget or article), you may need to right-click on elements of your blog, click “Inspect”, and find the specific class names your theme uses to make this CSS perfect.

Method 4: Custom CSS + JS Toggle (For a manual “Sun/Moon” button)

If you want a toggle button but want to code it yourself (or don’t want to use a plugin), this is the standard developer method:

  1. Create a button in your header (via a header widget or a code block).
  2. Add a small JavaScript snippet that adds a class called .dark-mode to the <body> tag when clicked, and saves the choice to localStorage.
  3. Rewrite the CSS from Method 3, but replace @media (prefers-color-scheme: dark) with body.dark-mode.

Because Method 4 requires editing theme files and adding JS, it is highly recommended to use a Child Theme or a code snippet plugin (like “WPCode”) so your changes aren’t erased when you update your theme.

Which should you choose?

Want it free, lightweight, and don’t care about a toggle switch? Use Method 3 (Custom CSS).

Want it done in 5 minutes? Use Method 1 (WP Dark Mode plugin).

Have a brand new WordPress site? Check Method 2 (Block Editor).

More posts