Skip to content

refactor(themes): add modular themes directory structure and docs #30640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
51 changes: 51 additions & 0 deletions docs/themes/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Ionic Themes

The Ionic Framework uses a modular theme system that separates core functionality from visual styling. Each theme is distributed in the [@ionic/theme](https://www.npmjs.com/package/@ionic/theme) package.

## Directory Structure

```bash
core/
└── src/
└── themes/
├── base/
│ ├── default.tokens.ts # Base design tokens shared across all themes
│ ├── dark.tokens.ts # Dark mode tokens shared across all themes
│ └── light.tokens.ts # Light mode tokens shared across all themes
├── ionic/
│ ├── default.tokens.ts # Ionic theme default design tokens
│ ├── dark.tokens.ts # Ionic theme dark mode tokens
│ └── light.tokens.ts # Ionic theme light mode tokens
├── ios/
│ ├── default.tokens.ts # iOS theme default design tokens
│ ├── dark.tokens.ts # iOS theme dark mode tokens
│ └── light.tokens.ts # iOS theme light mode tokens
├── md/
│ ├── default.tokens.ts # MD theme default tokens
│ ├── dark.tokens.ts # MD theme dark mode tokens
│ └── light.tokens.ts # MD theme light mode tokens
├── functions.color.scss # Sass color utility functions
├── functions.font.scss # Sass font and typography functions
├── functions.sizes.scss # Sass sizing and spacing functions
├── functions.string.scss # Sass string manipulation functions
└── mixins.scss # Sass mixins
```

## Available Themes

### iOS Theme (`@ionic/theme/ios`)
- **Design System**: iOS Human Interface Guidelines
- **Usage**: `import '@ionic/theme/ios'`

### Material Design Theme (`@ionic/theme/md`)
- **Design System**: Material Design
- **Usage**: `import '@ionic/theme/md'`

### Ionic Theme (`@ionic/theme/ionic`)
- **Design System**: Ionic-branded design system
- **Usage**: `import '@ionic/theme/ionic'`
Loading