LearnDash Design & Tutorials

LearnDash focus mode dark mode example

Create a Dark Mode for LearnDash Focus Mode

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

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

Next

Build Custom Styles for LearnDash Quiz Questions

17 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

  5. Milad

    hey Dave
    I’m grateful for your help
    just one other question
    could you please tell me how to add “next lesson” button in the header with focus mode? like yours in this theme
    thanks again

    • That should be there by default. That’s a native LearnDash feature. I didn’t do anything special to make that appear.

      As long as there is another lesson after the current one you’re on, it should be there.

  6. I’m impressed by your plugin and the reasonable price. I may get it at some point for my site.

    If you are able to add a dark mode option, that would be a big selling point for me–especially if it has dark mode default colors (like the ones you’ve chosen for your CSS code listed here) but also allows the website designer to easily change those colors similarly to how the main design upgrades work with using your plugin. I would be quite interested in a dark mode that I could add with my dark blue branding.

    I think the toggle option in the BuddyBoss theme for LearnDash is pretty good.
    Video link at time 11:17: https://www.youtube.com/watch?v=-EQsOiOxyC4&t=11m17s
    I just don’t like how BuddyBoss broke my site when I installed their free theme to try it out, and I had to roll back to a backup of my site to fix it. I’d much rather have a dark mode option available through a plugin like yours, rather than risk my site to the bloat that seems to be in the BuddyBoss theme.

    I’m not sure whether dark mode would be best to use a cookie or user profile option, but I think it is best if dark mode is in an easy to toggle location, rather than hidden in a menu, so that the user can change it based on the time of day. I usually like dark mode off during the day, but I like it on at night. Of course, if a dark mode were in a menu, it might not bug other people who have less interest in implementing it.

    • Thanks for taking the time to write such a detailed comment. I really appreciate your insight.

      I agree that BuddyBoss does a nice job with their implementation of dark mode.

      When I do get around to adding a dark mode option in Design Upgrade Pro, I will most likely include at least 3 color options (background, text & accent colors). I haven’t made any decisions yet, but this is what I’m currently considering.

      I’m leaning towards the cookie option for a few reasons:

      1. People might prefer dark/light modes on different devices, so they can set their mobile experience to dark mode and keep their desktop experience as-is. Or vice-versa.
      2. I could add something to the [ld_profile] shortcode, but not everyone uses that for a profile. Because there are so many third-party plugins people use with LearnDash, I’d have to write a ton of code to try and account for every possible type of user profile people are creating. A toggle option in Focus Mode is a lot more practical to implement.

      I also appreciate your comments about an easy-to-find toggle vs. hiding it in the menu. That’ll be a tough decision. It’ll for sure be better off in the menu on mobile, but I’m not sure how I’ll handle it on desktop. I might post a few options and ask for feedback before I go live with it.

  7. Elvys Scotti

    Hi guys. I was looking for a dark mode plugin for WP and I found this toggle switch button on-ff for night mode, with HTML, CSS, and JS.

    https://codepen.io/KaioRocha/pen/MdvWmg

    Maybe it’s interesting for you.
    If you make it, don’t forget to send me a free license haha.
    Cheers.

    • Hey Elvys — I appreciate you sending this our way. They use some nice tactics in their implementation, but unfortunately, to make this compatible with WordPress and/or LearnDash, it requires A LOT more work.

      Their dark mode simply changes the background color, text color and toggle switch color. For this to work for WordPress, one would have to update a ton of CSS throughout the entirety of the WordPress site (which differs with every single theme, and the plugins that a site is using). It’s a monumental task for a developer to build one that works for “WordPress.” I really think it’s up to the theme developer to provide this, as so much of the CSS is theme-dependent.

  8. Sugata Ahad

    Hi Dave!
    Can you suggest something for the [id profile] This is the only part I am not able to solve as of now 🙁

    • Hi Sugata — Sorry, but that would require a lot of CSS and I don’t have time to write it at this time.

  9. Sugata Ahad

    Hi Dave! Thank you for the honest reply. I did find an alternative by not using ld profile 😀 Thanks again

  10. Sugata Ahad

    Hi again Dave! Any idea how to change the color of the quiz options? Everything seems great in focus mode but the quiz still remains white 🙁

    • Ideas, yes, but I don’t have time to look up the CSS. LearnDash quizzes use their own set of CSS styles, so they need to be addressed in addition to just focus mode. It’s essentially like inserting another plugin’s content onto a page.

      A skilled CSS developer should be able to do it for you in 20 minutes or so.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén