The Divi WordPress theme from Elegant Themes is a fantastic theme.  I've been using it since it came out and I'm really impressed with all it's features and ease of use when it comes to its page builder.  Although it has a ton of features I found one thing missing from it, and I found out other people were noticing it too.  And that is that it is a light theme, or one that has a white background for the most part.  Yes you can change background colors for sections, and you can even add an overall background image to your site but the main content sections have white (#FFFFFF) backgrounds with dark text.  This makes it a bit limited when say photographers or other people really want a dark theme with a black background.

If you want to use Divi but want the entire theme to be dark or have completely black content sections you'd have to go in and edit the CSS yourself.  Which, if you're not comfortable with CSS can be a real pain.  And there's no simple option currently to set the theme to be black instead of white.  So I've taken it upon myself to create the custom CSS to achieve that.  I know that a lot of photographers like their websites to be on black backgrounds and that was really the motivation to do this.

So there are two ways to achieve a black Divi theme.  One is to download and install the dark child theme.  The other is to just add the custom CSS below to your custom CSS box in your current Divi theme.

Dark Child Theme Demo

View Live Demo

Download Dark Child Theme

It's in a zipped folder.  All you have to do to install it is make sure you have your main Divi theme installed from Elegant Themes first… then install the child theme.  Go to > Appearance > Themes then click “Add New” at the top of the page.  Browse to find the zip folder and upload that.  Then activate it.  Once activated your theme will now have black backgrounds and white text.  You'll still have access to your main Divi theme options page and “Customize” features as you did before.

Download Divi Dark Child Theme

Once installed it looks like this…

The dark child theme installed.

The dark child theme installed.

or…

Add Custom CSS to Your Theme Options Page

Simply grab the CSS below and copy and paste it into the custom CSS field in Divi's main theme options page.  Go to > Appearance > Divi Theme Options and scroll to the bottom.  Paste the CSS into the custom CSS box and click save.  Your theme will now be dark.  The box is the one you see below.

Add Custom CSS Here

 

Important Note:

The header will still be white by default so you'll have to go to your “Customize” page under > Appearance then click on Theme Settings so it expands and then make sure Primary and Secondary Navigation Text Color is set to Light.  Then click on Colors and set Footer Background Color, Menu Links Color, Primary Navigation Background & Secondary Navigation Background all to black or #000000.  That's all you need to do for your theme to be entirely black.

Custom CSS:

—————————— Copy CSS below ——————————

#main-content, .et_pb_section {
background-color: #000000;
}
h1, h2, h3, h4, h5, h6 {
color: #FFF;
padding-bottom: 10px;
line-height: 1em;
font-weight: 500;
}
body {
color: #FFF;
}
#et-footer-nav {
background-color: rgba(0,0,0,0.05);
}
.et_pb_blog_grid .et_pb_post {
margin: 0px 60px 60px 0px;
width: 280px;
border: 1px solid #000;
float: left;
padding: 19px;
background-color: #000;
word-wrap: break-word;
}
.et_pb_toggle_open {
padding: 20px;
background: none repeat scroll 0% 0% #000000;
}
.et_pb_toggle_close {
background-color: #000000;
padding: 20px;
}
.et_pb_toggle_title:before {
content: “”;
position: absolute;
right: 0px;
font-size: 16px;
color: #FFF;
}
.et_pb_toggle_close h5.et_pb_toggle_title {
color: #FFF;
}
.et_pb_toggle_open h5.et_pb_toggle_title {
color: #FFF;
}

————————————————————

Free Bonus – 33 Free Dark Page Layouts

Once you turn your site dark you'll notice that a lot of the page templates that come with Divi are based on white backgrounds.  So I've gone through each of the originally included page templates and made them use all dark colors.  This will save you some time from having to go through and changing all the settings yourself.

Free Dark Page Layouts Download

Examples of some of the 33 dark layouts you can download for free.

Once you’ve saved the download file, you can use the Import function in your WordPress installation to import all layouts from this site.  It's under Tools > Import then select WordPress.  You need to extract the file from the zip file first before you upload it.  Once you've imported the file you'll now see the dark page layouts in the layouts window when you click on “Load Layout” when you're creating a new page and have “Use Page Builder” on.

New Layouts Loaded

Once loaded you'll have 33 new dark layouts in your page builder.

Download Free Dark Page Templates

If you don't own a copy of Divi yet you might want to consider purchasing a license for it.

If you use this child theme or CSS on your site let me know.  I'd love to hear what you think.

 

Pin It on Pinterest