Submitted over 2 years ago

Calculator App using SCSS and React

Aaron Rutherford•300

@Hazipan

Preview site View code

This is a solution for...Calculator app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

This one really tested my capabilities! Is there a better way to implement the different color themes? Any and all feedback is greatly appreciated.

Community feedback

John Mirage•1,590

@john-miragePosted over 2 years ago

Hello,

Yes i think there is a better way:

1 Define the themes colors with css custom properties (always use the same property names in each theme) on your root element (html). You can use classes or data attributes.

:root.theme-1 {
  --color-bg: #fff;
}
:root.theme-2 {
  --color-bg: #aaa;
}
:root.theme-3 {
  --color-bg: #bbb;
}

2 Define the colors on your elements:

.header {
  background-color: var(--color-bg);
}

3 Define the default theme on the html element. (you dont have to use javascript for the default theme, you can simply add a class on the html element <html class="theme-1">)

document.documentElement.classList.add("theme-1");

4 When the user change the theme, simply replace the old theme with the new one.

document.documentElement.classList.replace("theme-1", "theme-2");

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord