@formkit/theme-creator

FormKit Theme Creator

Use this package to build your own FormKit theme and (optionally) share it with the world.

To do

• Add min/max for variables to clamp values within a range.
• Add custom scales to variables.

Usage

Themes are written using createTheme with tailwindcss classes and will output a theme file that can be imported into your FormKit configuration — or alternatively a semantic stylesheet will be generated automatically from the tailwind classes you define.

Creating a theme

import { createTheme } from '@formkit/theme-creator';

export default createTheme({
  // Define your theme details here:
  meta: {
    name: 'Midnight blizzard',
    description: 'A cold and blustery theme for FormKit',
    formkitVersion: '^1.2.0',
    darkMode: true,
    supportedInputs: ['text', 'textarea', 'select']
    author: 'Justin Schroeder',
    authorLink: 'https://x.com/jpschroeder'
  },
  variables: {
    borderColor: {
      // Allow the theme editor to modify this variable with the "color" widget.
      editor: 'color', 
      // Only use tailwind base colors for editable variables.
      value: 'slate'
    },
    darkModeBorderColor: {
      // Allow the theme editor to modify this variable with the "color" widget.
      editor: 'color', 
      // Only use tailwind base colors for editable variables.
      value: 'white'
    },
    spacing: {
      editor: 'spacing',
      // Use tailwind spacing scale for editable variables.
      value: '2'
    },
    // This variable is not editable by GUI theme editor, but can be changed
    // by a user who wants to manually configure the theme.
    errorColor: 'red-500',
  },
  // Define your theme styles here for each input type.
  inputs: {
    text: {
      // Use the variables defined above in your styles by prepending a `$`.
      // These will be directly replaced in your class list.
      inner: 'p-$spacing bg-white/10 rounded-md border-$borderColor-100 dark:border-$darkModeBorderColor-50',
    }
  }
})

Using a theme

Once your theme is created, users can import it and use it to generate their own class list, or they can use the semantic stylesheet that is generated automatically. They are also able to configure the theme prior to generation.

// formkit-theme.config.ts
import midnightBlizzard from 'formkit-theme-midnight-blizzard'

export default midnightBlizzard({
  errorColor: 'red-300'
}, {
  // Users can change some of your classes here, they can even use the variable
  // names. These classes will be merged with the theme’s classes using
  // tailwind-merge.
  inputs: {
    text: {
      // Here they want the darkmode border color to be a bit stronger:
      inner: 'dark:border-$darkModeBorderColor-100'
    }
  }
})

Publishing a theme

When publishing your theme to npm, you should use the formkit-theme- prefix. This will allow users to easily find your theme by searching for formkit-theme- on npm.