With the popularity of the dark mode which allows a user to change in operating systems, mobile devices, and included in several applications. The dark mode changes the system and apps to a dark background with a light text. With this being popular and customers are use to changing this setting, it might be time to add this feature to your website. You can display your site in the preferred color scheme of your customer’s preference. By adding some regular CSS inside a special CSS block, you can turn your site to the dark side.
My site was created as a light theme, by using CSS the site now has a dark side to it. If dark mode is enabled on the visitor’s computer, then my side will show the dark mode. CSS does this by checking if the computer color mode is set to dark scheme, if the CSS sees it’s in dark mode it will use this special subset of CSS instructions.
To create a dark mode this you will create a special CSS section using (@ media) to show a particular color scheme of your choice. You might be using an @media already for screen sizes to have different looks for desktop, tablet, and mobile devices. For dark mode we’ll be using the:
‘@media (prefers-color-scheme: dark)’
If your site is dark and want to create a light version change ‘dark’ with ‘light’.
To help locate the areas that you want to change use the inspect the element in the browser to find the classes or IDs you’ll need to change, classes are the elements that start with a period such as .newItem. The ones with a hash tag # are IDs, IDs are for one element on the page; mostly they are used for elements like header and footer.
Update 10/24, started redesigning the site, the light/dark modes may appear different than they do in this ost.
Instructions:
My site was built using the Divi theme builder, you will see ‘et’ in the CSS naming
Finding the elements to change colors:
I went through the site to find the class names for elements using the inspect (element) feature of the browser and put these over rides into the
@media (prefers-color-scheme: dark) {
}
Any CSS that you place inside this will override any other CSS when the visitor’s computer is set to display in dark mode.
In a browser use the inspect element, you can get this by right clicking on the area you want to find information on and go down to ‘inspect (element)’ . Most of the time you will be pulling class names these start with a period ‘.’ I was able to find that:
.et_pb_section is the main content background area for the site.
To confirm this was the background in the Inspect window you can change the background color, this may say a word like ‘white’ or be a hex code like #ffffff. Beside the element ‘background-color:’. If you get the change you were expecting then you’ll know that this is the correct class to pull from. <<Insert images>>
I added this class element to the @media area for the main background of the site, looks like:
.et_pb_section {
background-color: black;
color: white;
}
The background-color: black; changes the background of the class to that color some basic colors you can use by name such as: black, white, red, blue, yellow, green, there are several more. If you need a certain color you will need to look up the Hex or S-RGB number, you can get a color picker by doing a web search for web color picker you will get several to choose from.
I set ( color: white;) this will be the text color of the element, even if the element doesn’t have text, I’ve added it just in case there’s text on another page or gets added in the future.
Now that you have a basic CSS rule for dark theme setup. It’s time to check and make sure the colors are changing the way you want. If you’re changing this to dark mode and your computer isn’t already setup, switch it over to see your work as you go. You may want to change the setting back and forth from the two color schemes.
I continued to use the inspect element method to find the elements and add those elements as to the CSS as needed. This is also a time you can do more than just swapping black and white or light and dark versions of colors, as mentioned above you can change out any color. Such as if you had dark blue headers before you could go white, light blue or even go with a red or yellow to help make them pop out any more.
Changing out logo:
My logo almost disappears when switched over to the dark mode to fix this I opened my logo in Photoshop and inverted the image so it would be a lighter color against the dark background. I found the element: .et_pb_image_0_tb_header, where I changed the background to make sure I have the right one. In the CSS I used this to change out the logo to the new one I updated:
content: url(https:// YOUR IMAGE URL LINK HERE);
How to change Color Modes:
Windows 10:
Start Menu > Settings (looks like a gear) > Personalization > Colors (left side) > under “Choose your default app mode”. Changing system color won’t change the website.
Mac:
System Preferences > General > at top it will say “Appearance:” then have 3 choices choose the one that you are designing for. Choose ‘Light’ or ‘Dark’ don’t use ‘Auto’ for testing.
Other tips:
Elements such as footer and menu will show on all pages and these may be in an id element which starts with #.
If you’re wanting the background of the blog posts to be the same as the overall background for both the dark and light version, make the blog background a transparent color, this way it will show through the background and save on extra coding.
In my final code I didn’t use white for the text I used #F0F0F0 which is about 5% grey so it wasn’t a strong contrast in color for longer reading.
Add html {background-color: black;} or whatever background color you use, this way if you have a page that doesn’t take the full window height it will show this color below everything else.
IMPORTANT NOTE:
When you need to do design work on your site after this you will need to check it in both light and dark mode to make sure nothing will impact the visitor negatively. Such as white text on a white background or black on black text/background.
When I finished going through and converting my site here is what the final CSS for the dark mode looks like:
The Code:
@media (prefers-color-scheme: dark) {
html { background-color: black;}
.newItem{
background-color: black;
color: #F0F0F0;
}
#main-header {
background-color: black;
color: #F0F0F0;
}
.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split {
color: #F0F0F0;
}
.et_pb_fullwidth_menu–without-logo .et_pb_menu__menu > nav > ul > li > a, .et_pb_menu–without-logo .et_pb_menu__menu > nav > ul > li > a {
color: #F0F0F0;
}
.et_pb_section {
background-color: black;
color: #F0F0F0;
}
.et_pb_post {
background-color: black;
color: #F0F0F0;
}
#main-content{
background-color: black;
color: #F0F0F0;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #4287f5;
}
.et_pb_image_0_tb_header {
content: url(http:// YOUR IMAGE URL LINK HERE);
}
}
