LDX Design

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.

Recommended ProductKinsta hosting to boost site speed

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;
    --ld-dark-mode-highlight-color: salmon;
}

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

Recommended Product


Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.

Get 25% OFF Rapyd Today →

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.

Code last updated 31 May 2021.

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

/* 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-button {
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-button:hover,
.learndash-wrapper .ld-focus .ld-focus-header .ld-button:active,
.learndash-wrapper .ld-focus .ld-focus-header .ld-button:focus {
	color: var(--ld-dark-mode-highlight-color);
}

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

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items {
	background: var(--ld-dark-mode-header-bg);
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items::before {
	border-bottom-color: var(--ld-dark-mode-header-bg);
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:hover {
	color: var(--ld-dark-mode-highlight-color);
}

/* Progress Bar */
.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage {
	color: var(--ld-dark-mode-highlight-color);
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar {
	background-color: rgba(255,255,255,0.1);
}
.learndash-wrapper .ld-focus .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
	background-color: var(--ld-dark-mode-highlight-color);
}

/* Main Content Area */
body.ld-in-focus-mode,
body.ld-in-focus-mode div.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);
}

.ld-focus .ld-tabs-content a {
	color: var(--ld-dark-mode-content-text);
	text-decoration: underline;
}
.ld-focus .ld-focus-content a:hover {
	color: var(--ld-dark-mode-highlight-color);
}

/* Breadcrumbs */
.learndash-wrapper .ld-topic-status {
	background: transparent;
}
.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);
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab:hover,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab:active,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab:focus {
	color: var(--ld-dark-mode-highlight-color)
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active::after {
	background: var(--ld-dark-mode-highlight-color);
}

/* Lesson Content */
.learndash-wrapper .ld-table-list .ld-table-list-header {
	background: rgba(255,255,255,0.05);
	border-bottom: 1px solid var(--ld-dark-mode-content-bg);
	color: var(--ld-dark-mode-text-secondary);
}
.learndash-wrapper .ld-topic-list.ld-table-list .ld-table-list-lesson-details .ld-lesson-list-progress {
	border-color: var(--ld-dark-mode-text-secondary);
}

.learndash-wrapper .ld-table-list .ld-table-list-items {
	background: transparent;
	border-color: rgba(255,255,255,0.05);
}
.learndash-wrapper .ld-table-list .ld-table-list-item {
	border-color: rgba(255,255,255,0.05);
}
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview {
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview:hover,
.learndash-wrapper .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview:active,
.learndash-wrapper .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview:focus {
	background: rgba(255,255,255,0.05);
	color: var(--ld-dark-mode-highlight-color);
}

/* Bottom Navigation */
.learndash-wrapper .ld-content-actions > a,
.learndash-wrapper .ld-content-actions .ld-content-action .ld-course-step-back {
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-content-actions > a:hover,
.learndash-wrapper .ld-content-actions .ld-content-action .ld-course-step-back:hover {
	color: var(--ld-dark-mode-highlight-color);
}

.learndash-wrapper .ld-button,
.learndash-wrapper .ld-content-actions .ld-button,
.learndash-wrapper .ld-focus-comment .ld-comment-reply a.comment-reply-link,
.learndash-wrapper .ld-focus-comments .form-submit #submit {
	background: rgba(255,255,255,0.07);
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper .ld-content-actions .ld-button:hover,
.learndash-wrapper .ld-focus-comment .ld-comment-reply a.comment-reply-link:hover,
.learndash-wrapper .ld-focus-comments .form-submit #submit:hover {
	background: rgba(255,255,255,0.1);
	color: var(--ld-dark-mode-highlight-color);
}

/* Comments */
#cancel-comment-reply-link,
.comment-form-reply-title,
.learndash-wrapper .ld-focus-comments .comment-respond #reply-title,
.ld-comment-body p,
.ld-focus-comments p,
#cancel-comment-reply-link,
.ld-focus-comments .logged-in-as a,
.learndash-wrapper .ld-focus-comment .ld-comment-avatar .ld-comment-avatar-author .ld-comment-author-name,
.learndash-wrapper .ld-focus-comment .ld-comment-avatar .ld-comment-avatar-author a.ld-comment-permalink {
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-focus-comment .ld-comment-avatar .ld-comment-avatar-author a.ld-comment-permalink {
	opacity: 0.5;
}
#cancel-comment-reply-link:hover {
	color: var(--ld-dark-mode-highlight-color);
}

.learndash-wrapper .ld-focus-comments #commentform textarea#comment {
	border: 0;
	background: rgba(255,255,255,0.05);
	color: var(--ld-dark-mode-text-secondary);
}
.learndash-wrapper .ld-focus-comments #commentform textarea#comment:focus {
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.08);
	color: var(--ld-dark-mode-content-text);
}

