LDX Design

LearnDash Design & Tutorials

LearnDash focus mode dark mode example

Create a Dark Mode for LearnDash Focus Mode

A few people have asked me if I could create a “dark mode” for LearnDash’s focus mode. The answer is yes, but it does come with a few caveats. Overall though, I was able to replicate the same colors in YouTube’s dark mode and apply them to the LearnDash Focus Mode experience.

LearnDash focus mode dark mode example

If you’re interested in using a dark mode with LearnDash, I’ll provide you with the custom CSS below.

NOTE
Dark mode works best with the Design Upgrade for LearnDash plugin enabled. Also, the pro version will override these styles, so double-check your settings if you see something that doesn’t look right.

Dark Mode Caveats

  • This only works in LearnDash focus mode. Course pages & all other LearnDash screens are not yet supported.
  • This applies to all users. There is no on/off switch for your users to decide.
  • This applies to all focus mode pages. You cannot pick & choose which ones get dark mode and which ones do not.
  • It’s still a work in progress, and won’t be perfect. But it will get you about 80% of the way there. Some LearnDash elements still need to be addressed.
  • If you use a page builder for any of your focus mode pages, it is your responsibility to make sure the colors are appropriate. All page builder styles will override the styles I’m providing.
  • Other LearnDash plugins might add styles to their own elements, and those elements may show up in focus mode. Currently, third-party plugin styles are not supported in this dark mode CSS.
  • Your theme could be overriding some of the CSS. It’s impossible for me to account for all themes. If you notice an issue, please leave a comment and I’ll try to adjust the code accordingly.

Now that all the bummers are out of the way, let’s talk about the good stuff 😀.

👩‍🎨 Customizing Dark Mode

I made the LearnDash dark mode CSS customizable. This means you can change the colors to create your very own rendition of dark mode.

The first few lines of CSS are called custom properties (aka: CSS variables). You update them once at the top of the code, and they will apply to multiple areas throughout the styles.

Their names are pretty self-explanatory. All you need to do is change the color value. Here’s what the custom properties look like:

:root {
    --ld-dark-mode-header-bg: #272727;
    --ld-dark-mode-sidebar-bg: #1c1c1c;
    --ld-dark-mode-content-bg: #121212;
    --ld-dark-mode-content-text: #fff;
    --ld-dark-mode-text-secondary: #aaa;
}

If you wanted the header background color to be pure black, you would change this line:

--ld-dark-mode-header-bg: #272727;

to this:

--ld-dark-mode-header-bg: #000;

All I did was change #272727 to #000 (#000 is the color code for black).

DO NOT change the names; only change the color values.

👨‍💻 LearnDash Focus Mode Dark Mode CSS

Without further ado, here’s the CSS code to take LearnDash’s focus mode to the dark side 🧟‍♂️.

Also, you can copy/paste/bookmark this gist.

:root {
	--ld-dark-mode-header-bg: #272727;
	--ld-dark-mode-sidebar-bg: #1c1c1c;
	--ld-dark-mode-content-bg: #121212;
	--ld-dark-mode-content-text: #fff;
	--ld-dark-mode-text-secondary: #aaa;
}

/* Header Area */
.learndash-wrapper .ld-focus .ld-focus-header,
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo{
	background: var(--ld-dark-mode-header-bg);
}
.learndash-wrapper .ld-focus .ld-focus-header {
	border: 0;
	color: var(--ld-dark-mode-content-text);
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	border-color: rgba(255,255,255,0.1);
}

/* Main Content Area */
body.ld-in-focus-mode,
body.ld-in-focus-mode .learndash-wrapper {
	background: var(--ld-dark-mode-content-bg);
}

.ld-focus .ld-focus-content {
	color: var(--ld-dark-mode-content-text);
}

.ld-focus .ld-focus-content h1,
.ld-focus .ld-focus-content h2,
.ld-focus .ld-focus-content h3,
.ld-focus .ld-focus-content h4,
.ld-focus .ld-focus-content h5,
.ld-focus .ld-focus-content h6 {
	color: var(--ld-dark-mode-content-text);
}

