search

tjtanjin / react-chatbotify-gallery-website

Gallery website to browse, rate and share themes and plugins for React ChatBotify.
https://gallery.react-chatbotify.com
MIT License
2 stars 8 forks source link

[Task] Add support for light and dark themes #35

Closed tjtanjin closed 2 months ago

tjtanjin commented 2 months ago

Task Description: Developers tend to have different preferences for using light/dark themes (think of your editors). It would be great if such choices are accorded to them on the website as well.

Deliverable(s): An option should be conveniently presented for developers to toggle between light and dark themes.

Additional Context: It is preferable to start on this task ASAP - the codebase grows it'll take more effort.

wlee261 commented 2 months ago

Can I take a swing at this issue?

tjtanjin commented 2 months ago

Can I take a swing at this issue?

Sure thing!

wlee261 commented 2 months ago

Hey @tjtanjin i'm deciding between two approaches and wanted to get your input on which direction you think we should take.

The first approach is to create a set of css variables that are dynamically changed depending on the theme the app is set to. These css variables will be added to the tailwind config and will be treated as design tokens of sorts. The advantage here is that we don't need to style every component with [tailwind_class] and dark:[dark_tailwind_class] and refactoring the themes for the page will be simple (we can just change the token rgb values in index.css). However this will restrict future development to use a constrained set of light/dark color pairings and less freedom overall in choosing colors for design.

The code I've pushed up is a minimal implementation of approach 1. index.css, tailwind.config.js are the most relevant files and then you can view any of the changes i've made to the tailwind classes to get an idea of what's going on 🙂

The other approach is to individually design the dark and light themes at the component level with [tailwind_class] and dark:[dark_tailwind_class].

Lmk what you think or if there's any other approaches you think would be better, thanks!

PR: https://github.com/tjtanjin/react-chatbotify-gallery-website/pull/44

tjtanjin commented 2 months ago

Hey @wlee261, as mentioned in the discussion channel on discord, the common consensus reached is approach 1 (what you've suggested). There'll be a need to make some updates to your PR once #45 is addressed (i.e. when sets of colors have been decided).