Themes – IIZI 5.0

Families and modes

Three theme families – IIZI, Graphite and Contrast – on one set of color, shape, type and motion tokens. Contrast is made for accessibility, with text at 7:1.
Light, dark and auto. Every application page and every iiziRun shows the light or the dark member of its theme family, or follows the system (“auto”, the default).
The prompts, message boxes, toasts, busy and network indicators, the Dojo widgets, the components and the badges are styled on the tokens, in every family and mode. Links are underlined at rest.
The IIZI and Graphite themes use a soft neutral-gray palette. Buttons have a gradient, a border and one small shadow, identical in every family and mode; a disabled button keeps its shape with its text dimmed, and a button with its own background color shows that color without the gradient. Error, warning, success and information texts read at 4.5:1 or better on every surface.

UIThemeChooser, a new component: an icon button that switches the page between light, dark and auto, hidden when the application allows one mode only. ServerAdmin's header and SignIn's first screen carry it.
In the address: theme=light, dark, auto, auto_light or auto_dark (auto with the named fallback), theme=<family> or theme=<family>/<mode>. The choice is kept in the Browser and removed from the address bar.
In iiziRun Developer and Custom: “Appearance” (Light, Dark, Auto) and “Theme” (IIZI, Graphite, Contrast) in Settings as the device's default, each application's own choice in Add Application or the launch view, and a theme toggle in every heading. The launcher, its start screen and its native interface on Android and iOS follow the appearance.
In the application: iiziGo's App page limits an application to light only or dark only (“Appearance”), and application Java reads and sets the mode and the family through IClientSessionGyro: getUIScheme, getUISchemeChoice, setUIScheme, setUIMode, setUIFamily, addUISchemeListener and removeUISchemeListener.
The home and /apps pages of iiziServer and of iiziGo's development server follow light and dark with their own theme changer, kept apart from the applications' choice.

Palette colors and palettes are Designer file types, with a palette editor, a color chooser tab and a theme preview in the Panel Editor; palette colors reach the Browser as CSS custom properties.
.iiziStyle references resolve on the server as they do in the Designer.
A panel that allows several desktop themes keeps the theme the session is in; a session is limited to the application's “Application themes”, and its first theme comes from the application's “Default themes”.
The Panel Designer, the Design Viewer and iiziGo's color chooser follow the theme and Eclipse's light and dark modes.
For custom CSS, the theme tokens include the decoration tokens --iz-btn-t, --iz-btn-b, --iz-btn-ht, --iz-btn-hb, --iz-btn-pt, --iz-btn-pb, --iz-btn-bd, --iz-sh-btn and --iz-sh-card.

Colors an application paints itself do not follow dark mode: use palette colors or theme roles. See Application developers.