Turn Your Website to the Darkside

May 02, 2020

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.


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.

Right Click and element select ‘Inspect Element’
The inspect element window
Code to change for testing CSS elements

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);

            }

}

Related Articles

Case Study Justin Beahm’s Website Redesign

Case Study Justin Beahm’s Website Redesign

Justin Beahm had three different web sites these sites included: his personal site; his production company, Reverend Entertainment; and his podcast, Justin Beahm Radio Hour. When it came time to redesign his personal page we decided to merge all three of his sites...

read more
Trails of Crafts Website

Trails of Crafts Website

Trails of Crafts is an online store for three relatives who are crafters. The name is based on their last name of Trail. The site is set up in a single WordPress install using software that gives each member of the website their own storefront. Having their individual...

read more
Farmer City Outreach Website Redesign

Farmer City Outreach Website Redesign

Sometimes it is necessary to go through and bring a website’s design up to date either through changes to the site itself. But sometimes you need to change the design such as in the old site’s theme is no longer being supported. The theme is what controls the look of...

read more

Pin It on Pinterest

Share This