Theming

Fab4m provides a basic look and feel called basic, which is used as the default form theme. This works for basic use cases, but if you want to tightly integrate fab4m into your solution, you probably want to change the theme of your forms to fit your use case.

Provided themes

Fab4m provides three themes out of the box. basic tailwind and bulma. The basic form is designed to blend in with other design, the tailwind theme provides a starting point if you are already using Tailwind CSS, and the bulma theme uses classes from the bulma css framework, which means the forms conform to the style used there.

Selecting a theme

The easiest way to change the theme is to do it globally:

import { setDefaultTheme, tailwind } from "@fab4m/fab4m";
setDefaultTheme(tailwind);

The tailwind theme is now used automatically for all your forms.

You can also specify which theme to used on a per-form basis:

import { tailwind, createForm } from "@fab4m/fab4m";
createForm({}, { theme: tailwind });

Using the basic theme

In order for your forms to be styled, you need to include the basic css, for example byimporting it (if your build pipeline supports that):

import "@fab4m/fab4m/css/basic/basic.css";

Using the tailwind theme

Tailwind CSS is a very popular CSS framework, and fab4m provides a tailwind-based theme to make it easy.

Start by making sure you have tailwind up and running using their excellent guide.

Once you have everything up and running, you need to configure tailwind to pick up on the classes that fab4m is using, edit your tailwind.config.js file and add the following entry to the content list:

module.exports = {
  content: [
    // Your entries...
    './node_modules/@fab4m/fab4m/dist/index.es.js',
  // ...
};

Note that if your node_modules lives somewhere else relative your tailwind.config.js, you need to modify the path to match.

Using the bulma theme

If you want to use the bulma theme, you need to include the bulma css. See the bulma documentation on how to include the CSS.

Creating your own theme

If you have existing CSS you probably want to define your own theme. Fab4m provides an object with the defined classes for all elements.

import { defaultThemeClasses } from "@fab4m/fab4m"
const yourTheme = {
  name: "your theme",
  module: "yourmodule",
  classes: {
    ...defaultThemeClasses
  }
}

This is all you need to define your theme. You can now override any default classes with your own:

import { defaultThemeClasses } from "@fab4m/fab4m"
const yourTheme = {
  name: "your theme",
  module: "yourmodule",
  classes: {
    ...defaultThemeClasses,
    componentWrapper: "my-component-class"
    input: "my-input-class"
  }
}

Using your theme

Once your theme is defined, it can be selected just as any other theme.

import { setDefaultTheme } from "@fab4m/fab4m";
setDefaultTheme(yourTheme);

Making changes to an existing theme

If you just want to make tiny changes to an existing theme you can base your theme on the existing one.

import { basic, setDefaultTheme } from "@fab4m/fab4m";
const yourTheme = {
  name: "your theme",
  module: "yourmodule",
  classes: {
    ...basic.classes,
    input: "my-input-class",
  }
}
setDefaultTheme(yourTheme);

Extending the tailwind theme

The tailwind theme provides a helper to make it a lot easier to create your own tailwind theme. Some things like colors and so on are repeated many times, so we provide a createTailwindTheme() function to make it easier to adjust the theme to your needs. If additional customization is required, you can apply it as above.

import { createTailwindTheme } from "@fab4m/core";
const yourTheme = createTailwindTheme({
  settings: {
    primaryBg: "bg-green-700 hover:bg-green-900",
    secondaryBg:
      "bg-slate-500 hover:bg-slate-900 dark:bg-slate-800 dark:hover:bg-slate-500",
    inputBorder: "border border-slate-300 dark:border-slate-500",
    inputBg: "bg-white dark:bg-slate-700",
    inputText: "text-white dark:text-slate-100",
    inputHeight: "h-10",
  }
});
setDefaultTheme(yourTheme);