Was anyone able to setup it on Preact.js, which uses Vite.js #81
Description
I tried everything I was able to do but no clue, it didn't worked.
my tailwind config file
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
plugins: [require('nightwind')],
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};and I added the purejavascript to the vite's index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
var nightwind = {
beforeTransition: () => {
const doc = document.documentElement;
const onTransitionDone = () => {
doc.classList.remove('nightwind');
doc.removeEventListener('transitionend', onTransitionDone);
}
doc.addEventListener('transitionend', onTransitionDone);
if (!doc.classList.contains('nightwind')) {
doc.classList.add('nightwind');
}
},
toggle: () => {
nightwind.beforeTransition();
if (!document.documentElement.classList.contains('dark')) {
document.documentElement.classList.add('dark');
window.localStorage.setItem('nightwind-mode', 'dark');
} else {
document.documentElement.classList.remove('dark');
window.localStorage.setItem('nightwind-mode', 'light');
}
},
enable: (dark) => {
const mode = dark ? "dark" : "light";
const opposite = dark ? "light" : "dark";
nightwind.beforeTransition();
if (document.documentElement.classList.contains(opposite)) {
document.documentElement.classList.remove(opposite);
}
document.documentElement.classList.add(mode);
window.localStorage.setItem('nightwind-mode', mode);
},
}
</script>
<script>
(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');
})()
</script>
<title>Vite + Preact</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>the functions from the console returns undefined