Created
May 14, 2022 00:49
-
-
Save chadulous/cbd57a6b9e1180f336bf713560bc05ab to your computer and use it in GitHub Desktop.
Nightwind svelte patch
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
import { writable } from 'svelte/store' | |
import type { Writable } from 'svelte/types/runtime/store' | |
// this is not the most effecient way to do things and might cause some errors with typescript, i might make a full class | |
type Typewind = { | |
init(): string, | |
beforeTransition(): void, | |
toggle: () => void, | |
enable: (dark: boolean) => void, | |
oldtoggle: () => void, | |
oldenable: (dark: boolean) => void, | |
dark: Writable<boolean>, | |
getDark: () => boolean, | |
mount: () => void | |
} | |
import nightwind from 'nightwind/helper.js' | |
const nwind: Typewind = nightwind | |
nwind.dark = writable(); | |
nwind.oldtoggle = nwind.toggle | |
nwind.oldenable = nwind.enable | |
nwind.getDark = () => { | |
const persistedColorPreference = window.localStorage.getItem('nightwind-mode'); | |
const hasPersistedPreference = typeof persistedColorPreference === 'string'; | |
if (hasPersistedPreference) { | |
return persistedColorPreference === "dark"? true:false; | |
} | |
const mql = window.matchMedia('(prefers-color-scheme: dark)'); | |
const hasMediaQueryPreference = typeof mql.matches === 'boolean'; | |
if (hasMediaQueryPreference) { | |
return mql.matches | |
} | |
return false; | |
} | |
nwind.mount = () => { | |
nwind.dark.set(nwind.getDark()); | |
(function() { | |
function getInitialColorMode() { | |
const persistedColorPreference = window.localStorage.getItem('nightwind-mode'); | |
const hasPersistedPreference = typeof persistedColorPreference === 'string'; | |
if (hasPersistedPreference) { | |
return persistedColorPreference; | |
} | |
const mql = window.matchMedia('(prefers-color-scheme: dark)'); | |
const hasMediaQueryPreference = typeof mql.matches === 'boolean'; | |
if (hasMediaQueryPreference) { | |
return mql.matches ? 'dark' : 'light'; | |
} | |
return 'light'; | |
} | |
getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark'); | |
})() | |
} | |
nwind.toggle = () => { | |
let value: boolean; | |
nwind.dark.subscribe(_ => value = _)(); | |
nwind.dark.set(!value) | |
nwind.oldtoggle() | |
} | |
nwind.enable = (dark: boolean)=>{ | |
nwind.dark.set(dark) | |
nwind.oldenable(dark) | |
} | |
export default nwind |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment