-
Notifications
You must be signed in to change notification settings - Fork 4.8k
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
Comments
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 |
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. |
If create a plugin, you may need to add |
Not really required, you can (should) use css variables |
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 css variables sound like a step in the right direction. |
Wow, I just saw this, I built my own blog with this feature. I think it is not hard to make a plugin. |
I did not see any changes on the styles file? |
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. |
@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. |
I checked this, so I am saying I did not see any changes on the style file. So Akruym is dealing with the style? |
@vinayakkulkarni Could you check this stylus file? I think it’s good enough. |
I make a plugin here You can check this out. If it is okey, I will make a PR |
any news on this issue? assuming the offer from Mister-Hope still stands |
Love this feature <3. Still looking forward to it. |
@kefranabg I can open a PR for this. If you need it, just call me. |
@kefranabg check this #2232 |
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:
|
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's modified from I will spend some time in the next few days to have a look at the plugin you provide.
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. |
I am thinking that too, but |
I really like the |
@KieranHunt I change the apprence and the switch with some new commits. I had a look at A plugin is hard to use We can switch to
I shall first ask the team. @kefranabg @meteorlxy @vinayakkulkarni |
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? |
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 ! |
I rebuild my theme with I will ship this feature to the |
I have opened a new PR #2301. This new darkmode is using Also:
Any suggestions are welcomed. 😃 |
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. 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. |
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 : 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. |
💯 @Dorson your repo is great. Good fit for my Jekyll themes also. |
I add a switch in the newest PR. A RFC here, what do you think about the switch? 😃 |
That's very cool, @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: 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. |
This is all incredible. Thank you, everyone! I love VuePress. |
is this open and ready to make changes ? I would like to contribute on this |
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 |
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
The text was updated successfully, but these errors were encountered: