Dark/light mode on/off button Not working #234

mustafa009 · 2023-06-30T18:25:53Z

my website always load in dark or light mode as per system settings . The button does not work .

suiato · 2023-07-04T23:30:40Z

Mine was working fine somehow, but the button stopped working recently... The error is something like

a2885c2625fb42caaba3ded2835d9735:41 Uncaught TypeError: Cannot read properties of undefined (reading 'ThemeStore')
    at onDark (a2885c2625fb42caaba3ded2835d9735:41:31)
    at addDarkModeButton (a2885c2625fb42caaba3ded2835d9735:61:9)
    at MutationObserver.<anonymous> (a2885c2625fb42caaba3ded2835d9735:71:11)

Probably, the line
__console.environment.ThemeStore.setState({ mode: 'dark' });
isn't working.
Is it because the function related to ThemeStore is updated on the Notion side?

jiahao-shen · 2023-07-05T13:04:05Z

The same problem

JustSleightly · 2023-07-08T20:43:52Z

+1
I've also noticed this more recently within the last week on my own notion

jenpauros · 2023-07-09T12:04:11Z

+1
I've also noticed the same issue just now

dadwi91 · 2023-07-12T07:08:44Z

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.

menukaonline · 2023-07-12T18:14:51Z

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 Ctrl + Shift + L, and for macOS, it is Cmd + Shift + L

guoyiheng · 2023-07-19T02:39:56Z

The reason:
The isEnabled property of the __console variable is set to false by default, which prevents the use of certain effects, including the environment.ThemeStore related to the theme.
Solution:
The original code:

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
Upon the first visit to the page, since isEnabled default false, the __console.enable() function is called, requiring a page refresh to take effect. Therefore, there is a code snippet window.location.reload() to trigger the refresh. If you do not need this, you can manually refresh the page.

On subsequent visits to the page, if isEnabled is true, the page will not be reloaded.

dadwi91 · 2023-07-19T18:05:04Z

Thanks for this! it's working again on my side.

The reason: The isEnabled property of the __console variable is set to false by default, which prevents the use of certain effects, including the environment.ThemeStore related to the theme. Solution: The original code:

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 Upon the first visit to the page, since isEnabled default false, the __console.enable() function is called, requiring a page refresh to take effect. Therefore, there is a code snippet window.location.reload() to trigger the refresh. If you do not need this, you can manually refresh the page.

On subsequent visits to the page, if isEnabled is true, the page will not be reloaded.

remgriff · 2023-07-23T04:34:42Z

Thank you, @guoyiheng! Your solution works flawlessly!

screekworkshop · 2023-08-02T10:12:54Z

The reason: The isEnabled property of the __console variable is set to false by default, which prevents the use of certain effects, including the environment.ThemeStore related to the theme. Solution: The original code:

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 Upon the first visit to the page, since isEnabled default false, the __console.enable() function is called, requiring a page refresh to take effect. Therefore, there is a code snippet window.location.reload() to trigger the refresh. If you do not need this, you can manually refresh the page.

On subsequent visits to the page, if isEnabled is true, the page will not be reloaded.

work perfect, thx.

suiato · 2023-08-08T10:45:25Z

Thank you, @guoyiheng, for the code. My public website's mode button resumed working correcly.

jesenator · 2023-08-12T15:54:02Z

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.
If you don't call the onDark or onLight functions it doesn't had the toggle for some reason, so this addition calls the correct function based off of whichever theme is already active

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(); }      
      }

jayviddy · 2023-08-13T13:28:59Z

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?

guoyiheng · 2023-08-14T02:58:01Z

Thanks for the code of jesenator.
Notion problem. The mode settings of Notion will not be saved and will reset every time. I suspect that there is a problem with the priority of the code logic, where the system settings are checked first and then the localStorage, causing it to reset every time it is refreshed. Even if you use Cmd + Shift + L, it will still reset.
I use a new localStorage variable newTheme to store the current mode. However, **it is still not perfect because the notion code will be executed first, causing a delay in the settings. **
Mobile problem . On the mobile phone, there is no problem with the display when modeButton is first added. After refreshing, there will be a problem with the display as shown in the figure. modeButton has been moved to the front for unknown reasons, most likely caused by code issues in notion.

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 try notion are not aesthetically pleasing. You can remove them yourself.
Change the number of nth-child to change the visible of the button.

PC:

Mobile:

Here is the code position. HeadRewriter

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

jfmadridc · 2023-08-21T03:26:13Z

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.

guoyiheng · 2023-08-21T03:36:38Z

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.

jfmadridc · 2023-08-21T10:41:04Z

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

jraadd · 2023-08-24T13:17:02Z

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

mbochynski · 2023-08-28T13:23:45Z

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 window.location.reload();, and it works perfectly fine to me. Might be worth checking for your scenarios as well. Tested in FF, Safari, and Chrome.

jraadd · 2023-08-28T14:20:43Z

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:

  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' });
  }
  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);
    nav.appendChild(el);
    onLight();
  }

To this:

  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 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 {
      onLight();
    }
  }
    // try to detect if user-preference change
    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
      toggle()
    })

The site still loads on the system default dark mode instead of always remaining on light mode.
I only want light mode and I've already removed the light/dark toggle UI since I don't need it.

JustSleightly · 2023-08-31T06:10:15Z

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 window.location.reload();, and it works perfectly fine to me. Might be worth checking for your scenarios as well. Tested in FF, Safari, and Chrome.

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.

yinan-star · 2023-12-13T13:51:37Z

The reason: The isEnabled property of the __console variable is set to false by default, which prevents the use of certain effects, including the environment.ThemeStore related to the theme. Solution: The original code:

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 Upon the first visit to the page, since isEnabled default false, the __console.enable() function is called, requiring a page refresh to take effect. Therefore, there is a code snippet window.location.reload() to trigger the refresh. If you do not need this, you can manually refresh the page.

On subsequent visits to the page, if isEnabled is true, the page will not be reloaded.

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?

JustSleightly mentioned this issue Jul 25, 2023

Notion Ask to Login after tapping Back button #237

Open

JustSleightly mentioned this issue Aug 31, 2023

Database Views Do Not Display #241

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark/light mode on/off button Not working #234

Dark/light mode on/off button Not working #234

mustafa009 commented Jun 30, 2023

suiato commented Jul 4, 2023

jiahao-shen commented Jul 5, 2023

JustSleightly commented Jul 8, 2023

jenpauros commented Jul 9, 2023

dadwi91 commented Jul 12, 2023

menukaonline commented Jul 12, 2023

guoyiheng commented Jul 19, 2023

dadwi91 commented Jul 19, 2023

remgriff commented Jul 23, 2023

screekworkshop commented Aug 2, 2023

suiato commented Aug 8, 2023

jesenator commented Aug 12, 2023

jayviddy commented Aug 13, 2023 •

edited

Loading

guoyiheng commented Aug 14, 2023 •

edited

Loading

jfmadridc commented Aug 21, 2023

guoyiheng commented Aug 21, 2023

jfmadridc commented Aug 21, 2023

jraadd commented Aug 24, 2023

mbochynski commented Aug 28, 2023

jraadd commented Aug 28, 2023

JustSleightly commented Aug 31, 2023

yinan-star commented Dec 13, 2023

Dark/light mode on/off button Not working #234

Dark/light mode on/off button Not working #234

Comments

mustafa009 commented Jun 30, 2023

suiato commented Jul 4, 2023

jiahao-shen commented Jul 5, 2023

JustSleightly commented Jul 8, 2023

jenpauros commented Jul 9, 2023

dadwi91 commented Jul 12, 2023

menukaonline commented Jul 12, 2023

guoyiheng commented Jul 19, 2023

dadwi91 commented Jul 19, 2023

remgriff commented Jul 23, 2023

screekworkshop commented Aug 2, 2023

suiato commented Aug 8, 2023

jesenator commented Aug 12, 2023

jayviddy commented Aug 13, 2023 • edited Loading

guoyiheng commented Aug 14, 2023 • edited Loading

jfmadridc commented Aug 21, 2023

guoyiheng commented Aug 21, 2023

jfmadridc commented Aug 21, 2023

jraadd commented Aug 24, 2023

mbochynski commented Aug 28, 2023

jraadd commented Aug 28, 2023

JustSleightly commented Aug 31, 2023

yinan-star commented Dec 13, 2023

jayviddy commented Aug 13, 2023 •

edited

Loading

guoyiheng commented Aug 14, 2023 •

edited

Loading