Global

The built-in components comes with a default look and feel, you can customize it using setConfig or the styles property in each built-in component and the faivform function to change the classes names. Or you can change the CSS variables in your global css to change the theme.

Classes

The setConfig function allows you to customize the class names of the built-in components. You can check the ContextStyles.

<script lang="ts">
  import { setConfig } from "@tuentyfaiv/svelte-form";
  import type { ContextStyles } from "@tuentyfaiv/svelte-form";

  const styles: ContextStyles = {
    // ... classes
  };

  setConfig(styles);
</script>

Theme

To use the default theme you must import the globals.css in your global css file or root application. And to customize the theme you must set in your global css the CSS variables that are used in the built-in components, with your custom values.

Note

Faivform expect .dark class or data-theme="dark" attribute in the html element to detect when the dark mode is active.

<script lang="ts">
  import "@tuentyfaiv/svelte-form/globals.css";
</script>

Default

Here is the default CSS variables values.

:root {
  --svorm-font: system-ui, sans-serif;

  --svorm-space: .25rem;

  --svorm-radius: var(--svorm-space);

  --svorm-border: var(--svorm-border-width) var(--svorm-border-style) rgb(var(--svorm-primary) / var(--svorm-primary-opacity));
  --svorm-border-width: 1px;
  --svorm-border-style: solid;

  --svorm-white: 255 255 255;
  --svorm-white-opacity: 1;

  --svorm-black: 0 0 0;
  --svorm-black-opacity: 1;

  --svorm-shadow: var(--svorm-shadow-size) rgb(var(--svorm-shadow-color) / .25);
  --svorm-shadow-size: 0 var(--svorm-space) calc(var(--svorm-space) + (calc(var(--svorm-space) * 2)));
  --svorm-shadow-color: 48 50 68;

  --svorm-primary: 33 192 139;
  --svorm-primary-opacity: 1;
  --svorm-primary-text: 26 27 37;

  --svorm-secondary: 110 42 178;
  --svorm-secondary-opacity: 1;
  --svorm-secondary-text: var(--svorm-white);

  --svorm-placeholder: var(--svorm-white);
  --svorm-placeholder-opacity: 1;
  --svorm-placeholder-text: 174 175 183;

  --svorm-success: 55 190 57;
  --svorm-success-opacity: 1;
  --svorm-success-text: var(--svorm-black);

  --svorm-warning: 255 184 0;
  --svorm-warning-opacity: 1;
  --svorm-warning-text: 26 27 37;

  --svorm-error: 191 58 58;
  --svorm-error-opacity: 1;
  --svorm-error-text: var(--svorm-white);
}

:root:is(.dark, [data-theme="dark"]) {
  --svorm-shadow-color: var(--svorm-primary);

  --svorm-primary: 166 230 209;
  --svorm-primary-text: 225 225 228;

  --svorm-secondary: 197 170 224;
  --svorm-secondary-text: 26 27 37;

  --svorm-placeholder: 26 27 37;
  --svorm-placeholder-text: 114 116 129;

  --svorm-success: 115 210 116;

  --svorm-warning: 255 205 77;

  --svorm-error: 210 117 117;
}

Font

system-ui, sans-serif

Space

1rem

Colors

White	Black
255 255 255	0 0 0

On light theme:

Name	Background	Text
Primary	33 192 139	26 27 37
Secondary	110 42 178	255 255 255
Placeholder	255 255 255	174 175 183
Success	55 190 57	0 0 0
Warning	255 184 0	26 27 37
Error	191 58 58	255 255 255

On dark theme:

Name	Background	Text
Primary	166 230 209	225 225 228
Secondary	197 170 224	26 27 37
Placeholder	26 27 37	114 116 129
Success	115 210 116	0 0 0
Warning	255 205 77	26 27 37
Error	210 117 117	255 255 255