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
-
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