The Newspack Themes include the ability to change the color of some of the accent elements

How to change theme colors

By default, the themes will use ‘Newspack Blue’ as the primary color, and a medium grey as a secondary color, but these can be changed using the following steps:

  1. Navigate to Customize > Colors.
  1. By default, the theme will be set to use Default colors. Toggle this setting to Custom to reveal two color pickers, one for the theme’s primary color, and one for its secondary color:
  1. Use the color pickers to assign a new primary and secondary color. You can also enter a hexidecimal value into the field provided:
  1. Click Publish to save your changes.

Where the colors are used

The primary and secondary colors are applied in a few locations, depending on the theme you’re using:

All themes

Primary

  • Used for the background color when you hover over dropdown links in the Primary Menu.
  • Used for borders on the Quote block, and for the blockquote tag.

Secondary

  • Used as the default for the Button block (which can be changed in the editor), and for other buttons throughout the themes.
  • Used for links in the content area.

Both colors are also added to the Color Palette in the Gutenberg editor, along with a selection of greys, for blocks that support it:

Newspack Theme

Primary Color

  • Default for the Solid Background header setting (more on that below).
  • Used for the .menu-highlight background color in the Tertiary Menu when the header does not have a Solid Background.
  • Used for Category backgrounds on single posts.
  • Used for various accent text, like the Homepage Posts headers, Widget titles, Author Bio header, etc.
  • When the Featured Image Position is set to Beside Post Title and the header is not set to Solid Background, it is used for the solid background behind the post title.

Secondary Color

  • Used for the .menu-highlight background color in the Tertiary Menu when you have the Solid Background option checked under Customize ? Header Settings.

Newspack Joseph

Newspack Joseph does not have any custom color applications unique to the theme.

Newspack Katharine

Primary Color

  • Used for the text color and accent above elements like the Homepage Posts header, Categories, and other important text.
  • When the Featured Image Position is set to Beside Post Title, it is used for the solid background behind the post title.

Newspack Nelson

Primary Color

  • Default for the Solid Background header setting (more on that below), and the footer widget area background.
  • When the Featured Image Position is set to Beside Post Title and the header is not set to Solid Background, it is used for the solid background behind the post title.

Secondary Color

  • Used for the dropcap in the Paragraph Block.

Newspack Sacha

Primary Color

  • Used for various accent text, like the Homepage Posts headers, Widget titles, Author Bio header, etc.
  • When the Featured Image Position is set to Beside Post Title, it is used for the solid background behind the post title.

Newspack Scott

Primary Color

  • Used as the default for the Solid Background header setting (more on that below)
  • Used for the accent before elements like the Homepage Posts header, Categories, and other important text.
  • When the Featured Image Position is set to Beside Post Title and the header is not set to Solid Background, it is used for the solid background behind the post title.

Automatic contrast

The Newspack Themes will adjust the contrast of certain elements, to make sure the text is still legible. For example, the secondary color is used on buttons throughout the theme. With the default secondary color and darker custom secondary colors, they will use white text:

If you pick a lighter custom secondary color, the text will automatically switch to black to remain legible:

When the text is used against a white background (like links in the content area, or the accent headers), if the custom color does not have sufficient contrast against white, it will be changed to a medium grey.

For example, if you set the secondary color to a darker red:

The links in the post or page content will use that color, because it is dark enough to be readable against the white background:

But if you set the secondary color to a lighter color, like yellow:

The links in the post or page content will use grey instead, because the yellow would be very difficult to read:

The original color will still be used for non-text elements, regardless of brightness.

Header Background Color

When the Solid Background option is selected under Customize > Header Settings, there will be a second set of radio buttons under Customize > Colors where you can pick a background color just for the header.

The initial setting for the Header Background Color is Default, which differs for each of the themes:

Newspack Theme, Newspack Scott, and Newspack Nelson use the current primary color by default:

Newspack Katharine and Newspack Sacha use a dark grey as a background color by default:

Newspack Joseph uses a black background by default:

To change the Header Background color, follow these steps:

  1. If you haven’t already, navigate to Customize > Header Settings and check Solid Background.
  2. Navigate to Customize > Colors; there is now a second set of radio buttons to control the Header Background Color. If you’re happy with your theme’s default behavior (outlined above), you can save the current settings by clicking Publish.
  1. If you would like to pick a different color than the default provided, switch the Header Background Color to Custom.
  1. Like with the primary and secondary colors, clicking on Select Color will open a color picker, allowing you to select a color using the palette, or by manually entering a Hexidecimal value:

5. Click Publish to save.

The Header Background Color will be applied both to the header and the mobile menu, with the text color adjusted to have sufficient contrast:

Primary Menu Background Color

When both Solid Background and Short Header are selected under Customize > Header Settings, the Primary Menu will have a grey background by default.

In that case, when Header Background Color is set to Custom, you will also have an option to change the Primary Menu’s background color, underneath the header background color:

By default, each theme sets its own footer background color.

Newspack Theme, Newspack Joseph, and Newspack Scott all have a white footer background color:

Newspack Katharine uses a dark grey for the footer background color:

Newspack Nelson uses the custom header color if set, or falling back to the primary color if not:

Newspack Sacha uses a light grey:

To change the Footer Background color, follow these steps:

  1. Navigate to Customize > Colors.
  2. Switch the Footer Background Color radio button to Custom.
  3. Like with the other color options, clicking on Select Color will open a color picker, allowing you to select a color using the palette, or by manually entering a Hexidecimal value:
  1. Click Publish to save your changes.

Ads Background Color

By default, the background color for the Ads is white, with the exception of the “Above Header” placement where it is a light gray.

To change the Ads Background color, follow these steps:

  1. Navigate to Customize > Colors.
  2. Switch the Ads Background Color radio button to Custom.
  3. Like with the other color options, clicking on Select Color will open a color picker, allowing you to select a color using the palette, or by manually entering a Hexidecimal value:
  1. Click Publish to save your changes.
Support Home

Custom Colors

Theme Table of Contents