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