ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Aberta

#1.438 aberto em 20 de mar. de 2025

Ver no GitHubGuia do colaborador
 (1 comentário) (0 reação) (0 responsável)TypeScript (2.083 forks)batch import
help wanted

Métricas do repositório

Stars
 (17.256 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

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

Direção de pesquisa
Comece explorando os arquivos CSS existentes no diretório do site do repositório ionicons. Procure por quaisquer variáveis de tema ou propriedades CSS personalizadas existentes. O modo escuro deve ser implementado usando uma classe CSS em um elemento raiz (por exemplo, 'dark') e propriedades CSS personalizadas para cores. Um botão de alternância pode ser adicionado ao cabeçalho do site usando JavaScript puro ou o framework existente. Certifique se de que a taxa de contraste para os ícones atenda aos padrões WCAG AA no modo escuro. Revise como outros sites do ecossistema Ionic, como a documentação do Ionic Framework, implementam o modo escuro para consistência.
Pilha de tecnologia
typescriptcss
Domain
frontend
Tipo Issue
Funcionalidade
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.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
HTMLCSSJavaScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
75