forked from nuxt-modules/color-mode
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: wrap injected script with iife (nuxt-modules#196)
- Loading branch information
Showing
1 changed file
with
59 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,73 @@ | ||
| // Add dark / light detection that runs before loading Nuxt | ||
| (() => { | ||
| // Global variable minimizers | ||
| const w = window | ||
| const de = document.documentElement | ||
|
|
||
| // Global variable minimizers | ||
| const w = window | ||
| const de = document.documentElement | ||
| const knownColorSchemes = ['dark', 'light'] | ||
|
|
||
| const knownColorSchemes = ['dark', 'light'] | ||
|
|
||
| const preference = window.localStorage.getItem('<%= options.storageKey %>') || '<%= options.preference %>' | ||
| let value = preference === 'system' ? getColorScheme() : preference | ||
| // Applied forced color mode | ||
| const forcedColorMode = de.getAttribute('data-color-mode-forced') | ||
| if (forcedColorMode) { | ||
| value = forcedColorMode | ||
| } | ||
|
|
||
| addColorScheme(value) | ||
| const preference = window.localStorage.getItem('<%= options.storageKey %>') || '<%= options.preference %>' | ||
| let value = preference === 'system' ? getColorScheme() : preference | ||
| // Applied forced color mode | ||
| const forcedColorMode = de.getAttribute('data-color-mode-forced') | ||
| if (forcedColorMode) { | ||
| value = forcedColorMode | ||
| } | ||
|
|
||
| // @ts-ignore | ||
| w['<%= options.globalName %>'] = { | ||
| preference, | ||
| value, | ||
| getColorScheme, | ||
| addColorScheme, | ||
| removeColorScheme | ||
| } | ||
| addColorScheme(value) | ||
|
|
||
| // @ts-ignore | ||
| function addColorScheme (value) { | ||
| const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>' | ||
| const dataValue = '<%= options.dataValue %>' | ||
| if (de.classList) { | ||
| de.classList.add(className) | ||
| } else { | ||
| de.className += ' ' + className | ||
| } | ||
| if (dataValue) { | ||
| de.setAttribute('data-' + dataValue, value) | ||
| // @ts-ignore | ||
| w['<%= options.globalName %>'] = { | ||
| preference, | ||
| value, | ||
| getColorScheme, | ||
| addColorScheme, | ||
| removeColorScheme | ||
| } | ||
| } | ||
|
|
||
| // @ts-ignore | ||
| function removeColorScheme (value) { | ||
| const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>' | ||
| const dataValue = '<%= options.dataValue %>' | ||
| if (de.classList) { | ||
| de.classList.remove(className) | ||
| } else { | ||
| de.className = de.className.replace(new RegExp(className, 'g'), '') | ||
| } | ||
| if (dataValue) { | ||
| de.removeAttribute('data-' + dataValue) | ||
| // @ts-ignore | ||
| function addColorScheme (value) { | ||
| const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>' | ||
| const dataValue = '<%= options.dataValue %>' | ||
| if (de.classList) { | ||
| de.classList.add(className) | ||
| } else { | ||
| de.className += ' ' + className | ||
| } | ||
| if (dataValue) { | ||
| de.setAttribute('data-' + dataValue, value) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // @ts-ignore | ||
| function prefersColorScheme (suffix) { | ||
| return w.matchMedia('(prefers-color-scheme' + suffix + ')') | ||
| } | ||
| // @ts-ignore | ||
| function removeColorScheme (value) { | ||
| const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>' | ||
| const dataValue = '<%= options.dataValue %>' | ||
| if (de.classList) { | ||
| de.classList.remove(className) | ||
| } else { | ||
| de.className = de.className.replace(new RegExp(className, 'g'), '') | ||
| } | ||
| if (dataValue) { | ||
| de.removeAttribute('data-' + dataValue) | ||
| } | ||
| } | ||
|
|
||
| function getColorScheme () { | ||
| // @ts-ignore | ||
| if (w.matchMedia && prefersColorScheme('').media !== 'not all') { | ||
| for (const colorScheme of knownColorSchemes) { | ||
| if (prefersColorScheme(':' + colorScheme).matches) { | ||
| return colorScheme | ||
| function prefersColorScheme (suffix) { | ||
| return w.matchMedia('(prefers-color-scheme' + suffix + ')') | ||
| } | ||
|
|
||
| function getColorScheme () { | ||
| // @ts-ignore | ||
| if (w.matchMedia && prefersColorScheme('').media !== 'not all') { | ||
| for (const colorScheme of knownColorSchemes) { | ||
| if (prefersColorScheme(':' + colorScheme).matches) { | ||
| return colorScheme | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return '<%= options.fallback %>' | ||
| } | ||
| return '<%= options.fallback %>' | ||
| } | ||
| })() |