13 Replies
Adebowale Aduloju
Holley Berley

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.

Holley Berley

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.

Adebowale Aduloju
Holley Berley

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.

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.

Russell Killips

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.

Adebowale Aduloju
Russell Killips

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.

Thank you, Russell, ๐Ÿ‘. Exactly what am looking for