Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#73 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@gracysinngh ya está trabajando en esto.

Desde el 28/10/2026.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
56/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react, tailwindcss, vite
Área
design, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
JavaScript
Estrellas
3
Forks
2
Merge medio
10 h 33 min
PR fusionados (30 d)
41

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de KEX-03/taskflow

Todos los issues de KEX-03/taskflow

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.