Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark Mode Option #876

Open
spearec opened this issue Mar 21, 2023 · 5 comments · May be fixed by #1385
Open

Dark Mode Option #876

spearec opened this issue Mar 21, 2023 · 5 comments · May be fixed by #1385
Assignees
@tien-han
Labels
p-low-priority t-enhancement This issues tracks a potential improvement to the software
Milestone
2.x

Comments

@spearec
Copy link
Contributor

spearec commented Mar 21, 2023

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

Many sites on the internet support dark mode, either as a default, compatible with the browser, or just manually set by the user. Since this is mainly a CSS change and redux/react and plotly both support it, I believe this should not be too difficult to implement.

Describe the solution you'd like

There should be a setting, similar to the current language setting, that allows the user to turn on dark mode. Potentially, there can also be an admin preference that allows dark mode to be on by default.
A quick search turned up a number of tutorials on how to add dark mode using redux/react, such as:
https://medium.com/how-to-react/create-dark-mode-in-react-js-using-redux-hooks-9b4155968050

Describe alternatives you've considered

Continue with a single theme, which is already implemented and working fine.

Additional context

This is an issue I may work on in the near future, but I may not have the time; so it could be a good first issue for someone else since I believe it will not be very complicated to implement.
@huss huss added the assigned the issue is currently being worked on by a developer label May 31, 2023
@spearec
Copy link
Contributor Author

spearec commented May 31, 2023 •
edited
Loading

An update on this - I've spent some time looking into adding dark mode and it has proven to be considerably more work than expected.
I have discovered at least four ways to implement this, each to varying degrees of success.
The current "best" version works, but I do not know why; so that's one thing.
There are packages that are intended to style react components (such as styled-components) so that is another avenue I have not explored.

If someone is interested in working on this issue, feel free to reach out to me with any questions and I would be happy to explain my progress so far. I am not actively working on this issue right now.

@spearec spearec removed their assignment Nov 15, 2023
@spearec spearec added p-low-priority and removed assigned the issue is currently being worked on by a developer labels Nov 15, 2023
@huss huss added the t-enhancement This issues tracks a potential improvement to the software label Mar 24, 2024
@huss huss added this to the 1.x milestone Mar 24, 2024
@syrok94
Copy link

syrok94 commented May 2, 2024

Hey, can I work on this?

@huss huss assigned huss and syrok94 and unassigned huss May 2, 2024
@huss
Copy link
Member

huss commented May 2, 2024

Hey, can I work on this?

Sure. We are happy to have help. I've assigned you this issue. @spearec may be able to help/give history and I think their work is at https://github.com/spearec/OED/tree/darkmode. Let me know if I can help.

@tien-han
Copy link
Contributor

Hi Steve, I noticed that there hasn't been any progress on this ticket since May 2023, and I'm not sure if the previous person assigned is still working on it.

Can I take this on?

@huss huss assigned tien-han and unassigned syrok94 Nov 12, 2024
@huss
Copy link
Member

huss commented Nov 12, 2024

@tien-han Thanks for offering to work on this. I've assigned you the issue.

@syrok94 You asked to work on this and were assigned this issue a while ago. If you have anything to report or want to discuss continuing to work on this then please let me know soon as the other developer is going to start. Thanks.

@tien-han tien-han linked a pull request Nov 14, 2024 that will close this issue
Draft
29 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tien-han tien-han

Labels
p-low-priority t-enhancement This issues tracks a potential improvement to the software
Projects
None yet
Milestone
2.x
Development

Successfully merging a pull request may close this issue.

Implement dark and light theme toggling with React context tien-han/OED
4 participants
@huss @tien-han @syrok94 @spearec