From 1aee1f7fafccdaa0a218ed08a9107e7252317006 Mon Sep 17 00:00:00 2001 From: Lorenzo Battistela Date: Sun, 10 Oct 2021 08:35:12 -0300 Subject: [PATCH] adding theme switcher project --- Projects/1-Beginner/Theme-Switcher.md | 35 +++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 Projects/1-Beginner/Theme-Switcher.md diff --git a/Projects/1-Beginner/Theme-Switcher.md b/Projects/1-Beginner/Theme-Switcher.md new file mode 100644 index 00000000..87901c10 --- /dev/null +++ b/Projects/1-Beginner/Theme-Switcher.md @@ -0,0 +1,35 @@ +**Tier:** 1-Beginner + +Something really popular in websites and applications these days is the possibility +of changing website theme, usually from light to dark theme. This is more involved for JavaScript, CSS and HTML, +as it lives in web environment. + +Theme Switcher helps the user to change theme when clicking a button, usually +a [Switch Button](https://cdn.dribbble.com/users/3482593/screenshots/6844698/switch.gif). Users can use +this to increment the UI/UX, giving the possibility of choosing the theme for the website. + +When switch button is clicked, the theme changes either to light or dark, where it changes to the one +which is not applied before button is clicked. + +It can be done with javascript, html and css or just html and css. + +## User Stories + +- [] User can switch themes multiple times. +- [] User can see described in the button which theme is active. +- [] User can see the result by seeeing website colors change. + +## Bonus Features + +- [] Switch button performs an animation when clicked. + +## Useful Links and Resources + +- [Article on theme switcher](https://medium.com/@haxzie/dark-and-light-theme-switcher-using-css-variables-and-pure-javascript-zocada-dd0059d72fa2) +- [JavaScript Selectors](https://www.w3schools.com/w3js/w3js_add_class.asp) +- [Event Listener Javascript](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener) + +## Example projects + +- [Project 1](https://codepen.io/michellebarker/pen/GzzrGJ) +- [Project 2](https://codepen.io/haxzie/pen/xxKNEGM)