Add light/dark mode for all pages.

codu-code / codu

Codú's open-source codebase. A space for coders. Visit our community!

https://codu.co/

Apache License 2.0

120 stars 91 forks source link

Add light/dark mode for all pages. #63

Closed NiallJoeMaher closed 3 days ago

NiallJoeMaher commented 1 year ago

I would love to have a toggle feature like this Tailwind demo: https://syntax.tailwindui.com/

Should use the system settings by default
Use the dark: class to make it easier to control/update
We probably need a Theme wrapper for the application to make sure we can control it.
```
### Tasks
```
[ ] https://github.com/codu-code/codu/issues/432
[ ] https://github.com/codu-code/codu/issues/433
[ ] https://github.com/codu-code/codu/issues/434
[ ] https://github.com/codu-code/codu/issues/435
[ ] https://github.com/codu-code/codu/issues/436
[ ] https://github.com/codu-code/codu/issues/437

karnikagupta30 commented 1 year ago

@NiallJoeMaher Can you assign me this issue?

pkspyder007 commented 1 year ago

@tokyo3001 sure you can pick it up

jh3y commented 1 year ago

Has there been some progress on this @tokyo3001?

patrickhladun commented 1 year ago

@jh3y @tokyo3001 is there any progress on this issue?

NiallJoeMaher commented 1 year ago

If I get no updates today I will assign it to you @patrickhladun

thanhsonng commented 1 year ago

I can pick up this issue if it is important now and no one is doing it.

NiallJoeMaher commented 1 year ago

There isn't anyone working on this yet. As you see it's been open since October. It's a nice to have as it doesn't impact functionality thankfully. If you want to tackle it I'd be happy to assign it you!

thanhsonng commented 1 year ago

I asked because this is the only issue with the Help wanted tag 😄 I don't mind taking it for now and joining more urgent issues in the future.

By the way, since this issue is heavily related to UI, do we have any UI design documentation/Figma file? If not, I can also come up with my version of dark/light UI then we can iterate from that.

NiallJoeMaher commented 1 year ago

We had some light/dark mode pages earlier so I need to dig out some designs. Let's put this on hold until I have some designs for you or else we could end up in an endless back and forth 😹

DarrachBarneveld commented 11 months ago

Would like to assist if not parked?

NiallJoeMaher commented 11 months ago

Not parked! I'll link you the designs and some context etc. later or tomorrow. I'm about to jump on a flight. Because we can split this into multiple tasks.

NiallJoeMaher commented 11 months ago

I found it!

https://www.figma.com/file/yKc7ind3lHUTpqkjTePy1N/codu.co?type=design&node-id=107%3A164&mode=design&t=DyfBx9s5qMItxEPZ-1

Light mode

I'm going to make a task list and we can start getting this done for Hacktoberfest! 🪂

NiallJoeMaher commented 11 months ago

@DarrachBarneveld the task list is here now: https://github.com/codu-code/codu/issues/63#issue-1400957466

pateldivyesh1323 commented 11 months ago

@NiallJoeMaher Is there any task which will tackle light/dark mode for header and footer?

NiallJoeMaher commented 11 months ago

@pateldivyesh1323 great thinking! I think there is a few tasks you've made me think of.

The pop up menus (having the appropriate dark mode)
The footer #462 (leave a comment so I can assign it to you)
The sidebar features (screenshot below):

pateldivyesh1323 commented 11 months ago

@NiallJoeMaher

Support Us Page : Does not have dark mode
Getting Started, Your Posts, Profile Settings, Saved Posts : Does not have Light mode