Skip to content
Faivform

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. Also Faivform library comes with a light and dark theme that you can customize too.

To customize globally you must use the setConfig in the root component of you application. You can check the Config to see all the options.

Classes

In the fields option you can customize the class names of the built-in components. You can check the ContextStyles.

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


  setConfig({
    fields: {},
    // ... theme
  });
</script>

Theme

To customize the theme you must use the following options: base, light, onLight, dark, onDark. The base option are CSS variables that are used in both themes. The light and dark options are the themes that you can customize. The onLight and onDark options are CSS variables that are used in each theme.

You can check the values of each property here:

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


  setConfig({
    // ... classes
    base: {},
    light: {},
    onLight: {},
    dark: {},
    onDark: {},
  });
</script>

Default

Here is the default styles configuration

Base

Font:

system-ui, sans-serif

Space:

1rem

Radius:

calc(var(--faivform-space) / 4)

White:

255 255 255

Black:

0 0 0

Theme

Primary:

  • 50: 222 246 238

  • 100: 211 242 232

  • 200: 200 239 226

  • 300: 166 230 209

  • 400: 100 211 174

  • 500: 33 192 139

  • 600: 30 173 125

  • 700: 25 144 104

  • 800: 20 115 83

  • 900: 16 94 68

Secondary:

  • 50: 233 223 243

  • 100: 226 212 240

  • 200: 219 202 236

  • 300: 197 170 224

  • 400: 154 106 201

  • 500: 110 42 178

  • 600: 99 38 160

  • 700: 83 32 134

  • 800: 66 25 107

  • 900: 54 21 87

Accent:

  • 50: 252 236 217

  • 100: 251 230 205

  • 200: 250 223 192

  • 300: 247 204 155

  • 400: 242 166 79

  • 500: 236 128 4

  • 600: 212 115 4

  • 700: 177 96 3

  • 800: 142 77 2

  • 900: 116 63 2

Success:

  • 50: 225 245 225

  • 100: 215 242 215

  • 200: 205 239 206

  • 300: 175 229 176

  • 400: 115 210 116

  • 500: 55 190 57

  • 600: 50 171 51

  • 700: 41 143 43

  • 800: 33 114 34

  • 900: 27 93 28

Warning:

  • 50: 255 244 217

  • 100: 255 241 204

  • 200: 255 237 191

  • 300: 255 227 153

  • 400: 255 205 77

  • 500: 255 184 0

  • 600: 230 166 0

  • 700: 191 138 0

  • 800: 153 110 0

  • 900: 125 90 0

Error:

  • 50: 242 216 216

  • 100: 239 206 206

  • 200: 229 176 176

  • 300: 210 117 117

  • 400: 250 142 142

  • 500: 191 58 58

  • 600: 172 52 52

  • 700: 143 44 44

  • 800: 115 35 35

  • 900: 94 28 28

Placeholder:

  • 50: 225 225 228

  • 100: 215 215 219

  • 200: 205 205 210

  • 300: 174 175 183

  • 400: 114 116 129

  • 500: 53 56 75

  • 600: 48 50 68

  • 700: 40 42 56

  • 800: 32 34 45

  • 900: 26 27 37