dark mode implementation

[jrappen]

@anikethsaha Thanks for this addition in #1031. Maybe you could review the exact implementation of this functionality and:

• make the detection automatic, as most (current) browsers support it
• while removing the toggle button

please compare the discussion in:

• Dynamic theme jhildenbiddle/docsify-themeable#19

for details.

[anikethsaha]

• make the detection automatic, as most (current) browsers support it

This can be useful

while removing the toggle button

Can you explain this.

Can you share your implementation for the 1st point if you have any

also, the dark mode plugin is here, so you can refer that as well if required.

[jrappen]

@anikethsaha

I'm talking about prefers-color-scheme and removing this button:

as we can fetch the preference without needing to add a toggle. Compare the following:

• https://github.com/tolking/vuepress-theme-default-prefers-color-scheme
• https://tolking.github.io/vuepress-theme-default-prefers-color-scheme/

which switches between dark and light when you have the site open in a supported browser on a supported OS and switch between dark and light mode in the OS.

---

My issue with #1031 is that:

• you're adding another theme with your plugin to the 5 current ones in ./src/themes.
• that only works until you switch themes on https://docsify.js.org/#/themes, after which it breaks.

It seems the dark theme in ./src/themes is a dark version of the vue theme. So maybe it would make sense to:

• merge the dark theme into the vue theme and make sure it displays with the correct color palette for each preferences
• then extend buble, dolphin and pure with dark palettes of their own
• and fix the themes page functionality while at it.

---

I know, the vuepress example above adds themes to the default, like your plugin. I'm suggesting we could skip a beat though, and fix the core here rather than your plugin.

[jrappen]

If you need screencasts for visuals, let me know. I was too lazy to make those without an expressed need.

[anikethsaha]

Actually this plugin is just temp. I am planning to have a dark mode switcher from the core as docusaurus does. I need to look at your given links more precisely,
Also, if you want you can submit a PoC for this about the implementation and we can decide that.

[jrappen]

Sounds good. I'd vote for dropping that toggle button though and making it seamlessly follow the OS.
Not sure I have time enough for the PoC, I'll see what I can do. My JavaScript knowledge is limited.

[jsejcksn]

Preference detection is great!

I think having the toggle option is a useful accessibility feature. Just because a person's OS environment is set to dark mode doesn't necessarily mean that he wishes to read documentation in dark mode (and vice versa). 🌞 🌚 👀

[JaninaWibker]

After having OS preference detection on a personal docsify site for probably more than a year (and a self-made darkmode implementation) this is what I've noticed works pretty well:

Tri-state logic:

• no theme selected
• dark theme selected
• light theme selected

If no theme is selected (visiting the site for the first time) choose a theme based on the OS preference (and save it).
If a theme is already selected use it.

If a preference change is detected while the site is open update the theme.

The user can update the selected theme using a toggle / button.

The code to implement something like this is pretty short:

const determineInitialTheme = () => {
  const isDarkMode      = window.matchMedia("(prefers-color-scheme: dark)").matches
  const isLightMode     = window.matchMedia("(prefers-color-scheme: light)").matches
  const isNotSpecified  = window.matchMedia("(prefers-color-scheme: no-preference)").matches
  const hasNoSupport    = !isDarkMode && !isLightMode && !isNotSpecified

  if(localStorage.getItem('docsify.theme')) return localStorage.getItem('docsify.theme') // saved theme
  else if(!hasNoSupport && isDarkMode)      return 'dark'   // system dark mode
  else if(!hasNoSupport && isLightMode)     return 'light'  // system light mode
  else if(!hasNoSupport && isNotSpecified)  return 'light'  // system unspecified
  else                                      return 'light'  // default
}

const toggleTheme = (theme) => { /* ... */ }

window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && toggleTheme('dark'))
window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && toggleTheme('light'))

toggleTheme(determineInitialTheme())

[jrappen]

Closing as stale.