Creating Light and Dark Version of E-Learning Templates #249

Using Light and Dark E-Learning Templates #249: Challenge | Recap

Challenge of the Week

This week, your challenge is to create light and dark versions of a slide or series of slides. Feel free to rework an existing challenge demo to create the contrasting design theme or come up with an entirely new project.

Using Theme Fonts and Colors Like an E-Learning Boss

Understanding theme fonts and theme colors is essential to working efficiently and maintaining a consistent design throughout your course.

They force you to be intentional about the design choices you make. And they make it super easy to update your entire course design in few clicks. Learn them. Love them. Use them.

If you're new to course design or haven’t used themes much in PowerPoint or Storyline, let us know so we can help you out.

Using Theme Fonts and Colors Like an E-Learning Boss

Last Week’s Challenge:

To help shine light on this week’s challenge, check out the extreme challenge examples your fellow challengers shared over the past week:

Extreme E-Learning Challenge #247: Challenge | Recap

Wishing you a light or dark week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

64 Comments

Jodi Sansone

7 months ago09/08/19 at 6:37 am (UTC)

Frenchy Yoga Poses Demo: https://bit.ly/2kznXTc Download: https://bit.ly/2ky1A0n I wasn't sure what to do with this challenge so naturally French Bulldogs doing Yoga seemed like a good idea. I created a one slide color study using a gray scale color theme with one accent color. Its got a couple variables and a lot of state changes to mix and match the backgrounds, font colors, and dogs . Inspiration came from YouTube where I was watching some hilarious videos of talking french bull dogs. Here are a couple links: Walter Jeffrey: https://bit.ly/2lBScsX Cashew: https://bit.ly/2k5PVWm

7 months ago09/09/19 at 6:02 am (UTC)

Cute and a nice contrast between the two themes. I don't think I can pick a favourite colour scheme, which is always a good sign.

7 months ago09/09/19 at 8:35 am (UTC)

I guess the best way how to show the upward dog pose is by showing it with a dog! Really cute template, Jodi! And I recently discovered Walter Jeffrey too, he is hilarious! :)

7 months ago09/09/19 at 2:11 pm (UTC)

LOL! When I get sick of all the nasty venting online I look for a Walter Jeffrey video. Cashew is cute too, and if you like complaining dogs, Zeus the Lazy Huskie is also quite the star. I posted this before I saw the examples above so I think I'll try another more utilitarian template...I'll probably see a lot of inspiration in my Faster Course pack! :)

7 months ago09/10/19 at 11:56 am (UTC)

Haha thanks, now I have something to watch while I wait for the next challenge entries! I can't wait to see more creative examples!

Jonathan Hill

7 months ago09/09/19 at 9:43 am (UTC)

Hello! This was more difficult than it first seemed and my way into this challenge was to imagine two very contrasting user personas. GOTH or POP? Demo: http://bit.ly/elhc249 Download: http://bit.ly/elhc249dl You can toggle between the themes using the 'swap' icon in the top right hand corner of each slide. I have a few things going on in my life offline this week, so I won't be as active in the comments as usual, apologies. Think I've figured out how to create replicable 'Themes' within SL360, as you'll see from the download, but would appreciate any feedback you have on this. Have a great week everyone!

7 months ago09/09/19 at 2:30 pm (UTC)

Wow, I haven't thought about TigerBeat in a million years. I used to ride my bike to the Rexall drug store in DesPlaines, IL USA, every week to see if a new edition was available. I wasn't really an Osmonds person--I liked Tom Jones, Rod Stewart, The Jackson Five and Bobby Sherman. I needed to go to college (AKA "university :)) before I heard of goth and the Damned. Now about your demo--loved the two color schemes and how you showed them side by side. It was fun to navigate through and learn about the two groups. Have a great "offline" week!

7 months ago09/09/19 at 4:55 pm (UTC)

Thanks Jodi. Between this and 'Rolling Stone' magazine in my demo last week, I hope you've enjoyed your trips down Memory Lane!

7 months ago09/10/19 at 11:58 am (UTC)

This is a great idea for the challenge!

7 months ago09/11/19 at 5:27 pm (UTC)

Very fun concepts as usual! Nice work :)

Brooke Winston

7 months ago09/09/19 at 3:36 pm (UTC)

Hi all! Here's is my take on this challenge - light vs dark interior design! Demo: https://360.articulate.com/review/content/85d336b8-5481-438f-9d98-ca1f71aba907/review Let me know what you all think! :)

