
- Simulator View
- Action Bar Color
- View Background Color
- Text Color
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).
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.
There are getting started tutorials for TypeScript + Angular or JavaScript or NativeScript-Vue.
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.
NativeScript uses a subset of CSS for styling apps. The same CSS you use for web development (including id, class, and type selectors).
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!
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 */
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.