search

izicodes / Froggie-To-Do

An React to-do list with cute frogs to encourage you!
https://froggie-todo.netlify.app/
2 stars 3 forks source link

🌑 Implement Dark Theme #2

Closed izicodes closed 1 year ago

izicodes commented 1 year ago

👏🏾 Description

As part of enhancing user experience and providing more customization options, we should introduce a dark theme.

A dark theme not only looks modern and visually appealing but also helps reduce eye strain, especially during nighttime usage.

This issue will involve adding the necessary styles and functionality to allow users to switch between the default light theme and the new dark theme seamlessly.

📃 To-Do List

tpku commented 1 year ago

Hi. I'd like to contribute and start with this issue.

izicodes commented 1 year ago

Okay great!! ✨ You can follow the to-do list IF YOU WANT It's more like a guidance kind of thing but yes, please! I'll assign this issue to you! Let me know if you need anything! As usual, create a pull request for your changes~! Best of luck! 🥰👍🏾

izicodes commented 1 year ago

I created a branch for this issue so you can make your pull request there!

tpku commented 1 year ago

I created a branch for this issue so you can make your pull request there!

I don't have access to the selected branch "2-implement-dark-mode"

tpku commented 1 year ago

Tasks done:

📃 To-Do List

  • [x] Set up a separate set of CSS styles specifically for the dark theme.
  • [x] Ensure that text and elements have sufficient contrast to maintain readability.
  • [x] Integrate a theme toggle button/icon prominently within the app's interface, allowing users to switch between the light and dark themes easily.
  • [x] Implement the logic to change the theme when the toggle is clicked.
  • [x] Implement CSS custom properties (variables) to define colour values used in the dark theme.
  • [x] Ensure that these variables are utilized consistently across different components, making it easier to maintain and update the theme in the future.
  • [x] Ensure that the dark theme is responsive and works well across different screen sizes and devices.
  • [x] Test the theme on various devices and make necessary adjustments to maintain a consistent user experience.
  • [ ] Implement a mechanism to store the user's theme preference in local storage or cookies, so that their chosen theme persists across sessions.
izicodes commented 1 year ago

I created a branch for this issue so you can make your pull request there!

I don't have access to the selected branch "2-implement-dark-mode"

Hi! So, when you commit your changes from your local repo to the remote GitHub one, and it's all pushed, we should see you latest commits on your forked repo, however, I can't see any new commits from your fork repo!

I suggest doing this:

  1. Commit your changes to the main branch of your forked repo
  2. Check on GitHub it has gone through
  3. You should see a "Compare & pull request" pop up at the home page of your repo, if not:
  4. Go over to my main repo of the project
  5. Go to Pull Request
  6. Click "New pull request"
  7. Where it say "Compare changes across branches, commits, tags, and more below. If you need to, you can also compare across forks" click the link there
  8. The base repo should be mine and the branch should be "2-implement-dark-mode"
  9. The head repo should come from your forked repo and the branch should be the main

I tried doing it myself but it says that no changes have been committed: "There isn’t anything to compare. xiacodes:main is up to date with all commits from tpku:main. Try switching the base for your comparison."

image

image The usual pull request popup on a forked repo when commits have been pushed to the repo

Hope this helps and works for you! Any questions let me know! I follow this method for when I contribute and it works all the time!