Project Description
In this project, students will build a web page that lets users choose between two different themes - a light and dark theme - or choose to apply their system theme preference. JavaScript code has been provided, and students will use HTML and CSS to create their page and themes.
Your Task
Buttons
Include 3 buttons at the top of your web page, in a <header> tag, that lets your website visitors switch between light theme, dark theme, or their system theme preference. Be sure to label each button and include an appropriate HTML tag id on each <button> tag.
For example, your light theme button might start with this tag: <button id="light"> Use the ids “light”, “dark”, and “system” in order for the included JavaScript code to trigger when each button is pressed by the user.
Theme Styles
Use the light.css stylesheet file to include all your style rules for the light theme appearance of your website. Use the dark.css stylesheet file to include all your styles rules for your website’s dark theme.
Set up style rules for your buttons, paragraph text, headings, background colors, and anything else on your web page that you want to change between light and dark themes. The JavaScript file will load the appropriate stylesheet based on the user’s button selection. If the user chooses their system’s theme preference, the JavaScript included at the top of your HTML document will apply it to your web page.