/* Breadcrumbs */
.learndash-wrapper .ld-breadcrumbs {
	background: rgba(255,255,255,0.05);
	color: var(--ld-dark-mode-text-secondary);
}

/* Tabs */
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
	color: var(--ld-dark-mode-text-secondary);
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation::after {
	background: rgba(255,255,255,0.05);
}

/* Sidebar */
.learndash-wrapper .ld-focus .ld-focus-sidebar,
/* Topics List */
.learndash-wrapper .ld-focus-sidebar .ld-table-list .ld-table-list-items {
	background: var(--ld-dark-mode-sidebar-bg);
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading,
.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .ld-table-list-item .ld-table-list-title a,
.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .ld-table-list-item a.ld-table-list-item-preview {
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading:hover,
.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .ld-table-list-item a.ld-table-list-item-preview:hover {
	background: rgba(255,255,255,0.1);
	color: var(--ld-dark-mode-content-text);
}

/* Sidebar: Current Item */
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading,
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-lesson-title {
	color: var(--ld-dark-mode-content-text);
	background: none;
}
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading {
	background: rgba(255,255,255,0.1);
}

/* Sidebar: Course Heading */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	background: var(--ld-dark-mode-sidebar-bg);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Sidebar: Section Headings */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading {
	color: var(--ld-dark-mode-text-secondary);
	border-top: 1px solid rgba(255,255,255,0.1);
}

Where to place the CSS

Ideally, it’s best to place this code into your child theme’s style.css file, after any other focus mode CSS changes you have made.

However, if you don’t know what a child theme is, or have any idea how to edit it, you can use the Customizer instead:

  1. In your WordPress admin area, navigate to Appearance > Customize
  2. Click on Additional CSS at the bottom
  3. Paste the CSS in there
  4. Click the Publish button at the top

I plan to come back to this idea in the near future to make improvements to the code, but this is as far as I could take it for now. If you’ve implemented this dark mode CSS on your LearnDash site, I’d love to hear about it (please post screenshots).

Previous

How to Enable Elementor Templates for LearnDash Courses, Lessons & Topics

6 Comments

  1. Michael

    Do you think this could be something you add to your pro plugin that is just a toggle on and off by the user , based on if they are say doing learning at night or if they want light mode during day

    • Hey Michael,

      I’ve definitely thought about it, and am still considering it. There are several things I need to work through, like where to place the toggle, and how to store/save the user’s preference (as an option tied to the user’s account, or as a browser cookie).

      Right now my plugin only adds CSS; it does not edit the LearnDash templates. In order to place a toggle for the user somewhere, I’d have to edit the templates. This adds a lot of complexity.

      So yes, I’m thinking about it, but I can’t provide any guarantee or ETA on if/when it might happen.

  2. Milad Sayad

    hi dave
    thanks for your useful article.
    unfortunately I couldn’t find how to use this css
    I tried to paste it in appearence>css but wp showed me errors.
    can you please help me how to use it?
    I’m just a beginner and I’d love to use this css for my website
    appreciate it

  3. Milad Sayad

    in example when I added this line:

    :root {
    –ld-dark-mode-header-bg: #272727;
    –ld-dark-mode-sidebar-bg: #1c1c1c;
    –ld-dark-mode-content-bg: #121212;
    –ld-dark-mode-content-text: #fff;
    –ld-dark-mode-text-secondary: #aaa;

    wp won’t allow me

    • Appearance > Customize is the correct place to add it. Click the “Additional CSS” tab and add it there.

      The reason WordPress is saying you have an error is because you left out the final curly bracket }. Go back and look at the code. There’s a curly bracket on the line immediately following --ld-dark-mode-text-secondary: #aaa;.

  4. Milad

    hi dave
    I’m still waiting for your response
    I appreciate your helping
    thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén