[GH-ISSUE #107] Darkmode 🌑

kerem commented

2026-02-26 18:45:05 +03:00

Owner

Originally created by @ElTimuro on GitHub (Apr 15, 2023).
Original GitHub issue: https://github.com/documenso/documenso/issues/107

Dark mode reduces eye strain, saves battery, and is nice to look at
As a well-designed tool this should be implemented with care for detail and complement an equally nice light-mode
Optional Automatic switch could be a nice addon

_{From SyncLinear.com | DOC-249}

Originally created by @ElTimuro on GitHub (Apr 15, 2023). Original GitHub issue: https://github.com/documenso/documenso/issues/107 * Dark mode reduces eye strain, saves battery, and is nice to look at * As a well-designed tool this should be implemented with care for detail and complement an equally nice light-mode * Optional Automatic switch could be a nice addon <sub>From [SyncLinear.com](https://synclinear.com) | [DOC-249](https://linear.app/documenso/issue/DOC-249/darkmode-%F0%9F%8C%91)</sub> <sub>From [SyncLinear.com](https://synclinear.com) | [DOC-249](https://linear.app/documenso/issue/DOC-249/darkmode-🌑)</sub>

kerem closed this issue

2026-02-26 18:45:05 +03:00

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@arjunbharti commented on GitHub (Apr 19, 2023):

@ElTimuro hey, would love to pick up this one!

@arjunbharti commented on GitHub (Apr 19, 2023): @ElTimuro hey, would love to pick up this one!

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@Mythie commented on GitHub (Apr 19, 2023):

@ElTimuro hey, would love to pick up this one!

Sounds great! When raising a PR be sure to demonstrate your visual changes 😄

@Mythie commented on GitHub (Apr 19, 2023): > @ElTimuro hey, would love to pick up this one! Sounds great! When raising a PR be sure to demonstrate your visual changes 😄

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@ElTimuro commented on GitHub (Apr 20, 2023):

@arjunbharti Would love to see it.
Be aware, that a lot of visual stuff will still change, and may overwrite your work at some point
Still Dark mode would be way down the else otherwise so I'm excited :)

@ElTimuro commented on GitHub (Apr 20, 2023): - @arjunbharti Would love to see it. - Be aware, that a lot of visual stuff will still change, and may overwrite your work at some point - Still Dark mode would be way down the else otherwise so I'm excited :)

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@arjunbharti commented on GitHub (Apr 20, 2023):

@Mythie before starting, just wanted to confirm if i can use context api to implement dark mode in the app because i noticed it is used nowhere in the app. If we use the custom hook then there will be a hell lot of props drilling and it will become bit challenging when scaling the app. So, let me know if i can go ahead with the approach of introducing context api in the project.
cc @ElTimuro

@arjunbharti commented on GitHub (Apr 20, 2023): @Mythie before starting, just wanted to confirm if i can use context api to implement dark mode in the app because i noticed it is used nowhere in the app. If we use the custom hook then there will be a hell lot of props drilling and it will become bit challenging when scaling the app. So, let me know if i can go ahead with the approach of introducing context api in the project. cc @ElTimuro

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@ElTimuro commented on GitHub (Apr 21, 2023):

Fine for me, still would like to hear @Mythie

@ElTimuro commented on GitHub (Apr 21, 2023): - Fine for me, still would like to hear @Mythie

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@Mythie commented on GitHub (Apr 21, 2023):

@Mythie before starting, just wanted to confirm if i can use context api to implement dark mode in the app because i noticed it is used nowhere in the app. If we use the custom hook then there will be a hell lot of props drilling and it will become bit challenging when scaling the app. So, let me know if i can go ahead with the approach of introducing context api in the project. cc @ElTimuro

Context API is definitely allowed, please also ensure you respect prefers-color-scheme when no preference is specified and use a cookie for persisting preferences if it can be set in app. This will help avoid flashes of content and hydration issues 😄

@Mythie commented on GitHub (Apr 21, 2023): > @Mythie before starting, just wanted to confirm if i can use context api to implement dark mode in the app because i noticed it is used nowhere in the app. If we use the custom hook then there will be a hell lot of props drilling and it will become bit challenging when scaling the app. So, let me know if i can go ahead with the approach of introducing context api in the project. cc @ElTimuro Context API is definitely allowed, please also ensure you respect `prefers-color-scheme` when no preference is specified and use a cookie for persisting preferences if it can be set in app. This will help avoid flashes of content and hydration issues 😄

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@arjunbharti commented on GitHub (Apr 23, 2023):

how's it looking? would love to know your thoughts :) @ElTimuro @Mythie

Mobile view	Mobile view

@arjunbharti commented on GitHub (Apr 23, 2023): how's it looking? would love to know your thoughts :) @ElTimuro @Mythie ![Screenshot 2023-04-23 at 10 17 51 PM](https://user-images.githubusercontent.com/60930192/233853252-a8ab95d5-cfcf-4174-afe8-59d456a01686.png) ![Screenshot 2023-04-23 at 10 18 17 PM](https://user-images.githubusercontent.com/60930192/233853287-41b0ab12-9f11-4d21-b4f9-e722a189a1d1.png) ![Screenshot 2023-04-23 at 10 18 25 PM](https://user-images.githubusercontent.com/60930192/233853300-b7f6c912-aaea-4d99-a794-895a9e50ad62.png) ![Screenshot 2023-04-23 at 10 20 32 PM](https://user-images.githubusercontent.com/60930192/233853318-efb68018-378c-4877-9794-6e96e2c69c8d.png) Mobile view | Mobile view :----------------------------------------------------------:|:-----------------------------------------------------------: ![](https://user-images.githubusercontent.com/60930192/233853354-f9784256-d5fb-4d09-8208-87507a2b6de9.png) | ![](https://user-images.githubusercontent.com/60930192/233853371-65bbe1ad-a9fe-4a9c-a610-442296408af3.png)

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@ElTimuro commented on GitHub (Apr 24, 2023):

Nice so far
My main remark is, that the background seems to light
You could invert the dark boxes and lighter background
Or Make the Background as dark and just circle the Boxes etc. white
Text fields should also be dark background, light font
Secondary Buttons should be dark background

@ElTimuro commented on GitHub (Apr 24, 2023): - Nice so far - My main remark is, that the background seems to light - You could invert the dark boxes and lighter background - Or Make the Background as dark and just circle the Boxes etc. white - Text fields should also be dark background, light font - Secondary Buttons should be dark background

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@Mythie commented on GitHub (Apr 25, 2023):

Awesome work so far, my comments are the same as Timur's typically it goes darkest to lightest in terms of elements 😄

@Mythie commented on GitHub (Apr 25, 2023): Awesome work so far, my comments are the same as Timur's typically it goes darkest to lightest in terms of elements 😄

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@PeerRich commented on GitHub (May 26, 2023):

i would deprioritize this, to be honest. its a lot of work and also more work to maintain., we shipped dark mode after 2.0

@PeerRich commented on GitHub (May 26, 2023): i would deprioritize this, to be honest. its a lot of work and also more work to maintain., we shipped dark mode after 2.0

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@arjunbharti commented on GitHub (May 27, 2023):

@PeerRich makes sense and obviously you had been through this with cal
i've been implementing it here (yes, took good time tbh) and kind of realised that it would take little more time and effort.
again, its your call @ElTimuro @Mythie
i can pick something else and help make v1 a success 😉

@arjunbharti commented on GitHub (May 27, 2023): @PeerRich makes sense and obviously you had been through this with `cal` i've been implementing it here (yes, took good time tbh) and kind of realised that it would take little more time and effort. again, its your call @ElTimuro @Mythie i can pick something else and help make v1 a success 😉

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@OmarMcAdam commented on GitHub (May 28, 2023):

If you switch to using the Radix colors with TW
Implementing DarkMode would be fairly automated.
Radix color names have a hex code for light and dark mode. i.e. build in light mode, it will automatically look good in dark mode
https://www.radix-ui.com/colors
Best to use these conventions: https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale

@OmarMcAdam commented on GitHub (May 28, 2023): If you switch to using the Radix colors with TW Implementing DarkMode would be fairly automated. Radix color names have a hex code for light and dark mode. i.e. build in light mode, it will automatically look good in dark mode https://www.radix-ui.com/colors Best to use these conventions: https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@doug-andrade commented on GitHub (Jun 14, 2023):

Fixed #203

@doug-andrade commented on GitHub (Jun 14, 2023): Fixed #203

kerem commented

2026-02-26 18:45:06 +03:00

Author

Owner

@fmerian commented on GitHub (Aug 22, 2023):