7 months ago09/09/19 at 3:42 pm (UTC)

I love this! Would you be willing to share your source file please? TY!

7 months ago09/09/19 at 4:29 pm (UTC)

Nice work. Very timely for me as I am furnishing a new apartment. I gravitate toward the darker schemes, but I am trying to move away from my comfort zone for a new place and town. Thanks for posting.

7 months ago09/10/19 at 12:01 pm (UTC)

This looks great! Nice examples for each color scheme!

Nick Russell

7 months ago09/09/19 at 5:27 pm (UTC)

Here is my take on this Light/Dark challenge http://benchmark-learning.com/darklight/story_html5.html Source file: http://benchmark-learning.com/darklight.zip

7 months ago09/12/19 at 8:56 pm (UTC)

Very nice example, Nick. I like how the selected diamonds appeared in the middle.

Syed Amjad ali

7 months ago09/10/19 at 5:03 am (UTC)

Do learner has the power to change the user interface that enhances the learning process? In this sample, we will see a dynamic user interface where the learner has accessibility to change the color of the theme of the eLearning course, as learner can be provided with two color theme options, light and dark to choose. Click the link to explore: https://www.swiftelearningservices.com/dynamic-graphic-user-interface-gui-to-enhance-elearning-experience-in-articulate-storyline-2/

Ernesto Yannini

7 months ago09/10/19 at 11:04 pm (UTC)

Hello! This time I bring to you our voices catalog. The quality to highlight is that the audio doesn't stop when the background is changed. Take a look! http://odas.we-know.net/demos/odas/Challenges/RetoLightDark/story_html5.html

7 months ago09/11/19 at 2:32 am (UTC)

Beautiful. So clean and simple. Both versions work very well. I really like the animation on the microphone icons.

7 months ago09/11/19 at 10:34 pm (UTC)

Hey thanks Jodi! Great you liked it! Clean and simple sometimes is the best way.

7 months ago09/12/19 at 4:51 pm (UTC)

Very well done. How did you make the animations on the microphones?

6 months ago09/19/19 at 1:26 pm (UTC)

Thanks! Microphones' animations were made on after effects (;

7 months ago09/12/19 at 8:58 pm (UTC)

Love the layout. Well done!

6 months ago09/19/19 at 1:27 pm (UTC)

Thank you!

Jodi Sansone

7 months ago09/11/19 at 2:30 am (UTC)

Dark and Light Course Starter (NYC Theme) Demo: https://bit.ly/2kE16WA Download: https://bit.ly/2lOXSzz Here's something a little more utilitarian than dogs doing yoga. I made three slides for a dark/light course starter: welcome page, tabs, timeline. I didn't know until today that you can apply different color schemes to different slides within the same project. I used a custom dark theme (with a touch of Living Coral) and one of my favorite built -in themes (Foundry). All the photos came from the Articulate library and they work pretty well with each color theme. The timeline slide is adapted from the Articulate template library. Have a good rest of the week!

Holley Berley

7 months ago09/11/19 at 3:59 pm (UTC)

I had a tab slide on hand so I created a dark version to go with: https://storage.googleapis.com/scorm-files/ColorVariation/story_html5.html Added some music to help the theme of each version :)

7 months ago09/11/19 at 5:31 pm (UTC)

Great job with music changes, and the thunder! Both looked very nice.

7 months ago09/11/19 at 6:24 pm (UTC)

That turned dark really quickly. Great job!

Candice Pitman

7 months ago09/11/19 at 5:25 pm (UTC)

Hi all, in thinking of a light and dark template I decided to go with turning on the light! Can you help me find my keys? http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1dkgl5clu9p614qv7201ukgk6r9/story_html5.html?lms=1

7 months ago09/11/19 at 6:14 pm (UTC)

Nicely done, Candice! Very creative approach!

7 months ago09/11/19 at 7:26 pm (UTC)

Very cute!

Samuel Apata

7 months ago09/11/19 at 6:20 pm (UTC)

Really cool entries so far :) Here's a quick LEGO construction you can make your own. Demo: https://360.articulate.com/review/content/9170d5ba-86e0-47b2-b8f4-14570d2dc19f/review Download: http://samuelapata.com/downloadmanager/click.php?id=51

7 months ago09/12/19 at 2:41 am (UTC)

