ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Open

#1438 opened on Mar 20, 2025

View on 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

Contributor guide

Tech stack
typescriptcsshtmlweb components
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
CSS basicsJavaScript DOM manipulation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
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.