Adding Dark Mode Styles (CSS) To A WordPress Theme

Dark Mode – Sunglasses EmojiWith the macOS Mojave 10.14.4 update, Dark Mode support was added to Safari. Here’s the official text from Apple’s update announcement – “Adds Dark Mode support for websites that support custom color schemes” – this leads to a natural next question for web designers / developers. How do you add support for custom color schemes? It’s actually not too bad. It’s one basic line in CSS and then a lot of tedious work.

Photics.com runs on WordPress, with the “Twenty Sixteen” theme. What’s nice about WordPress is that it’s very easy to add custom CSS to a theme. From the “Appearance” section of the WordPress Admin Menu, select the “Customize” option. The website should go into an editor mode. New options should appear on the left side or top of the screen. (The location depends on the width of your browser window.) At the bottom of the list, select the “Additional CSS” option to add additional CSS.

WordPress – Additional CSS

While I might not be impressed with Gutenberg, I really like how WordPress handles theme customization. It’s really easy to add some more CSS. It’s so straightforward. You can even see how the changes will affect the page in realtime. The CSS editor is powerful too. It even has syntax highlighting, autocomplete and error checking.

To add dark mode support to a website, it’s essentially involves adding a media query. All I had to do was add the “prefers-color-scheme: dark” media query, then nest all my custom styles inside. The instructions are simple. The tedious part is going through all of the classes and adding Dark Mode styles.  That’s why WordPress was exceptional for this task. With Safari’s web developer tools, I could use the inspector to pinpoint the exact styles that required updating. With the live editing of CSS in WordPress, I could see exactly how the changes looked.

So easy right? If that’s not easy enough for you, included in this post is the code I added to Photics.com. If you’re running WordPress and the Twenty Sixteen theme, this CSS could be a great starting point for adding Dark Mode support.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

@media (prefers-color-scheme: dark) {
	.site {
		background-color: #222;
		color: #ccc
	}
	body.custom-background {
		background-color: #111;
	}
	a {
		color: #0bf;
	}
	.site-branding .site-title a {
		color: #ddd;
	}
	.entry-title, .entry-footer, .site-description, .site-info, .post-navigation, .page-links > .page-links-title, .menu-toggle, .dropdown-toggle, .search-submit  {
		color: #bbb;
	}
	.entry-title a, .entry-footer a, .site-info a, .menu-item a, .post-navigation a {
		color: #ddd;
	}
	.widget {
		border-color: #555;
	}
	.tagcloud a {
		color: #ccc;
		border-color: #444 !important;
		background-color: #333;
	}
	.tag-cloud-link:hover {
		background-color: #555;
	}
	a:hover {
		color: white !important;
	}
	#masthead, .site-footer {
		background-color: #333;
	}
	.main-navigation li {
		padding-left: 15px;
	}
	.main-navigation ul ul{
		border-bottom: 1px solid #333;
	}
	.main-navigation ul ul li {
		background-color: #222;
		border-color: #333;
		padding-left: 10px;
	}
	.menu-item:hover, .dropdown-toggle:hover {
		background-color: #000;
	}
	.menu-toggle.toggled-on {
		border-color: #ccc;
	}
	.menu-toggle:hover, .menu-toggle.toggled-on:hover {
		color: #ddd;
		border-color: #ddd;
	}
	.entry-content a {
		box-shadow: 0 1px 0 0 #555;
	}
	.entry-content a:hover {
		background-color: #444;
	}
	input[type="search"].search-field {
		background-color: #111;
		border-color: #444;
		color: #ccc;
	}
	.alignleft, .align-left {
		border-color: #444;
		background-color: #111;
		box-shadow: 1px 1px 2px rgb(55, 55, 55)
	}
}

Update (April 7, 2019) — I don’t really like the look of Dark Mode for this website. I switched it back to normal.

Update (February 12, 2020) — I decided to give Dark Mode another try.

Update (December 10, 2021) — There’s a video about this article on Photics.TV (YouTube). [Web #7] How To Add Dark Mode Styling To A WordPress Theme? (Explaining prefers-color-scheme in CSS)