@seanred360
Posted
You should use a radio button for the theme toggler. This is more semantically correct and it lets keyboard users and screen readers use your toggler. You should refactor your code to have 1 theme toggler function that accepts a theme object as an argument. You need 3 theme objects. The theme1 object should look like this const theme1 = { body: "hsl( var(--clr-main-bg-blue))", text: "hsl( var(--clr-text-white))", keyButtonText: "hsl( var(--clr-text-grayishBlue))", screenBg: "hsl( var(--clr-screen-bg-blue))", keyButtonBg: "hsl( var(--clr-screen-bg-blue))", };
that way your code is shorter and you only need to make changes in 1 place. I made a pull request on your Github. You can read my comments and see how I would implement these changes
Marked as helpful
@CarvalhoVincent
Posted
@seanred360 Thank you for taking this time to help me!! I will try your solution soon.