...
DX 8 Color Admin Theme is one of the theme themes available for Joget DX 8.
Figure 1: DX 8 Color Admin Theme in desktop view
...
To change the theme, at the UI Builder, click properties then under theme select DX 8 Color Admin Theme ; (UI Builder → Properties → Settings→ Theme).
Figure 2: Changing the theme
Theme Properties
Configure Layout
Figure 3: Configure Theme
| Name | Description |
|---|---|
| Menu Position | Determines the position of the menu
|
| Color Scheme | Color Scheme:
|
| Background Image | Upload Background Image |
| Background | Color Scheme-Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Content Background | Color Scheme-Content Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Header Color | Color Scheme-Header Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Header Font Color | Color Scheme-Header Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Background | Color Scheme-Sidebar Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Background | Color Scheme-Sidebar Menu Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Color | Color Scheme-Sidebar Menu Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Icon Color | Color Scheme-Sidebar Icon Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Background (Active) | Color Scheme-Sidebar Menu Background (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Color (Active) | Color Scheme-Sidebar Menu Color (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Icon Color (Active) | Color Scheme-Sidebar Icon Color (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Badge Background | Color Scheme-Sidebar Badge Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Badge Color | Color Scheme-Sidebar Badge Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Scrollbar Thumb Color | Color Scheme-Sidebar Scrollbar Thumb Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Button Background | Color Scheme-Button Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Button Color | Color Scheme-Button Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Highlight Color | Color Scheme-Highlight Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Highlight Background | Color Scheme-Highlight Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Heading Font Color | Color Scheme-Heading Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Font Color | Color Scheme-Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Content Font Color | Color Scheme-Content Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Link Color | Color Scheme-Link Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Link Color (Active) | Color Scheme-Link Color (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Footer Background | Color Scheme-Footer Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Footer Color | Color Scheme-Footer Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
Advanced
Figure 4: Advanced
...
Progressive Web App (PWA) Settings
Figure 5: Progressive Web App (PWA ) Settings
| Name | Description |
|---|---|
| Disable Progressive Web App (PWA) Support | Click the checkbox to disable PWA. Joget DX apps automatically enable Progressive Web Apps (PWA) features in this theme so that all apps will be PWA baseline compliant without requiring additional steps, with features such as adding to home screen, offline support and push notifications. |
| Disable Web Push Notifications | Click to disable web push notification in this UI. |
| Additional URLs to Cache | Enter paths relative to context root. |
Login Page UI
Figure 6: Login Page UI
| Name | Description |
|---|---|
| Login Page Background | Upload Login Page Background |
| Custom HTML (Before Login Form) | Custom HTML to be placed in the login form |
| Custom HTML (After Login Form) | Custom HTML to be placed in the login form |
Configure Permission
Figure 7: Configure Permission
...