Theme editor Public
About this demo
The themes of the components are CSS classes setting the custom properties --antilia-theme-*, which the style sheets of the components read. The pickers of the ThemeEditorPanel start from the theme chosen for the page in the top bar or in the drop-down above them; change a color and the components in the tabs below follow: progress bars, the JSON and the bean based tables, a collapsible panel, a floating panel, styled tabs and a modal dialog.
The text area holds the CSS class defining your theme; put it into your style sheet and the classes antilia-theme and yours on a page or a component, and the components inside take its colors. The changes are made in the browser through the CSS object model, so the page needs no inline style and works under a strict Content Security Policy.
primaryheaders, the bar of a progress barprimary-darkborders and gradients next to the primary coloron-primarytext on the primary coloraccentlinks, focus and drag indicatorstexttextsurfacebackground of content, such as rowssurface-altalternating background, such as every other rowhoverbackground of the content under the pointerselectedbackground of selected contenthighlightbackground of noticestoolbarbackground of toolbarsborderbordersprogressthe filled part of a progress barprogress-darkthe gradient end of the filled parttrackthe empty part of a progress barveilthe dimming over content blocked by a veil or a dialogcolor-schemethe color scheme of form controls