Dark Mode Courses and Lesson Theme

You can apply a dark theme to your courses and lessons by adding the CSS snippet below to the "Program Scripts" section of your Custom Code tab. The code snippet applies to all courses in your account; however, it is also possible to apply a specific style to a single course in your account. See the Advanced Custom CSS and Theming article for more details.

<style>
.app__lessons .lesson-container{
    background: #111;
}
.app__lessons
.ui-layout-center{
    background: #282828;
}
.app__lessons
.ui-layout-center{
    background: #181818;
}
.app__lessonse .lesson-info, .app__lessons .lesson-progress{
    display: none;
}
.app__lessons .breadcrumb, .app__lessons  .breadcrumb li:nth-of-type(2):before, .app__lessons  .breadcrumb li:nth-of-type(1):before{
    background: #222; color: #757575 !important;
}
.app__lessons .breadcrumb li:before, .course__the-creator-s-adventure .breadcrumb li:after {
    border-right: 1px solid #434343;
}

.app__lessons 
.lesson-header h1{
   color: #fff;
}

.app__lessons 
.lesson, .app__lessons .lesson-info{
   color: #fff !important;
}
</style>

Below is a preview of what this dark theme looks like when applied to a lesson:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us