Always impressed, Samuel! You always manage to take the theme up a notch.

7 months ago09/12/19 at 1:37 pm (UTC)

Thanks Nyla! Your words are kind :)

7 months ago09/12/19 at 7:21 am (UTC)

Brilliant!

7 months ago09/12/19 at 2:54 pm (UTC)

That was fun...how did you accomplish the color changes? Random number variable attached to state changes? I had fun making all my creative decisions.

7 months ago09/12/19 at 3:27 pm (UTC)

Yes Jodi, I created a random number variable (RNV) for each shape, then set a trigger to increase the number by 1 on shape click. I also added other triggers to change the state per click. Another trigger sets the RNV back to 0 when it goes over 4. One final trigger sets the state back to Normal when the RNV is 0. I'll share my source file later today. Thanks!

7 months ago09/12/19 at 9:00 pm (UTC)

Wow, a super creative approach. Who doesn't love to customize??

Vesela Georgieva

7 months ago09/11/19 at 6:31 pm (UTC)

Hi all, For my submission this week I used a pre-made animated template. However, I chose a different color palette than the original, changed the colors and added the text manually in Articulate Storyline 360. I used the same colors in both versions of the slide, but I tried to "swing the mood" changing the primary and secondary colors. You can have a look at my light/dark slide here: https://vesela-georgieva.com/projects/light-dark-theme-articulate-storyline/story_html5.html.

7 months ago09/12/19 at 9:02 pm (UTC)

Enjoyed your submission, Vesela. :)

7 months ago09/13/19 at 7:06 am (UTC)

Happy to hear that, Holley.

Nyla Spooner

7 months ago09/12/19 at 2:39 am (UTC)

Light or Dark (slide/drag to choose your variation) Demo: http://bit.ly/ELH249 Blog post: https://www.nylalxd.com/post/elhchallenge-249 I used the slider interaction to creating a swipe transition between the two slide versions. Inspired by Jonathan Hill's submission from a couple weeks ago, and Michael Hinze's submission from Challenge #100. The slider interaction is still a little buggy sometimes. If you have any feedback, it's more than welcome! Especially if you're looking at it on mobile. Thanks for clicking :)

7 months ago09/12/19 at 3:26 am (UTC)

I really love the slider function. It wasn’t buggy for me. I want to include that in a future project. I liked the ending after I clicked the home button haha!

7 months ago09/12/19 at 4:41 am (UTC)

Good to hear, thanks for testing it for me :). Will talk about it in the livestream, for sure!

7 months ago09/12/19 at 7:19 am (UTC)

Nice 'swipe' effect Nyla. Thanks for the namecheck too. Sliders need more love!

7 months ago09/12/19 at 1:42 pm (UTC)

I agree with Jonathan, nice swipe effect. I just realized that was done with a slider. Super sleek!

Vesela Georgieva

7 months ago09/12/19 at 7:31 am (UTC)

Hi again, :) I used the Velocity theme to create mini light and dark templates. I picked similar color palettes originating from the red-green-grey range for both templates, and I used images with light and dark background. My idea was to show how related colors and pictures can look and feel differently. I'd appreciate your feedback. :) Here is the link to my submission: https://vesela-georgieva.com/projects/italian-food-light-dark-template-articulate-storyline/story_html5.html. Best, Vesela

7 months ago09/12/19 at 1:45 pm (UTC)

Cool and yummy template :)

7 months ago09/13/19 at 7:06 am (UTC)

Thank you, Samuel. :)

Andrzej Jabłoński

7 months ago09/12/19 at 9:20 pm (UTC)

I've created a template for a menu. The trick here is to use the text variables. You can change the title of each section by changing the variable value so no need to copy the title multiple times. Here is the inspiration for text animation: https://tympanus.net/Development/TextTrailEffect/ Project in action: https://storylinec.s3.eu-central-1.amazonaws.com/SLC+%23249/story_html5.html Download: https://storylinec.s3.eu-central-1.amazonaws.com/SLC+%23249/dark_light+menu.story

Alex Jinca

7 months ago09/13/19 at 7:53 am (UTC)

Hi All! Great examples, everyone! This is my first challenge, and I though to break the ice with a microgame I developed, that has a light/dark button feature included in it. The development started on a dark background and once I got to test it, I thought...hmm, what about accessibility, what if someone would be more comfortable doing this little game of mine on a light background? By that point the mountain of triggers and layers that went into this thing was already in place, so the job of replicating everything on a light theme was fairly easy. Feel free to check it out! :) Here is the link in action: https://filedn.com/layUfATUCp200BIaKm5jwWj/Demos/AJsELCs/%23249/PM%20Stages%20Gamification%20Demo/story_html5.html Thanks! Alex

