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
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.
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.
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.
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.
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.
nice looking site! I have a free child theme for Divi @ http://www.divithemeexamples.com/divi-child-themes/
(A blank started child theme and) a coffee shop style child theme. free. enjoy 🙂
gonna check it out today…loading it on http://www.photographer.lexgraphicdesigns.com
thanks my dude, let me know how i can return contribution. peace out from South Florida
I absolutely love this! One small issue I have is my main menu color. I can change it in the customizer but not save it. I t always falls back to default. Any idea?
Hi Philip, sounds weird. I’d get in touch with ElegantThemes support. I’ve never had that issue.
Thanks Lex, glad you could make use of it. Any contribution is great, if it’s a thanks on twitter, facebook or blog post is great and much appreciated.
Question, will this theme allow for text on white as well? The site I need to make must be dark–in general and the home page is dark but there will be some long sections of text on some pages that will need a light background. Is this possible with this theme?
thanks!
With the new version of Divi ie. 2.4 you should be able to create sections where the background is white and text is dark.
Hi,
Can I modify the text box so that it is white for some pages? If so how?
Thanks!
Hi, I’ve downloaded the theme, but when I go to install I’m getting this message:
“The package could not be installed. The theme is missing the style.css stylesheet.
Theme install failed.” and when I unzip the theme i just get a file called: “wordpressphotogallerytheme.wordpress.2014-09-17.xml”
What do I need to do please? Theme itself looks perfect for what I need so eager to get this working 🙂
Just commented about not being able to install >my bad< all working fine looks great thankyou! Just made my day a lot easier.
awesome child theme! good job guys
Great idea! After about 10 minutes, I realized a probably could use the “Custom CSS” file you made, and change HEX #000, or #000000 to whatever color I’d like, let’s say light blue and I’d have close to a light blue website. I’ll check it out soon!
It would be very very nice if you would make a dark Divi 3 Child Theme! 🙂 🙂 🙂
Did you try using the CSS on Divi 3.0 yet? It might work. Just paste it into the custom CSS field in the Divi options panel.
Yes, I did. Unfortunately some text remained black, so it was invisible on the black background.
You can change the text color easily on any block via the divi editor on pages/posts. There’s usually an option to choose either light or dark text. Try that.
There is no function.php. Is this okay?
Can I use function.php for this child theme?
Yes, the functions.php file is often updated by Elegant Themes and should not be included in a child theme. Feel free to test it out. Otherwise you can use the custom CSS.
Please see https://codex.wordpress.org/Child_Themes
“Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. ”
So you should enqueue css using functions.php