Skip to content

Commit b750476

Browse files
committed
Minor theme text and formatting updates
1 parent eed869c commit b750476

File tree

1 file changed

+5
-3
lines changed

1 file changed

+5
-3
lines changed

ui/theme.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ As of NativeScript version 2.4, the core theme is installed by default when you
4444
npm install nativescript-theme-core --save
4545
```
4646

47-
After you install the theme, you need to add a single `@import` CSS rule to your `app.css` file in order to include the theme in your app.
47+
After you install the theme, you need to add a single `@import` CSS rule to your `app.css` file in order to include the theme in your app. But first you need to decide which of the theme’s color schemes you’d like to use.
4848

4949
## Color Schemes
5050

51-
The NativeScript core theme includes two standard color schemes, light and dark.
51+
The NativeScript core theme includes two standard color schemes, light and dark. Here’s what they look like on Android (left) and iOS (right).
5252

5353
![Light and dark color schemes](/img/theme/color-schemes-light-and-dark.png)
5454

@@ -65,7 +65,7 @@ And in order to use the dark scheme, add this line of code to your `app.css` ins
6565
@import 'nativescript-theme-core/css/core.dark.css';
6666
```
6767

68-
> **TIP**: When using the dark color scheme, make sure that you 1) apply the [`page` class name](#page) to ensure your app’s text displays appropriately, and 2) [alter your app’s status bar colors](#status-bar-considerations).
68+
> **TIP**: When using the dark color scheme, make sure that you, 1) apply the [`page` class name](#page) to ensure your app’s text displays appropriately, and 2) [alter your app’s status bar colors](#status-bar-considerations).
6969
7070
You may want to alternatively use one of the 11 other color schemes included in the NativeScript core theme. To do so, switch your `app.css` file to use one of the following imports.
7171

@@ -382,10 +382,12 @@ The NativeScript core theme includes a few class names to apply to ActionBar UI
382382
{% endangular %}
383383

384384
> **TIP**: You can use the various ActionBar class names to create an ActionBar-like look without actually using the ActionBar UI components. You may find this approach useful for using in [modal pages](/core-concepts/navigation#modal-pages), for instance.
385+
> ```
385386
> <GridLayout rows="auto" columns="75,*,75" class="action-bar p-10">
386387
> <Button text="Close" class="text-left action-item" row="0" col="0"></Button>
387388
> <Label text="My Modal" class="text-center action-bar-title" row="0" col="1"></Label>
388389
> </GridLayout>
390+
> ```
389391

390392
### Buttons
391393

0 commit comments

Comments
 (0)