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.