Customization
Customize local source deliberately and override the supported semantic tokens without replacing hidden package behavior.
On this page
Edit owned source
A copied component is ordinary project source. Change its complete utility strings, API, or markup in the consumer repository and review that change like application code. Re-running fve add is idempotent and does not silently replace local edits.
dotnet fve diff --config src/Acme.Components/fve.jsonSupported customization variables
These are the complete supported --fve-* customization variables. The values shown are the default light surface, sky theme, comfortable density, medium controls, and table fallbacks.
/* Supported customization tokens and defaults. */
.fve-components {
--fve-page: oklch(98.5% 0.002 247.839);
--fve-surface: oklch(100% 0 0);
--fve-surface-subtle: oklch(96.7% 0.003 264.542);
--fve-surface-hover: oklch(96.7% 0.003 264.542);
--fve-surface-active: oklch(92.8% 0.006 264.531);
--fve-text: oklch(21% 0.034 264.665);
--fve-muted-text: oklch(44.6% 0.03 256.802);
--fve-border: oklch(87.2% 0.01 258.338);
--fve-overlay-backdrop: oklch(13% 0.028 261.692 / 55%);
--fve-neutral-subtle: oklch(96.7% 0.003 264.542);
--fve-neutral-text: oklch(37.3% 0.034 259.733);
--fve-neutral-ring: oklch(70.7% 0.022 261.325);
--fve-brand-subtle: oklch(97.7% 0.013 236.62);
--fve-brand-solid: oklch(50% 0.134 242.749);
--fve-brand-hover: oklch(44.3% 0.11 240.79);
--fve-brand-active: oklch(39.1% 0.09 240.876);
--fve-brand-text: oklch(44.3% 0.11 240.79);
--fve-brand-ring: oklch(68.5% 0.169 237.323);
--fve-positive-subtle: oklch(96.2% 0.044 156.743);
--fve-positive-text: oklch(44.8% 0.119 151.328);
--fve-positive-ring: oklch(72.3% 0.219 149.579);
--fve-warning-subtle: oklch(97.3% 0.071 103.193);
--fve-warning-text: oklch(47.6% 0.114 61.907);
--fve-warning-ring: oklch(76.9% 0.188 70.08);
--fve-critical-subtle: oklch(97.1% 0.013 17.38);
--fve-critical-solid: oklch(57.7% 0.245 27.325);
--fve-critical-hover: oklch(50.5% 0.213 27.518);
--fve-critical-active: oklch(44.4% 0.177 26.899);
--fve-critical-text: oklch(44.4% 0.177 26.899);
--fve-critical-ring: oklch(63.7% 0.237 25.331);
--fve-info-subtle: oklch(97% 0.014 254.604);
--fve-info-text: oklch(48.8% 0.243 264.376);
--fve-info-ring: oklch(62.3% 0.214 259.815);
--fve-radius-control: 0.5rem;
--fve-radius-panel: 0.75rem;
--fve-control-min-height: 2.5rem;
--fve-control-padding-block: 0.5rem;
--fve-control-font-size: 1rem;
--fve-control-line-height: 1.5rem;
--fve-navigation-min-height: 2.25rem;
--fve-navigation-padding-block: 0.5rem;
--fve-shell-bar-min-height: 4rem;
--fve-popup-active-background: var(--fve-brand-solid);
--fve-popup-active-text: white;
--fve-table-control-size: 1.75rem;
--fve-table-padding-block-compact: 0.25rem;
--fve-table-padding-block-comfortable: 0.75rem;
--fve-table-padding-inline: 0.75rem;
}Renderer-owned variables
The following variables carry per-render values or internal surface state. Their names are observable CSS implementation details, not customization tokens.
/* Renderer-owned implementation variables; do not customize. */
--fve-calendar-all-day-rows
--fve-calendar-days
--fve-calendar-duration
--fve-calendar-hours
--fve-calendar-lane
--fve-calendar-lanes
--fve-calendar-start
--fve-row-background
--fve-table-backgroundApplication inputs
Applications provide destination resolvers, form-value encoders, trusted Datastar expressions, custom cells, dialog bodies, toolbars, actions, and page content. Submitted values still require server validation.
Native controls
Render browser-native controls directly with the FSharp.ViewEngine DSL when native presentation is intentional. There is no parallel NativeSelect API or separate component markup language.