Roosevelt

← Usage

Light mode and dark mode

Light mode and dark mode will be detected automatically based on operating system preference. To set it manually, you can apply an additional class of light or dark to your <form> elements to force the mode.

Overriding default styles

The most convenient way to override the default styles in Semantic Forms is to override the built-in CSS variables.

For example:

form.semanticForms {
  /* will overwrite the default semantic-forms values */
  --semanticFormsFontFamily: monospace;
  --semanticFormsTextColor: blue;
  --semanticFormsInputMinWidth: 300px;
}

The built-in values carry no selector weight of their own, including the dark mode ones, so an override like the one above wins in both light mode and dark mode, and does not need to be heavier than form.semanticForms. To change a value in dark mode only, put the override inside a dark mode media query, and add a rule for the dark class if you use it:

@media (prefers-color-scheme: dark) {
  form.semanticForms:not(.light) {
    --semanticFormsSwitchOnColor: limegreen;
  }
}

form.semanticForms.dark {
  --semanticFormsSwitchOnColor: limegreen;
}

Page background

Semantic Forms only styles its own forms, so it leaves the page behind them alone. Its colors are designed against a white page in light mode and a black one in dark mode, which is what --semanticFormsPageBgColor holds for each mode. The library does not paint anything with it by default.

It matters when the page and the form are in different modes, such as a form in dark mode on a light page. A legend straddles the top border of its fieldset, so its text is drawn partly over whatever is behind the form rather than over the fieldset, and dark mode's light legend text is hard to read on a light page. Give the form the background it was designed against to fix that:

form.semanticForms {
  background-color: var(--semanticFormsPageBgColor);
}

The variable is set on the form, so it is available to the form and everything inside it, but not to the page around it. To paint the whole page instead, give the page's own background the same colors: #fff in light mode and #000 in dark mode, unless you have overridden the variable.

Controlling how wide fields get

Fields are laid out in a grid whose columns grow to fill the available width. Three variables control the sizing:

• --semanticFormsInputMinWidth (default 250px): the narrowest a column may be. This is what decides how many columns fit across, and so how many fields sit side by side.
• --semanticFormsInputColumnMaxWidth (default 1fr): the widest a column may be. The default lets the columns share out whatever space is left over. Set a length to stop them growing past it. A value below --semanticFormsInputMinWidth has no effect, since the minimum wins.
• --semanticFormsInputMaxWidth (default 365px): the widest the field itself may be inside its column. Use this to keep fields a readable width while the columns themselves stay wide.

For a complete list of CSS variables you can override, see the top of styles/globals.scss.