Themes are the foundation for website design, they establish the overall appearance and determine all design components such as backgrounds, color palettes, and sizing.
A startup is launching its new website, built using the holy language HTML&CSS__of-course.
But to take this website to the next level, they want to add a Theme Chooser functionality and support the following themes ( Dark, Light, and a Blue theme).
You, as a Front-end engineer working on that startup, you're given the task to implement the mentioned functionality respecting the following restrictions:
- The new feature must be implemented using ONLY HTML&CSS.
- The implementation must be code-optimized, so it will not require too many changes in case of adding a new theme; so a
base-themeclass is already prepared, and it must cover all themes.You must not create a class for each theme, use the base-theme class
- Adding extra CSS variables is not allowed.
The
--bg-color,--text-colormust be used for all themes colors variation - On the initial page load, either a dark theme or light theme will be auto-applied, depending on the user's system settings; eg: if the user's system theme is dark, the dark theme will be applied automatically on page load.
- The implementation must respect all the mentioned restrictions.
- The delivery must be only ONE HTML file(the one given in the starter folder).
- This challenge should take around 15 to 25 minutes to complete.
- We expect a working solution that respects the requirements.
- The boilerplate design is already made on the starter folder, you just need to focus on implementing the new feature.
- Necessary colors are given on the starter HTML file.
This challenge has a maximum points of 5 for implementing all the required features.
To get you started, we have provided you with a starting point, so you need first to copy to your local environment the starter folder you see next to this challenge.