javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 06:09:31 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/docs/themes
History
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
..
README.md
refactor(themes): add modular themes directory structure and docs (#30640)
2025-09-25 15:39:40 -04:00

README.md

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'