Dark/light mode on/off button Not working #234
Comments
|
Mine was working fine somehow, but the button stopped working recently... The error is something like Probably, the line |
|
The same problem |
|
+1 |
|
+1 |
|
Same problem. I think it's not only the button but forcing the website to use dark mode as default does not work anymore either. |
|
I also noticed the same issue. I think Notion has made changes to how styles are applied. Previously, they would add a class to the body tag when a dark theme was selected. Similarly, when switching to the light theme, the added class would be removed from the body tag. However, it seems that styles are now loaded differently. But I think we can still resolve this issue. My suggestion is to simulate their default theme-switching keyboard shortcut when the theme-switching button is clicked using JavaScript. For Windows, the keyboard shortcut is |
|
The reason: function onDark() {
el.innerHTML =
'<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>'
document.body.classList.add('dark')
__console.environment.ThemeStore.setState({ mode: 'dark' })
}
function onLight() {
el.innerHTML =
'<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>'
document.body.classList.remove('dark')
__console.environment.ThemeStore.setState({ mode: 'light' })
}Replaced code: function enableConsoleEffectAndSetMode(mode) {
if (__console && !__console.isEnabled) {
__console.enable()
window.location.reload()
} else {
__console.environment.ThemeStore.setState({ mode: mode })
}
}
function onDark() {
el.innerHTML =
'<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>'
document.body.classList.add('dark')
enableConsoleEffectAndSetMode('dark')
}
function onLight() {
el.innerHTML =
'<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>'
document.body.classList.remove('dark')
enableConsoleEffectAndSetMode('light')
}NOTICE On subsequent visits to the page, if |
|
Thanks for this! it's working again on my side.
|
|
Thank you, @guoyiheng! Your solution works flawlessly! |
work perfect, thx. |
|
Thank you, @guoyiheng, for the code. My public website's mode button resumed working correcly. |
|
Thanks, this worked except for when I opened my website on computers with dark theme defaulted. Then it would open in dark mode, and then refresh to light mode. If you want the theme to be preserved you can replace the addDarkModeButton function with this. I haven't tested this extensively, but it works for me. function addDarkModeButton(device) {
const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile');
el.className = 'toggle-mode';
el.addEventListener('click', toggle);
nav.appendChild(el);
/* get the current theme and add the toggle to represent that theme */
const currentTheme = JSON.parse(localStorage.getItem('theme')).mode;
if (currentTheme == 'dark') { onDark(); }
if (currentTheme == 'light') { onLight(); }
} |
|
Wow, thank you! I've been looking for this fix and the code worked perfectly. Question: This works on desktop for me, but when I load the notion fruition website on mobile it's still inheriting system setting vs. defaulting to a forced light mode. Are y'all having this problem too? Ideas? |
Based on the previous problems and code, the final code is as follows. function enableConsoleEffectAndSetMode(mode){
if (__console && !__console.isEnabled) {
__console.enable();
window.location.reload();
} else {
__console.environment.ThemeStore.setState({ mode: mode });
localStorage.setItem('newTheme', JSON.stringify({ mode: mode }));
}
}
function onDark() {
el.innerHTML = '<div title="Change to Light Mode" style="margin-left: 14px; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>';
document.body.classList.add('dark');
enableConsoleEffectAndSetMode('dark')
}
function onLight() {
el.innerHTML = '<div title="Change to Dark Mode" style="margin-left: 14px; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>';
document.body.classList.remove('dark');
enableConsoleEffectAndSetMode('light')
}
function toggle() {
if (document.body.classList.contains('dark')) {
onLight();
} else {
onDark();
}
}
function addDarkModeButton(device) {
const nav =
device === 'web'
? document.querySelector('.notion-topbar').firstChild
: document.querySelector('.notion-topbar-mobile')
el.className = 'toggle-mode'
el.addEventListener('click', toggle)
const timeout = device === 'web' ? 0 : 500
setTimeout(() => {
nav.appendChild(el)
}, timeout)
// get the current theme and add the toggle to represent that theme
const currentTheme = JSON.parse(localStorage.getItem('newTheme'))?.mode
if (currentTheme) {
if (currentTheme === 'dark') {
onDark()
}else{
onLight()
}
} else {
// enable smart dark mode based on user-preference
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
onDark()
} else {
onLight()
}
}
// try to detect if user-preference change
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
toggle()
})
}One more thing If you want to customize the head of the notion. For example, the buttons of PC: Mobile: Here is the code position. class HeadRewriter {
element(element) {
if (GOOGLE_FONT !== '') {
element.append(
`<link href='https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(
' ',
'+'
)}:Regular,Bold,Italic&display=swap' rel='stylesheet'>
<style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`,
{
html: true,
}
)
}
element.append(
`<style>
div.notion-topbar > div > div:nth-child(3) { display: none !important; }
div.notion-topbar > div > div:nth-child(5) { display: none !important; }
div.notion-topbar > div > div:nth-child(6) { display: none !important; }
div.notion-topbar > div > div:nth-child(7) { display: none !important; }
div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; }
div.notion-topbar-mobile > div:nth-child(4) { display: none !important; }
div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; }
</style>`,
{
html: true,
}
)
}
}I have modified my own code several times without thorough testing. If there are any issues, welcome to communicate Full Code: https://github.com/guoyiheng/vercel-notion |
|
Hi is there a simple way to just always show the dark theme for everyone? even if that means not having the Toogle button thanks in advance. |
Just remove addDarkModeButton method & execute the onDark method. |
Hi, sorry to be so annoying your suggestion works great just with one detail When i do it and go to root domain it ends up at rootdomain.com/longNotion url even if it its the root page That normally with the regular code does just loads rootdomain.com Also would love to implement the search button that you showed in desktop and mobile I tried to understand the syntax but got confused, to new to programming Any way of, always dark mode, no toogle button, yes search button, And the back button shows login screen fix? Im trying to implement from your and the other screen fix but when i fix one i break the other Thank you so much |
Hi, I'm also trying to keep my site on light mode always, but even with this suggestion it switches to dark mode if my Mac is on dark mode. If you could please share the exact code to only enable light mode, that'd be very helpful. Thanks! |
|
I've just tested solution by @guoyiheng and it works fine for me. Furthermore I was not a fan of reloading the page, and tested it without the |
|
Thanks for testing @mbochynski. I've just tried again but still no luck. Is there something I'm missing? I changed the included code under class BodyRewriter from: To this: The site still loads on the system default dark mode instead of always remaining on light mode. |
I definitely noticed that removing the window reload doesn't set the dark theme default when navigating straight to a sub-page, tested with an incognito browser. It does when going to my root fruitionsite. Implementing this PR #243 however resolved another issue I was having, along with this one without needing the window reload by setting the console differently. |
Fuck Yes!!! I have resolved already!!!!! Both the dark or llight button and the back buttom of the google.But the tricky thing is the time of loding my page was too long. That's ridiculous.....does anyone have this kind od issue? |
my website always load in dark or light mode as per system settings . The button does not work .
The text was updated successfully, but these errors were encountered: