Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@nuxtjs/color-mode
Advanced tools
@nuxtjs/color-mode - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -5,7 +5,14 @@ # Changelog | ||
| ### [1.0.0](https://github.com/nuxt-community/color-mode-module/compare/v0.0.3...v1.0.0) (2020-04-15) | ||
| ### [1.0.1](https://github.com/nuxt-community/color-mode-module/compare/v1.0.0...v1.0.1) (2020-07-27) | ||
| ### [0.0.3](https://github.com/nuxt-community/color-mode-module/compare/v0.0.2...v0.0.3) (2020-04-15) | ||
| ### Bug Fixes | ||
| * add `SameSite=Lax` to cookie ([#18](https://github.com/nuxt-community/color-mode-module/issues/18)) ([f236c93](https://github.com/nuxt-community/color-mode-module/commit/f236c93ae6092c8d273c9241901a47e01e058845)) | ||
| * broken link ([#17](https://github.com/nuxt-community/color-mode-module/issues/17)) ([a4f0e02](https://github.com/nuxt-community/color-mode-module/commit/a4f0e021e31a1fedaef249f38cfd1e88a9e0ea19)) | ||
| * correct spelling for preferred ([#10](https://github.com/nuxt-community/color-mode-module/issues/10)) ([cd565c5](https://github.com/nuxt-community/color-mode-module/commit/cd565c5f7425cde41b5255631ad088e2a1f4eff2)) | ||
| * fix correct spelling for preferred ([#9](https://github.com/nuxt-community/color-mode-module/issues/9)) ([8f65b8d](https://github.com/nuxt-community/color-mode-module/commit/8f65b8d21955fc13c5c3428edb6b3f6fea2e3795)) | ||
| ### [1.0.0](https://github.com/nuxt-community/color-mode-module/compare/v0.0.2...v1.0.0) (2020-04-15) | ||
| ### Features | ||
@@ -12,0 +19,0 @@ |
@@ -17,3 +17,4 @@ import { resolve } from 'path' | ||
| options: { | ||
| path: this.options.router.base | ||
| path: this.options.router.base, | ||
| sameSite: 'lax' | ||
| } | ||
@@ -20,0 +21,0 @@ } |
| { | ||
| "name": "@nuxtjs/color-mode", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "Dark and Light mode for NuxtJS with auto detection", | ||
@@ -25,3 +25,3 @@ "repository": "nuxt-community/color-mode-module", | ||
| "dependencies": { | ||
| "defu": "^1.0.0", | ||
| "defu": "^2.0.4", | ||
| "lodash.template": "^4.5.0" | ||
@@ -28,0 +28,0 @@ }, |
| # @nuxtjs/color-mode | ||
| [![npm version][npm-version-src]][npm-version-href] | ||
| [![npm downloads][npm-downloads-src]][npm-downloads-href] | ||
| [![Github Actions CI][github-actions-ci-src]][github-actions-ci-href] | ||
@@ -11,6 +10,6 @@ [![Codecov][codecov-src]][codecov-href] | ||
| [](https://nuxt-color-mode.surge.sh) | ||
| [](https://color-mode.nuxtjs.app/) | ||
| <p align="center"> | ||
| <a href="https://nuxt-color-mode.surge.sh">Live demo</a> | ||
| <a href="https://color-mode.nuxtjs.app">Live demo</a> | ||
| </p> | ||
@@ -53,3 +52,3 @@ | ||
| 3. Start theming your CSS with `.dark-mode` and `.ligh-mode` classes | ||
| 3. Start theming your CSS with `.dark-mode` and `.light-mode` classes | ||
@@ -59,3 +58,3 @@ ## Usage | ||
| It injects `$colorMode` helper with: | ||
| - `preference`: Actual color-mode selected (can be `'system'`), update it to change the user prefered color mode | ||
| - `preference`: Actual color-mode selected (can be `'system'`), update it to change the user preferred color mode | ||
| - `value`: Useful to know what color mode has been detected when `$colorMode === 'system'`, you should not update it | ||
@@ -109,3 +108,4 @@ - `unknown`: Useful to know if during SSR or Generate, we need to render a placeholder | ||
| options: { | ||
| path: nuxt.options.router.base // https://nuxtjs.org/api/configuration-router#base | ||
| path: nuxt.options.router.base, // https://nuxtjs.org/api/configuration-router#base | ||
| sameSite: 'lax' // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite | ||
| } | ||
@@ -118,3 +118,3 @@ } | ||
| - `'system'` is a special value, it will automatically detect the color mode based on the system preferences (see [prefers-color-mode spec](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)). The value injected will be either `'light'` or `'dark'`. If `no-preference` is detected or the browser does not handle color-mode, it will set the `fallback` value. | ||
| - `cookie` are the options where to store the chosen color mode (to make it work universally), the `cookie.options` are available on the [cookie serialize options](https://www.npmjs.com/package/cookie#options-1) documentation. | ||
| - `cookie` are the options where to store the chosen color mode (to make it work universally), the `cookie.options` are available on the [cookie serialize options](https://www.npmjs.com/package/cookie#options-1) documentation. Each option will recursively overwrite the default property (by using [defu](https://github.com/nuxt-contrib/defu)). | ||
@@ -125,5 +125,5 @@ ## Caveats | ||
| You have to guard any rendering path which depends on `$colorMode` with `$colorMode.unknown` to render a placeholder or directory use our `<ColorScheme>` component. | ||
| To avoid the flash, you have to guard any rendering path which depends on `$colorMode` with `$colorMode.unknown` to render a placeholder or use our `<ColorScheme>` component. | ||
| ***Example:** | ||
| **Example:** | ||
@@ -147,2 +147,21 @@ ```vue | ||
| ```js | ||
| // tailwind.config.js | ||
| module.exports = { | ||
| theme: { | ||
| darkSelector: '.dark-mode' | ||
| }, | ||
| variants: { | ||
| backgroundColor: ["dark", "dark-hover", "dark-group-hover", "dark-even", "dark-odd"], | ||
| borderColor: ["dark", "dark-focus", "dark-focus-within"], | ||
| textColor: ["dark", "dark-hover", "dark-active"] | ||
| }, | ||
| plugins: [ | ||
| require('tailwindcss-dark-mode')() | ||
| ] | ||
| } | ||
| ``` | ||
| Checkout a [live example on CodeSandBox](https://codesandbox.io/s/nuxt-dark-tailwindcss-17g2j?file=/pages/index.vue) as well as [@nuxtjs/tailwindcss](https://github.com/nuxt-community/tailwindcss-module) module. | ||
| ## Contributing | ||
@@ -149,0 +168,0 @@ |
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
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
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
Improved metrics
- Total package byte prevSize
- increased by9.33%
19367
- Lines of code
- increased by0.42%
240
- Number of lines in readme file
- increased by10.92%
193
- Number of medium supply chain risk alerts
- decreased by-100%
0
Dependency changes
+ Addeddefu@2.0.4(transitive)
- Removeddefu@1.0.0(transitive)
Updateddefu@^2.0.4