.ld-focus-comments .ld-comment-wrapper,
.learndash-wrapper .ld-focus-comment.bypostauthor>.ld-comment-wrapper,
.learndash-wrapper .ld-focus-comment.role-group_leader > .ld-comment-wrapper,
.learndash-wrapper .ld-focus-comment.role-administrator > .ld-comment-wrapper {
	background: rgba(255,255,255,0.05);
}

.learndash-wrapper .ld-focus-comment.bypostauthor > .ld-comment-wrapper > .ld-comment-avatar img,
.learndash-wrapper .ld-focus-comment.role-group_leader > .ld-comment-wrapper > .ld-comment-avatar img,
.learndash-wrapper .ld-focus-comment.role-administrator > .ld-comment-wrapper > .ld-comment-avatar img {
	border-color: var(--ld-dark-mode-highlight-color);
}

.learndash-wrapper .ld-expand-button.ld-button-alternate {
	color: var(--ld-dark-mode-content-text);
}
.learndash-wrapper .ld-expand-button.ld-button-alternate .ld-icon {
	background: none;
}
.learndash-wrapper .ld-expand-button.ld-button-alternate:hover,
.learndash-wrapper .ld-expand-button.ld-button-alternate:hover .ld-icon,
.learndash-wrapper .ld-expand-button.ld-button-alternate .ld-icon:hover {
	color: var(--ld-dark-mode-highlight-color);
	background: none;
}

.learndash-wrapper .ld-focus-comments__heading {
	border-color: rgba(255,255,255,0.1);
}

/* 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,
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading:active,
.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .ld-table-list-item a.ld-table-list-item-preview:active,
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading:focus,
.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .ld-table-list-item a.ld-table-list-item-preview:focus {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

/* Line Separators */
.learndash-wrapper .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item {
	border-color: rgba(255,255,255,0.1);
}

/* topic/quiz sep */
.learndash-wrapper .ld-course-navigation .ld-sep {
	color: rgba(255,255,255,0.2);
}

/* 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,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview.ld-is-current-item {
	color: var(--ld-dark-mode-highlight-color);
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview.ld-is-current-item {
	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: 3px solid rgba(255,255,255,0.1);
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3 a:hover {
	color: var(--ld-dark-mode-highlight-color);
}
/* Open/Close Icon */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:hover .ld-icon::before {
	color: var(--ld-dark-mode-highlight-color);
}

/* 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: 2px solid rgba(255,255,255,0.1);
}

/* Tooltips */
#learndash-tooltips .ld-tooltip {
	background: #eee;
	color: var(--ld-dark-mode-content-bg);
}
#learndash-tooltips .ld-tooltip::after {
	background: #eee;
}

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

Recommended ProductIntuitive way to create websites with Elementor

Previous

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

Next

Build Custom Styles for LearnDash Quiz Questions

