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.

65 Comments

Jodi Sansone

almost 2 years 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

almost 2 years 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.

almost 2 years 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! :)

almost 2 years 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! :)

almost 2 years 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

almost 2 years 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!

almost 2 years 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!

almost 2 years 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!

almost 2 years ago09/10/19 at 11:58 am (UTC)

This is a great idea for the challenge!

almost 2 years ago09/11/19 at 5:27 pm (UTC)

Very fun concepts as usual! Nice work :)

Brooke Winston

almost 2 years 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! :)

almost 2 years ago09/09/19 at 3:42 pm (UTC)

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

almost 2 years 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.

almost 2 years ago09/10/19 at 12:01 pm (UTC)

This looks great! Nice examples for each color scheme!

Nick Russell

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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.

almost 2 years ago09/11/19 at 10:34 pm (UTC)

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

almost 2 years ago09/12/19 at 4:51 pm (UTC)

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

almost 2 years ago09/19/19 at 1:26 pm (UTC)

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

almost 2 years ago09/12/19 at 8:58 pm (UTC)

Love the layout. Well done!

almost 2 years ago09/19/19 at 1:27 pm (UTC)

Thank you!

Jodi Sansone

almost 2 years 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

almost 2 years 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 :)

almost 2 years ago09/11/19 at 5:31 pm (UTC)

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

almost 2 years ago09/11/19 at 6:24 pm (UTC)

That turned dark really quickly. Great job!

Candice Pitman

almost 2 years 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

almost 2 years ago09/11/19 at 6:14 pm (UTC)

Nicely done, Candice! Very creative approach!

almost 2 years ago09/11/19 at 7:26 pm (UTC)

Very cute!

Samuel Apata

almost 2 years 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

almost 2 years ago09/12/19 at 2:41 am (UTC)

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

almost 2 years ago09/12/19 at 1:37 pm (UTC)

Thanks Nyla! Your words are kind :)

almost 2 years ago09/12/19 at 7:21 am (UTC)

Brilliant!

almost 2 years 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.

almost 2 years 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!

almost 2 years ago09/12/19 at 9:00 pm (UTC)

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

Vesela Georgieva

almost 2 years 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.

almost 2 years ago09/12/19 at 9:02 pm (UTC)

Enjoyed your submission, Vesela. :)

almost 2 years ago09/13/19 at 7:06 am (UTC)

Happy to hear that, Holley.

Nyla Spooner

almost 2 years 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 :)

almost 2 years 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!

almost 2 years 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!

almost 2 years ago09/12/19 at 7:19 am (UTC)

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

almost 2 years 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

almost 2 years 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

almost 2 years ago09/12/19 at 1:45 pm (UTC)

Cool and yummy template :)

almost 2 years ago09/13/19 at 7:06 am (UTC)

Thank you, Samuel. :)

Andrzej Jabłoński

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years ago09/25/19 at 8:30 am (UTC)

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

Farah Azadeh

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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

almost 2 years 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

over 1 year 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!