Documentation
You can browse the documentation for Vue Dark Mode on the website.
Installation
npm install vuedarkmode
# Or if you prefer using yarn
yarn add vuedarkmode
Vue.js
In your main.js file:
import Vue from "vue";
import VueDarkMode from "vuedarkmode";
Vue.use(VueDarkMode);Nuxt.js
Create a new plugin in plugins/vuedarkmode.js:
import Vue from "vue";
import VueDarkMode from "vuedarkmode";
Vue.use(VueDarkMode);Add this new plugin to nuxt.config.js. Don't forget to set ssr to false as Vue Dark Mode only works in the browser for the time being.
{
// ...
plugins: [{ src: "@/plugins/vuedarkmode.js", ssr: false }];
}CDN
Get the latest version from jsdelivr, and import the JavaScript file in your page.
<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuedarkmode@latest/dist/vuedarkmode.min.js"></script>We recommend our users to lock Vue Dark Mode's version when using CDN. Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing. Please refer to jsdelivr.com for more information.
Available Components
We are releasing new components on a monthly basis. Subscribe to our newsletter to stay in touch with coming releases.
Base Components
-
BaseAlert: documentation | source code.
-
BaseAvatar: documentation | source code.
-
BaseBadge: documentation | source code.
-
BaseButton: documentation | source code.
-
BaseDivider: documentation | source code.
-
BaseHeading: documentation | source code.
-
BaseIcon: documentation | source code.
-
BaseListItem: documentation | source code.
-
BaseProgressBar: documentation | source code.
-
BaseSocialLogin: documentation | source code.
-
BaseSpinner: documentation | source code.
-
BaseToast: documentation | source code.
Form Components
-
FieldCheckbox: documentation | source code.
-
FieldFile: documentation | source code.
-
FieldInput: documentation | source code.
-
FieldRadio: documentation | source code.
-
FieldSelect: documentation | source code.
-
FieldTabs: documentation | source code.
-
FieldTextarea: documentation | source code.
-
FieldToggle: documentation | source code.
Who is using Vue Dark Mode?
Are you using Vue Dark Mode on one of your projects? Tweet me so we can add your logo here. 👻
Contributing
You are more than welcome to contribute to Vue Dark Mode. Just submit changes via pull request and I will review them before merging.
-
Fork it! 🤙
-
Create your feature branch:
git checkout -b my-new-feature -
Commit your changes:
git commit -am "Add some feature" -
Push to the branch:
git push origin my-new-feature -
Submit a pull request 👍
License
Vue Dark Mode is MIT licensed.