Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
iOS 13 dark mode not working on real device
See original GitHub issueDescription of the problem:
Affected platform
- Android
- [#] iOS
- electron
- web
OS of the development machine
- Windows
- [#1912 ] macOS
- linux
Other information: I have added dark mode support in my Ionic app using below code. This works well on the device when the website is opened in safari.
Also, it works when I run the application in the simulator iOS 13.
But when running the application as a capacitor application. Media query prefers-color-scheme: dark has no effect at all.
@media (prefers-color-scheme: dark) {
:root {
--ion-border-color: var(--ion-color-dark-shade);
--ion-background-color: var(--ion-color-dark);
--ion-background-color-rgb: var(--ion-color-dark-rgb);
--ion-text-color: var(--ion-color-light);
--ion-text-color-rgb: var(--ion-color-light-rgb);
--ion-color-step-50: #232323;
--ion-color-step-100: #2e2e2e;
--ion-color-step-150: #3a3a3a;
--ion-color-step-200: #454545;
--ion-color-step-250: #515151;
--ion-color-step-300: #5d5d5d;
--ion-color-step-350: #8b8b8b;
--ion-color-step-400: #747474;
--ion-color-step-450: #7f7f7f;
--ion-color-step-500: #8b8b8b;
--ion-color-step-550: #979797;
--ion-color-step-600: #a2a2a2;
--ion-color-step-650: #aeaeae;
--ion-color-step-700: #b9b9b9;
--ion-color-step-750: #c5c5c5;
--ion-color-step-800: #d1d1d1;
--ion-color-step-850: #dcdcdc;
--ion-color-step-900: #e8e8e8;
--ion-color-step-950: #f3f3f3;
}
.svg-container{
background: #fff;
color: #000;
}
.custom-divider{
background-color: var(--ion-background-color);
}
.long-desc-workshop *{
background-color: var(--ion-background-color) !important;
}
.action-sheet-group.sc-ion-action-sheet-md:first-child,
.action-sheet-group.sc-ion-action-sheet-md:last-child,
.action-sheet-button.sc-ion-action-sheet-md,
.action-sheet-button.activated.sc-ion-action-sheet-md{
background: var(--ion-background-color);
}
}
Capacitor version:
"@capacitor/android": "1.1.1",
"@capacitor/cli": "1.1.1",
"@capacitor/core": "1.1.1",
"@capacitor/ios": "1.1.1",
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
How to Fix 'iOS 13 Dark Mode Not Working' Issue - Bollyinside
If the app is fully up to date, but still not solidifying with iOS 13's dark mode, check the app settings. While many...
Read more >Top 5 Ways to Fix iOS 16 Stuck on Dark Mode - Tenorshare
Way 1: Restart your iPhone; Way 2: Hard Reset your iPhone; Way 3: Repair iPhone System to Get Out of Dark Mode Stuck...
Read more >Dark Mode Not Working on iPhone and iPad in iOS 15
Quickly fix iOS 13 /14 dark mode issues on iPhone and iPad, Dark mode not enabling automatically or Turning off itself. repair all...
Read more >App Not Following iOS 13's Dark Mode? Check These Settings
How To: App Not Following iOS 13's Dark Mode? Check These Settings · Step 1Check That the App Is Updated · Step 2Check...
Read more >Use Dark Mode on your iPhone and iPad - Apple Support
Turn on Dark Mode for a great viewing experience in low-light environments. Display & Brightness screen showing Appearance and Brightness ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
How?
Got it working