Add Darkmode and Lightmode in your course [Articulate Storyline 360]

The applications as Facebook, Youtube, ...etc when you update any one of them you will find a dark mode feature because the large application try to make the user experiences more easily so they add this feature because of the huge demand for it from users.

A lot of users when they use any software, they tend to use dark mode because they see it very amazing and They are especially favored in cases where the user is in front of a screen for extended periods of time.

So when I build an E-learning course in the storyline, I wanted to add some features as Dark mode to make the learner more comfortable when he learns this course.?

First, let’s talk about Articulate storyline 360?

One of the important software to creating E-learning courses where provides a lot of features that help E-learning developers to create the course as interactions, assessments,...etc?

in this tutorial we will add a dark mode feature in the course we will learn in this tutorial:-

• The user interface for Storyline 360
• Working with layers?
• Adding variables
• Working with triggers?

The user interface? for Storyline 360

It’s a user interface for Storyline when you open it?

1.this part contains some instructions as:-

• New project: to create a blank project?
• Record screen: if you want to take a video recorder and import it to the storyline
• Import: you can import files into the storyline from PowerPoint,quiz maker, … etc?
• Team slides: if you and your team will work on the same project

2.This part contains the recent files if you are working on previous projects

We will choose the first instruction (New project)

• It displays scenes and slides to see the big picture for the course
• Tabs and options we will recognize later

We will double click on the slide to open slides

• Click on the Design tab
• Click on story view to edit size for slides
• Remove the mark on the "lock aspect ratio"
• Change width to 1920px and height to 980px
• Click on OK

before we start in the course let's determine the pallets for dark and light

Now everything is ready to start in our course and add Dark mode feature

Layers in Storyline

Use slide layers to create interactions and branched scenarios in your Storyline 360 courses. Layers can display additional content on a slide at certain points on the timeline or in response to learners' actions.

let's add a new layer for dark mode and double click on each layer to change the name for the layer

in the base layer, add some objects like text boxes and 2 buttons

in the dark mode layer, add the same object with new colors

according to the colors palette.

Adding variables into the project:-

A Variable is a value that can change, depending on conditions or on information passed to the program.

If you created variables advance you will find variables in this

to create a new variable click on this button

Pop up will display

• Name: you will choose a name for the variable as "isDarkMode"
• Type: You will find 3 types

-Text: if you store string value on the variable

-Boolean: if you store true or false values

-Number: if you store the values of a number

• Click on ok

let's add a new slide

and add a new layer again in this slide with the name dark mode

let's go to add triggers to the toggle button but first let's think about what do you need to happen when the user clicks on the button

• In light mode: show the dark mode layer
• in dark mode: hide the dark mode layer to show the base layer (light mode)

Working with triggers:-

Triggers make things happen. They're the keys to creating activities in Storyline 360. And we made them super easy to use, so you can build interactions without any coding at all. Just choose an action and decide when you want it to occur. For example, you might change the state of a character when the learner clicks a button.

The user interacts with the button or any object then action happened (For example when the user click the layer will hide)

let's know more about the trigger pop up

• Action will have happened
• User interactivity with the objects in slides

So we select show dark mode layer when the user click on the toggle button in the light mode layer and hide the layer when the user clicks on the toggle button

We accomplished a great part in this course but we have a bug imagine with me the user moves to the next slide in light mode then click on the toggle button and return the previous slide it will return to the base layer so we need to add trigger into the timeline is started

and here comes the benefit of the variable which we created later

• We will add a trigger into each slide
• Show layer dark mode
• when the user timeline starts
• if isDark variable is true

and add trigger into toggle button in light mode to set the value to true and when clicking on toggle button in the dark mode it will set the value to false.

Finally, we finished this tutorial this process will take more time but it will provide a better learning experience for learners and make them interact with the course by best for them.

Check it out in Storyline review 360.