HTML Settings

 

Theme

DB AppMaker uses Ionic Framework. Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.

Ionic provides variables that exist at the component level, such as --background and --color. For a list of the custom properties a component accepts, view the CSS Custom Properties section of its API reference. For example, see the Button CSS Custom Properties.

You can easily set these component variables under the Theme tab:

 

Note After changing any variables, make sure you re-generate the *.scss files which are under Other Files section in the popup Generate form, see Generate Settings for details.
Note All component variables will be generated to the file <project folder>\theme\variables.scss.

 

Styles

The Styles tab shows the global SCSS to be generated by the project. There are 2 sub-tabs, System and User.

The System tab show the SCSS to be generated in the global app.scss. It is for preview only and is not editable. If you want to override it, you can use the User tab.

The User tab allow you to enter your own global SCSS for the app, you can copy SCSS from the System tab to here and modify to override it.

There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see ColorsThemes and Advanced Theming. These global variables can be set in the :root selector. They can also be applied only for a specific mode. You can set the global variables in the User tab.

Note All SCSS under the System and User tabs will be generated to the file <project folder>\src\app\app.scss.

 

 ©2016-2021 e.World Technology Limited. All rights reserved.