zhuyijun/vuepress-theme-reco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mode listeners not removed

Browse Source
This commit is contained in:
stevapple 2020-04-02 18:02:58 +08:00
parent c820b79095
commit 3843aa3c37
2 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/Mode/ModePicker.vue
View File

@ -6,14 +6,14 @@
v-for="(mode, index) in modeOptions"
:key="index"
:class="getClass(mode.mode)"
@click="selectMode(mode)"
@click="selectMode(mode.mode)"
>{{ mode.title }}</li>
</ul>
</div>
</template>
<script>
import setMode, { activateMode } from './setMode'
import setMode from './setMode'
export default {
name: 'ModeOptions',
@ -32,21 +32,17 @@ export default {
mounted () {
const mode = localStorage.getItem('mode')
const { mode: customizeMode } = this.$themeConfig
this.currentMode = mode === null ? customizeMode === undefined ? 'auto' : customizeMode : mode
activateMode(this.currentMode)
this.currentMode = mode ?? (customizeMode === null || customizeMode === undefined ? 'auto' : customizeMode)
setMode(this.currentMode)
},
methods: {
selectMode (mode) {
if (mode.mode === this.currentMode) {
return
} else if (mode.mode === 'auto') {
setMode()
} else {
activateMode(mode.mode)
if (mode !== this.currentMode) {
this.currentMode = mode
setMode(mode)
localStorage.setItem('mode', mode)
}
localStorage.setItem('mode', mode.mode)
this.currentMode = mode.mode
},
getClass (mode) {
return mode !== this.currentMode ? mode : `${mode} active`

26
components/Mode/setMode.js
View File

@ -1,6 +1,6 @@
import modeOptions from './modeOptions'
export function activateMode (mode) {
function activateMode (mode) {
const rootElement = document.querySelector(':root')
const options = modeOptions[mode]
@ -9,19 +9,33 @@ export function activateMode (mode) {
}
}
// Dark and Light autoswitches
const onDark = (e) => e.matches && activateMode('dark')
const onLight = (e) => e.matches && activateMode('light')
const darkScheme = window.matchMedia('(prefers-color-scheme: dark)')
const lightScheme = window.matchMedia('(prefers-color-scheme: light)')
/**
* Sets a color scheme for the website.
* If browser supports "prefers-color-scheme" it will respect the setting for light or dark mode
* otherwise it will set a dark theme during night time
*/
export default function setMode () {
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
export default function setMode (mode = 'auto') {
if (mode !== 'auto') {
darkScheme.removeListener(onDark)
lightScheme.removeListener(onLight)
activateMode(mode)
return
}
const isDarkMode = darkScheme.matches
const isLightMode = lightScheme.matches
const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => e.matches && activateMode('dark'))
window.matchMedia('(prefers-color-scheme: light)').addListener(e => e.matches && activateMode('light'))
darkScheme.addListener(onDark)
lightScheme.addListener(onLight)
if (isDarkMode) activateMode('dark')
if (isLightMode) activateMode('light')