scrimba
Build Components in HTML, CSS & JS
Page Theme Selector - The HTML & Basic CSS 🧱🎨
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Page Theme Selector - The HTML & Basic CSS 🧱🎨
AboutCommentsNotes
Page Theme Selector - The HTML & Basic CSS 🧱🎨
Expand for more info
challenge.md
run
preview
console
**Challenge**:
Your goal is to create a dropdown menu that, when used, sets a theme for the page. For the scope of this challenge, this should include changing colors and borders, but should also be expandable to change any other style. The themes are up to you, but you can use the theme information provided in the challenge markdown file.

**Hints:**
- Use a stylesheet for each theme
- Change the link to a stylesheet when the dropdown menu is used
- Think about having a stylesheet hierarchy

**Topics Covered:**
- Link tags
- HTML Dropdown menus
- DOM Manipulation

**Other Information**:
- Light theme text color: #5e5e5e
- Dark theme background: #2b2b2b
- Dark theme text color: #e8e8e8
- Dark theme font: Open Sans
- Scrimba theme background: #f1ded0
- Scrimba theme header border: #c7b9ff
- Scrimba theme dropdown border color: #ddeae1


**Extended Challenge**:
Get creative and write your own themes! You can use https://coolors.co/generate to get some ideas.
Console
/index.html
-3:43