How to Create Dark and Light Theme Switcher in Articulate Storyline

Preview

Enhance your Articulate Storyline courses with a standout feature: a dynamic Dark and Light Theme Switcher for the course player! Through custom JavaScript, I’ve introduced two powerful functionalities:

• Automatic System Theme Sync: Your course player adapts seamlessly to the system theme. If your device uses a dark theme, your player follows suit.
• Manual Theme Switcher: Empower your learners to toggle between player themes at will.

Step 1: Auto Theme Sync with Device

Open first slide and set up a JavaScript trigger that executes when the timeline starts on this slide. Paste the JavaScript code:

Step 2: Manual Theme Switching

Create a player tab named “Light/Dark” or something creative. Assign a JavaScript trigger to it. Paste the JavaScript code.

Step 3: Getting the Dark Player CSS

1. In Storyline, click on “Player Properties” => “Color and Effects” => Choose the “Dark” Theme => Click “OK.”
2. Publish your course as “WEB” After publishing, navigate to the published folder and locate “PublishFolder \html5\data\css” Copy the “output.min.css” file and paste it into a separate folder. Rename this copied file to “dark.css.”

Step 4: Getting the Light Player CSS

1. Back in Storyline, click on “Player Properties” => “Color and Effects” => Choose the “Light” Theme => Click “OK.”
2. Repeat the same steps as before to copy the “output.min.css” from the published folder and paste it into a different folder. Rename this copy to “light.css.”

Step 5: Publishing and Sharing

1. Publish: Publish your course as Web or SCORM.
2. Directory Placement: Move your “dark.css” and “light.css” to the parent directory of the published folder, where the “story.html” file is located.
3. Zip and Share: Test your course thoroughly, then zip the entire published folder. Your course is now ready for upload on your LMS and website.

Download Source file