Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#73 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
56/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react, tailwindcss, vite
Lĩnh vực
design, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
JavaScript
Star
3
Fork
2
Merge trung bình
9 giờ 29 phút
Pull request đã merge (30 ngày)
40

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của KEX-03/taskflow

Tất cả issue của KEX-03/taskflow

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.