Changing CSS module variables through JavaScript programming

Question

Changing CSS module variables through JavaScript programming

I'm currently utilizing an older version of react-boilerplate that includes CSS Modules, allowing for the creation of variables and the ability to import them into other CSS files.

Below is my colors.css file:

:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}

To import this file, all I need to do is include the following at the top of my .css file:

@import 'components/App/colors.css';

I am interested in implementing two themes on my website and am seeking a way to dynamically update these variables using JavaScript. What would be the most effective approach for achieving this?

Edit: I am hoping there's a solution that allows me to update the colors.css file without needing to apply conditional imports throughout all components that may use either of the two possible CSS files. If such a method exists, please let me know so I can change the accepted answer. Thank you to everyone who provided responses!

css postcss css-modules react-css-modules react-boilerplate

Answer 1

Answer №1

To easily switch between default and alternate theme colors, you can first define the default color variables on the element (such as body), then create another class for the alternate theme colors. Finally, use JavaScript to toggle between these classes. Here is a demonstration of how this can be achieved.

$("button").on("click", function() {
  $("body").toggleClass("foo");
});

body {
  --red: red;
  --blue: blue;
  --yellow: yellow;
  background: #ccc;
  text-align: center;
  font-size: 5em;
}

.foo {
  --red: #ce1126;
  --blue: #68bfe5;
  --yellow: #ffd100;
}

.red {
  color: var(--red);
}

.blue {
  color: var(--blue);
}

.yellow {
  color: var(--yellow);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span>
<br>
<button>click me</button>

Answer 2

To easily switch between default and alternate theme colors, you can first define the default color variables on the element (such as body), then create another class for the alternate theme colors. Finally, use JavaScript to toggle between these classes. Here is a demonstration of how this can be achieved.

$("button").on("click", function() {
  $("body").toggleClass("foo");
});

body {
  --red: red;
  --blue: blue;
  --yellow: yellow;
  background: #ccc;
  text-align: center;
  font-size: 5em;
}

.foo {
  --red: #ce1126;
  --blue: #68bfe5;
  --yellow: #ffd100;
}

.red {
  color: var(--red);
}

.blue {
  color: var(--blue);
}

.yellow {
  color: var(--yellow);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span>
<br>
<button>click me</button>

Answer 3

Answer №2

If I were to have two different sets of styles, I could switch between them based on certain conditions:

primaryColours.scss

:root {
  /* Primary colors */
  --main-color: #FF5733;
  --secondary-color: #33FF57;
  --tertiary-color: #3357FF;
  --accent-color: #FF33EE;
}

alternateColours.scss

:root {
  /* Alternate colors */
  --main-color: #3366AA;
  --secondary-color: #AA3366;
  --tertiary-color: #66AA33;
  --accent-color: #AA6633;
}

Then, within the React code, I can import these styles and dynamically apply them according to the need:

import primaryStyles from 'primaryColours.scss';
import alternateStyles from 'alternateColours.scss';

...

{this.props.isPrimaryStyle ? primaryStyles.myClass : alternateStyles.myClass}

Answer 4

If I were to have two different sets of styles, I could switch between them based on certain conditions:

primaryColours.scss

:root {
  /* Primary colors */
  --main-color: #FF5733;
  --secondary-color: #33FF57;
  --tertiary-color: #3357FF;
  --accent-color: #FF33EE;
}

alternateColours.scss

:root {
  /* Alternate colors */
  --main-color: #3366AA;
  --secondary-color: #AA3366;
  --tertiary-color: #66AA33;
  --accent-color: #AA6633;
}

Then, within the React code, I can import these styles and dynamically apply them according to the need:

import primaryStyles from 'primaryColours.scss';
import alternateStyles from 'alternateColours.scss';

...

{this.props.isPrimaryStyle ? primaryStyles.myClass : alternateStyles.myClass}

Answer 5

Answer №3

Are you interested in this content?

      // Retrieving the inputs
      const inputs = [].slice.call(document.querySelectorAll('.controls input'));

      // Listening for changes
      inputs.forEach(input => input.addEventListener('change', handleUpdate));
      inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

      function handleUpdate(e) {
        // Adding 'px' at the end of spacing and blur variables
        const suffix = (this.id === 'base' ? '' : 'px');
        document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
      }

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

body {
  text-align: center;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  /* 👴 */
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

/*
        Miscellaneous styles not related to CSS variables
      */

body {
  background: #193549;
  color: white;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

a {
  color: var(--base);
  text-decoration: none;
}

input {
  width:100px;
}

<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
  <label>Spacing:</label>
  <input type="range" id="spacing" min="10" max="200" value="10">

  <label>Blur:</label>
  <input type="range" id="blur" min="0" max="25" value="10">

  <label>Base Color</label>
  <input type="color" id="base" value="#ffc600">
</div>

<img src="http://unsplash.it/800/500?image=899">

<p class="love">😘</p>

<p class="love">Works on Chrome 49+ and Firefox 31+</p>

Answer 6

Are you interested in this content?

      // Retrieving the inputs
      const inputs = [].slice.call(document.querySelectorAll('.controls input'));

      // Listening for changes
      inputs.forEach(input => input.addEventListener('change', handleUpdate));
      inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

      function handleUpdate(e) {
        // Adding 'px' at the end of spacing and blur variables
        const suffix = (this.id === 'base' ? '' : 'px');
        document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
      }

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

body {
  text-align: center;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  /* 👴 */
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

/*
        Miscellaneous styles not related to CSS variables
      */

body {
  background: #193549;
  color: white;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

a {
  color: var(--base);
  text-decoration: none;
}

input {
  width:100px;
}

<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
  <label>Spacing:</label>
  <input type="range" id="spacing" min="10" max="200" value="10">

  <label>Blur:</label>
  <input type="range" id="blur" min="0" max="25" value="10">

  <label>Base Color</label>
  <input type="color" id="base" value="#ffc600">
</div>

<img src="http://unsplash.it/800/500?image=899">

<p class="love">😘</p>

<p class="love">Works on Chrome 49+ and Firefox 31+</p>

Changing CSS module variables through JavaScript programming

Answer №1

Answer №2

Answer №3

Similar questions

CSS - Ignoring Padding Causes Unexpected White Space to Appear

What is preventing images from displaying in my slider within baguetteBox?

A plethora of color choices in a Multi-select Box

Trouble encountered when attempting to override styles in Material UI's TableRow

What are the steps to reveal the second element once the first one has vanished?

What is the best way to vertically align two divs on the left and right?

The number of contents determines the dynamic CSS border style

What is the best way to position the menu along the right side of the container?

Steps for revealing all the information from a database when clicking on the 'Read More' button

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

Guidelines for pinpointing local directories

The flickering problem with HTML5 DOM

What is the best way to position two divs side by side while maintaining their individual padding?

Result of mixing CSS colors

Incorporate a platform-specific button in a user interface with React Native

Unable to make boxes responsive to size changes in CSS when layered over video background

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll

Strange behaviors when using setinterval with classes