I’ve created a new app using ionic start appname blank --type=angular and made a few very small changes. For some reason, the header area appears to be in dark mode, but only in iOS, and only most of the time (if I make an edit to the HTML it will sometimes go back to normal).
The only changes I’ve made to the blank template were to create a few pages using ionic g and create a split-pane menu. (See code below.)
discover.page.html
// discover.page.html (my default page)
<ion-header [translucent]="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Discover</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Discover</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<p>
Start with Ionic
<a
target="_blank"
rel="noopener noreferrer"
href="https://ionicframework.com/docs/components"
>UI Components</a
>
</p>
</div>
</ion-content>
app.component.html
// app.component.html
<ion-app>
<ion-split-pane contentId="main">
<ion-menu contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
</ion-app>
ionic info
Ionic:
Ionic CLI : 6.2.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 1.5.1
@capacitor/core : 1.5.1
Utility:
cordova-res (update available: 0.11.0) : 0.8.1
native-run : not installed
System:
NodeJS : v13.2.0 (/usr/local/Cellar/node/13.2.0/bin/node)
npm : 6.13.6
OS : macOS Catalina
Any help or insights would be appreciated. Thanks! --E
