@nuxtjs/color-mode - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## [1.1.0](https://github.com/nuxt-community/color-mode-module/compare/v1.0.3...v1.1.0) (2020-09-15)
+
+
+### Features
+
+* add classPrefix and classSuffix ([0f2141c](https://github.com/nuxt-community/color-mode-module/commit/0f2141c182cfef81321d8cd3bed39d173ec281b3))
+* add types declaration ([#27](https://github.com/nuxt-community/color-mode-module/issues/27)) ([078d38f](https://github.com/nuxt-community/color-mode-module/commit/078d38f6347a297f388ef65aedfa503892bf73b0)), closes [#15](https://github.com/nuxt-community/color-mode-module/issues/15)
+
 ### [1.0.3](https://github.com/nuxt-community/color-mode-module/compare/v1.0.2...v1.0.3) (2020-08-04)
@@ -7,0 +15,0 @@

lib/module.js

@@ -14,2 +14,4 @@ import { resolve } from 'path'
     componentName: 'ColorScheme',
+    classPrefix: '',
+    classSuffix: '-mode',
     cookie: {
@@ -16,0 +18,0 @@ key: 'nuxt-color-mode',

lib/script.js

@@ -40,3 +40,3 @@ // Add dark / light detection that runs before loading Nuxt.js
 function addClass (value) {
-  const className = value + '-mode'
+  const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
   if (de.classList) {
@@ -50,3 +50,3 @@ de.classList.add(className)
 function removeClass (value) {
-  const className = value + '-mode'
+  const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
   if (de.classList) {
@@ -53,0 +53,0 @@ de.classList.remove(className)

lib/script.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";var e=window,t=document,s=t.documentElement,n=["dark","light"],a=function(e){for(var s=e+"=",n=t.cookie.split(";"),a=0;a<n.length;a++){for(var o=n[a];" "===o.charAt(0);)o=o.substring(1,o.length);if(0===o.indexOf(s))return o.substring(s.length,o.length)}return null}("<%= options.cookie.key %>")||"<%= options.preference %>",o="system"===a?i():a;function r(e){var t=e+"-mode";s.classList?s.classList.add(t):s.className+=" "+t}function c(t){return e.matchMedia("(prefers-color-scheme"+t+")")}function i(){if(e.matchMedia&&"not all"!==c("").media)for(var t of n)if(c(":"+t).matches)return t;return"<%= options.fallback %>"}r(o),e["<%= options.globalName %>"]={preference:a,value:o,getColorScheme:i,addClass:r,removeClass:function(e){var t=e+"-mode";s.classList?s.classList.remove(t):s.className=s.className.replace(new RegExp(t,"g"),"")}}}();
+!function(){"use strict";var e=window,s=document,t=s.documentElement,n=["dark","light"],o=function(e){for(var t=e+"=",n=s.cookie.split(";"),o=0;o<n.length;o++){for(var a=n[o];" "===a.charAt(0);)a=a.substring(1,a.length);if(0===a.indexOf(t))return a.substring(t.length,a.length)}return null}("<%= options.cookie.key %>")||"<%= options.preference %>",a="system"===o?c():o;function i(e){var s="<%= options.classPrefix %>"+e+"<%= options.classSuffix %>";t.classList?t.classList.add(s):t.className+=" "+s}function r(s){return e.matchMedia("(prefers-color-scheme"+s+")")}function c(){if(e.matchMedia&&"not all"!==r("").media)for(var s of n)if(r(":"+s).matches)return s;return"<%= options.fallback %>"}i(a),e["<%= options.globalName %>"]={preference:o,value:a,getColorScheme:c,addClass:i,removeClass:function(e){var s="<%= options.classPrefix %>"+e+"<%= options.classSuffix %>";t.classList?t.classList.remove(s):t.className=t.className.replace(new RegExp(s,"g"),"")}}}();

package.json

 {
   "name": "@nuxtjs/color-mode",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Dark and Light mode for NuxtJS with auto detection",
@@ -29,16 +29,17 @@ "repository": "nuxt-community/color-mode-module",
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
-    "@commitlint/cli": "^9.1.1",
-    "@commitlint/config-conventional": "^9.1.1",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@commitlint/cli": "^9.1.2",
+    "@commitlint/config-conventional": "^9.1.2",
+    "@nuxt/types": "^2.14.5",
     "@nuxtjs/eslint-config": "^3.1.0",
     "@nuxtjs/module-test-utils": "^1.6.3",
-    "@nuxtjs/svg": "^0.1.11",
+    "@nuxtjs/svg": "^0.1.12",
     "babel-eslint": "latest",
-    "babel-jest": "^26.1.0",
-    "eslint": "^7.5.0",
+    "babel-jest": "^26.3.0",
+    "eslint": "^7.9.0",
     "husky": "latest",
-    "jest": "^26.1.0",
-    "nuxt-edge": "^2.14.1-26598267.60f68638",
-    "rollup": "^2.23.0",
+    "jest": "^26.4.2",
+    "nuxt": "^2.14.5",
+    "rollup": "^2.26.11",
     "rollup-plugin-babel": "latest",
@@ -45,0 +46,0 @@ "rollup-plugin-terser": "^6.1.0",

README.md

@@ -26,3 +26,3 @@ # @nuxtjs/color-mode
 
-ℹ️ This module is using a cookie to support server-side rendering, if your visitors are located in Europe, make sure to follow the [EU cookie directive](https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive)
+ℹ️  This module is using a cookie to support server-side rendering, if your visitors are located in Europe, make sure to follow the [EU cookie directive](https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive)
 
@@ -40,3 +40,2 @@ ## Setup
 
-
 ```js
@@ -51,3 +50,5 @@ {
 
-ℹ️ If you are using `nuxt < 2.9.0`, use `modules` property instead.
+ℹ️ &nbsp;Use the `modules` property instead of `buildModules` if:
+- you are using `ssr: false` and `nuxt start`, see [#25](https://github.com/nuxt-community/color-mode-module/issues/25#issuecomment-692567237)
+- you are using `nuxt < 2.9.0`
 
@@ -105,2 +106,4 @@ 3. Start theming your CSS with `.dark-mode` and `.light-mode` classes
   componentName: 'ColorScheme',
+  classPrefix: '',
+  classSufix: '-mode',
   cookie: {
@@ -143,2 +146,30 @@ key: 'nuxt-color-mode',
 
+### Tailwind v1.8+
+
+Tailwind v1.8 introduced [dark mode support](https://github.com/tailwindlabs/tailwindcss/pull/2279), in order to work with @nuxtjs/color-mode, you need to set `dark: 'class'` in your `tailwind.config.js`:
+
+```js
+// tailwind.config.js
+module.exports = {
+  experimental: {
+    darkModeVariant: true
+  },
+  dark: 'class'
+}
+```
+
+Then in your `nuxt.config.js`, set the `classSuffix` option to an empty string:
+
+```js
+// nuxt.config.js
+export default {
+  // ...
+  colorMode: {
+    classSuffix: ''
+  }
+}
+```
+
+### Tailwindcss Dark Mode Plugin
+
 You can easily integrate this module with [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) by just setting `darkSelector: '.dark-mode'`, see [changing the selector documentation](https://github.com/ChanceArthur/tailwindcss-dark-mode#changing-the-selector).
@@ -145,0 +176,0 @@

No alert changes

Improved metrics

Total package byte prevSize

21865

increased by7.81%

Lines of code

252

increased by0.8%

Number of lines in readme file

224

increased by16.06%

Worsened metrics

Dev dependency count

18

increased by5.88%

No dependency changes