Eleventy + Tailwind Typography + Nightwind for dark mode #1725
Unanswered
keikhcheung
asked this question in
Q&A
Replies: 1 comment 1 reply
-
|
Interesting… do you have a public repo somewhere? Curious how/where/if you’re calling the .init() and .toggle() methods. |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
In the end I have managed to get the script working. I made a toggle switch with I copied and modified the /**
* Init
*/
const html = document.documentElement
const codeToRunOnClient = function() {
function getInitialColorMode() {
const persistedColorPreference = window.localStorage.getItem('nightwindMode');
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' ? html.classList.remove('dark') : html.classList.add('dark');
html.classList.add('nightwind');
};
codeToRunOnClient();
/**
* Toggle
*/
const darkMode = document.getElementById('darkMode')
const setTheme = (theme) => {
html.dataset.nightwindMode = theme;
localStorage.setItem('nightwindMode', theme)
// If no class="dark", add class="dark" AND add data-nightwind-mode="dark"
if (!html.classList.contains('dark')) {
html.classList.add('dark');
window.localStorage.setItem('nightwindMode', 'dark');
// Otherwise, i.e. if class="dark" already, remove class="dark" AND make data-nightwind-mode="light"
} else {
html.classList.remove('dark');
window.localStorage.setItem('nightwindMode', 'light');
}
}
darkMode.addEventListener('click', () => {
if (darkMode.checked != true) {
setTheme('light')
} else if (darkMode.checked = true) {
setTheme('dark')
}
}) |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, I wonder if anyone has tried setting up Eleventy with Tailwind Typography and Nightwind for dark mode toggle. I cannot manage to get the toggle to run.
I have the following set-up:
and
If I manually change on
<html class="nightwind">to"<html class="nightwind dark">or<html class="nightwind light">while inspecting the output code on browser, the colours are changing. But I just cannot figure out how to get the toggle up on a page to have it running.I realise the example given on Nightwind’s documentation is either for React or NextJS, and I suppose the code would have to be changed some way to be able to call the
node_modules/nightwind/helper.json a button on click. But, as a beginning, I cannot figure out how to do it.Any information would be much appreciated.
Beta Was this translation helpful? Give feedback.
All reactions