Funktionen

Passen Sie das Theme mit CSS-Variablen und Sass-Mixins an oder übernehmen Sie es komponentenweise. Markup-spezifische Optionen beschreibt Spezielles Markup und Klassen.

CSS-Variablen

Zur Anpassung der Standard-Styles der Bibliothek an Ihr Design stehen mehrere CSS-Variablen bereit. Einzelheiten finden Sie in dieser Datei:
Standardvariablen

Verwenden Sie zum Anpassen der Skalierung beim Drücken --ios-theme-button-press-duration statt der gemeinsam genutzten Variablen für die Aktivierungsübergangsdauer.

Liquid Glass-Mixin

Importieren Sie die SCSS-Dateien aus dem Hauptpaket, um das Liquid Glass-Mixin zu verwenden.

@use '@rdlabo/ionic-theme-ios27/src/styles/utils/api.scss';

ion-textarea label.textarea-wrapper {
  @include api.glass-background;
}

Native UI

Sobald Ihr Theme funktioniert, können Sie Native UI hinzufügen, um unterstützte fixierte Bedienelemente unter iOS mit UIKit und SwiftUI darzustellen. Behalten Sie die Theme-Stile für Web-Inhalte und Fallback-Bedienelemente. Native UI wird ab Version 2.0.0 offiziell unterstützt und muss weiterhin ausdrücklich aktiviert werden; Stylesheets allein aktivieren sie nicht.

Selektive Komponenten-Imports

Für eine schrittweise Einführung können Sie einzelne Komponenten statt der vollständigen Theme-Datei importieren.

@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. */

Dunkler Modus mit einzelnen Komponenten

Verwenden Sie SCSS, wenn Sie einzelne Komponenten mit Unterstützung des dunklen Modus importieren, da sich die Selektoren zwischen dauerhaftem, systemgesteuertem und klassenbasiertem Modus unterscheiden.

Dauerhaft:

@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';

:root {
  @include theme-dark.default-variables;
}
@include theme-dark.ion-list;
@include theme-dark.ion-button;
@include theme-dark.ion-fab;
@include theme-dark.ion-tabs;
@include theme-dark.ion-segment;

Systemgesteuert:

@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-list;
  @include theme-dark.ion-button;
  @include theme-dark.ion-fab;
  @include theme-dark.ion-tabs;
  @include theme-dark.ion-segment;
}

Klassenbasiert:

@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';

.ion-palette-dark {
  @include theme-dark.default-variables;
  @include theme-dark.ion-list;
  @include theme-dark.ion-button;
  @include theme-dark.ion-fab;
  @include theme-dark.ion-tabs;
  @include theme-dark.ion-segment;
}

Interaktive Beispiele

Gerenderte Beispiele in der Demo ansehen.