May 26, 2016
  • All
  • Creator
  • Ionic

Theming and SCSS Support Lands in Creator

Lee Schmidt

Creator has come quite a long way since the early days. We’re constantly adding new features, fixing bugs, and making improvements to it—all of which are influenced by your feedback. Today, we’re excited to launch one of our most requested features: Theming and SCSS editing, available to all users!

What Can You Do With Theming?

To see a quick demonstration of what type of customizations are possible, we replicated this Tumblr-inspired theme without ever leaving Creator! You can preview the app in your browser, or use this share code from within the Creator mobile app (for iOS and Android): 7B8F5C.

Here’s a brief overview of what type of customizations are available from within Creator:

Change Header & Page Background Colors
This allows you to choose colors based on Ionic’s predefined theme colors (don’t worry, you can customize these, too!).

ionic creator header color

Customize Ionic Theme Colors
By default, Ionic comes with nine predefined theme colors to use in your app. In order to completely customize the look and feel of your Creator app, you can easily change these preset colors to match your own business, brand, or identity.

ionic creator theme colors

Custom Fonts
Choose from ten popular webfonts for both iOS and Android. In the video at the bottom of this post, we included an example that shows you how to use any Google Font in your Creator project.

ionic creator fonts

Include your own custom CSS and SCSS
You can overwrite existing Ionic SCSS variables, create your own, or just use CSS to modify the look, feel, and layout of your app. When you export your project, we package your custom SCSS in its own directory.

ionic creator scss and css

Want to see some examples in action?

Here’s a short video demonstrating how easy it is to customize colors and fonts:

Let us know what you think, and get ready for our next major feature: in-tool JS editing!

Lee Schmidt