Vue-toggle-theme NPM

➤ 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