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

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 cross-platform native mobile apps with JavaScript/TypeScript. 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 2 or vanilla JavaScript.

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 almost identical 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 introduced with NativeScript 2.4. Read more about the core themes and follow the instructions to verify you are using them properly.

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 '<your css directory>/core.light.css'; /* nativescript-provided core light theme */
        @import '<your css directory>/custom.css'; /* this downloaded theme */
    

Step 4) Review these known issues:


About

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.