Theming
Target the application root element with css variables with the optional properties below.
CSS variables available
| Property | Default | Description |
|---|---|---|
| --igo-container-desktop | 1024px | Width of when the application changes to the desktop design |
| --igo-default-font-family | ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | |
| --igo-default-font-feature-settings | normal | |
| --igo-default-font-variation-settings | normal | |
| --acl-spacing | .25rem | |
| --acl-radius-lg | .5rem | |
| --acl-radius-2xl | 1rem | |
| --acl-default-transition-duration | .15s | |
| --acl-default-transition-timing-function | cubic-bezier(.4,0,.2,1) | |
| --acl-color-primary-light | #4b4c99 | |
| --acl-color-primary | #1f2080 | |
| --acl-color-primary-dark | #12134c | |
| --acl-color-secondary-light | #338feb | |
| --acl-color-secondary | #0073e6 | |
| --acl-color-secondary-dark | #00458a | |
| --acl-color-tertiary-light | #614ee3 | |
| --acl-color-tertiary | #3a22dd | |
| --acl-color-tertiary-dark | #221484 | |
| --acl-color-success-light | #339d92 | |
| --acl-color-success | #008577 | |
| --acl-color-success-dark | #004f47 | |
| --acl-color-warning-light | #ffd754 | |
| --acl-color-warning | #ffcd29 | |
| --acl-color-warning-dark | #997b19 | |
| --acl-color-error-light | #e44863 | |
| --acl-color-error | #de1b3c | |
| --acl-color-error-dark | #851024 | |
| --acl-color-G0 | #000 | |
| --acl-color-G1 | #1a1a1a | |
| --acl-color-G2 | #474747 | |
| --acl-color-G3 | #bababa | |
| --acl-color-G4 | #d8d8d8 | |
| --acl-color-G5 | #f2f2f2 | |
| --acl-color-G6 | #fff |
Example
Modified at 2025-04-15 09:31:50