Is it possible to change a CSS variable using VueJS?

Question

Is it possible to change a CSS variable using VueJS?

With CSS Modules, we are able to utilize variables in both our CSS and JS code.

// Using it in template
...
...<p :class="{ [$style.red]: isRed }">Am I red?</p>

// Using it in JS 
...
...
<script>
export default {
    created () {
        console.log(this.$style.red)
        // -> "red_1VyoJ-uZ"
        // This is an identifier generated based on the filename and className.
    }
}
</script>

/// Using it in a CSS preprocessor
...
...
<style lang="stylus" module>
.red {
  color: red;
}
</style>

We can access the variable regardless of whether it's being used in the template, JS or CSS. However, what if we want to implement a feature where clicking changes the website's overall 'main-color' that is defined in CSS?

Is it possible to modify the variable in JS?

javascript vue.js css-modules css-variables

Answer 1

Answer №1

A CSS Module is a unique type of CSS file that ensures all class names and animation names are contained locally by default.

Utilize CSS Modules when you need to guarantee that a component's style will not be overridden.

If you're unsure about what you're asking for, it seems like you want to dynamically modify the CSS module class.

Here's a simple template:

<template>
  <div>
   <div :class="[module]">I am a div</div>
   <button @click="make_blue_class">Make it blue</button>
   <button @click="make_red_class">Make it red</button>
  </div>
</template>

And here's the script section:

data: () => ({
    module_class: 'red'
  }),

  computed: {
    module: {
      get() {
        return this.$style[this.module_class]
      },
      set(new_class) {
        this.module_class = new_class
      }
    }
  },
  methods: {
    make_blue_class() {
      this.module_class = 'blue'
    },
    make_red_class() {
      this.module_class = 'red'
    }
  }

Finally, add some styling:

.red {
    background: red;
  }
  .blue {
    background: blue;
  }

To see this in action, click on the following link: CSS Module Example

Answer 2

A CSS Module is a unique type of CSS file that ensures all class names and animation names are contained locally by default.

Utilize CSS Modules when you need to guarantee that a component's style will not be overridden.

If you're unsure about what you're asking for, it seems like you want to dynamically modify the CSS module class.

Here's a simple template:

<template>
  <div>
   <div :class="[module]">I am a div</div>
   <button @click="make_blue_class">Make it blue</button>
   <button @click="make_red_class">Make it red</button>
  </div>
</template>

And here's the script section:

data: () => ({
    module_class: 'red'
  }),

  computed: {
    module: {
      get() {
        return this.$style[this.module_class]
      },
      set(new_class) {
        this.module_class = new_class
      }
    }
  },
  methods: {
    make_blue_class() {
      this.module_class = 'blue'
    },
    make_red_class() {
      this.module_class = 'red'
    }
  }

Finally, add some styling:

.red {
    background: red;
  }
  .blue {
    background: blue;
  }

To see this in action, click on the following link: CSS Module Example

Is it possible to change a CSS variable using VueJS?

Answer №1

Similar questions

Utilizing jQuery's onclick and onchange events on multiple elements

Submitting form data to PHP without refreshing the page

jPages fails to recognize dynamically added images using jQuery in real-time

Creating a specialized .toString() function for an array

How to Customize the Size and Color of secureTextEntry Inputs in React Native

Having trouble setting permissions with Node ACL?

Component re-rendering and initializing useReducer

How to set focus on a TextField in NativeScript Vue

Troubleshooting: Fullscreen Video Autoplay Issue in Angular HTML

The Nuxt loading progress bar keeps appearing and disappearing repeatedly

The download button consistently targets and downloads the initial SVG in my collection. How can I configure it to target each individual SVG for download?

Operating the VueJS toggle feature on a checkbox

Building a contact form in Angular and sending emails with Nodemailer

What are the best scenarios for utilizing (a)synchronous calls?

Updating a computed property in Vue.js after an asynchronous computed property has been updated

Press the 'enter' button to post your tweet with Greasemonkey

Converting data into a multidimensional array in AngularJS: A comprehensive guide

Filtering rows of an HTML table that contain links in the `<href>` column data in real time

Unable to send State from parent Component to Child (state counter for pomodoro clock)

Can you provide an example of JSON for a MultiStep Form that includes a variety of control types for viewing