Button to switch between dark and light player theme on published storyline/rise content

Hi Adebowale, 

You can accomplish this with state-change triggers and a button (like in the android example) in the corner that activates those triggers.  

Hi Holley, I doubt if there's a trigger that can format the slide background and also toggle the player theme. If there's one kindly share. I think it might be possible with JS also.

One option is to use a True/False variable that changes when the user clicks the button.  Everything can be switched based on the state of the True/False variable.  

Another option is to pop-up a new layer when the button is clicked that duplicates the underneath layer, but with the different color palette.

(All of the above is with Storyline in mind.  For Rise, you can use branching and have buttons that link to the different color versions of the course.)

Good one. I think I will use a rectangle shape as the slide board, the button can toggle the light and dark mode. But this won't change the player theme.

Ah, I understand now.  I don't think there is a way to change the default player in the middle of a course, but you can deactivate the default player and create your own version of it on your slides (which can then be changed with the methods above).

Here's what I came up with:

http://www.knowledgeconstruction.com/switch_theme/story.html

In order to do this, I had to publish the course a few times.

Publish your course using the Dark Theme.

Next we need to copy the output.min.css file into another folder. This is located in folder: html5/data/css

Next we need to rename our copied file to: Dark-output.min.css

Now go back to your project, change to the Light Theme and Publish.

Again we need to copy the output.min.css file into the same folder that your Dark-output.min.css

Rename the copied file to: Light-output.min.css

Now I switched my project back to the Dark Theme.

On the master slide, I created two radio buttons and gave them the same button set.

I then set the initial state of the Dark radio button to Selected.

On Click of the Dark radio button executes this JavaScript:

$('link[href="html5/data/css/output.min.css"]').attr('href','Dark-output.min.css');
$('link[href="Light-output.min.css"]').attr('href','Dark-output.min.css');

On Click of the Light radio button executes this JavaScript:

$('link[href="html5/data/css/output.min.css"]').attr('href','Light-output.min.css');
$('link[href="Dark-output.min.css"]').attr('href','Light-output.min.css');

Now I published the course a 3rd Time.

In the published folder, add your two CSS files that we named Dark and Light. Make sure they are in the root folder. The same folder as your story.html file.

This is great - I'm going to test this. Thanks for sharing Russell!

LOL - I posted about this 2 years ago with a video.  😂😂😂

A key difference is that I use a web-object-briefcase" for my css files so I don't have to add anything to the published folders after the fact.

Link

Lol, Great minds think alike.

I must have been off sick that day and missed the post Owen - LOL.

It should scare you if you are thinking like me. LOL 😋

Thank you, Russell, 👏. Exactly what am looking for