egoist / docute

📚 Effortless documentation, done right.
https://docute.egoist.dev
MIT License
3.8k stars 427 forks source link

Feature: Dark mode #189

Closed imsus closed 5 years ago

imsus commented 5 years ago

I think it's better to have a button to switch between light/dark mode for default theme.

And further we can customize the css for dark mode itself.

egoist commented 5 years ago

I'd like to have a dark theme first, starting by exposing more CSS variables 🤔

dobromir-hristov commented 5 years ago

I am up for expanding the current theme with more variables and stuff. Do you guys have a nice example of a dark theme that I could "borrow" colors from lol.

How would you like to have the dark theme, by adding a class to the body, for example, that would switch the css vars?

egoist commented 5 years ago

@dobromir-hristov the only one that came to my mind is https://hyper.is/

How would you like to have the dark theme, by adding a class to the body, for example, that would switch the css vars?

LGTM. we can add the classname to root component instead and allow users to configure it via theme: 'dark' option.

dobromir-hristov commented 5 years ago

And we get the provided option from vuex? OK, should work, will try to prep something these days.

egoist commented 5 years ago

4.11.1 added dark theme support:

屏幕快照 2019-03-23 上午1 43 47

More css variables are exposed as well: https://docute.org/guide/customization#custom-style

dobromir-hristov commented 5 years ago

Hah, the way you implemented it is super clever, nice one :)

egoist commented 5 years ago

Closing as it's resolved :)