Add dark mode

[manuales]

Feature request

What problem does this feature solve?

What does the proposed API look like?

How should this be implemented in your opinion?

Are you willing to work on this yourself?

Integration of Dark mode in Vuepress

[flozero]

That's definitely a cool feature needed maybe it should be specific to the default theme plugin.

Can you work on it ? Do you need help some on boarding etc ?

Feel free to ask

[vinayakkulkarni]

just saw @f3ltron 's comment, I've managed to add a toggle button in the NavBar - reference, (https://github.com/vinayakkulkarni/vuepress/tree/feat/dark-theme), need some help regarding stylus as I've never used it before.

[tolking]

If create a plugin, you may need to add !important in the styles.
If the default theme can support prefers-color-scheme, it is best.
Or you need to create a new theme like vuepress-theme-default-prefers-color-scheme

[vinayakkulkarni]

If create a plugin, you may need to add !important in the styles.

Not really required, you can (should) use css variables var() to extend the theme imo

[songololo]

I think some sort of more comprehensive distillation of theming in VuePress would be really useful so that it is easier to override with custom theming (without a whole bunch of !important statements!)

css variables sound like a step in the right direction.

[Mister-Hope]

Wow, I just saw this, I built my own blog with this feature.
My blog https://mrhope.site
My source code: https://github.com/Mister-Hope/blog

I think it is not hard to make a plugin.
If you need any help, just call me.

[Mister-Hope]

I did not see any changes on the styles file?
Are you still working on with it? @vinayakkulkarni
I can sperate my files to release a plugin.
Since the plugin cannot access style files directly, my thought is to inject a style tag to the document when the switch component is mounted(or beforemount).

[Mister-Hope]

If you would like to make this feature with the default theme(I think many people would like to use it) rather than letting it become a plugin, then it's easier.

[vinayakkulkarni]

@Mister-Hope : Do check this out: https://github.com/vinayakkulkarni/vuepress/tree/feat/dark-theme, I am working on adding the dark theme. Need to integrate the colour palette used by Akruym in dev-tool dark theme.

[Mister-Hope]

I checked this, so I am saying I did not see any changes on the style file.

So Akruym is dealing with the style?

[Mister-Hope]

I think it is not a complex work, since the stylus file in Vuepress is very ordered.
Can't wait to see the feature offical supported

[Mister-Hope]

@vinayakkulkarni Could you check this stylus file? I think it’s good enough.
You can just import it in index.styl and add a “theme-night” class to tag when dark mode is on.

[Mister-Hope]

I make a plugin here You can check this out. If it is okey, I will make a PR

[superusercode]

any news on this issue? assuming the offer from Mister-Hope still stands

[quanengineering]

Love this feature <3. Still looking forward to it.

[Mister-Hope]

@kefranabg I can open a PR for this. If you need it, just call me.

[Mister-Hope]

@kefranabg check this #2232

[KieranHunt]

I recently wanted to add dark mode to our own vuepress site, did a little survey around what was available, and wanted to report my findings:

• vuepress-theme-default-prefers-color-scheme by @tolking does basically what I'm looking for.
  • I really like the prefers-color-scheme approach.
  • I just find the light mode code blocks to be a bit low-contrast
  • I'd ideally like it if it were supported in the default theme.
• @Mister-Hope's pull request is cool.
  • I do find it a little too dark (I don't think dark mode should be pitch black)
  • It doesn't seem to use prefers-color-scheme.
  • I swear I've seen that light/dark toggle around before. Does it come from somewhere else?

[Mister-Hope]

• @Mister-Hope's pull request is cool.

  • I do find it a little too dark (I don't think dark mode should be pitch black)

Maybe you are right, but all my device are AMOLED, and I work in pure dark. So a real dark fits me at least. Let's wait for vuepress team's opinion first. I can rebuild it to let it has a grey level

• It doesn't seem to use prefers-color-scheme.

It's modified from @mr-hope/vuepress-plugin-theme-color, which is built for my theme vuepress-theme-hope

I will spend some time in the next few days to have a look at the plugin you provide.

• I swear I've seen that light/dark toggle around before. Does it come from somewhere else?

Yes, I got it from a switch collection with license MIT, but I am not sure if the collection owner built it. It's a nice remind, I will try to check it's license, if I cannot find it, I will change a new one.

[Mister-Hope]

I just find the light mode code blocks to be a bit low-contrast

I am thinking that too, but prism 's other theme usually have worse apprence. And I am not modifying it, it's color just remains which the theme-default provides.

[tolking]

• I really like the prefers-color-scheme approach.

I really like the prefers-color-scheme approach. Switch light and dark modes according to system settings.

[Mister-Hope]

@KieranHunt I change the apprence and the switch with some new commits.

I had a look at prefers-color-scheme. My first idea is to make a plugin, so I just cover some of the styles with higher order css selectors.And my PR actually is adding a new plugin called @vuepress/plugin-darkmode .

A plugin is hard to use prefers-color-scheme, unless I cover all the color styles.

We can switch to prefers-color-scheme actually, but that also means I have to modify styles in @vuepress/theme-default heavily, and place this function in theme-default so,

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

I shall first ask the team. @kefranabg @meteorlxy @vinayakkulkarni

[sudoappel]

Some very interesting take-aways from this writeup by Stackoverlow which we need to keep in mind: https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/

And with that - is there an update on this?

[Dorson]

Made a flexible solution for the Dark Mode or any CSS color theme:

https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Uses simple JS functions and CSS variables to set colors dynamically.

Have fun !

[Mister-Hope]

I rebuild my theme with prefers-color-scheme @KieranHunt , you can have a look at this.

I will ship this feature to the @vuepress/theme-default as a new feature instead of a plugin in a new PR.

[Mister-Hope]

I have opened a new PR #2301.

This new darkmode is using prefers-color-scheme with css vars, and will fall back to "6 - 18 lightmode; 18 - 6 darkmode" if the user's broswer does not support prefers-color-scheme.

Also:

• the code block apprearence in lightmode have been rebuilt with a lighter one
• Navbar style has been changed to box-shadow instead of a bottom border, which will bring better appearance on darkmode.
• search bar styles has changed
• more variables are exposed to palette.styl

Any suggestions are welcomed. 😃

[Mister-Hope]

I was wondering if I should put a switch with "light / auto / default" somewhere in the theme, and if you can give some opinions, it would be wonderful.

Besides, if you want to add this switch, please tell me where do you want to put it, because I have no idea about it.

[Dorson]

I was wondering if I should put a switch with "light / auto / default" somewhere in the theme, and if you can give some opinions, it would be wonderful.

Besides, if you want to add this switch, please tell me where do you want to put it, because I have no idea about it.

Yes, such a toggle switch would be perfect in sunny conditions. Could be as minimal as possible, because most of the time we will not use it as the users. Maybe 3 times per day. In the sunshine on mobile screens, or when it's evening time.

White Unicode emoticon character with a dark background would work. 🌞 or 🌅 or 🌙 or 🌒 or ❄️ (for white only) or ◑ or 💡 or ⛯

Such a night / dark mode toggle switch could be placed near the top menu icon, or the search bar. Top right corner, or left right corner, or the bottom left corner. The bottom right corner is assumed to be used for the scroll up buttons, because the scroll bars end in that screen location.

Some websites place it on the lower left side. Most websites place it near the top right corner, or near the menu icon.

[Mister-Hope]

I put it in the navbar in the last PR, while I found it too narrow if I placed it there. Fixed it in a corner can be a good choice. i will try later. Thanks.

[Dorson]

I put it in the navbar in the last PR, while I found it too narrow if I placed it there. Fixed it in a corner can be a good choice. i will try later. Thanks.

For the demo page, I put the Night / Light switch in the top right corner :
https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

It all depends on the other elements of the page and the text flow direction. Arabic and Hebrew is like a mirror position to the left to right text.

[quanengineering]

💯 @Dorson your repo is great. Good fit for my Jekyll themes also.

[Mister-Hope]

I add a switch in the newest PR.

Here is a preview

A RFC here, what do you think about the switch? 😃

[KieranHunt]

That's very cool, @Mister-Hope

[yonkov]

@Mister-Hope, good job! I also made a small contribution to this topic by writing a tutorial how to implement night mode switch in the default vuepress theme. Check this article:
Switching off the Lights Part Three - Adding Dark Mode to VuePress

Basically, I am creating a vue component and injecting it inside the markdown file of the home page. However, it will be even better to be able to add the dark mode toggle in the top menu. Currently the default theme does not support components as menu items I think?

[Mister-Hope]

@Mister-Hope, good job! I also made a small contribution to this topic by writing a tutorial how to implement night mode switch in the default vuepress theme. Check this article:
Switching off the Lights Part Three - Adding Dark Mode to VuePress

Basically, I am creating a vue component and injecting it inside the markdown file of the home page. However, it will be even better to be able to add the dark mode toggle in the top menu. Currently the default theme does not support components as menu items I think?

Yes, but you can change it by overiding Navbar.vue. On the size around 700-800px the navbar does not have a good appearance because of too many items. So I did not place it in navbar.

[DMiradakis]

This is all incredible. Thank you, everyone! I love VuePress.

[shindodkar]

is this open and ready to make changes ? I would like to contribute on this

[Mister-Hope]

We are moving on to vuepress2 now, and this project is no longer maintained (At least I have a dozen of PRs unmerged).

Ahead to https://vuejs.press if you are interested in