vue-toggle-theme
A Vue 3 component that adds a dark mode.
Allows you to switch color schemes using the user's color scheme
or by setting a predefined one, and save the selected theme to localStorage.
600B gzipped
➤ Install
yarn add vue-toggle-theme➤ Usage
defaultTheme accepts the values light or dark. If no value is specified, the user's theme will be used.
<template>
<ToggleTheme :defaultTheme="'light'">
<svg>...</svg>
</ToggleTheme>
</template>
<script>
import ToggleTheme from 'vue-toggle-theme'
export default {
components: {
ToggleTheme
}
}
</script>Add a <meta> element with the theme-color attribute to the <head> section.
<meta name="theme-color" content="">:root {
--meta-theme-color: White;
}
[data-theme='dark'] {
--meta-theme-color: Black;
}Fix "flash of inaccurate color theme".
<script>
const e = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light",
t = localStorage.getItem("theme") || e,
a = document.documentElement;
a.setAttribute("data-theme", t), localStorage.setItem("theme", t);
</script>➤ License
vue-toggle-theme is released under MIT license