How to Create Dark and Light Theme Switcher in Articulate Storyline

How to Create Dark and Light Theme Switcher in Articulate Storyline
How to Create Dark and Light Theme Switcher in Articulate Storyline

Elevate your Articulate Storyline courses with an exciting feature: a dynamic Dark and Light Theme Switcher for the course player! With custom JavaScript, I’ve unlocked two incredible 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.

Ready to make this magic happen? Let’s dive into the streamlined steps, or you can watch the detailed guide in the video below.

Step 1: JavaScript Implementation

  1. Open the master slide and set up a JavaScript trigger that executes when the timeline starts on this master slide. Paste the JavaScript code.
  1. Create a player tab named “Light/Dark” or something creative. Assign a JavaScript trigger to it. Paste the JavaScript code.

Step 2: 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.”
How to make Dark and Light Theme Switcher in Articulate Storyline

Step 3: 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 4: 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.

Note: Watch the video for a smooth walkthrough of each step.

Share this article
Shareable URL
Leave a Reply

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

Read next