Reactive styles for theme?

[sajjadalis]

I'm using vue-tippy@next. I'm trying theme styles to be reactive.

<script setup>
import { ref } from "vue";
const bg = ref("red");
const text = ref("white");
</script>
<style>
.tippy-box[data-theme~="tomato"] {
    background-color: v-bind(bg);
    color: v-bind(text);
}
</style>

Also tried with options API but It's not working. Any better way to do it?

Also having a style issue with the arrow (default theme). It's not in the center. https://i.imgur.com/vyxzzxN.png

[KABBOUCHI]

hi @sajjadalis, plz can u share the code https://vite.new/vue?

[sajjadalis]

Hi,

Thanks for the reply. Please check.

https://stackblitz.com/edit/vitejs-vite-xhuk6e?file=src/components/HelloWorld.vue

v-bind is not working. Also, arrow is not properly centered with the default theme.

[KABBOUCHI]

styles added globally, but variables are only defined on the component

u can fix the issue: 1- for tippy component make sure the component has a 1 root element 2- for tippy directive make sure to add appendTo: 'parent'

https://stackblitz.com/edit/vitejs-vite-n7xc6n?file=src/components/HelloWorld.vue

[sajjadalis]

Thanks for the help and great work on this library.