-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reactive custom color? #23
Comments
@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> |
Thanks @moritzruth, your solution works for me. |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
The text was updated successfully, but these errors were encountered: