Theme settings and system screen styles

Member storefront is in a limited pilot. The standard theme-setting attributes described below are available in the existing account screens runtime. CSS overrides that take precedence over those attributes are planned for v0.4.0 and are not yet released. Use the override examples only after your company loads a release containing that support.

System screens render inside your member site’s theme layout. Fluid supplies the screen body; your theme supplies its surrounding navigation, fonts, and colors. You can share the same theme settings used by custom pages without rebuilding the screen’s UI. There are two parts to the styling contract:

Standard settings supply the screen’s default colors and font families through attributes on <fluid-account-screen>.
CSS overrides, in the upcoming release, let your layout choose different values for individual screen styles while keeping those attribute defaults.

Standard theme settings

Define these setting IDs in your theme’s settings schema and give them valid defaults. When Fluid renders a system screen, it reads the effective theme settings, including the selected preset, and passes the values below to the screen.

Appearance	Theme setting	Screen attribute	Public CSS override (upcoming)
Body font	`font_family_body`	`font-family`	`--fluid-account-font-family`
Heading font	`font_family_heading`	`heading-font-family`	`--fluid-account-heading-font-family`
Background	`color_bg`	`background-color`	`--fluid-account-background`
Body text	`color_body`	`text-color`	`--fluid-account-foreground`
Primary action	`color_primary`	`primary-color`	`--fluid-account-primary`
Primary action text	`color_btn_primary_text`, falling back to `color_white`	`primary-text-color`	`--fluid-account-primary-foreground`
Surface	`color_surface`, falling back to `color_bg`	`surface-color`	`--fluid-account-surface`
Surface text	`color_body`	`surface-text-color`	`--fluid-account-surface-foreground`
Muted surface	`color_surface_2`	`muted-color`	`--fluid-account-muted`
Muted text	`color_muted`	`muted-text-color`	`--fluid-account-muted-foreground`
Border	`color_border`, falling back to `color_input_border`	`border-color`	`--fluid-account-border`

Color attributes accept CSS colors. Font attributes accept CSS font-family lists, not font URLs or font objects. Missing, empty, or invalid attribute values leave the runtime’s defaults available; they do not create the missing theme settings for you. Your layout must load the fonts it selects, using its existing font-loading mechanism. Passing a family name does not download the font. Supply readable foreground/background pairs, especially for primary actions and surfaces. Fluid creates the system screen element for a system page. You do not need to add a second <fluid-account-screen> to your layout. Keep the layout’s {{ content_for_header }} and normal page-content output in place. See Member page layouts.

Override selected defaults with CSS

This section requires the upcoming override-capable runtime. Earlier runtimes can write attribute colors into the same public inline properties, so an ordinary layout rule does not reliably override them.

Add the following rule to the stylesheet loaded by your member layout, or to a <style> block in that layout:

fluid-account-screen {
  --fluid-account-primary: var(--color-button);
  --fluid-account-primary-foreground: var(--color-button-text);
  --fluid-account-background: var(--color-background);
  --fluid-account-foreground: var(--color-text);
  --fluid-account-font-family: var(--font-body);
}

The variables on the right belong to your theme. Define them using the theme settings you want the screen to follow. The runtime does not create --color-button, --color-background, or --font-body for you. If your theme already emits those variables, reuse them. Keep the standard setting IDs and their defaults. Add only the public overrides you need; no additional mapping file or new setting schema is required for the override mechanism itself. This rule does not require !important. For example, override only primary action colors while letting all other styles follow the standard attributes:

fluid-account-screen {
  --fluid-account-primary: var(--color-button);
  --fluid-account-primary-foreground: var(--color-button-text);
}

To change one screen, scope the selector to its screen attribute:

fluid-account-screen[screen="messaging"] {
  --fluid-account-surface: var(--color-background);
}

Use your own theme’s actual variable names. You can also assign a valid literal CSS color or font-family list to a public override.

How precedence works

In the override-capable runtime, each supported style resolves in this order:

The public --fluid-account-* property supplied by your theme.
The corresponding valid screen attribute, supplied from standard theme settings.
The runtime’s existing default.

Public properties can come from a rule on the element, inheritance from its layout, or your own inline style. Normal CSS cascade rules decide between multiple theme declarations. The attribute is a fallback and does not overwrite your public property. The runtime reserves --fluid-account-default-* for attribute defaults. Do not set those properties in your theme; use the public properties in the table above. Removing your override reveals the latest attribute value. If an inherited override still applies, remove or adjust that declaration too. Changes to supported attributes update presentation without remounting the screen or clearing its drafts. Changes to referenced CSS variables flow through CSS as their values change.

Missing variables and invalid values

Keep these cases distinct:

Override	Result in the override-capable runtime
No public override is defined	The valid attribute value applies, then the runtime default if needed.
`--fluid-account-primary: var(--missing-color)` and the source is undefined	The public override is unavailable, so the attribute fallback can apply.
`--fluid-account-primary: var(--missing-color, #2563eb)`	The explicit CSS fallback `#2563eb` is the override and takes precedence over the attribute.
`--fluid-account-primary: 20px`	The property is defined but is not a valid color. The consuming color declaration becomes invalid; it does not automatically retry the attribute.

Use valid color and font values and check the result in the browser. A fallback inside var() handles an unavailable variable; it is not a general validator for a defined value of the wrong type.

Builder preview and presets

System screen attributes use the effective settings of the theme being previewed, including unsaved builder settings. Changing a preset or one of the mapped settings can therefore update the screen along with custom theme content when the preview is rendered again. Put override CSS and its source variables in the rendered theme layout or its stylesheet inside the preview iframe. CSS added only to the surrounding admin builder document cannot style the iframe’s screen. A public override remains in control when the attribute changes. For example, if primary color is overridden with var(--color-button), changing only color_primary will not change the visible primary color. Change the setting that defines --color-button, or remove the override to follow color_primary again. When your theme outputs CSS variables from Liquid settings, those variable declarations must also be refreshed in the preview. An override cannot update a source variable whose rendered value has not changed.

Scope and limitations

These settings control semantic colors and font families. They do not add attributes for spacing, font sizes, corner radii, or screen layout.
The screen uses Shadow DOM. Use the public properties instead of targeting internal component classes from your theme stylesheet.
The override implementation covers screen surfaces, derived Messaging colors, and dialogs. It does not recolor My Site’s embedded website preview or replace user-selected group and avatar colors.
Your theme layout owns the surrounding page width, height, navigation, and font loading.
Styling does not change member access rules or authentication.

Runtime availability

The standard unversioned loader is:

<script type="module" src="https://assets.fluid.app/account-screens/account-screens.js"></script>

Fluid normally provisions the account screens runtime through the company’s global embeds. Do not add another copy if the layout already receives it through {{ content_for_header }}. The unversioned URL follows the latest successfully published release; it does not serve changes just because a PR exists. A version-pinned embed keeps its pinned behavior until updated. CSS-over-attribute precedence is planned for v0.4.0; verify that the override release is published and loaded before relying on it. Legacy <fluid-account-messaging> embeds use a separate versioned classic script. They also need an override-capable release and a selector matching that legacy element. Do not load the classic script and the module loader together on the same page.

Verify your theme

Open a system screen without overrides. Check its fonts and colors against the standard theme settings.
Change a mapped color in the builder and confirm the preview uses the new value. Save it and check the member page too.
With the override-capable runtime, add a primary/foreground override pair. Confirm those values take precedence while unmodified styles still follow the standard settings.
Change the theme variable referenced by the override and check the rendered result.
Remove the override and confirm the most recent attribute value becomes visible.
Check a dialog and, for Messaging, its tinted surfaces and focus states. Confirm that selected fonts actually load.
Check the builder preview and the signed-in member page separately.

Troubleshooting

Symptom	What to check
Theme CSS does not beat the attribute	Confirm the loaded runtime includes the override release. Check that the rule matches the element and loads in the same document.
A preset changes the page but not the screen	Check the standard setting IDs, valid values, and whether an override intentionally takes precedence.
The font family is set but looks wrong	Load the font in the theme layout and use its correct CSS family name.
Colors look invalid instead of falling back	Inspect the computed public property for a defined value that is not a CSS color.
Changes appear live but not in the builder	Ensure the preview iframe receives the same layout CSS and updated source variables.
A pinned embed ignores the new override behavior	Upgrade it to a verified release containing the override support.

Get Started

Core Concepts

Guides

Migration guides

Website & Themes

FairShare SDK

Files SDK

Portal & Widgets

Theme settings and system screen styles

Standard theme settings

Override selected defaults with CSS

How precedence works

Missing variables and invalid values

Builder preview and presets

Scope and limitations

Runtime availability

Verify your theme

Troubleshooting

​Standard theme settings

​Override selected defaults with CSS

​How precedence works

​Missing variables and invalid values

​Builder preview and presets

​Scope and limitations

​Runtime availability

​Verify your theme

​Troubleshooting

Standard theme settings

Override selected defaults with CSS

How precedence works

Missing variables and invalid values

Builder preview and presets

Scope and limitations

Runtime availability

Verify your theme

Troubleshooting