Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vue-a11y/dark-mode
Advanced tools
@vue-a11y/dark-mode - npm Package Compare versions
Comparing version 0.2.0 to 1.0.0
| module.exports = { | ||
| root: true, | ||
| env: { | ||
| "cypress/globals": true, | ||
| browser: true, | ||
@@ -8,2 +9,3 @@ node: true | ||
| plugins: [ | ||
| 'cypress', | ||
| 'vuejs-accessibility' | ||
@@ -10,0 +12,0 @@ ], |
@@ -5,2 +5,21 @@ # Changelog | ||
| ## [1.0.0](https://github.com/vue-a11y/vue-dark-mode/compare/v0.2.0...v1.0.0) (2020-06-10) | ||
| ### Features | ||
| * 'change-mode' event when chosen a new color mode ([8fa7193](https://github.com/vue-a11y/vue-dark-mode/commit/8fa7193238e493f4ec66358344f252c3ca05d89b)) | ||
| * Adds SSR support ([18a1e61](https://github.com/vue-a11y/vue-dark-mode/commit/18a1e61a7af604c61de7813ce66354cdbcb27276)) | ||
| * Allow to import the component individually ([526d0f9](https://github.com/vue-a11y/vue-dark-mode/commit/526d0f9131f862157ab74e95704d586d9dffefb3)) | ||
| * Support to custom storage ([4aaf1fb](https://github.com/vue-a11y/vue-dark-mode/commit/4aaf1fbcafeacc4ed26b73ccbb2137f8ca51cd9d)) | ||
| * Toggle favicon by prefer-color-scheme ([987a555](https://github.com/vue-a11y/vue-dark-mode/commit/987a555ea23c3be696ad7b884b461e42c5239701)) | ||
| ### Bug Fixes | ||
| * If system set colorMode preference in storage to use in SSR ([22e99cc](https://github.com/vue-a11y/vue-dark-mode/commit/22e99cc0fb6a0bd6c0bd2a0d68f2d6cb3ed6331e)) | ||
| * Set type in package.json ([9fb4aa7](https://github.com/vue-a11y/vue-dark-mode/commit/9fb4aa79d8031da6b636c13b291f2506e3549283)) | ||
| * **docs:** Path to how to CDN ([9b24257](https://github.com/vue-a11y/vue-dark-mode/commit/9b2425758dca275684a404df665ff0182abb30b7)) | ||
| * **styles:** Add webkit and moz prefix to appearance button ([7b02fd1](https://github.com/vue-a11y/vue-dark-mode/commit/7b02fd1ee2af36764a6a5eabb972e870ac6e0caf)) | ||
| ## [0.2.0](https://github.com/vue-a11y/vue-dark-mode/compare/v0.1.3...v0.2.0) (2020-05-18) | ||
@@ -7,0 +26,0 @@ |
@@ -1,1 +0,372 @@ | ||
| var e={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},className:{type:String,default:"%cm-mode"},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,t=null;return["dark","light"].forEach((function(o){e.getMediaQueryList(o).matches&&(t=o)})),t},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,t=this.modes.findIndex((function(t){return t===e.chosenMode}));return this.modes[t===this.modes.length-1?0:t+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.elementMetaThemeColor&&t.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](""+this.className.replace(/%cm/g,this.currentMode))},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var t,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var n={};var r=function(e,t,o,n,r,i,s,a,d,l){"boolean"!=typeof s&&(d=a,a=s,s=!1);var c,h="function"==typeof o?o.options:o;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,r&&(h.functional=!0)),n&&(h._scopeId=n),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=c):t&&(c=s?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(h.functional){var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,c):[c]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[o("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)},staticRenderFns:[]},(function(e){e&&e("data-v-b0940a0e_0",{source:".vue-dark-mode{appearance:none;background-color:transparent;color:inherit;border:none;cursor:pointer}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}",map:void 0,media:void 0})}),e,void 0,!1,void 0,!1,(function(e){return function(e,r){return function(e,r){var i=o?r.media||"default":e,s=n[i]||(n[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var a=r.source;if(r.map&&(a+="\n/*# sourceURL="+r.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",r.media&&s.element.setAttribute("media",r.media),void 0===t&&(t=document.head||document.getElementsByTagName("head")[0]),t.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var d=s.ids.size-1,l=document.createTextNode(a),c=s.element.childNodes;c[d]&&s.element.removeChild(c[d]),c.length?s.element.insertBefore(l,c[d]):s.element.appendChild(l)}}}(e,r)}}),void 0,void 0);function i(e){i.installed||(i.installed=!0,e.component("VueDarkMode",r))}"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(i);export default i; | ||
| var storage = function (storage) { | ||
| return { | ||
| getItem: function (key) { return window[storage].getItem(key); }, | ||
| setItem: function (key, value) { return window[storage].setItem(key, value); } | ||
| } | ||
| }; | ||
| function getMediaQueryList (type) { | ||
| return window.matchMedia(("(prefers-color-scheme: " + type + ")")) | ||
| } | ||
| // | ||
| var script = { | ||
| name: 'DarkMode', | ||
| props: { | ||
| defaultMode: { | ||
| type: String, | ||
| default: 'light' | ||
| }, | ||
| modes: { | ||
| type: Array, | ||
| default: function default$1 () { | ||
| return ['light', 'dark', 'system'] | ||
| } | ||
| }, | ||
| className: { | ||
| type: String, | ||
| validator: function (str) { return str.includes('%cm'); }, | ||
| default: '%cm-mode' | ||
| }, | ||
| storage: { | ||
| type: [String, Object], | ||
| validator: function (storage) { | ||
| if (typeof storage === 'string') { return ['localStorage', 'sessionStorage'].includes(storage) } | ||
| return Object.keys(storage).every(function (key) { return ['getItem', 'setItem'].includes(key); }) | ||
| }, | ||
| default: 'localStorage' | ||
| }, | ||
| metaThemeColor: { | ||
| type: Object, | ||
| default: function () { return ({}); } | ||
| }, | ||
| ariaLabel: { | ||
| type: String, | ||
| validator: function (str) { return str.includes('%cm'); }, | ||
| default: 'toggle to %cm mode color' | ||
| }, | ||
| ariaLive: { | ||
| type: String, | ||
| validator: function (str) { return str.includes('%cm'); }, | ||
| default: '%cm color mode is enabled' | ||
| }, | ||
| favicon: { | ||
| type: Boolean, | ||
| default: true | ||
| } | ||
| }, | ||
| data: function data () { | ||
| return { | ||
| chosenMode: null, | ||
| currentMode: null, | ||
| listenerDark: null, | ||
| metaThemeColorElement: null | ||
| } | ||
| }, | ||
| computed: { | ||
| getPrefersColorScheme: function getPrefersColorScheme () { | ||
| if (this.$isServer) { return this.getStorage.getItem('colorModePrefer') } | ||
| var colorSchemeTypes = ['dark', 'light']; | ||
| var colorScheme = null; | ||
| colorSchemeTypes.forEach(function (type) { | ||
| if (getMediaQueryList(type).matches) { | ||
| colorScheme = type; | ||
| } | ||
| }); | ||
| return colorScheme | ||
| }, | ||
| getAriaLabel: function getAriaLabel () { | ||
| return this.ariaLabel.replace(/%cm/g, this.getNextMode) | ||
| }, | ||
| getAriaLive: function getAriaLive () { | ||
| return this.ariaLive.replace(/%cm/g, this.chosenMode) | ||
| }, | ||
| getNextMode: function getNextMode () { | ||
| var this$1 = this; | ||
| var currentIndex = this.modes.findIndex(function (mode) { return mode === this$1.chosenMode; }); | ||
| return this.modes[currentIndex === (this.modes.length - 1) ? 0 : currentIndex + 1] | ||
| }, | ||
| getStorage: function getStorage () { | ||
| if (typeof this.storage !== 'string') { return this.storage } | ||
| if (this.$isServer) { return false } | ||
| return storage(this.storage) | ||
| }, | ||
| getStorageColorMode: function getStorageColorMode () { | ||
| if (!this.getStorage) { return this.defaultMode } | ||
| return this.getStorage.getItem('colorMode') | ||
| }, | ||
| isSystem: function isSystem () { | ||
| return this.getStorageColorMode === 'system' | ||
| } | ||
| }, | ||
| created: function created () { | ||
| if (this.getPrefersColorScheme && this.isSystem) { | ||
| this.currentMode = this.getPrefersColorScheme; | ||
| return this.setMode('system') | ||
| } | ||
| var colorMode = this.getStorageColorMode || this.defaultMode; | ||
| this.currentMode = colorMode; | ||
| this.setMode(colorMode); | ||
| }, | ||
| mounted: function mounted () { | ||
| this.metaThemeColorElement = document.querySelector('meta[name="theme-color"]'); | ||
| this.listenerDark = getMediaQueryList('dark'); | ||
| this.listenerDark.addListener(this.handlePreferColorScheme); | ||
| this.toggleFavicon(this.getPrefersColorScheme); | ||
| }, | ||
| beforeDestroy: function beforeDestroy () { | ||
| this.listenerDark.removeListener(this.handlePreferColorScheme); | ||
| }, | ||
| methods: { | ||
| setMode: function setMode (chosenMode) { | ||
| this.chosenMode = chosenMode; | ||
| if (this.getStorage) { | ||
| this.getStorage.setItem('colorMode', this.chosenMode); | ||
| if (this.chosenMode === 'system') { this.getStorage.setItem('colorModePrefer', this.getPrefersColorScheme); } | ||
| } | ||
| this.handleColorModeClass('add'); | ||
| if (Object.keys(this.metaThemeColor).length) { this.setMetaThemeColor(this.metaThemeColor[this.currentMode] || this.metaThemeColor[this.getPrefersColorScheme]); } | ||
| this.$emit('change-mode', this.chosenMode); | ||
| }, | ||
| setMetaThemeColor: function setMetaThemeColor (color) { | ||
| var this$1 = this; | ||
| if (color) { | ||
| this.$nextTick(function () { | ||
| if (this$1.metaThemeColorElement) { this$1.metaThemeColorElement.setAttribute('content', color); } | ||
| }); | ||
| } | ||
| }, | ||
| toggleFavicon: function toggleFavicon (mode) { | ||
| if (!this.favicon) { return } | ||
| this.$nextTick(function () { | ||
| var favicon = document.querySelector('link[rel="icon"]'); | ||
| if (!favicon) { return } | ||
| var href = favicon.getAttribute('href'); | ||
| var lastFour = href.substr(-4, 4); | ||
| var favDarkStr = "-dark" + lastFour; | ||
| favicon.setAttribute('href', mode === 'light' ? href.replace(favDarkStr, lastFour) : href.replace(lastFour, favDarkStr)); | ||
| }); | ||
| }, | ||
| handleColorModeClass: function handleColorModeClass (action) { | ||
| var className = "" + (this.className.replace(/%cm/g, this.currentMode)); | ||
| if (!this.$isServer) { return document.documentElement.classList[action](className) } | ||
| this.$ssrContext.colorModeClass = this.currentMode === 'system' ? ("" + (this.className.replace(/%cm/g, this.getPrefersColorScheme))) : className; // Adds the className in the ssr context for the user to insert as they wish in the HTML tag | ||
| }, | ||
| handlePreferColorScheme: function handlePreferColorScheme (e) { | ||
| var colorMatch = e.matches ? 'dark' : 'light'; | ||
| this.toggleFavicon(colorMatch); | ||
| if (this.isSystem) { | ||
| this.handleColorModeClass('remove'); | ||
| this.currentMode = colorMatch; | ||
| this.setMode('system'); | ||
| } | ||
| }, | ||
| toggleColorMode: function toggleColorMode () { | ||
| var selectedMode = this.getNextMode; | ||
| this.handleColorModeClass('remove'); | ||
| this.currentMode = selectedMode === 'system' ? this.getPrefersColorScheme : selectedMode; | ||
| this.setMode(selectedMode); | ||
| } | ||
| } | ||
| }; | ||
| function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { | ||
| if (typeof shadowMode !== 'boolean') { | ||
| createInjectorSSR = createInjector; | ||
| createInjector = shadowMode; | ||
| shadowMode = false; | ||
| } | ||
| // Vue.extend constructor export interop. | ||
| var options = typeof script === 'function' ? script.options : script; | ||
| // render functions | ||
| if (template && template.render) { | ||
| options.render = template.render; | ||
| options.staticRenderFns = template.staticRenderFns; | ||
| options._compiled = true; | ||
| // functional template | ||
| if (isFunctionalTemplate) { | ||
| options.functional = true; | ||
| } | ||
| } | ||
| // scopedId | ||
| if (scopeId) { | ||
| options._scopeId = scopeId; | ||
| } | ||
| var hook; | ||
| if (moduleIdentifier) { | ||
| // server build | ||
| hook = function (context) { | ||
| // 2.3 injection | ||
| context = | ||
| context || // cached call | ||
| (this.$vnode && this.$vnode.ssrContext) || // stateful | ||
| (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional | ||
| // 2.2 with runInNewContext: true | ||
| if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { | ||
| context = __VUE_SSR_CONTEXT__; | ||
| } | ||
| // inject component styles | ||
| if (style) { | ||
| style.call(this, createInjectorSSR(context)); | ||
| } | ||
| // register component module identifier for async chunk inference | ||
| if (context && context._registeredComponents) { | ||
| context._registeredComponents.add(moduleIdentifier); | ||
| } | ||
| }; | ||
| // used by ssr in case component is cached and beforeCreate | ||
| // never gets called | ||
| options._ssrRegister = hook; | ||
| } | ||
| else if (style) { | ||
| hook = shadowMode | ||
| ? function (context) { | ||
| style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); | ||
| } | ||
| : function (context) { | ||
| style.call(this, createInjector(context)); | ||
| }; | ||
| } | ||
| if (hook) { | ||
| if (options.functional) { | ||
| // register for functional component in vue file | ||
| var originalRender = options.render; | ||
| options.render = function renderWithStyleInjection(h, context) { | ||
| hook.call(context); | ||
| return originalRender(h, context); | ||
| }; | ||
| } | ||
| else { | ||
| // inject component registration as beforeCreate hook | ||
| var existing = options.beforeCreate; | ||
| options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; | ||
| } | ||
| } | ||
| return script; | ||
| } | ||
| var isOldIE = typeof navigator !== 'undefined' && | ||
| /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); | ||
| function createInjector(context) { | ||
| return function (id, style) { return addStyle(id, style); }; | ||
| } | ||
| var HEAD; | ||
| var styles = {}; | ||
| function addStyle(id, css) { | ||
| var group = isOldIE ? css.media || 'default' : id; | ||
| var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); | ||
| if (!style.ids.has(id)) { | ||
| style.ids.add(id); | ||
| var code = css.source; | ||
| if (css.map) { | ||
| // https://developer.chrome.com/devtools/docs/javascript-debugging | ||
| // this makes source maps inside style tags work properly in Chrome | ||
| code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; | ||
| // http://stackoverflow.com/a/26603875 | ||
| code += | ||
| '\n/*# sourceMappingURL=data:application/json;base64,' + | ||
| btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + | ||
| ' */'; | ||
| } | ||
| if (!style.element) { | ||
| style.element = document.createElement('style'); | ||
| style.element.type = 'text/css'; | ||
| if (css.media) | ||
| { style.element.setAttribute('media', css.media); } | ||
| if (HEAD === undefined) { | ||
| HEAD = document.head || document.getElementsByTagName('head')[0]; | ||
| } | ||
| HEAD.appendChild(style.element); | ||
| } | ||
| if ('styleSheet' in style.element) { | ||
| style.styles.push(code); | ||
| style.element.styleSheet.cssText = style.styles | ||
| .filter(Boolean) | ||
| .join('\n'); | ||
| } | ||
| else { | ||
| var index = style.ids.size - 1; | ||
| var textNode = document.createTextNode(code); | ||
| var nodes = style.element.childNodes; | ||
| if (nodes[index]) | ||
| { style.element.removeChild(nodes[index]); } | ||
| if (nodes.length) | ||
| { style.element.insertBefore(textNode, nodes[index]); } | ||
| else | ||
| { style.element.appendChild(textNode); } | ||
| } | ||
| } | ||
| } | ||
| /* script */ | ||
| var __vue_script__ = script; | ||
| /* template */ | ||
| var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:"vue-dark-mode",attrs:{"aria-label":_vm.getAriaLabel,"title":_vm.getAriaLabel},on:{"click":_vm.toggleColorMode}},[_c('span',{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{"textContent":_vm._s(_vm.getAriaLive)}}),_vm._v(" "),_vm._t("default",null,{"mode":_vm.chosenMode})],2)}; | ||
| var __vue_staticRenderFns__ = []; | ||
| /* style */ | ||
| var __vue_inject_styles__ = function (inject) { | ||
| if (!inject) { return } | ||
| inject("data-v-05828192_0", { source: ".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;color:inherit;border:none;cursor:pointer}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}", map: undefined, media: undefined }); | ||
| }; | ||
| /* scoped */ | ||
| var __vue_scope_id__ = undefined; | ||
| /* module identifier */ | ||
| var __vue_module_identifier__ = undefined; | ||
| /* functional template */ | ||
| var __vue_is_functional_template__ = false; | ||
| /* style inject SSR */ | ||
| /* style inject shadow dom */ | ||
| var __vue_component__ = normalizeComponent( | ||
| { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, | ||
| __vue_inject_styles__, | ||
| __vue_script__, | ||
| __vue_scope_id__, | ||
| __vue_is_functional_template__, | ||
| __vue_module_identifier__, | ||
| false, | ||
| createInjector, | ||
| undefined, | ||
| undefined | ||
| ); | ||
| function install (Vue) { | ||
| if (install.installed) { return } | ||
| install.installed = true; | ||
| Vue.component('DarkMode', __vue_component__); | ||
| } | ||
| // auto install | ||
| if (typeof window !== 'undefined' && typeof window.Vue !== 'undefined') { | ||
| window.Vue.use(install); | ||
| } | ||
| export default install; | ||
| export { __vue_component__ as DarkMode }; |
@@ -1,1 +0,1 @@ | ||
| var VueDarkMode=function(e){"use strict";var t={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},className:{type:String,default:"%cm-mode"},storage:{type:String,default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,default:"toggle to %cm mode color"},ariaLive:{type:String,default:"%cm color mode is enabled"}},data:function(){return{elementMetaThemeColor:null,chosenMode:null,currentMode:null,listenerDark:null}},computed:{getPrefersColorScheme:function(){var e=this,t=null;return["dark","light"].forEach((function(o){e.getMediaQueryList(o).matches&&(t=o)})),t},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,t=this.modes.findIndex((function(t){return t===e.chosenMode}));return this.modes[t===this.modes.length-1?0:t+1]},getStorageColorMode:function(){return window[this.storage].getItem("colorMode")},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.elementMetaThemeColor=document.querySelector('meta[name="theme-color"]'),this.listenerDark=this.getMediaQueryList("dark"),this.listenerDark.addListener(this.handlePreferColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,window[this.storage].setItem("colorMode",this.chosenMode),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme])},getMediaQueryList:function(e){return window.matchMedia("(prefers-color-scheme: "+e+")")},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.elementMetaThemeColor&&t.elementMetaThemeColor.setAttribute("content",e)}))},handleColorModeClass:function(e){return document.documentElement.classList[e](""+this.className.replace(/%cm/g,this.currentMode))},handlePreferColorScheme:function(e){this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=e.matches?"dark":"light",this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var o,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var r={};var i=function(e,t,o,n,r,i,s,a,d,l){"boolean"!=typeof s&&(d=a,a=s,s=!1);var c,h="function"==typeof o?o.options:o;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,r&&(h.functional=!0)),n&&(h._scopeId=n),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=c):t&&(c=s?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(h.functional){var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,c):[c]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[o("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)},staticRenderFns:[]},(function(e){e&&e("data-v-b0940a0e_0",{source:".vue-dark-mode{appearance:none;background-color:transparent;color:inherit;border:none;cursor:pointer}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}",map:void 0,media:void 0})}),t,void 0,!1,void 0,!1,(function(e){return function(e,t){return function(e,t){var i=n?t.media||"default":e,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var d=s.ids.size-1,l=document.createTextNode(a),c=s.element.childNodes;c[d]&&s.element.removeChild(c[d]),c.length?s.element.insertBefore(l,c[d]):s.element.appendChild(l)}}}(e,t)}}),void 0,void 0);function s(e){s.installed||(s.installed=!0,e.component("VueDarkMode",i))}return"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(s),e.default=s,e}({}); | ||
| var VueDarkMode=function(e){"use strict";function t(e){return window.matchMedia("(prefers-color-scheme: "+e+")")}var o={name:"DarkMode",props:{defaultMode:{type:String,default:"light"},modes:{type:Array,default:function(){return["light","dark","system"]}},className:{type:String,validator:function(e){return e.includes("%cm")},default:"%cm-mode"},storage:{type:[String,Object],validator:function(e){return"string"==typeof e?["localStorage","sessionStorage"].includes(e):Object.keys(e).every((function(e){return["getItem","setItem"].includes(e)}))},default:"localStorage"},metaThemeColor:{type:Object,default:function(){return{}}},ariaLabel:{type:String,validator:function(e){return e.includes("%cm")},default:"toggle to %cm mode color"},ariaLive:{type:String,validator:function(e){return e.includes("%cm")},default:"%cm color mode is enabled"},favicon:{type:Boolean,default:!0}},data:function(){return{chosenMode:null,currentMode:null,listenerDark:null,metaThemeColorElement:null}},computed:{getPrefersColorScheme:function(){if(this.$isServer)return this.getStorage.getItem("colorModePrefer");var e=null;return["dark","light"].forEach((function(o){t(o).matches&&(e=o)})),e},getAriaLabel:function(){return this.ariaLabel.replace(/%cm/g,this.getNextMode)},getAriaLive:function(){return this.ariaLive.replace(/%cm/g,this.chosenMode)},getNextMode:function(){var e=this,t=this.modes.findIndex((function(t){return t===e.chosenMode}));return this.modes[t===this.modes.length-1?0:t+1]},getStorage:function(){return"string"!=typeof this.storage?this.storage:!this.$isServer&&function(e){return{getItem:function(t){return window[e].getItem(t)},setItem:function(t,o){return window[e].setItem(t,o)}}}(this.storage)},getStorageColorMode:function(){return this.getStorage?this.getStorage.getItem("colorMode"):this.defaultMode},isSystem:function(){return"system"===this.getStorageColorMode}},created:function(){if(this.getPrefersColorScheme&&this.isSystem)return this.currentMode=this.getPrefersColorScheme,this.setMode("system");var e=this.getStorageColorMode||this.defaultMode;this.currentMode=e,this.setMode(e)},mounted:function(){this.metaThemeColorElement=document.querySelector('meta[name="theme-color"]'),this.listenerDark=t("dark"),this.listenerDark.addListener(this.handlePreferColorScheme),this.toggleFavicon(this.getPrefersColorScheme)},beforeDestroy:function(){this.listenerDark.removeListener(this.handlePreferColorScheme)},methods:{setMode:function(e){this.chosenMode=e,this.getStorage&&(this.getStorage.setItem("colorMode",this.chosenMode),"system"===this.chosenMode&&this.getStorage.setItem("colorModePrefer",this.getPrefersColorScheme)),this.handleColorModeClass("add"),Object.keys(this.metaThemeColor).length&&this.setMetaThemeColor(this.metaThemeColor[this.currentMode]||this.metaThemeColor[this.getPrefersColorScheme]),this.$emit("change-mode",this.chosenMode)},setMetaThemeColor:function(e){var t=this;e&&this.$nextTick((function(){t.metaThemeColorElement&&t.metaThemeColorElement.setAttribute("content",e)}))},toggleFavicon:function(e){this.favicon&&this.$nextTick((function(){var t=document.querySelector('link[rel="icon"]');if(t){var o=t.getAttribute("href"),r=o.substr(-4,4),n="-dark"+r;t.setAttribute("href","light"===e?o.replace(n,r):o.replace(r,n))}}))},handleColorModeClass:function(e){var t=""+this.className.replace(/%cm/g,this.currentMode);if(!this.$isServer)return document.documentElement.classList[e](t);this.$ssrContext.colorModeClass="system"===this.currentMode?""+this.className.replace(/%cm/g,this.getPrefersColorScheme):t},handlePreferColorScheme:function(e){var t=e.matches?"dark":"light";this.toggleFavicon(t),this.isSystem&&(this.handleColorModeClass("remove"),this.currentMode=t,this.setMode("system"))},toggleColorMode:function(){var e=this.getNextMode;this.handleColorModeClass("remove"),this.currentMode="system"===e?this.getPrefersColorScheme:e,this.setMode(e)}}};var r,n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var i={};var s=function(e,t,o,r,n,i,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var c,h="function"==typeof o?o.options:o;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,n&&(h.functional=!0)),r&&(h._scopeId=r),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=c):t&&(c=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(h.functional){var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,c):[c]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("button",{staticClass:"vue-dark-mode",attrs:{"aria-label":e.getAriaLabel,title:e.getAriaLabel},on:{click:e.toggleColorMode}},[o("span",{staticClass:"visually-hidden",attrs:{"aria-live":"assertive"},domProps:{textContent:e._s(e.getAriaLive)}}),e._v(" "),e._t("default",null,{mode:e.chosenMode})],2)},staticRenderFns:[]},(function(e){e&&e("data-v-05828192_0",{source:".vue-dark-mode{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;color:inherit;border:none;cursor:pointer}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}",map:void 0,media:void 0})}),o,void 0,!1,void 0,!1,(function(e){return function(e,t){return function(e,t){var o=n?t.media||"default":e,s=i[o]||(i[o]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(a),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,d=document.createTextNode(a),c=s.element.childNodes;c[l]&&s.element.removeChild(c[l]),c.length?s.element.insertBefore(d,c[l]):s.element.appendChild(d)}}}(e,t)}}),void 0,void 0);function a(e){a.installed||(a.installed=!0,e.component("DarkMode",s))}return"undefined"!=typeof window&&void 0!==window.Vue&&window.Vue.use(a),e.DarkMode=s,e.default=a,e}({}); |
| module.exports = { | ||
| theme: 'vuepress-theme-default-vue-a11y', | ||
| title: 'Vue dark-mode', | ||
| description: '', | ||
| description: 'A component that helps to implement dark mode and other color modes in your Vue application.', | ||
| serviceWorker: true, | ||
| head: [ | ||
| ['meta', { name: 'theme-color', content: '#fff' }], | ||
| ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] | ||
| ], | ||
@@ -14,2 +16,7 @@ themeConfig: { | ||
| editLinks: true, | ||
| colorMode: { | ||
| props: { | ||
| modes: ['light', 'dark', 'system', 'sepia'] | ||
| } | ||
| }, | ||
| locales: { | ||
@@ -37,3 +44,5 @@ '/': { | ||
| '/guide/modes.md', | ||
| '/guide/events.md', | ||
| '/guide/storage.md', | ||
| '/guide/favicon.md', | ||
| '/guide/meta-theme-color.md', | ||
@@ -48,3 +57,4 @@ '/guide/accessibility.md', | ||
| children: [ | ||
| '/howto/cdn.md', | ||
| '/howto/', | ||
| '/howto/ssr.md', | ||
| '/howto/nuxt.md', | ||
@@ -51,0 +61,0 @@ '/howto/vuepress.md', |
@@ -38,3 +38,3 @@ # Accessibility & i18n | ||
| ```vue | ||
| <VueDarkMode | ||
| <DarkMode | ||
| ariaLabel="Cambiar al modo de color %cm" | ||
@@ -46,3 +46,3 @@ ariaLive="Se eligió el modo de color %cm" | ||
| </template> | ||
| </VueDarkMode> | ||
| </DarkMode> | ||
| ``` | ||
@@ -49,0 +49,0 @@ |
@@ -30,7 +30,7 @@ # Class naming | ||
| ```vue | ||
| <VueDarkMode className="%cm-theme"> | ||
| <DarkMode className="%cm-theme"> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: {{ mode }} | ||
| </template> | ||
| </VueDarkMode> | ||
| </DarkMode> | ||
| ``` | ||
@@ -37,0 +37,0 @@ |
@@ -6,7 +6,7 @@ # Examples | ||
| ```vue | ||
| <vue-dark-mode> | ||
| <DarkMode> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: {{ mode }} | ||
| </template> | ||
| </vue-dark-mode> | ||
| </DarkMode> | ||
| ``` | ||
@@ -18,7 +18,7 @@ | ||
| <ClientOnly> | ||
| <vue-dark-mode style="padding: 8px 12px;border: 1px solid var(--border-color);"> | ||
| <DarkMode style="padding: 8px 12px;border: 1px solid var(--border-color);"> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: {{ mode }} | ||
| </template> | ||
| </vue-dark-mode> | ||
| </DarkMode> | ||
| </ClientOnly> | ||
@@ -34,9 +34,9 @@ </div> | ||
| ```vue | ||
| <vue-dark-mode> | ||
| <DarkMode> | ||
| <template v-slot="{ mode }"> | ||
| <svg v-show="mode === 'dark'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg> | ||
| <svg v-show="mode === 'light'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg> | ||
| <svg v-show="mode === 'system'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg> | ||
| <MyLightIcon v-show="mode === 'light'"> | ||
| <MyDarkIcon v-show="mode === 'dark'"> | ||
| <MySystemIcon v-show="mode === 'system'"> | ||
| </template> | ||
| </vue-dark-mode> | ||
| </DarkMode> | ||
| ``` | ||
@@ -48,3 +48,3 @@ | ||
| <ClientOnly> | ||
| <vue-dark-mode style="padding: 10px 14px;"> | ||
| <DarkMode style="padding: 10px 14px;"> | ||
| <template v-slot="{ mode }"> | ||
@@ -55,3 +55,3 @@ <svg v-show="mode === 'dark'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg> | ||
| </template> | ||
| </vue-dark-mode> | ||
| </DarkMode> | ||
| </ClientOnly> | ||
@@ -58,0 +58,0 @@ </div> |
| # Favicon | ||
| Coming soon | ||
| | prop | Type | default | ||
| | ----------- | --------- | ---------- | ||
| | `favicon` | Boolean | `true` | ||
| You can switch the favicon according to the `prefers-color-scheme`. | ||
| ## Naming favicons | ||
| Favicons should be named as follows: | ||
| - For `light` the default favicon will be used, for example: `https://example.com/favicon.svg` or `/favicon.svg` | ||
| - For `dark` will be used, for example: `https://example.com/favicon-dark.svg` or `/favicon-dark.svg` | ||
| ::: tip | ||
| For `@vue-a11y/dark-mode`: | ||
| - You can use absolute URL (`https://example.com/favicon.svg`) or relative (`/favicon.svg`); | ||
| - You can use any extension for the favicon. `svg` is currently the most recommended and supported in modern browsers. See more about [svg favicons](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/#why-svg); | ||
| ::: | ||
| Insert default favicon into your `index.html` | ||
| e.g. | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <!-- omitted --> | ||
| <link rel="icon" type="image/svg+xml" href="/favicon.svg"> | ||
| ``` | ||
| If the user has defined in his `dark` operating system as color mode preference for applications. `@vue-a11y/dark-mode` will identify and make the change to your favicon. | ||
| e.g. | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <!-- omitted --> | ||
| <link rel="icon" type="image/svg+xml" href="/favicon-dark.svg"> | ||
| ``` | ||
| --- | ||
| ::: tip | ||
| You can see this working, just go to your operating system's color settings and change to `dark`, go back to that documentation and check the favicon has changed. | ||
| This is a practice used by several sites, one of which is github. | ||
| ::: |
@@ -17,3 +17,3 @@ # Meta theme-color | ||
| ```vue | ||
| <VueDarkMode | ||
| <DarkMode | ||
| :metaThemeColor="{ | ||
@@ -33,3 +33,3 @@ light: '#f2f2f2 ', | ||
| </template> | ||
| </VueDarkMode> | ||
| </DarkMode> | ||
| ``` |
@@ -36,3 +36,3 @@ # Color modes | ||
| ```vue | ||
| <VueDarkMode | ||
| <DarkMode | ||
| defaultMode="sepia" | ||
@@ -49,4 +49,4 @@ :modes="[ | ||
| </template> | ||
| </VueDarkMode> | ||
| </DarkMode> | ||
| ``` | ||
| # Setup | ||
| ## Installation | ||
| Add `@vue-a11y/dark-mode` in your Vue project. | ||
| #### NPM | ||
| ### NPM | ||
| ```shell | ||
@@ -12,3 +11,3 @@ npm install @vue-a11y/dark-mode | ||
| #### Yarn | ||
| ### Yarn | ||
| ```shell | ||
@@ -18,4 +17,8 @@ yarn add @vue-a11y/dark-mode | ||
| ## Basic usage | ||
| ## Usage | ||
| ### Globally | ||
| You can use it globally in your main.js | ||
| ```javascript | ||
@@ -28,9 +31,33 @@ import Vue from 'vue' | ||
| ### Locally | ||
| You can import into your component: | ||
| ```javascript | ||
| import { DarkMode } from '@vue-a11y/dark-mode' | ||
| export default { | ||
| // ... | ||
| components: { | ||
| DarkMode | ||
| } | ||
| } | ||
| ``` | ||
| ### Single file component | ||
| <br> | ||
| ```vue | ||
| <VueDarkMode> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: {{ mode }} | ||
| </template> | ||
| </VueDarkMode> | ||
| <template> | ||
| <DarkMode> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: {{ mode }} | ||
| </template> | ||
| </DarkMode> | ||
| </template> | ||
| <script> | ||
| // ... | ||
| </script> | ||
| <style> | ||
@@ -37,0 +64,0 @@ :root { |
@@ -5,16 +5,16 @@ # Storage | ||
| | Prop | Type | Default | Options | ||
| | ------------ | --------- | ------------- | ------------------- | ||
| | `storage` | String | `localStorage` | `localStorage` or `sessionStorage` | ||
| | Prop | Type | Default | ||
| | ------------ | ------------------- | ---------------- | ||
| | `storage` | String \| Object | `localStorage` | ||
| ```vue | ||
| <VueDarkMode storage="sessionStorage"> | ||
| <DarkMode storage="sessionStorage"> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: {{ mode }} | ||
| </template> | ||
| </VueDarkMode> | ||
| </DarkMode> | ||
| ``` | ||
| ::: tip | ||
| Currently, the component does not support the use of cookies (essential for use with SSR). | ||
| See more about using `cookies` on storage to [support SSR](/howto/ssr.html) | ||
| ::: |
@@ -7,12 +7,15 @@ # TailwindCSS Dark Mode | ||
| e.g. | ||
| **e.g.** | ||
| ```vue | ||
| <VueDarkMode className="mode-%cm"> | ||
| <DarkMode className="mode-%cm"> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: {{ mode }} | ||
| </template> | ||
| </VueDarkMode> | ||
| </DarkMode> | ||
| ``` | ||
| **Output** | ||
| ```html | ||
@@ -19,0 +22,0 @@ <!DOCTYPE html> |
@@ -5,13 +5,2 @@ # Vuepress | ||
| ```javascript | ||
| // enhanceApp.js | ||
| import VueDarkMode from '@vue-a11y/dark-mode' | ||
| export default ({ Vue, isServer }) => { | ||
| if (!isServer) { | ||
| Vue.use(VueDarkMode) | ||
| } | ||
| } | ||
| ``` | ||
| ::: warning | ||
@@ -21,11 +10,22 @@ VuePress applications are rendered by the server in Node.js when generating static builds. To avoid errors, we will wrap it inside the `<ClientOnly>` component. | ||
| ```vue | ||
| <template> | ||
| <ClientOnly> | ||
| <DarkMode> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: <span>{{ mode }}</span> | ||
| </template> | ||
| </DarkMode> | ||
| </ClientOnly> | ||
| </template> | ||
| ```vue | ||
| <ClientOnly> | ||
| <VueDarkMode> | ||
| <template v-slot="{ mode }"> | ||
| Color mode: <span>{{ mode }}</span> | ||
| </template> | ||
| </VueDarkMode> | ||
| </ClientOnly> | ||
| <script> | ||
| import { DarkMode } from '@vue-a11y/dark-mode' | ||
| export default { | ||
| components: { | ||
| DarkMode | ||
| } | ||
| } | ||
| </script> | ||
| ``` |
| { | ||
| "name": "@vue-a11y/dark-mode", | ||
| "version": "0.2.0", | ||
| "version": "1.0.0", | ||
| "description": "A component that helps you implement \"dark-mode\" in your Vue app", | ||
| "main": "dist/vue-dark-mode.umd.js", | ||
| "main": "dist/vue-dark-mode.ssr.js", | ||
| "browser": "dist/vue-dark-mode.esm.js", | ||
| "module": "dist/vue-dark-mode.esm.js", | ||
| "unpkg": "dist/vue-dark-mode.min.js", | ||
| "browser": { | ||
| "./sfc": "src/vue-dark-mode.vue" | ||
| }, | ||
| "types": "index.d.ts", | ||
| "scripts": { | ||
| "dev": "rollup --config rollup.config.dev.js --watch", | ||
| "build": "npm run build:umd & npm run build:es & npm run build:unpkg", | ||
| "build:umd": "rollup --config rollup.config.prod.js --format umd --file dist/vue-dark-mode.umd.js", | ||
| "build": "npm run build:ssr & npm run build:es & npm run build:unpkg", | ||
| "build:ssr": "rollup --config rollup.config.prod.js --format cjs --file dist/vue-dark-mode.ssr.js", | ||
| "build:es": "rollup --config rollup.config.prod.js --format es --file dist/vue-dark-mode.esm.js", | ||
| "build:unpkg": "rollup --config rollup.config.prod.js --format iife --file dist/vue-dark-mode.min.js", | ||
| "docs": "vuepress dev docs", | ||
| "docs:build": "vuepress build docs --no-cache", | ||
| "docs:publish": "surge docs/.vuepress/dist https://vue-dark-mode.surge.sh", | ||
| "docs:dev": "vuepress dev docs --no-cache", | ||
| "docs:build": "vuepress build docs --no-cache && echo darkmode.vue-a11y.com >> docs/.vuepress/dist/CNAME", | ||
| "docs:publish": "gh-pages -d docs/.vuepress/dist", | ||
| "demo:dev": "cd demo && npm run serve", | ||
| "demo:build": "cd demo && npm run build", | ||
| "demo:publish": "cp ./demo/dist/index.html ./demo/dist/200.html && surge ./demo/dist https://vue-dark-mode.surge.sh/", | ||
| "release": "standard-version", | ||
@@ -24,3 +26,3 @@ "test:unit": "jest", | ||
| "test:e2e:open": "node_modules/.bin/cypress open ", | ||
| "project:publish": "git push --follow-tags origin master && npm publish --access public" | ||
| "project:publish": "git push --tags origin master && npm run build && npm publish --access public" | ||
| }, | ||
@@ -54,27 +56,27 @@ "repository": { | ||
| "@rollup/plugin-commonjs": "^11.1.0", | ||
| "@rollup/plugin-node-resolve": "^7.0.0", | ||
| "@rollup/plugin-replace": "^2.3.2", | ||
| "@vue/eslint-config-standard": "^5.1.0", | ||
| "@vue/test-utils": "^1.0.0-beta.30", | ||
| "@vuepress/plugin-register-components": "^1.2.0", | ||
| "@vuepress/theme-default": "^1.3.1", | ||
| "babel-eslint": "^10.0.3", | ||
| "babel-jest": "^24.9.0", | ||
| "chokidar": "^3.3.1", | ||
| "cypress": "^4.5.0", | ||
| "@rollup/plugin-node-resolve": "^8.0.1", | ||
| "@rollup/plugin-replace": "^2.3.3", | ||
| "@vue/eslint-config-standard": "^5.1.2", | ||
| "@vue/test-utils": "^1.0.3", | ||
| "@vuepress/plugin-register-components": "^1.5.0", | ||
| "@vuepress/theme-default": "^1.5.0", | ||
| "babel-eslint": "^10.1.0", | ||
| "babel-jest": "^26.0.1", | ||
| "chokidar": "^3.4.0", | ||
| "cypress": "^4.8.0", | ||
| "eslint": "^6.8.0", | ||
| "eslint-plugin-cypress": "^2.10.3", | ||
| "eslint-plugin-import": "^2.20.0", | ||
| "eslint-plugin-node": "^11.0.0", | ||
| "eslint-plugin-cypress": "^2.11.1", | ||
| "eslint-plugin-import": "^2.21.1", | ||
| "eslint-plugin-node": "^11.1.0", | ||
| "eslint-plugin-promise": "^4.2.1", | ||
| "eslint-plugin-standard": "^4.0.1", | ||
| "eslint-plugin-vue": "^6.1.2", | ||
| "eslint-plugin-vue": "^6.2.2", | ||
| "eslint-plugin-vue-a11y": "0.0.31", | ||
| "eslint-plugin-vuejs-accessibility": "^0.1.1", | ||
| "jest": "^24.9.0", | ||
| "rollup": "^1.29.0", | ||
| "eslint-plugin-vuejs-accessibility": "^0.1.3", | ||
| "gh-pages": "^3.0.0", | ||
| "jest": "^26.0.1", | ||
| "portal-vue": "^2.1.7", | ||
| "rollup": "^2.15.0", | ||
| "rollup-plugin-eslint": "^7.0.0", | ||
| "rollup-plugin-livereload": "^1.0.4", | ||
| "rollup-plugin-serve": "^1.0.1", | ||
| "rollup-plugin-terser": "^5.2.0", | ||
| "rollup-plugin-terser": "^6.1.0", | ||
| "rollup-plugin-vue": "^5.1.1", | ||
@@ -85,5 +87,7 @@ "rollup-plugin-vue-inline-svg": "^1.1.1", | ||
| "vue-template-compiler": "^2.6.11", | ||
| "vuepress": "^1.3.1" | ||
| "vuepress": "^1.5.0", | ||
| "vuepress-theme-default-vue-a11y": "^0.1.11", | ||
| "watchpack": "^1.6.1" | ||
| }, | ||
| "dependencies": {} | ||
| } |
@@ -17,4 +17,4 @@ # [@vue-a11y/dark-mode](https://vue-dark-mode.surge.sh) | ||
| - [Documentation](https://vue-dark-mode.surge.sh) | ||
| - [Examples](https://vue-dark-mode.surge.sh/guide/examples.html) | ||
| - [Documentation](https://darkmode.vue-a11y.com) | ||
| - [Demo](https://vue-dark-mode.surge.sh) | ||
@@ -21,0 +21,0 @@ ## Contributing |
@@ -5,4 +5,2 @@ import buble from '@rollup/plugin-buble' | ||
| import { eslint } from 'rollup-plugin-eslint' | ||
| import livereload from 'rollup-plugin-livereload' | ||
| import serve from 'rollup-plugin-serve' | ||
| import vue from 'rollup-plugin-vue' | ||
@@ -25,11 +23,3 @@ | ||
| }), | ||
| buble(), | ||
| serve({ | ||
| verbose: true, | ||
| contentBase: 'demo', | ||
| historyApiFallback: true | ||
| }), | ||
| livereload({ | ||
| watch: 'demo' | ||
| }) | ||
| buble() | ||
| ], | ||
@@ -36,0 +26,0 @@ output: [ |
@@ -7,23 +7,26 @@ import buble from '@rollup/plugin-buble' | ||
| export default { | ||
| input: 'src/index.js', | ||
| plugins: [ | ||
| commonjs(), | ||
| replace({ | ||
| 'process.env.NODE_ENV': JSON.stringify('production') | ||
| }), | ||
| vue({ | ||
| css: true, | ||
| compileTemplate: true, | ||
| template: { | ||
| isProduction: true | ||
| } | ||
| }), | ||
| buble(), | ||
| terser() | ||
| ], | ||
| output: { | ||
| name: 'VueDarkMode', | ||
| exports: 'named' | ||
| export default commandLineArgs => { | ||
| return { | ||
| input: 'src/index.js', | ||
| plugins: [ | ||
| commonjs(), | ||
| replace({ | ||
| 'process.env.NODE_ENV': JSON.stringify('production') | ||
| }), | ||
| vue({ | ||
| css: true, | ||
| compileTemplate: true, | ||
| template: { | ||
| isProduction: true, | ||
| optimizeSSR: commandLineArgs.format === 'cjs' | ||
| } | ||
| }), | ||
| buble(), | ||
| commandLineArgs.format === 'iife' && terser() | ||
| ], | ||
| output: { | ||
| name: 'VueDarkMode', | ||
| exports: 'named' | ||
| } | ||
| } | ||
| } |
@@ -1,12 +0,4 @@ | ||
| import VueDarkMode from './vue-dark-mode.vue' | ||
| import VueDarkMode from './plugin' | ||
| export default function install (Vue) { | ||
| if (install.installed) return | ||
| install.installed = true | ||
| Vue.component('VueDarkMode', VueDarkMode) | ||
| } | ||
| // auto install | ||
| if (typeof window !== 'undefined' && typeof window.Vue !== 'undefined') { | ||
| window.Vue.use(install) | ||
| } | ||
| export default VueDarkMode | ||
| export { default as DarkMode } from './DarkMode.vue' |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by918.84%
511132
- Number of package files
- increased by55.56%
56
- Lines of code
- increased by4753.25%
11939
- Number of low quality alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by6.06%
35
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes