[ ] Dark Mode style options implemented in CSS (210)
[ ] Dark Mode toggle implemented in JavaScript (220)
210: Most of this work will be in adding CSS styles to reverse the appearance of the page (light text on dark backgrounds instead of dark text on light backgrounds). A good approach to this is to make a copy of each class, appending ".dark-mode" (without a space before the dot!) to the end of the name of each class copy. Inside that copy, adjust the styles as appropriate for dark mode. This will allow the JavaScript code to utilize the "toggle" function as shown below.
220: For the JavaScript, create a function called something like "toggleDarkMode()". In this function, you can use querySelector to select each class and element that needs to be toggled.
Code Example:document.body.classList.toggle('dark-mode'); // this toggles the body tag, switching it to the body.dark-mode styles.
document.querySelector('.gradeInput').classList.toggle('dark-mode'); // switches the GradeInput class to the dark mode styles
210: Most of this work will be in adding CSS styles to reverse the appearance of the page (light text on dark backgrounds instead of dark text on light backgrounds). A good approach to this is to make a copy of each class, appending ".dark-mode" (without a space before the dot!) to the end of the name of each class copy. Inside that copy, adjust the styles as appropriate for dark mode. This will allow the JavaScript code to utilize the "toggle" function as shown below.
220: For the JavaScript, create a function called something like "toggleDarkMode()". In this function, you can use querySelector to select each class and element that needs to be toggled.
Code Example:
document.body.classList.toggle('dark-mode');// this toggles the body tag, switching it to the body.dark-mode styles.document.querySelector('.gradeInput').classList.toggle('dark-mode');// switches the GradeInput class to the dark mode styles