IzzyTheme

The preset, brand color, fonts and scheme, set on the server.

IzzyBlazor.IzzyTheme in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (15)

PresetThemePreset?

The starting set of defaults: density, shape and type, and a default accent and gray, which the other settings override. Unset: Standard.

Brandstring?

The brand color, over the preset's: a hex color ("#0a7d5a"), from which the fill, the text on it, the accent as text and the soft tint are derived in light and dark, each pair at AA (see BrandPalette); or a built-in, hand-tuned one: blue (the default), ink (monochrome), indigo, violet, teal, green, rose. Primary controls are painted with it.

Graystring?

The grays (page, surfaces, fills, borders and text), over the preset's: a built-in set, neutral (the default), slate (cool) or stone (warm paper); or a hex color for your light page background ("#f4efe6"), from which the rest is derived with contrast checked (see GrayPalette). A hex gray is app-wide only.

RadiusThemeRadius?

The radius scale, over the preset's.

DensityThemeDensity?

Control heights, table rows and card padding, over the preset's.

BodyFontstring?

The body font, as a CSS font-family list ("Sora, system-ui, sans-serif"). Inter, served with IzzyBlazor, when unset. Load any other font yourself; end the list with a generic family so text shows while it loads.

HeadingFontstring?

The font for headings, card and dialog titles, as a CSS font-family list. Unset: the preset's (the body font, or Newsreader in Editorial).

MonoFontstring?

The font for code, Kbd and the color picker's hex box, as a CSS font-family list, such as "'JetBrains Mono', ui-monospace, monospace". Unset: the system's monospace font.

HeadingWeightint?

The headings' weight, 100 to 900. Unset: semibold (600).

ColorSchemeColorScheme?

The color scheme until the user picks one with a ColorSchemeSwitch (their choice, kept in the ib-scheme cookie, wins). Unset or ColorScheme.Auto: follow the device. ColorScheme.Inverse is for part of a page only.

ScrollbarsThemeScrollbars?

Whose scrollbars the app uses. Unset or ThemeScrollbars.Auto: the system's on the page, thin themed ones in the library's scroll areas. ThemeScrollbars.Themed puts the thin ones on the page too (always visible); ThemeScrollbars.Native uses the system's everywhere. App-wide only.

Noncestring?

A CSP nonce for the style element, if your Content-Security-Policy needs one. Toolbars on the page use it too.

ChildContentRenderFragment?

The part of the page to theme. Unset: the theme is the app's (put it in <head>).

Classstring?

Classes for the part's div, such as one that sets CSS variables in your stylesheet.

Stylestring?

Inline style for the part's div, such as "--ib-card-padding: 1rem".

Events (0)

No events.

Types (5)

`ColorScheme`

enum

Light, dark, or automatic. For the app (ColorScheme, the user's pick in a ColorSchemeSwitch), ColorScheme.Auto follows the device. For part of a page (ColorScheme on Box and the App layout parts), ColorScheme.Auto follows the page, and ColorScheme.Inverse is the opposite of it. Every color token switches with the scheme, so links, buttons, badges, fields and focus rings inside keep their contrast.

ColorScheme values
Value	Description
`Auto`	Follow the device for the app, or the page for part of it (the default).
`Light`	Always light.
`Dark`	Always dark, such as a dark sidebar in a light app.
`Inverse`	For part of a page: the opposite of the page, dark on a light page and light on a dark one.

`ThemeDensity`

enum

How much room controls and content take: control heights, table rows and card padding together.

ThemeDensity values
Value	Description
`Compact`	More on screen: 32px controls, tight table rows.
`Standard`	The default: 36px controls.
`Comfortable`	Roomier: 40px controls, generous rows and padding.

`ThemePreset`

enum

A preset: density, shape and type, with a default brand color and gray suited to the products likely to use it. Set it with IzzyTheme or data-ib-preset on <html>.

ThemePreset values
Value	Description
`Standard`	The default: 36px controls, medium radius, hairline shadows; Blue on Neutral.
`Compact`	Dense data and admin: 32px controls, tight rows, small radius, borders only; Indigo on Slate.
`Soft`	Consumer apps and portals: 40px controls, roomy, large radius, gentle shadows; Teal on Neutral.
`Editorial`	Reading and docs: IBM Plex Sans with Newsreader headings, large radius; Ink on Stone.

`ThemeRadius`

enum

The radius scale: controls, cards and dialogs shift together.

ThemeRadius values
Value	Description
`None`	Square corners everywhere.
`Sm`	Small.
`Md`	Medium (the default).
`Lg`	Large.
`Full`	Pill-shaped controls: buttons, fields, segmented controls, tags and badges. Cards, popovers and dialogs take the large scale; joined button groups round only their outer ends.

`ThemeScrollbars`

enum

Whose scrollbars the app uses: the system's, or IzzyBlazor's thin themed ones.

ThemeScrollbars values
Value	Description
`Auto`	The default: the page keeps the system's scrollbar (which fades when not scrolling on macOS and with Windows 11's overlay scrollbars); the library's own scroll areas (sidebar, aside, code, tables, menus, dialogs, `.ib-scroll`) get thin themed ones.
`Themed`	Thin themed scrollbars on the page too, matching the library's scroll areas. Styled scrollbars are always visible: they don't fade on macOS or with overlay scrollbars.
`Native`	The system's scrollbars everywhere, including the library's scroll areas.