I’m a big fan of dark mode—for my phone, internet browser, and computer applications—and was inspired to try my hand at creating an e-learning course available with both options, light mode and dark mode. While I could just create two different versions of the same course, that would be a lot to manage, update, and track. So I challenged myself to come up with a creative solution that included both versions in a single course.
View full project in action | Download
Let me walk you through my process so you can learn how to quickly create your own light mode/dark mode course.
1. Create 3 Scenes
Start by creating three scenes and naming them accordingly:
- One for the introduction slide
- One for light mode
- One for dark mode
2. Insert a Content Library 360 Template
An easy way to get started is by opening up Content Library 360 and selecting a template you like. For my template, I chose the Illuminate theme.
Of course, if you prefer, you could also build your own slides from scratch.
3. Add Your Content
From there, customize the slide templates with images from Content Library 360 and pop in your content.
4. Duplicate Your Slides
Once you’ve created one version of the course—in my case the light mode version—you’ll want to duplicate them and put them in the dark mode scene you created earlier.
5. Update the Background & Text Colors
From there, all that’s left to do is change the background and font colors to align with a dark theme.
Pro tip: To change the background of multiple slides all at once, simply select the slides you want to modify in Story View, then right-click and choose Format Background.
6. Create a Branching Slide
Once you’ve got both versions of the course, you need to add a menu slide where learners can select which version of the course they want to take.
To do this, add a slide to the introduction scene with two buttons: one for Light Mode and another for Dark Mode. Then, create two triggers—one to jump to the light mode scene when the learner selects Light Mode, and another to jump to the dark mode scene when they select Dark Mode.
7. Add LMS Reporting Options
Finally, you’ll need to set up the reporting options so that no matter which version of the course the learner takes, their score will be reported correctly on your LMS. Thankfully, this is super-easy to do using the advanced quiz tracking feature in Storyline 360.
Simply open the Design tab on either of the final quiz results slides and select the LMS Tracking button.
This will open up the LMS tracking options window. From there, choose the option to mark the course as complete when a learner completes a quiz and select the results slides for both versions of the quiz.
That way, whichever version of the quiz the learner completes is the one that’s reported to your LMS.
More Resources
It’s as simple as that! In no time at all, you can create a more custom learning experience. I hope this inspires you to create your own light mode/dark mode course.
To see more inspiring dark and light design ideas, check out this e-learning challenge: 20 Dark and Light Design Ideas for E-Learning Templates #249
And if you want to learn more ways to customize Content Library 360 templates, take a look at these tips: 3 Timesaving Tips for Customizing Content Library 360 Templates.
Want to create your own light mode/dark mode course, but don’t have Articulate 360? And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.
Published 4 years ago
Version 1.0
