@jceb81/unocss-preset-flowbite

Flowbite preset for UnoCSS. Covers everything that Flowbite plugin for Tailwind provides plus default primary color minus charts.

Installation

npm install --save-dev @jceb81/unocss-preset-flowbite
yarn add --dev @jceb81/unocss-preset-flowbite
pnpm add --save-dev @jceb81/unocss-preset-flowbite

Usage

Add presetFlowbite() to presets in your unocss config:

// ...
import { presetFlowbite } from "@jceb81/unocss-preset-flowbite";

export default defineConfig({
  // ...
  presets: [
    // ...
    presetFlowbite(),
  ],
  theme: {
    colors: {
      // TODO: you might also want to set the following colors and
      // import that theme the desired theme into CSS file, e.g. ./node_modules/flowbite/src/themes/default.css

      // Source ./node_modules/flowbite/src/themes/default.css
      // https://github.com/themesberg/flowbite/blob/main/src/themes/default.css

      /* used for custom brand colors */
      "fg-brand-subtle": "var(--color-fg-brand-subtle)",
      "fg-brand": "var(--color-fg-brand)",
      "fg-brand-strong": "var(--color-fg-brand-strong)",

      /* used for status colors */
      "fg-success": "var(--color-fg-success)",
      "fg-success-strong": "var(--color-fg-success-strong)",
      "fg-danger": "var(--color-fg-danger)",
      "fg-danger-strong": "var(--color-fg-danger-strong)",
      "fg-warning-subtle": "var(--color-fg-warning-subtle)",
      "fg-warning": "var(--color-fg-warning)",
      "fg-yellow": "var(--color-fg-yellow)",
      "fg-disabled": "var(--color-fg-disabled)",
      "fg-purple": "var(--color-fg-purple)",
      "fg-cyan": "var(--color-fg-cyan)",
      "fg-indigo": "var(--color-fg-indigo)",
      "fg-pink": "var(--color-fg-pink)",
      "fg-lime": "var(--color-fg-lime)",

      /* BACKGROUND COLOR VARIABLES */
      /* used for neutral colors */
      "neutral-primary-soft": "var(--color-neutral-primary-soft)",
      "neutral-primary": "var(--color-neutral-primary)",
      "neutral-primary-medium": "var(--color-neutral-primary-medium)",
      "neutral-primary-strong": "var(--color-neutral-primary-strong)",
      "neutral-secondary-soft": "var(--color-neutral-secondary-soft)",
      "neutral-secondary": "var(--color-neutral-secondary)",
      "neutral-secondary-medium": "var(--color-neutral-secondary-medium)",
      "neutral-secondary-strong": "var(--color-neutral-secondary-strong)",
      "neutral-secondary-strongest": "var(--color-neutral-secondary-strongest)",
      "neutral-tertiary-soft": "var(--color-neutral-tertiary-soft)",
      "neutral-tertiary": "var(--color-neutral-tertiary)",
      "neutral-tertiary-medium": "var(--color-neutral-tertiary-medium)",
      "neutral-quaternary": "var(--color-neutral-quaternary)",
      "neutral-quaternary-medium": "var(--color-neutral-quaternary-medium)",
      "heading": "var(--color-heading)",

      /* used for brand colors */
      "brand-softer": "var(--color-brand-softer)",
      "brand-soft": "var(--color-brand-soft)",
      "brand": "var(--color-brand)",
      "brand-medium": "var(--color-brand-medium)",
      "brand-strong": "var(--color-brand-strong)",

      /* used for status colors */
      "success-soft": "var(--color-success-soft)",
      "success": "var(--color-success)",
      "success-medium": "var(--color-success-medium)",
      "success-strong": "var(--color-success-strong)",
      "danger-soft": "var(--color-danger-soft)",
      "danger": "var(--color-danger)",
      "danger-medium": "var(--color-danger-medium)",
      "danger-strong": "var(--color-danger-strong)",
      "warning-soft": "var(--color-warning-soft)",
      "warning": "var(--color-warning)",
      "warning-medium": "var(--color-warning-medium)",
      "warning-strong": "var(--color-warning-strong)",
      "dark-soft": "var(--color-dark-soft)",
      "dark": "var(--color-dark)",
      "dark-strong": "var(--color-dark-strong)",
      "disabled": "var(--color-disabled)",
      "purple": "var(--color-purple)",
      "sky": "var(--color-sky)",
      "teal": "var(--color-teal)",
      "pink": "var(--color-pink)",
      "cyan": "var(--color-cyan)",
      "fuchsia": "var(--color-fuchsia)",
      "indigo": "var(--color-indigo)",
      "orange": "var(--color-orange)",

      /* BORDER COLOR VARIABLES */
      "buffer": "var(--color-buffer)",
      "buffer-medium": "var(--color-buffer-medium)",
      "buffer-strong": "var(--color-buffer-strong)",
      "muted": "var(--color-muted)",
      "light-subtle": "var(--color-light-subtle)",
      "light": "var(--color-light)",
      "light-medium": "var(--color-light-medium)",
      "default-subtle": "var(--color-default-subtle)",
      "default": "var(--color-default)",
      "default-medium": "var(--color-default-medium)",
      "default-strong": "var(--color-default-strong)",

      /* used for status colors */
      "success-subtle": "var(--color-success-subtle)",
      "danger-subtle": "var(--color-danger-subtle)",
      "warning-subtle": "var(--color-warning-subtle)",
      "brand-subtle": "var(--color-brand-subtle)",
      "brand-light": "var(--color-brand-light)",
      "dark-subtle": "var(--color-dark-subtle)",
      "dark-backdrop": "var(--color-dark-backdrop)",

      /* shiki variables */
      "shiki-fg-brand": "var(--color-shiki-fg-brand)",
      "shiki-fg-brand-subtle": "var(--color-shiki-fg-brand-subtle)",
    },
  },
});