Features
Customize the theme with CSS variables and Sass mixins, or adopt it one component at a time. Markup-specific opt-ins are documented in Special markup and classes.
CSS variables
To customize the library's default styles to match your design, several CSS variables are provided. See this file for details:
Default variables
Liquid Glass mixin
Import the SCSS files from the main package to use the liquid glass mixin.
@use '@rdlabo/ionic-theme-ios27/src/styles/utils/api.scss';
ion-textarea label.textarea-wrapper {
@include api.glass-background;
}
Selective component imports
For gradual adoption, you can import individual components instead of the full theme file.
@import '@rdlabo/ionic-theme-ios27/dist/css/utils/translucent';
@import '@rdlabo/ionic-theme-ios27/dist/css/components/ion-action-sheet';
@import '@rdlabo/ionic-theme-ios27/dist/css/components/ion-alert';
@import '@rdlabo/ionic-theme-ios27/dist/css/components/ion-button';
/* Import the remaining components your application uses. */
Dark mode with individual components
Use SCSS when selectively importing components with dark mode support because the selectors differ between Always, System, and Class modes.
Always:
@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';
:root {
@include theme-dark.default-variables;
}
@include theme-dark.ion-button;
@include theme-dark.ion-fab;
@include theme-dark.ion-tabs;
@include theme-dark.ion-segment;
System:
@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';
@media (prefers-color-scheme: dark) {
:root {
@include theme-dark.default-variables;
}
@include theme-dark.ion-button;
@include theme-dark.ion-fab;
@include theme-dark.ion-tabs;
@include theme-dark.ion-segment;
}
Class:
@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';
.ion-palette-dark {
@include theme-dark.default-variables;
@include theme-dark.ion-button;
@include theme-dark.ion-fab;
@include theme-dark.ion-tabs;
@include theme-dark.ion-segment;
}