Reactive custom color?

[efstajas]

I've found that passing a dynamic value to the directive like this won't work:

v-ripple.600="rippleColor"

rippleColor changes dynamically based on if my app is in light or dark mode. Unfortunately, the ripple always stays in the color it was initialized with.

Am I missing or something or is this not supported?

[moritzruth]

@efstajas As a workaround, you can set the key attribute of the element which has the ripple to your rippleColor:

<template>
  <button
    :key="rippleColor"
    v-ripple.600="rippleColor"
  >
    Button
  </button>
</template>

[toniengelhardt]

Thanks @moritzruth, your solution works for me.

[toniengelhardt]

Just stumbled over another solution that also works great.

You can just assign a css variable and populate it via computed prop, e.g.

<template>
  <div :style="cssVars">
    <button
      v-ripple="'var(--ripple-color)'"
    >
      Button
    </button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'darkMode',
    ]),
    cssVars() {
      const rgb =  this.darkMode ? '255, 255, 255' : '0, 0, 0'
      return { 
        '--ripple-color': `rgba(${rgb}, .1)` 
      }
    }
  }
}
</script>