pandacss-preset-radix-colors4

Radix Colors preset for PandaCSS

Brings Radix Colors to PandaCSS

Installation

npm install --save-dev pandacss-preset-radix-colors

Usage

Add the preset to your PandaCSS configuration (panda.config.ts)

import { defineConfig } from "@pandacss/dev";
import radixColorsPreset from "pandacss-preset-radix-colors";

export default defineConfig({
  presets: [radixColorsPreset()],
});

Options

Dark mode

You can add dark mode support by setting darkMode to true. The default condition has been set to .dark &, which can be changed as shown below

...
presets: [
  radixColorsPreset({
    darkMode: true,

    // darkMode: {
    //   condition: ".dark &"
    // }
  }),
],

Attributions

• Radix UI team for creating the wonderfully crafted colors
• Chakra team for creating PandaCSS