Oat Theming Demo

Oat themes are CSS variable sets keyed on the data-theme attribute. OatAppLayout sets it on <html> from the current user's theme, which is kept in a cookie (cached in the session) so it survives the session — no special session class needed.

Current theme: Business (business)

Use the custom Ocean theme Use Midnight Use Business Back to the default

Or pick any registered theme with the switcher in the sidebar footer.

Until you pick one, this demo uses Business, except on Halloween (31 October) and at Christmas (10 to 31 December): its own OatThemeStore, a CookieThemeStore subclass, returns a seasonal theme when the visitor has chosen none.

Pinned to Light

This card carries Oat.Behaviors.theme(OatTheme.LIGHT), so it stays light whatever theme the page uses.

Default density

This demo is compact app-wide (WicketOats.install(this).setDensity(OatDensity.COMPACT)); this card is pinned to Oat's own spacing with Oat.Behaviors.density(OatDensity.DEFAULT).

Invoice	Customer	Amount
INV-1041	Acme Corp	1,180.00
INV-1042	Globex	94.50
INV-1043	Initech	12,007.25

Reference

Compact density

Pinned with Oat.Behaviors.density(OatDensity.COMPACT), as on an otherwise default page. Compact works with every theme.

Invoice	Customer	Amount
INV-1041	Acme Corp	1,180.00
INV-1042	Globex	94.50
INV-1043	Initech	12,007.25

Reference

How to use Themes

1. Configure

// Java - in WebApplication.init()
WicketOats.install(this)
        .setDefaultTheme(OatTheme.LIGHT)                // or null to follow the browser
        .addTheme(new OatTheme("ocean", "Ocean", "🌊")); // a custom theme from your CSS

2. Define custom theme CSS

/* CSS - override Oat's variables for your theme */
[data-theme="ocean"] {
    color-scheme: dark;
    --background: #0b1d2e;
    --foreground: #d6e9f8;
    --primary: #2fb3c9;
    --card: #10283f;
}

3. Switch themes

// Java - e.g. in a Link's onClick()
OatTheme.setCurrent(OatTheme.MIDNIGHT);
OatTheme current = OatTheme.current();

// Or let users pick from the registered themes
add(new OatThemeSwitcher("themes"));

4. Apply the theme

OatAppLayout does this for you. With your own base page, put an OatHtml on the <html> tag; it also sets the density and the page's language:

// Java
add(new OatHtml("html"));

<!-- HTML -->
<html wicket:id="html">
    <body>...</body>
</html>