Choose dark mode based on browser settings
Closed this issue · 5 comments
For my project I used Tailwind and so we're using the dark: classes too. Is there a way to let the browser decide which version it should use, without having to code a check? I did this, but unlucky:
const prefersDark = ref(false);
onMounted(() => {
prefersDark.value = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
});
const isDarkMode = computed(() => prefersDark.value);<VueFinder id="finder" :url="`/filemanager/order/${order.id}`" :dark="isDarkMode" locale="de"></VueFinder>updated the script, added usePropDarkMode, it hides the dark mode selector button and only gets the variable from props if it ise selected. so you can set it outside the component now
<VueFinder id="finder" :url="`/filemanager/order/${order.id}`" :dark="isDarkMode" usePropDarkMode locale="de"></VueFinder>Looking good! I also found a typo in Toolbar: Unrchive, seems it didn't get thru my pull request.
I also fixed a bug in the PHP adapter.
Could you create a new release of the changes?
done. Thank you.
Think it should hide the theme switch button, but thats just asthetics. Ty!
It is hidden when using usePropDarkMode
vuefinder/src/components/Toolbar.vue
Line 82 in 57719a0