Checkmate Dark mode switcher before login and inside dashboard

We need a dark mode switcher before logging in and inside the dashboard. Here is a good option: https://web.dev/patterns/theming/theme-switch

It can be added here for login:

And here for the dashboard:

Dec 10 '24 04:12 gorkem-bwl

Hello! I can work on this.

In this issue, do we also include the functionality of the dark mode switcher?

Dec 11 '24 07:12 peterpardo

Hi Peter. Yes, we need that functionality. Let me know if you still would like to work on it.

Dec 11 '24 20:12 gorkem-bwl

Got it. I can work on this one.

Dec 12 '24 04:12 peterpardo

For the dark mode switch in the Dashboard, do you want to place it on the left of the ellipsis vertical icon?

Dec 12 '24 04:12 peterpardo

For the dark mode switch in the Dashboard, do you want to place it on the left of the ellipsis vertical icon?

Hi @peterpardo ,

Yes I believe that is the idea

Dec 13 '24 03:12 ajhollid

@peterpardo it might be a bit tricky so please share you screenshots/videos here as you progress :)

Dec 13 '24 04:12 gorkem-bwl

I was researching dark mode in Material UI, and I came across this approach: https://mui.com/material-ui/customization/dark-mode/#dark-mode-only

Then while navigating through the source code, I saw this comment regarding changing how we implement themes in the app.

Do we want to include these changes in this issue as well?

Dec 13 '24 14:12 peterpardo

If it is directly related to this issue, you can include it. If you can separate them (e.g implement #1317 and then move on to the one commented), that is easier to review and merge I assume.

Dec 13 '24 14:12 gorkem-bwl

Got it. I think for this issue, we can add the dark mode switcher without the functionality for now. Then create another PR for the functionality which will include the TODO in the comment. What do you think?

Dec 13 '24 16:12 peterpardo

Got it. I think for this issue, we can add the dark mode switcher without the functionality for now. Then create another PR for the functionality which will include the TODO in the comment. What do you think?

Let's go then!

Dec 13 '24 16:12 gorkem-bwl

Hello! Here is the progress for the dark mode switch:

In the Login page: https://github.com/user-attachments/assets/5550d827-3c97-49eb-ab35-9f6b102e365f

In the Sidebar: https://github.com/user-attachments/assets/b383711e-c3c3-484d-8d43-13da7b686ac1

What do you think?

Dec 16 '24 06:12 peterpardo

Hello! Here is the progress for the dark mode switch:

In the Login page: https://github.com/user-attachments/assets/5550d827-3c97-49eb-ab35-9f6b102e365f

In the Sidebar: https://github.com/user-attachments/assets/b383711e-c3c3-484d-8d43-13da7b686ac1

What do you think?

I think they look great.

After this PR we need to remove it from the main settings area (where the dark/light switcher currently is).

Dec 16 '24 14:12 gorkem-bwl

Got it. I'll proceed to publish the PR. Thank you!

Dec 16 '24 14:12 peterpardo

I already included the dark mode functionality in the PR since there are only few changes that I made to make it work.

Dec 16 '24 17:12 peterpardo

I already included the dark mode functionality in the PR since there are only few changes that I made to make it work.

Meaning the PR contains full UI + functionality right?

Dec 16 '24 17:12 gorkem-bwl

I already included the dark mode functionality in the PR since there are only few changes that I made to make it work.

Meaning the PR contains full UI + functionality right?

Yep!

Dec 16 '24 17:12 peterpardo

Great, thanks. Let's add it to our next minor release then, if the review process is positive.

Dec 16 '24 18:12 gorkem-bwl