6 months ago09/24/19 at 11:11 am (UTC)

Welcome to the challenges, Alex! Can you cross-post your crossword game in our crossword challenge: https://community.articulate.com/articles/using-crossword-puzzle-games-in-elearning/ I updated the recap to feature your work: https://community.articulate.com/articles/dark-and-light-design-ideas-for-elearning-template#AlexJinca

6 months ago09/25/19 at 8:29 am (UTC)

Hi David! Thanks for the update on the recap and adding me in the list. I've added my crossword game in the crossword challenge, thanks for sending me the link.

Aman Vohra

7 months ago09/13/19 at 5:43 pm (UTC)

Hello Everyone! Created a simple True or False Quiz with 6 questions and 2 UI Modes to choose from. HTML5 Output: http://www.amnvohra.com/projects/true_false_quiz/story_html5.html Hope you all like it! Comments and suggestions are most welcome :) Thanks! AmanV

6 months ago09/24/19 at 11:11 am (UTC)

Hey Aman - Thanks (as always) for sharing your work in the challenges. Recap updated: https://community.articulate.com/articles/dark-and-light-design-ideas-for-elearning-template#AmanVohra

6 months ago09/25/19 at 8:30 am (UTC)

Thank You!!!! for including my work in the recap, you are the best!! :)

Farah Azadeh

7 months ago09/14/19 at 3:51 am (UTC)

The Two Sides of Tupac https://azadehdemo.s3-us-west-2.amazonaws.com/portfolio/Tupac%20Light-Dark%20Challenge/story_html5.html

6 months ago09/24/19 at 11:18 am (UTC)

I like the split-screen menu design, Farah! Great work as always. Here's a link to your example in this week's recap post: https://community.articulate.com/articles/dark-and-light-design-ideas-for-elearning-template#FarahAzadeh

Paula Rademacher

6 months ago09/16/19 at 1:04 pm (UTC)

This is my first time doing a challenge. My biggest obstacle was deciding what to do! Nothing too sophisticated, but a simple spin on light and dark options for a science-based module. http://elearning.adroitt.com/eLearning_Challenges/Light_Dark_Template/story_html5.html

6 months ago09/24/19 at 11:20 am (UTC)

Welcome to the challenges, Paula! Thanks for sharing this week. I updated the recap to feature your light/dark example: https://community.articulate.com/articles/dark-and-light-design-ideas-for-elearning-template#PaulaRademacher

Bailey Kramp

6 months ago09/25/19 at 2:43 pm (UTC)

Here's my version of light/dark! I created a few basic template slides (with some inspiration from Canva.com on the graphics), and made a light version and dark version. Demo: https://360.articulate.com/review/content/8b6c5f00-1919-492a-b512-5d6e63731a4d/review

Richard Watson
Hero

5 months ago10/17/19 at 9:01 pm (UTC)

"Just" under the wire and only a month late! Here's a little something I created this morning. Enjoy. I'll leave it here to see if David really does check back on the old posts! :) Creating Light and Dark Versions of E-Learning Templates #249 - Check out my Jazz Masters demo. https://tinyurl.com/yxba7oa7

David Anderson
Author

4 months ago11/30/19 at 3:04 pm (UTC)

Hi Everyone - the recap for this week's challenge is now current: https://community.articulate.com/articles/dark-and-light-design-ideas-for-elearning-template/ If you shared an example or download that's not included, please let me know so I can update the recap. Thanks!

Hoke Huss

2 months ago01/29/20 at 5:17 pm (UTC)

Here's a quick entry for Light and Dark... https://360.articulate.com/review/content/78afd2e5-5229-4fe0-b8dd-27e9f426c68a/review

Creating Light and Dark Versions of E-Learning Templates #249

Challenge of the Week

Using Theme Fonts and Colors Like an E-Learning Boss

Last Week’s Challenge:

New to the E-Learning Challenges?

Related Content

How are You Using Text and Images in E-Learning Design? #250

20 Dark and Light Design Ideas for E-Learning Templates #249

3 Timesaving Tips for Customizing Content Library 360 Templates

64 Comments