How to get dark mode in your Ionic 4 apps in 15 mins
Tags: ionic, darkmode, dark
Published: 2020-03-28 12:07:42

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="b4ae" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="28b6" class="graf graf--p graf-after--figure">This post will help you convert your Ionic 4 app to support a dark mode for new age browsers and users.</p><p name="0130" class="graf graf--p graf-after--p">If you are a developer, or even an avid smart phone user, every now and then you must feel that white background-black text takes a toll on your eyes after few hours. Your eyes get tired with the brightness.</p><p name="54ba" class="graf graf--p graf-after--p is-selected">This is not just a fictional idea. There are <a href="https://medium.com/the-mission/digital-eye-strain-is-destroying-your-eyes-4ac7f8e87b24"  class="markup--anchor markup--p-anchor"    target="_blank">studies</a> that show how prolonged usage of a bright screen leads to tired eyes. Even the <a href="https://www.essilorusa.com/newsroom/be-careful-color-and-font-choice-could-hurt-your-eyes"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">color and fonts</a> on a website/app affect your eye strain. So it was pretty obvious for quite some time that every browser, app and major software will try to have a dark mode, less strenuous to human eyes.</p><blockquote name="3d88" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">This example app’s source code is available in </strong><a href="https://github.com/enappd/ionic-4-dark-mode"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-4-dark-mode</strong></a><strong class="markup--strong markup--blockquote-strong"> Github repository.</strong></blockquote><h3 name="01f3" class="graf graf--h3 graf--startsWithDoubleQuote graf-after--blockquote">“These are Dark&nbsp;Times”</h3><p name="f8ed" class="graf graf--p graf-after--h3">These are times of Dark modes. iOS now has a default dark mode. Android has its own dark mode, while both iOS and Android apps have dark modes in-built as well.</p><p name="c0ae" class="graf graf--p graf-after--p"><a href="https://redirect.viglink.com/?format=go%26jsonp=vglnk_156827927164512%26key=ce074976249105acf14d8c9cf69bdcd1%26libId=k0ggyhtl01003n6p000DAban3yjkb%26loc=https%253A%252F%252Fwww.cnet.com%252Fnews%252Fdark-mode-web-browsers-are-here-safari-firefox-soon-chrome%252F%26v=1%26out=https%253A%252F%252Fwebkit.org%252Fblog%252F8840%252Fdark-mode-support-in-webkit%252F%26ref=https%253A%252F%252Fwww.google.com%252F%26title=Here%2520come%2520the%2520dark-mode%2520browsers%2520--%2520and%2520websites%2520-%2520CNET%26txt=Safari%2520on%2520MacOS%2520became%2520the%2520dark-mode%2520capable%2520browser"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Safari on MacOS</a> became the dark-mode capable browser in March. It’ll be joined by Safari on iPhones and iPads with this fall’s releases of iOS and the new iPadOS. <a href="https://redirect.viglink.com/?format=go%26jsonp=vglnk_156827926263511%26key=ce074976249105acf14d8c9cf69bdcd1%26libId=k0ggyhtl01003n6p000DAban3yjkb%26loc=https%253A%252F%252Fwww.cnet.com%252Fnews%252Fdark-mode-web-browsers-are-here-safari-firefox-soon-chrome%252F%26v=1%26out=https%253A%252F%252Fhacks.mozilla.org%252F2019%252F05%252Ffirefox-67-dark-mode-css-webrender%252F%26ref=https%253A%252F%252Fwww.google.com%252F%26title=Here%2520come%2520the%2520dark-mode%2520browsers%2520--%2520and%2520websites%2520-%2520CNET%26txt=Firefox%2520added%2520dark%2520mode%2520support"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firefox</a> also added dark mode in May 2019. Google Chrome received a dark mode on Android with version 74, and now Chrome browser also has a dark mode. Xcode also supports dark mode now, and I believe Android Studio will follow suit.</p><p name="a204" class="graf graf--p graf-after--p">All in all, it can be safely said that Dark mode is the new “thing” in UI interfaces these days. Be it for eye strain, or just for gaining popularity, it’s always good to have a dark mode for your app.</p><h3 name="acbc" class="graf graf--h3 graf-after--p">Is Dark Mode same as Dark Theme&nbsp;?</h3><p name="b53b" class="graf graf--p graf-after--h3">Dark mode is a little different from Dark Themes. Software have had themes for decades (remember the cool Winamp themes some 15 years ago? )</p><figure tabindex="0" contenteditable="false" name="75dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 572px; max-height: 281px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.1%;"></div><img class="graf-image" data-image-id="1*ellyBRxdnlIp7HM2Qm11CA.png" data-width="572" data-height="281" src="https://cdn-images-1.medium.com/max/800/1*ellyBRxdnlIp7HM2Qm11CA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">We have always had “dark&nbsp;themes”</figcaption></figure><p name="9662" class="graf graf--p graf-after--figure">Dark Mode is a <a href="https://www.macworld.com/article/3283342/article.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">system wide UI mode</a>, where black text on white background turns to white text on black background, in nut-shell. It’s a bit difficult to contrast things in dark mode, but it is a lot more soothing to eyes, compared to the bright white shiny backgrounds poking in your eyes. System wide Dark mode converts the whole system (e.g. MacOS) to dark mode, and all compatible apps automatically turn to Dark Mode as well. For example, Xcode, chrome etc turn Dark automatically when the Dark mode is applied in settings.</p><figure tabindex="0" contenteditable="false" name="9e28" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 389px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.50000000000001%;"></div><img class="graf-image" data-image-id="1*MMJNLo14s8lDLfi-zDmgWA.gif" data-width="1376" data-height="764" src="https://cdn-images-1.medium.com/max/800/1*MMJNLo14s8lDLfi-zDmgWA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">System wide dark mode in Mac&nbsp;OS</figcaption></figure><p name="ff94" class="graf graf--p graf-after--figure">Compared to Dark themes, Dark mode affects all Dark Mode compatible apps automatically (unless the mode is locked), but dark themes are just….. themes. They can give you a dark mode even if your system OS does not support dark mode. ( but what’s wrong in that&nbsp;?)</p><p name="3655" class="graf graf--p graf-after--p">The difficulty in Dark themes is&#8202;—&#8202;while dark mode targets to turn all apps Dark&#8202;—&#8202;which is what users want when they are reading in night or low light&#8202;—&#8202;all apps may or may not support dark themes. This can result in a user opening a dark theme unsupported app, while in dark, only to be blinded by the light background of the app.</p><h3 name="903e" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="56d0" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by <a href="https://medium.com/u/a76fa51de1ba?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Max Lynch</a>, <a href="https://medium.com/u/14b1be5c1354?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Ben Sperry</a> and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.</p><p name="010c" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="3321" class="graf graf--h3 graf-after--p">How do I get it dark&nbsp;?</h3><p name="8047" class="graf graf--p graf-after--h3">Conventionally, only native apps and UIs had access to dark mode. But now dark mode is available for HTML (CSS) as well&nbsp;! 🎉</p><p name="5f66" class="graf graf--p graf-after--p">There are two ways to provide Dark&nbsp;.. ness to your app</p><ul class="postList"><li name="e03d" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Dark Mode</strong> 😎&#8202;—&#8202;Use the newly introduced CSS media query <code class="markup--code markup--li-code">prefers-color-scheme</code> to check if user has a Dark mode chosen. Cool, right&nbsp;?</li><li name="d8d8" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Dark theming (Old method)</strong>&#8202;—&#8202;Use two separate CSS stylesheets for the app, one for light and one for dark mode. Switch between the styles as per user requirement</li></ul><p name="ac9d" class="graf graf--p graf-after--li">Dark mode is currently supported by selected browsers. You can check out what browsers support CSS media query <code class="markup--code markup--p-code">prefers-color-scheme</code> <a href="https://caniuse.com/#feat=prefers-color-scheme"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a>.</p><figure tabindex="0" contenteditable="false" name="6436" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 221px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31.6%;"></div><img class="graf-image" data-image-id="1*9LDVohNB1KxHhz4__2mniQ.png" data-width="1273" data-height="402" alt="Browsers supporting prefers-color-scheme CSS media query" src="https://cdn-images-1.medium.com/max/800/1*9LDVohNB1KxHhz4__2mniQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Browsers supporting <strong class="markup--strong markup--figure-strong">prefers-color-scheme</strong> CSS media&nbsp;query</figcaption></figure><p name="caa0" class="graf graf--p graf-after--figure">Let’s get started with Dark Mode-ing our Ionic app</p><h4 name="b9a9" class="graf graf--h4 graf-after--p">1. Create a basic Ionic 4&nbsp;App</h4><blockquote name="ecbe" class="graf graf--blockquote graf-after--h4"><em class="markup--em markup--blockquote-em">I have covered this topic in detail in </em><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/?source=post_page---------------------------"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">this blog</em></a><em class="markup--em markup--blockquote-em">.</em></blockquote><p name="cdc9" class="graf graf--p graf-after--blockquote">For this post, I am going to use an Ionic-Angular app.</p><p name="7cf9" class="graf graf--p graf-after--p">In short, the steps you need to take here are</p><ul class="postList"><li name="9e47" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="622c" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.7.1 currently)</li><li name="9de3" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="edf3" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">tabs</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-dark tabs</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="e3ab" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5c38" class="graf graf--p graf-after--pre">The app will launch on browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout. You can create a basic layout to check dark-light mode switching. For example purpose, I have taken the layout from <a href="https://store.enappd.com/product/ionic-4-food-ordering-pwa-app-starter/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Enappd’s Food ordering app</a>. Here’s how my homepage looks</p><figure tabindex="0" contenteditable="false" name="5a8b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 387px; max-height: 679px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.5%;"></div><img class="graf-image" data-image-id="1*N8jymcKE7SqeINgyMSRRuQ.png" data-width="387" data-height="679" alt="Food ordering app home page for Ionic Dark mode example" src="https://cdn-images-1.medium.com/max/800/1*N8jymcKE7SqeINgyMSRRuQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Food ordering app home page for Ionic Dark mode&nbsp;example</figcaption></figure><h4 name="ec1f" class="graf graf--h4 graf-after--figure">2. Setup Media&nbsp;Query</h4><p name="fefa" class="graf graf--p graf-after--h4">To make use of dark mode, we need to use the media query <code class="markup--code markup--p-code">prefers-color-scheme</code>&nbsp;. For our food ordering app, let’s set the background and text color using this media query.</p><p name="6a4b" class="graf graf--p graf-after--p">I will change the background of header and first <code class="markup--code markup--p-code">div</code> of the page. In my <code class="markup--code markup--p-code">tab1.page.scss</code>&nbsp;, I will set the following</p><figure tabindex="0" contenteditable="false" name="17f9" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/90fed853f89d66d3c00a1e77561d04c0.js %}</div></div></figure><p name="0193" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">prefers-color-scheme</code> can have 3 values</p><ul class="postList"><li name="a78c" class="graf graf--li graf-after--p"><code class="markup--code markup--li-code">no-preference</code>: Indicates that the user has made no preference known to the system. This keyword value evaluates as <code class="markup--code markup--li-code">false</code> in the boolean context.</li><li name="1bbd" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">light</code>: Indicates that the user has notified the system that they prefer a page that has a light theme (dark text on light background).</li><li name="56d5" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">dark</code>: Indicates that the user has notified the system that they prefer a page that has a dark theme (light text on dark background).</li></ul><p name="9efd" class="graf graf--p graf-after--li">This gives rise to a cool looking color switching when the system-wide UI mode changes</p><figure tabindex="0" contenteditable="false" name="9ac5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 423px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 60.4%;"></div><img class="graf-image" data-image-id="1*l9NWTjSTARuFC2c8dj_CnQ.gif" data-width="1378" data-height="833" src="https://cdn-images-1.medium.com/max/800/1*l9NWTjSTARuFC2c8dj_CnQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic app CSS changes on system wide dark mode change&#8202;—&#8202;MacOS</figcaption></figure><h4 name="4a1f" class="graf graf--h4 graf-after--figure">3. Use CSS variables</h4><p name="c6ec" class="graf graf--p graf-after--h4">While Dark mode does not necessarily needs CSS variables, it is always a good idea to used them. This reduces CSS code and allows CSS to be changed dynamically at runtime.</p><p name="f34b" class="graf graf--p graf-after--p">Using CSS variables, we can set the changing variables in <code class="markup--code markup--p-code">variables.scss</code> in the app, and set the actual properties with those CSS variables in individual <code class="markup--code markup--p-code">page.scss</code>&nbsp;.</p><p name="e36f" class="graf graf--p graf-after--p">Repeating the above example, let’s put the following in <code class="markup--code markup--p-code">variables.scss</code> and <code class="markup--code markup--p-code">tab1.page.scss</code> respectively</p><figure tabindex="0" contenteditable="false" name="c415" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/7c72be5dfcafbaf8ccdd00861abb5d1c.js %}</div></div></figure><p name="f51e" class="graf graf--p graf-after--figure">This way, the variable value switching stays in <code class="markup--code markup--p-code">variables.scss</code> and individual <code class="markup--code markup--p-code">page.scss</code> do not need to change every time.</p><h3 name="f880" class="graf graf--h3 graf-after--p">What about others&nbsp;?</h3><p name="47af" class="graf graf--p graf-after--h3">What if a particular browser your device uses, does not support “Dark Mode” i.e. <code class="markup--code markup--p-code">prefers-color-scheme</code> media-query&nbsp;? In such a case, we need to fall back to old methods i.e. Dark-theming, <strong class="markup--strong markup--p-strong">but it does not have to be two separate stylesheets&nbsp;!</strong></p><p name="189e" class="graf graf--p graf-after--p">We can detect if a browser supports dark-mode or not, by following method</p><pre name="16bc" class="graf graf--pre graf-after--p">if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {console.log('🎉 Dark mode is supported');}</pre><p name="d01c" class="graf graf--p graf-after--pre">Once we detect that the browser does or does not support dark-mode, we can attach a class&nbsp;<code class="markup--code markup--p-code">.dark</code> to <code class="markup--code markup--p-code">&lt;body&gt;</code> of the app. This provides a global class, which we can edit as per our coloring scheme for dark-mode.</p><p name="c1c6" class="graf graf--p graf-after--p">Inside <code class="markup--code markup--p-code">app.component.ts</code> we put this in constructor</p><figure tabindex="0" contenteditable="false" name="9b31" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/ad116d8dcd4c3628a430b4818e7336d4.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Detecting if browser supports dark-mode</figcaption></figure><p name="4e65" class="graf graf--p graf-after--figure">In <code class="markup--code markup--p-code">variables.scss</code> we provide values for all major CSS variables for all platforms inside a <code class="markup--code markup--p-code">body.dark</code> class</p><figure tabindex="0" contenteditable="false" name="84b6" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0e68246c9b216675448dd3c68978ebef.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Setting Dark-mode variables</figcaption></figure><p name="219f" class="graf graf--p graf-after--figure">This way, all browsers (including those which support dark-mode) can implement dark-mode very easily. Here’s how it looks in an unsupported browser</p><figure tabindex="0" contenteditable="false" name="b8de" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 412px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.9%;"></div><img class="graf-image" data-image-id="1*nNQ0MKPZLVHYZpMbifAxIA.gif" data-width="1378" data-height="811" alt="Unsupported browser CSS changes on system wide dark mode change&#8202;—&#8202;MacOS" src="https://cdn-images-1.medium.com/max/800/1*nNQ0MKPZLVHYZpMbifAxIA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Unsupported browser CSS changes on system wide dark mode change&#8202;—&#8202;MacOS</figcaption></figure><p name="bcdb" class="graf graf--p graf-after--figure">We can even switch between dark and light mode manually from within the app. This just needs one function that calls the above <code class="markup--code markup--p-code">toggleDarkTheme</code> function to change the theming.</p><h3 name="21f5" class="graf graf--h3 graf-after--p">Got source code&nbsp;?</h3><p name="3ac6" class="graf graf--p graf-after--h3">This example app’s source code is available in <a href="https://github.com/enappd/ionic-4-dark-mode"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">ionic-4-dark-mode</a> Github repository. You can check out the example by cloning the example.</p><h3 name="f280" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="00d7" class="graf graf--p graf-after--h3">In this post, we learnt how to implement Dark Mode in Ionic 4 apps. We also learnt how to check if a browser supports dark mode, and also how to apply dark mode theming to browsers which do not support dark-mode CSS media query.</p><h3 name="7469" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="7a20" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Dark Mode in Ionic 4, you can also try</p><ul class="postList"><li name="aff8" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8c75" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="7763" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="2724" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="5038" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="2a38" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="5759" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="9bcf" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="1831" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="513a" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" src="https://cdn-images-1.medium.com/max/800/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="fef2" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>