Theme Styles

Overview

In certain specific situations, the preset styles of the Informat platform may not meet actual requirements and need to be adjusted. To solve this problem, the Informat platform provides the option for designers to write CSS styles. Designers can write CSS styles in the application designer to adjust and override default styles. The platform provides application theme and module theme setting capabilities to implement the concept of chunking, thereby improving the loading and rendering efficiency when modules are accessed.

Usage Preview

When using theme styles to personalize application styles, designers need to understand relevant concepts of CSS. For those unfamiliar with front-end development, you can improve your mastery of CSS by learning CSS: Cascading Style Sheets.

CSS related concepts:

Platform Implementation

The platform application designer supports independent CSS style settings for applications and modules. Theme styles are automatically mounted when users enter the application or module, and automatically unloaded when users leave the application or module.

The platform has standardized CSS classes for elements. We can achieve personalized display of applications by overriding the application's classes. Considering that the platform's underlying version upgrades may change existing class names, the platform also adds styles prefixed with theme- based on the corresponding classes. These styles will not change during platform upgrades to ensure style compatibility.

Using Theme Styles to Customize Dialog Styles

The following example uses CSS styles to modify the system's default dialog style, adding a border and background color for the title text

css

.el-dialog {
  border: 2px solid #666 !important;
}
.informat-dialog-title {
  position: relative;
}
.informat-dialog-title::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  background: rgb(141 244 157 / 50%);
  border-radius: 5px;
  width: 30px;
  height: 10px;
}

Using Theme Styles to Customize Data Table Module Styles

css

/* 条件选择样式覆盖 */
.app-module-Table.app-module-x1744czcz3blh .filter-item-op-condition-label {
  background: rgb(99, 163, 228);
  color: #fff;
}

/* 顶部工具栏 */
.app-module-Table.app-module-x1744czcz3blh .table-module-toolbar {
  background: linear-gradient(90deg, transparent, rgb(225, 243, 216), transparent);
}

/* 过滤条件 */
.app-module-Table.app-module-x1744czcz3blh .table-side-view .el-input__inner,
.app-module-Table.app-module-x1744czcz3blh .table-side-view .simple-select {
  background: #fff;
  border: 1px solid #ddd;
}

.info-view-box .form-opt-box,
.record-opt-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  top: auto;
}

Theme Styles ​

Overview ​

Usage Preview ​

Platform Implementation ​

Using Theme Styles to Customize Dialog Styles ​