ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Open

#1,438 opened on 2025年3月20日

GitHub で見る
 (1 comment) (0 reactions) (0 assignees)TypeScript (17,256 stars) (2,083 forks)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
Issue 種別
feature
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
half day
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
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.