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.

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

Implement dark and light theme toggling with React context #1385

Draft
wants to merge 2 commits into
base: development
Choose a base branch
from

Conversation

tien-han
Copy link
Contributor

@tien-han tien-han commented Nov 14, 2024

Description

This PR implements "theme" toggling, better known as light/dark mode toggling. Dark mode has become a standard option for many websites and products, this change aims to bring this feature to OED.

Fixes #876

To Do's that have to be done before this PR is complete and ready to merge

Note: Fixing one item under a category will likely fix the rest of the items in that category (for "fixes").

Changes that need to be made

  • OED logo has to be updated for dark mode (create/find an inverse of the logo)
  • Help button for theme drop down has to be added
  • Theme toggling documentation has to be created and added to the OED website for reference
  • Add in theme name translations for other languages
  • Stretch goal: implement a way to pick up on the user's preferred them based on their system settings

Drop Down Fixes

  • Groups selection drop down styling
  • Meters selection drop down styling
  • Units selection drop down styling
  • More Options>Rate drop down styling
  • Pages>Upload readings>Create a Meter> Time Zone styling
  • Pages>Groups>Create a Group> Child Meters styling
  • Pages>Groups>Create a Group> Child Groups styling
  • Pages>Groups>Edit Group> Child Meters styling
  • Pages>Groups>Edit Group> Child Groups styling
  • Pages>Meters>Create a Meter> Time Zone styling
  • Pages>Meters>Details/Edit Meter> Time Zone styling
  • Pages>Admin Setting> Default Time Zone styling

Calendar Fixes

  • More Options>Date Range>calendar view styling

Input Field Fixes

  • More Options>Normalize by Area>Area Unit input styling

Card Fixes

  • Pages>Conversions> cards styling
  • Pages>Groups> cards styling
  • Pages>Meters> cards styling
  • Pages>Units> cards styling
  • Pages>Users> cards styling

Type of change

  • Note merging this changes the database configuration.
  • This change requires a documentation update

Checklist

  • I have followed the OED pull request ideas
  • I have removed text in ( ) from the issue request
  • You acknowledge that every person contributing to this work has signed the OED Contributing License Agreement and each author is listed in the Description section.

Limitations

(Describe any issues that remain or work that should still be done.)

@tien-han
Copy link
Contributor Author

@huss I'm having a lot of fun with figuring out this issue (learning how to use React's context was really difficult but I get it now!), but I have two questions for you. No rush on answering, they're not immediately important.

  1. Do you have other OED logo's available? I'm looking for an inverse logo (black to white, white to black). With the current logo in dark mode, the edges of the logo look very pixelated. No worries if not, I can look into options.
image
  1. I would like to add in a Help Page to the OED website to explain how the theme toggling works (like how there's one for Languages). How would I go about this?

Not a question, but I think the OED website's V1.0.0 documentation is missing a page for Language Settings.
When clicking on the Help button for the Language Settings, I get routed to https://openenergydashboard.org/v1.0.0/language.html. However, this is a dead link as the language documentation appears to be located at https://openenergydashboard.org/helpV0_8_0/language/.

@huss
Copy link
Member

huss commented Nov 14, 2024

@tien-han Thanks for working on this and asking these questions.

1. Do you have other OED logo's available? I'm looking for an inverse logo (black to white, white to black). With the current logo in dark mode, the edges of the logo look very pixelated. No worries if not, I can look into options.

I don't have it now but I think the art person who has helped before would be willing to do this. I'll start the process and let you know when it is done.

2. I would like to add in a Help Page to the OED website to explain how the theme toggling works (like how there's one for Languages). How would I go about this?

I have it all set up on my machine to capture the images correctly. Generally, the developer just notes there is a documentation change and I/the project makes it happen. In this case you simply put in a new link address (maybe darkmode/ in the help popup and then the page is created there. If you personally want to do it then we can discuss the details. It isn't too hard but there are some details. Also note we often delay updating the help until later because there may be other changes in how a page looks that is outside the work done.

Not a question, but I think the OED website's V1.0.0 documentation is missing a page for Language Settings. When clicking on the Help button for the Language Settings, I get routed to https://openenergydashboard.org/v1.0.0/language.html. However, this is a dead link as the language documentation appears to be located at https://openenergydashboard.org/helpV0_8_0/language/.

Good catch. I found this last week when working with someone. PR #1383 is supposed to fix the few links that were off. The page is there but the location moved for all pages with the website update. It is hoped to be reviewed relatively soon (someone has agreed to review it) and then it should be added into OED.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark Mode Option
2 participants