36 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.

  11. Is the dark mode toggle option now included in your plugin?

  12. It would be awesome if you could include the Dark mode button option in you plugin in future updates..
    will be looking forward for it

    • We are still considering creating something that will allow the user to toggle a dark mode for LearnDash focus mode. If we do, right now we’re leaning towards building a separate plugin.

  13. That would be even better
    mark me down for the Pre-order For Agencies & Freelancers 😀

  14. Jessy

    any news on this ?
    even if its a separate plugin its gold 😀

    • Hi Jessy – We have not done anything in terms of building a plugin for this. However, we have updated the CSS to include more elements, as well as a highlight color you can use. That code is available here.

      Also, Lawal-Shittabey has published some free code to do something similar. It does look pretty technical to implement, but you might find it helpful.

  15. Luke

    Thanks for doing this, however I’m still seeing the sidebar (lesson selector) as white in mine (focused mode).

    • You must have some CSS that is overriding the CSS I’ve provided here. I’d need to see one of your focus mode pages to be able to confirm.

      If you’re using any design-related plugins, their settings will likely override this CSS. Also, any custom CSS you have written might override this CSS as well.

  16. Walter

    I have used this articele to implement “Dark Theme” with a few small additional twists. Very usefull, not sure how I can post a screenshot here it does not allow me. At first I tried to do this with the Focus mode sidebar on the right but later on I settled on having ti sidebar on the left with the scrollbar hidden such that it does not destroy the “dark theme”.

    • Hi Walter – You can take a screenshot and upload it to the cloud, then provide a link for us to see it. You can use any screenshot software. You can also provide a share link to any file on Dropbox, Google Drive, etc.

  17. Shadrack

    please which wordpress theme did you use

  18. Beverly

    I dropped the CSS code in place and all the colors changed perfectly except the Progress Bar in main lesson area in Focus Mode (between the lesson title and the content). That bar still shows light gray. I’m using Astra, LearnDash, and Elementor Pro. Am I missing something?

    Thanks!

    • I wrote this code a long time ago so it’s possible that LearnDash or Astra has made a change. It’s also possible that I left out the progress bar CSS.

      I don’t have time to look through the code right now. Sorry.

  19. Hey Dave, this is an amazing feature that I will definitely use in my courses! However, the header area stays white on tablets and mobile. Would you please help to fix it? 😊🙏

    • Hi Iana – So the top-most header is not white for me. If it is for you, it’s likely a theme conflict or some custom CSS that is overriding this CSS.

      If you’re referring to the “previous lesson” and “next lesson” area, I don’t think I included that in this CSS. You can try using this CSS for that area:

      @media (max-width: 768px) {
      .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions {
          background: black;
      }
      }

      Change “black” to any color or hexadecimal value you’d like.

  20. Thank you so much, Dave! I explained myself wrong, but you solved it anyway! 🙂 If you have time, could you please also suggest a tip to modify quiz answers? The conflict is that all the Learndash quiz answer options (e.g. multiple choice) go in boxes, which are light grey in color. When the whole mode switches to dark and the text automatically becomes light as well, the answer options aren’t readable. I found one way to make the text dark, which is adding style with HTML to each answer option, but maybe there is a more efficient way? (I am attaching the link to the page where the issue can be seen, just in case you have the time to look at it). Thank you so much for all your help!! 🙏🙏🙏

    • You can use CSS for that as well. I will warn you though, the more you go down this road, the more messy it will continue to get. Also, whenever LearnDash updates their code, even just slightly, you’ll need to rework this code, and possibly write new code to keep things in line.

      This is partially why I stopped updating CSS like this because LearnDash would change things and not tell anyone, and I would have to rework everything.

      This CSS should help. You can change the color of the background on hover to anything you’d like.

      .single-sfwd-quiz .learndash .wpProQuiz_content .wpProQuiz_questionListItem label {
          background: transparent;
      }
      .single-sfwd-quiz .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label:hover,
      .single-sfwd-quiz .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem label:focus,
      .single-sfwd-quiz .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label:hover,
      .single-sfwd-quiz .learndash .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem label:focus {
          background: rgba(255,255,255,0.06);
      }

Leave a Reply

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