NativeScript Theme Builder
Global
  • Simulator View
  • Action Bar Color
  • View Background Color
  • Text Color
UI Widgets
ListViews
Text
Buttons
Form Elements
Tabs and Drawer

Built with by @RobLauer
Contribute on GitHub

9:42
9:42
9:42
9:42
9:42
9:42

Load a Color Palette

NativeScript ships with a variety of themes. Apply a color scheme to the core light theme by choosing from the palettes provided (or create your own).



About

What is NativeScript?

NativeScript is an open source framework for building truly native cross-platform mobile apps with JavaScript, TypeScript, Angular, or Vue.js. One code base, multiple platforms, using the web skills you know and love.

How do I get started with NativeScript?

There are getting started tutorials for TypeScript + Angular or JavaScript or NativeScript-Vue.

Is there a kitchen sink example (like I see in the simulators here)?

Why yes there is! Feel free to clone this GitHub repo which contains screens that are similar to those you see displayed in the simulators.

How do I use CSS with a native mobile app?

NativeScript uses a subset of CSS for styling apps. The same CSS you use for web development (including id, class, and type selectors).

The CSS I generate here isn't working with my app!

Be sure to follow the instructions provided when you download your theme. If you're pretty darn sure it's not user error, feel free to submit an issue on Github!


Download CSS Theme

Step 1) Make sure your app is using the core light theme (new apps use this theme by default). Read more about the core themes.

Step 2) Verify that all native widgets you want to style have the proper CSS classes applied to them. For example, a SegmentedBar element should have the segmented-bar class applied, such as: <SegmentedBar class="segmented-bar">. Discover all the class ids using the NativeScript theme kitchen sink repo on GitHub.

Step 3) You will be downloading a CSS file. The contents should be applied to your app after the core theme (since the CSS file we provide supplements the core light theme).

For example, when initializing your app in app.js set the default CSS file: application.cssFile = "app.css";. This app.css file should import both the core light theme and your downloaded CSS file:


  @import '<css directory>/core.light.css'; /* nativescript-provided core theme */
  @import '<css directory>/custom.css'; /* your downloaded theme */

Import

Import Custom CSS

If you have previously created a custom theme here and would like to import that generated CSS file, you've come to the right place!

Please note: If you have altered the structure of the file significantly, your mileage may vary with the import tool.