Themes

Themes

There are currently two available themes for the library. Both themes come with built-in:

  • Responsiveness to different screen sizes and root font sizes
  • Left-to-right and right-to-left support
  • Dark and light color schemes

Installation

npm install @phormal/theme-basic

or

npm install @phormal/theme-material

Examples of how they look can be found on the examples page:

Importing

@import '@phormal/theme-basic/dist/index.css';

Configuration

If you're using the basic theme, you do not need to configure anything, since this is the default. For using the material theme, please enter the following into your configuration object:

const config = {
  // .. other config
  theme: 'material'
}

For more on configuration of the form, please refer to the configuration section.

Dark mode

Dark mode ships per default with both themes. It is activated in one of two ways:

  1. through the color-scheme-attribute on a parent element of the form (in most cases this would be the <html>-Tag). For example:
<html style="color-scheme: dark;"></html>
  1. through user system settings.

If the user's system setting and the color-scheme attribute are conflicting, the latter will have precedence, in order to allow full control for the website maintainer.

Last updated on January 26, 2023
ExamplesHooks