ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Open

#1,438 创建于 2025年3月20日

在 GitHub 查看
 (1 评论) (0 反应) (0 负责人)TypeScript (17,256 star) (2,083 fork)batch import
help wanted

描述

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

贡献者指南

技术栈
typescriptcsshtmlweb components
领域
frontend
议题类型
feature
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
half day
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
fresh
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
CSS basicsJavaScript DOM manipulation
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
80
研究方向
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.