Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: Version 2 #39

Merged
merged 13 commits into from
Oct 13, 2020
Merged

feat!: Version 2 #39

merged 13 commits into from
Oct 13, 2020

Conversation

atinux
Copy link
Contributor

@atinux atinux commented Oct 12, 2020

⚠️ The breaking change is only if you are using the cookie option in the V1, if you don't use it, you can upgrade easily.

Force a color mode

You can force the color mode at the page level (only parent) by setting the colorMode property:

<template>
  <h1>This page is forced with light mode</h1>
</template>

<script>
export default {
  colorMode: 'light',
}
</script>

This feature is perfect for implementing dark mode to a website incrementally by setting the non-ready pages to colorMode: 'light'.

We recommend to hide or disable the color mode picker on the page since it won't be able to change the current page color mode, using $colorMode.forced value.

See example: https://color-mode.nuxtjs.app/light

Local Storage only

This will also fixes #38

Using a cookie is only worth for doing server-side rendering with no cache, where actually localStorage work in every-case and won't lead to a flash on client-side anyway.

This also simplify the options and reduce the dependency with the cookie package.

To customize the storage key, you now have to use the storageKey property instead of cookie.key.

@atinux atinux requested a review from pi0 October 12, 2020 13:28
@codecov
Copy link

codecov bot commented Oct 12, 2020

Codecov Report

Merging #39 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff            @@
##            master       #39   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            4         2    -2     
  Lines           40        20   -20     
  Branches         6         3    -3     
=========================================
- Hits            40        20   -20     
Impacted Files Coverage Δ
lib/module.js 100.00% <ø> (ø)
.../color-mode-module/color-mode-module/lib/module.js
...a/color-mode-module/color-mode-module/lib/utils.js

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 64e87af...906f4b5. Read the comment docs.

Copy link
Contributor

@pi0 pi0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM (only downside is that we cannot support cross domain theme)

@atinux atinux changed the title feat!: only use localStorage feat!: Version 2 Oct 13, 2020
@atinux atinux requested a review from pi0 October 13, 2020 16:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

prefer color settings from cookie on iPhone
2 participants