Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

How can I incorporate a color theme by adding CSS classes based on a JSON object value?

Below is a basic component that I'm utilizing Handlebars, and vanilla HTML, CSS, and JavaScript for (check out the fiddle here: https://jsfiddle.net/j4oxths6/14/). In my JSON object, there exists a property named "theme" that can have multiple options but defined by JSON and not user-driven. My task is to handle different theme options. For instance, when the theme is "default", the main-nav should have a light pink color, but when it is "dark," it should be black. Is there any straightforward way to update CSS classes based on a variable? Here's the code snippet, and you can see the output by running it: 

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

const data = {
  "direction": "ltr",
  "theme": "default",
  "skinnyBannerItems": [
    {
      "label": "Option 1",
      "url": ""
    },
    {
      "label": "Option 2",
      "url": ""
    },
    {
      "label": "Option 3",
      "url": ""
    },
    {
      "label": "Option 4",
      "url": ""
    }
  ],
  "navigationItems": [
    {
      "label": "Option 5",
      "url": ""
    },
    {
      "label": "Option 6",
      "url": ""
    },
    {
      "label": "Option 7",
      "url": ""
    },
    {
      "label": "Option 8",
      "url": ""
    },
    {
      "label": "Option 9",
      "url": ""
    }
  ]

};

const output = template(data);

console.log(output);
document.body.innerHTML = output;

body {
  margin: 0;
}

.skinny-banner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  
  height: 40px;
  padding-right: 40px;
  background-color: green;
}

.skinny-nav-menu{
  display: flex;
  list-style: none;
  gap: 20px;
}

.skinny-nav-menu li a {
  color: white;
  text-decoration: none;
}

.main-nav {
  display: flex;
  align-items: center;
  
  min-height: 115px;
  background-color: lightpink;
}

.nav-menu{
  display: flex;
  list-style: none;
  gap: 20px;
}
I hope this helps! Let me know if you have any questions.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
Hello! Yes, there is a straightforward way to update CSS classes based on a variable. You can use JavaScript to add or remove classes from an element based on the value of the variable. Here's an example: 
<!DOCTYPE html>
<html>
<head>
  <style>
    .lightpink {
      background-color: lightpink;
    }
    .black {
      background-color: black;
    }
  </style>
</head>
<body>

  <div id="main-nav" class="main-nav lightpink">
    <!-- Your navigation items here -->
  </div>

  <script>
    const mainNav = document.getElementById('main-nav');
    const theme = 'dark'; // This is your theme variable

    if (theme === 'dark') {
      mainNav.classList.remove('lightpink');
      mainNav.classList.add('black');
    } else {
      mainNav.classList.remove('black');
      mainNav.classList.add('lightpink');
    }
  </script>

</body>
</html>
In this example, we have two CSS classes: .lightpink and .black. We add the .lightpink class to the main-nav element by default. Then, we use JavaScript to check the value of the theme variable. If it's 'dark', we remove the .lightpink class and add the .black class. If it's anything else, we remove the .black class and add the .lightpink class. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
a month ago
To update the CSS classes based on a variable, you can use the classList property on a DOM element in JavaScript. In the given example, you can create two CSS classes with the desired styling for the main-nav element, one for the default theme and one for the dark theme. For example: 
.main-nav-default {
  background-color: lightpink;
}

.main-nav-dark {
  background-color: black;
}
Then, you can add or remove these classes to the main-nav element based on the theme property of the data object. Here's how you can update the JavaScript code to achieve this: 
const output = template(data);

console.log(output);
document.body.innerHTML = output;

// Get the main-nav element
const mainNav = document.querySelector('.main-nav');

// Remove all theme-related classes from the main-nav element
mainNav.classList.remove('main-nav-default', 'main-nav-dark');

// Add the appropriate theme class to the main-nav element
if (data.theme === 'default') {
  mainNav.classList.add('main-nav-default');
} else if (data.theme === 'dark') {
  mainNav.classList.add('main-nav-dark');
}
With this code, the main-nav element will have the main-nav-default class if the theme property is set to "default", and the main-nav-dark class if the theme property is set to "dark".
;