mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00

Files

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

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>

2025-09-25 15:39:40 -04:00

2.1 KiB

Raw Permalink Blame History

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 package.

Directory Structure

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'

2.1 KiB Raw Permalink Blame History