mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
fea1e64920
Issue number: internal --------- ## What is the new behavior? Separates the themes directory for each new modular theme. Documents the new structure. ## Does this introduce a breaking change? - [ ] Yes - [x] No Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
52 lines
2.1 KiB
Markdown
52 lines
2.1 KiB
Markdown
# 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'`
|