Disable light mode

Hi there,

There’s no setting to disable either light or dark mode on the self-hosted version of the theme, but you can switch it to use a custom color scheme instead of the theme default. If you select a custom color scheme, that will be used regardless of the user’s browser/system settings.

Go to Appearance ->Customize ->Colors, and select the Custom option. Change the background color to black and the text color to white, and click publish (you can also choose different colors if you want to make your own “dark mode” version).

Thank you for the reply. When I create a custom background color, I’m having trouble with the theme auto-toggling font colors depending on the system’s dark mode status. Because there is no Customizer setting for font color, I’ve used CSS to make h1-h6, p, and other text selectors show up as white. But when I change my system setting to light mode, the theme automatically changes the fonts to black on my custom dark background, making the text unreadable. Without being able to shut-off the auto-switching of font color, a custom dark mode isn’t possible.

Also, using a custom background color, the sticky post on the front page no longer has a different background color from the rest of the posts below it. Can you provide some code to retain this effect described on the Spearhead theme page?

“Sticky posts will display on the top of the page, with a darker background.”

Thank you for your help.

• This reply was modified 2 years, 7 months ago by thewritingthing.

Hmm, the theme definitely does not have a light/dark mode as you’re describing.

Are you using a plugin to provide that functionality? Or, perhaps a browser extension is affecting how you see it when your device is dark?

James,

Auto light and dark mode is a feature of this theme. From the Spearhead theme homepage:

“Spearhead has support for dark mode; the default color scheme has a light background, but if your operating system is dark mode the site also changes to use dark background with light text.”

https://wordpress.com/theme/spearhead

KokkieH said this auto functionality would cease to operate if a custom color theme was chosen, but it still activates.

Hi @thewritingthing, sorry about that. The foreground color should be your text color, and links will use the primary color.

If you set those so that there’s appropriate contrast, those colors should stay regardless of a user’s day or night settings.

Right now I’m using a dark grey background on my test site, with a lighter grey foreground and something similar for a primary color. This stays dark on my iPhone even though it’s in day mode right now.

Thank you supernovia. I was ignoring the foreground color. It works. ??

Do you have code to keep the 2-tone effect with the “latest posts” setting while using a custom background color? When using the default color settings, a sticky post will have a different shade of the background color from the rest of the posts below it. It’s a nice effect and it disappears when using a custom color.

Thanks again for your help.

You can set their background color via CSS, changing the colors as you’d like:

.post.sticky {
  background: #333333;
}

Thank you! And for anyone else creating a custom dark mode, the Customizer foreground setting didn’t change the color of the more-link, search field, or block audio figcaption. I changed them via CSS though and it all works.

Thank you @thewritingthing! Glad you’ve got it, and if you care to share your CSS here I’m sure others coming across this thread will appreciate that.

Either way, have a great weekend!

Thanks to you as well.

This is CSS I’ve found needs to be manually changed if you use a custom dark background. The foreground color setting doesn’t include this site text.

You’d just assign a color to these to match your foreground color setting.

.entry-title, .shrink-h2, .entry-content, .excerpt-more-link, .archive .post-excerpt:not(.sticky) .more-link, .home .post-excerpt:not(.sticky) .more-link

.wp-block-audio figcaption

.wp-block-search .wp-block-search__input

.entry-meta a, .entry-footer a

• This reply was modified 2 years, 7 months ago by thewritingthing.

Thank you!