Back to Community
Home / Community / Theme → Twenty twenty

How to Change Colors in the Twenty Twenty Theme Using Custom CSS

37 threads Sep 16, 2025 Theme → Twenty twenty

Content

Customizing the color scheme is one of the most common ways to personalize a WordPress site. The Twenty Twenty theme provides built-in color options, but many users find they need more precise control. This guide covers the most frequent color-related challenges and how to solve them with custom CSS.

Common Color Customization Scenarios

Based on community discussions, users most often want to change:

  • Link and accent colors
  • Header, footer, and navigation menu colors
  • Text colors for specific elements like post titles or category links
  • Background colors for specific page sections
  • Active page indicators in navigation menus

Why Custom CSS is Often Needed

While Twenty Twenty offers some color customization through the Appearance → Customize → Colors panel, it has limitations:

  • You cannot specify exact hexadecimal color values
  • Some elements don't respond to the global color settings
  • The theme's automatic color calculations may not always produce desired results
  • Mobile and desktop versions sometimes display colors differently

Most Effective Solution: Additional CSS

The most reliable method for precise color control is using the Additional CSS feature in the WordPress Customizer (Appearance → Customize → Additional CSS). This approach:

  • Doesn't require modifying theme files directly
  • Preserves your changes through theme updates
  • Provides exact control over specific elements

Frequently Used CSS Code Snippets

Here are the most commonly requested color changes and their CSS solutions:

1. Change All Accent Colors

.color-accent, .color-accent-hover:hover, .color-accent-hover:focus,
:root .has-accent-color, .has-drop-cap:not(:focus):first-letter,
a, blockquote, .border-color-accent, .border-color-accent-hover:hover,
.border-color-accent-hover:focus, button:not(.toggle), .button,
.faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button,
input[type="button"], input[type="reset"], input[type="submit"],
.bg-accent, .bg-accent-hover:hover, .bg-accent-hover:focus {
    color: your-color-value !important;
}

2. Change Active Navigation Menu Item Color

nav.primary-menu-wrapper ul.primary-menu li.current-menu-item a {
    color: your-color-value !important;
}

3. Change Footer Background Color Only

#site-footer {
    background-color: your-color-value !important;
}

4. Change Post Title Color

.entry-title a {
    color: your-color-value !important;
}

5. Change Category Link Color and Remove Link

.singular:not(.overlay-header) .entry-header .entry-categories a {
    color: your-color-value !important;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

Important Considerations

When using these CSS snippets:

  • Replace "your-color-value" with your preferred color (hex, RGB, or named color)
  • The !important declaration is often necessary to override theme defaults
  • Test changes across different devices and screen sizes
  • Clear any caching plugins after making changes
  • Consider using a child theme for more extensive modifications

These solutions address the majority of color customization needs in the Twenty Twenty theme. For more specific requirements, inspecting elements with browser developer tools can help identify the correct CSS selectors to target.

Related Support Threads Support