Adding Ionic Dark Mode Support for iOS 13

Channel:
Australia Joshua Morony
Subscribers:
81,900
Published on ● Video Link: https://www.youtube.com/watch?v=soADEpvGi1Q


Category:
Tutorial
Duration: 13:35
4,838 views
80

In this video, we walk through how to add support for iOS 13 dark mode and light mode for your Ionic applications. This allows you to listen for a native preference from the user and adjust the theme of your application accordingly.

We also add a method for manually changing the theme within the application.

Ionic Dark Mode Documentation: https://ionicframework.com/docs/theming/dark-mode
CSS Variables in Ionic: https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/
Theme Switcher Service: https://www.joshmorony.com/creating-a-theme-switcher-service-in-ionic-using-css4-variables/

#ionic #ios13 #stenciljs

- Learn Ionic: https://www.joshmorony.com/building-mobile-apps-with-ionic-2/

- Find me on Twitter: https://twitter.com/joshuamorony

- More Ionic tutorials: https://www.joshmorony.com/blog/



Other Videos By Joshua Morony


2020-03-03Staggered List Animation in Ionic (without SASS)
2020-02-25How to Use Ionic Controllers in Ionic 5.x
2020-02-04SLIDE DRAWER WITH IONIC GESTURES - Ionic UI Challenge #3
2020-01-14Ionic 5 Preview: Create Custom Gestures (Simple Tinder Card Animation)
2020-01-07Ionic 5 Preview: The Ionic Animations API
2019-11-19EXPANDING BUTTON SCREEN TRANSITION - Ionic UI Challenge #2
2019-11-12ANIMATED CARD LAYOUT - Ionic UI Challenge #1
2019-11-05TAG SPOTTER - Ionic Community Design/UX Review #1
2019-10-29Automatically Create StencilJS Components with the Generate Command
2019-09-30Debugging the Ionic White Screen of Death
2019-09-23Adding Ionic Dark Mode Support for iOS 13
2019-09-17Implementing Code You Don't Understand - Live Coding a Video Streaming Component
2019-09-10Async / Await Basics in JavaScript Explained
2019-08-27GET/POST Requests in StencilJS with the Fetch API
2019-08-13⚡️IONIC LIGHTNING TIPS ⚡️Hide Splash Screen Manually for Faster Launch Times
2019-08-05⚡️IONIC LIGHTNING TIPS ⚡️Creating Custom Theme Colours
2019-07-30Creating Unit Tests for StencilJS Components
2019-07-22Ionic + StencilJS Routing: Detecting When a View is Entered
2019-07-15Running Native iOS/Android Code with Ionic
2019-07-09Exploring the Source Code: Understanding Capacitor's Storage API
2019-06-11[LESSON 01]: Getting Started with Ionic + Stencil (Creating Ionic Applications with StencilJS)


Tags:
ionic
ionic4
ionic 4
tutorial
tutorials
ionic tutorials
ionic framework
coding
coding tutorials
angular
angular tutorials
cordova
capacitor tutorials
mobile
mobile apps
apps
html5
ios
android
native
hybrid
pwa
web apps
progressive web applications
programming
software
ios 13
dark mode
light mode
themes
css variables