🌗 Really simple dark mode switcher in Vue

Related tags

vue-dark-mode-switcher
Overview

🎬 Getting started

yarn add vue-dark-mode-switcher
npm install vue-dark-mode-switcher

👨‍💻 Usage

If you love emoticons you can use base version with 🌞 and 🌜

import DarkMode from "vue-dark-mode-switcher";
Vue.component('yourcomponentName', {
  components: {
    DarkMode
  }
}
template:{'
    ...
    <DarkMode></Darkmode>
    ...
'}

if you want to customize it

<DarkMode>
    <em slot="lightIcon"><b><em>light!</em></b></em>
    <em slot="darkIcon"><img src="..."/>></em>
</DarkMode>

💅 Styling!

You only have to create styles for .theme-dark class

.theme-dark{
    background: black;
    color: white;
}

the class is added to body element.

Issues
  • How to Implement this in VueJS project?

    How to Implement this in VueJS project?

    I pasted these line in main.js

    image

    And Under App.vue image

    And Added this in Index.html