Make It Your Own! Ionic Theming
Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. You can find the code for this in the “part 3” folder on GitHub.
Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components:
You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles:
You can find these colors defined in
By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple:
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
In our app, this is clearly visible in how the header and the icons are styled.
If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open
src/app/app.module.ts, then set the
Now, the iOS version of our app has a Material Design skin!
Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps!
If you're interested in taking your Ionic apps to the next level, continue on with our exploration of Appflow next.