- 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).
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,
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 */
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.