The last change you will make in this tutorial relates to the background of the app’s full screen views. This background is defined through the $page-bg-color variable. You will override the value of this variable in order to switch the background from the default solid color to a nicer linear background.
In the app.scss you will override the $page-bg-color as follows.
1 $base-color: #9ad019 !default;
2 $font-family: "cambria","serif"!default;
3 $page-bg-color:linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%)!default;
4
5 // The following two lines import the default Sencha Touch theme. If you are building
6 // a new theme, remove them and the add your own CSS on top of the base CSS (which
7 // is already included in your app.json file).
8 @import 'sencha-touch/default';
9 @import 'sencha-touch/default/all';
10
11 // Custom code goes here...
12
13 // Examples of using the icon mixin:
14 // @include icon('user');
Then, one last build:
1 sencha app build
And the new background should be present when you run the app, as shown in the following screenshot.
There you have it. In this article you learned the main concepts behind Sencha Touch theming features. You also learned that there are two approaches to creating a custom theme for your Sencha Touch application – Overriding elements of the default theme, or building a theme from the ground up. Finally, you used the first approach to create a custom theme for a sample application. Specifically, you learned how to change the base color of the app, the font-family, and the background of the full screen components.
—————————————————-
Posted By :
Manish Kumar Choithani
Senior /Lead Architect
Reference Email Ids:
[email protected]
[email protected]
[email protected]
[email protected]
In the app.scss you will override the $page-bg-color as follows.
1 $base-color: #9ad019 !default;
2 $font-family: "cambria","serif"!default;
3 $page-bg-color:linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%)!default;
4
5 // The following two lines import the default Sencha Touch theme. If you are building
6 // a new theme, remove them and the add your own CSS on top of the base CSS (which
7 // is already included in your app.json file).
8 @import 'sencha-touch/default';
9 @import 'sencha-touch/default/all';
10
11 // Custom code goes here...
12
13 // Examples of using the icon mixin:
14 // @include icon('user');
Then, one last build:
1 sencha app build
And the new background should be present when you run the app, as shown in the following screenshot.
There you have it. In this article you learned the main concepts behind Sencha Touch theming features. You also learned that there are two approaches to creating a custom theme for your Sencha Touch application – Overriding elements of the default theme, or building a theme from the ground up. Finally, you used the first approach to create a custom theme for a sample application. Specifically, you learned how to change the base color of the app, the font-family, and the background of the full screen components.
—————————————————-
Posted By :
Manish Kumar Choithani
Senior /Lead Architect
Reference Email Ids:
[email protected]
[email protected]
[email protected]
[email protected]