Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Turn LearnDash Focus Mode into Dark Mode
: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);
}
@davewarfel

This comment has been minimized.

Copy link
Owner Author

davewarfel commented Aug 30, 2019

8/29/2019 - Added color to all heading tags (<h1> - <h6>)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.