Part of #1639.
ModalDialog's default look comes from its DefaultTheme behavior (ajax/markup/html/modal/theme/theme.css): a dimmed overlay, a white dialog with a shadow, and nothing for a title bar or buttons, which every application styles itself. A page using the shared themes of #1638 (DynamicDataTable, ProgressBar, CollapsiblePanel, FloatingPanel) therefore shows a modal dialog that ignores the theme: white on a dark theme, with the application's own colors for its header.
Proposal:
- theme.css reads the theme properties, with the current colors as fallbacks: the overlay dims with --wicket-theme-veil, the dialog takes --wicket-theme-surface, --wicket-theme-text and --wicket-theme-border, and its color scheme follows --wicket-theme-color-scheme, so form controls inside a dark-themed dialog are dark too.
- Optional classes for the usual parts of a dialog (a header in the theme's primary colors, like a table header or the title bar of a FloatingPanel, a body and a footer), so a dialog content panel gets the themed look by using them, without CSS of its own.
- As for the other themed components: the properties are only set inside a theme class, so an application that does not use a theme sees no change, and no inline style is needed, so it keeps working under a strict Content Security Policy.
- The modal dialog example gets a theme drop-down, like the DynamicDataTable example.
Part of #1639.
ModalDialog's default look comes from its DefaultTheme behavior (ajax/markup/html/modal/theme/theme.css): a dimmed overlay, a white dialog with a shadow, and nothing for a title bar or buttons, which every application styles itself. A page using the shared themes of #1638 (DynamicDataTable, ProgressBar, CollapsiblePanel, FloatingPanel) therefore shows a modal dialog that ignores the theme: white on a dark theme, with the application's own colors for its header.
Proposal: