How to use core theme in NativeScript?

Question

I have made a simple form in NativeScript but I can't use the core styles!

I would like to use "An input with a simple border and no label" - Option 4 for TextField as described in official documentation at https://docs.nativescript.org/ui/theme.

I copy-paste all code to my project but it looks like CSS is not used at all.

So, I just started NativeScript Playground and copy-paste code from the documentation to the playground to check it and it doesn't work. The code in the playground is. And the form doesn't look like it has to by documentation. It looks like CSS theme doesn't used. What I did wrong? How to use the core theme?

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">

    <ActionBar title="Home">
    </ActionBar>
    <ScrollView>
        <StackLayout class="home-panel">
            <!--Add your page content here-->
            <StackLayout class="form">
                <!-- Option 1: An input with no label, and a bottom border -->
                <StackLayout class="input-field">
                    <TextField hint="Option 1" class="input" />
                    <StackLayout class="hr-light"></StackLayout>
                </StackLayout>

                <!-- Option 2: An input with a label on top, and a bottom border -->
                <StackLayout class="input-field">
                    <Label text="Option 2"
                        class="label font-weight-bold m-b-5" />
                    <TextField class="input" />
                    <StackLayout class="hr-light"></StackLayout>
                </StackLayout>

                <!-- Option 3: An label and input—positioned side by side -->
                <GridLayout class="input-field input-sides" rows="auto, auto"
                    columns="*,*">
                    <Label text="Option 3" class="label font-weight-bold"
                        row="0" col="0" />
                    <TextField class="input right" row="0" col="1" />
                    <StackLayout class="hr-light" row="1" colSpan="2">
                    </StackLayout>
                </GridLayout>

                <!-- Option 4: An input with a simple border and no label -->
                <TextField hint="Option 4" class="input input-border" />

                <!-- Option 5: An input with a rounded border and no label -->
                <TextField hint="Input rounded"
                    class="input input-rounded m-t-10" />

            </StackLayout>
        </StackLayout>
    </ScrollView>
</Page>

I think that the documents on the official site is outdated. I found on github that they start to use new system for CSS. — Jegors Čemisovs
You are using the nativescript-theme-core package or the scoped @nativescript/theme package? nativescript-theme-core was a beta release, the stable release is under scoped package. You will have import compat suffixed CSS files to use v1.x based class names. — Manoj

Jegors Čemisovs Jegors Čemisovs · Accepted Answer · 2019-11-28T20:40:49

The problem was because of NativeScript Theme 1.0 to 2.0 migration.

The current version of NativeScript uses Theme 2 but documentation describes version 1.

The NativeScript Theme 1.0 to 2.0 migration guide located at GitHub: https://github.com/NativeScript/theme

How to use core theme in NativeScript?

1 Answers