ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Open

#1.438 aberto em 20 de mar. de 2025

Ver no GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (17.256 stars) (2.083 forks)batch import
help wanted

Description

Describe Problem

Currently, the Ionicons website does not support dark mode. Many users prefer or rely on dark themes to reduce eye strain, especially in low-light environments or at night. Having only a light mode can make it harder for some users to navigate the site comfortably.

Describe Preferred Solution

  • Implement a CSS-based dark mode.
  • Add a toggle switch to enable or disable dark mode manually or automatically.
  • Ensure Ionicons Web Components have proper contrast in dark mode.
  • Match the dark mode experience with other Ionic ecosystem sites.

Describe Alternatives

No response

Additional Information

No response

Guia do colaborador

Pilha de tecnologia
typescriptcsshtmlweb components
Domain
frontend
Tipo Issue
feature
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
half day
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
fresh
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
mostly clear
Prerequisites
CSS basicsJavaScript DOM manipulation
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80
Direção de pesquisa
Start by exploring the existing CSS files in the website directory of the ionicons repo. Look for any existing theme variables or CSS custom properties. The dark mode should be implemented using a CSS class on a root element (e.g., 'dark') and custom CSS properties for colors. A toggle switch can be added to the website's header using plain JavaScript or the existing framework. Ensure that the contrast ratio for icons meets WCAG AA standards in dark mode. Review how other Ionic ecosystem sites like the Ionic Framework documentation implement dark mode for consistency.