Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode #1865

Open
manuales opened this issue Sep 17, 2019 · 38 comments
Open

Add dark mode #1865

manuales opened this issue Sep 17, 2019 · 38 comments
Assignees
Labels
contribution welcome Contributions welcome good first issue Good for newcomers type: feature request Request to add a new feature

Comments

@manuales
Copy link

manuales commented Sep 17, 2019

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

Docu

@flozero flozero added the type: feature request Request to add a new feature label Sep 19, 2019
@flozero
Copy link
Collaborator

flozero commented Sep 19, 2019

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

@kefranabg kefranabg added contribution welcome Contributions welcome good first issue Good for newcomers labels Sep 21, 2019
@vinayakkulkarni
Copy link
Contributor

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
Copy link
Contributor

tolking commented Sep 23, 2019

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
Copy link
Contributor

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

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

Mister-Hope commented Oct 9, 2019

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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link
Contributor

image
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
Copy link
Contributor

Mister-Hope commented Oct 15, 2019

@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
Copy link
Contributor

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

@superusercode
Copy link

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

@quantrung9
Copy link

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

@Mister-Hope
Copy link
Contributor

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

@Mister-Hope
Copy link
Contributor

@kefranabg check this #2232

@KieranHunt
Copy link
Contributor

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
Copy link
Contributor

Mister-Hope commented Mar 18, 2020

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
Copy link
Contributor

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
Copy link
Contributor

tolking commented Mar 21, 2020

  • 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
Copy link
Contributor

Mister-Hope commented Mar 22, 2020

@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
Copy link

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

Dorson commented Apr 9, 2020

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
Copy link
Contributor

Mister-Hope commented Apr 10, 2020

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
Copy link
Contributor

Mister-Hope commented Apr 13, 2020

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
Copy link
Contributor

Mister-Hope commented Apr 14, 2020

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

Dorson commented Apr 14, 2020

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
Copy link
Contributor

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

Dorson commented Apr 15, 2020

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.

@quantrung9
Copy link

quantrung9 commented Apr 15, 2020

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

@Mister-Hope
Copy link
Contributor

Mister-Hope commented Apr 15, 2020

I add a switch in the newest PR.

Here is a preview

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

@KieranHunt
Copy link
Contributor

That's very cool, @Mister-Hope

@yonkov
Copy link

yonkov commented Apr 16, 2020

@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
Copy link
Contributor

@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
Copy link

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

@shindodkar
Copy link

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

@Mister-Hope
Copy link
Contributor

Mister-Hope commented Apr 19, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
contribution welcome Contributions welcome good first issue Good for newcomers type: feature request Request to add a new feature
Projects
None yet
Development

No branches or pull requests