Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Light theme (3/3): add a light theme and a theme toggle

Open
  • Is something wrong?
#73 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
56/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react, tailwindcss, vite
Domain
design, frontend

Research direction

Read the preceding “Light theme (2/3)” issue and inspect client/src/index.css, client/src/components/Layout/Sidebar.jsx, and client/index.html. Start by checking how the existing theme tokens are applied across pages, then test the toggle, saved preference, system setting, and initial page load. Done means every page, including Login and Signup, switches themes accessibly and loads with the selected theme without a flash.

Written by the indexing model from the issue text.

Description

difficulty: medium enhancement frontend hacktoberfest help wanted
Context

Last step: with every colour going through theme tokens, a light theme is now mostly a second set of values. Builds on "Light theme (2/3): use the theme tokens on the remaining pages".

Please start this after "Light theme (2/3)" is merged.

Files likely involved
  • client/src/index.css (light values for the tokens)
  • client/src/components/Layout/Sidebar.jsx (the toggle)
  • client/index.html (to avoid a flash of the wrong theme on load)
Acceptance criteria
  • A light theme: the same tokens with light values, set when <html data-theme="light">. Text keeps good contrast (WCAG AA, 4.5:1 for normal text).
  • A theme toggle in the sidebar (with an aria-label, and working when the sidebar is collapsed) switches between dark and light.
  • The choice is saved in localStorage. On a first visit, the theme follows the system setting (prefers-color-scheme).
  • No flash of the wrong theme when the page loads: a tiny inline script in index.html sets data-theme before React starts.
  • The Login and Signup pages follow the theme too.
How to test
  1. Toggle the theme: every page switches, including dialogs, toasts and the loading skeletons.
  2. Reload: the chosen theme stays, with no flash.
  3. Clear localStorage and set your system to light mode: the app starts in light mode.
  4. Check contrast with DevTools (select some text → Accessibility → Contrast).

New here? 👋 Comment below to ask to work on this issue, and wait to be assigned. Then follow CONTRIBUTING.md for setup and how to open a pull request. Questions are welcome in the comments or in Discussions.

Dominant language
JavaScript
Stars
3
Forks
2
Avg merge
6h 50m
Merged PRs (30d)
37

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from KEX-03/taskflow

All issues in KEX-03/taskflow

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.