search

abelljs / abell

A Low-Level, Framework Agnostic, Highly Flexible Static-Site-Generator to help you build Static Sites on a smaller learning curve 🌀
https://abelljs.org
MIT License
420 stars 36 forks source link

Dark mode in documentation site #165

Open saurabhdaware opened 1 year ago

saurabhdaware commented 1 year ago

Is your feature request related to a problem? Please describe.

Currently we only added light mode because its better to not have dark mode than having a badly designed dark mode. But at some point we would need a good dark mode since that is expected from documentation sites

Describe the solution you'd like

I think first we'll have to play around colors and decide what type of dark mode we want. A full black dark mode something like vercel? or more like a dim mode?

Opposite to the the current only-light mode, https://v0.abelljs.org had 3 modes - dark, dim, light but then we end up with 3 versions where contrasts and aesthetics get difficult to maintain.

Additional context

This might need few iterations before it goes live on production so the development will likely happen in parallel branch for some time

jatingodnani commented 1 year ago

@saurabhdaware we can use daisy ui for dark light mode.

saurabhdaware commented 1 year ago

I was thinking of avoiding tailwindcss in docs unless it becomes a need. Right now the UI is fairly stable so not sure if introducing new library is required. We should be able to achieve dark mode with css variables. The tricky part is designing and using the right colors and not really the dev implementation.

jatingodnani commented 1 year ago

you can check the different theme in daisy ui then we can implement in simple css variable