v1.3.4-alpha.0

⚠️ This is a dev pre-release.

Sumary

We introduce the theme customization in the tailwind.config.js.

Install

npm install [email protected]

We can add, modify or delete themes with the new configuration, since RippleUI loads light and dark mode by default you can disable this behavior.

1. To add a new theme just simply add a new object to the themes array and then you will have to autocomplete about what properties are required and what are optional, also for colors you will have all support for all the available colors.

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
  themes: [
  {
      themeName: "custom",
      colorScheme: "dark",
      colors: {
        primary: "#573242",
        backgroundPrimary: "#123673",
        // Same Variables
      },
    },
  ],
};

2. If you want to modify the existing theme like dark or light simply set the themeName property as light or dark

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
  themes: [
  {
      themeName: "light",
      colors: {
        primary: "#573242",
      },
    },
  ],
};

3. If you want to remove the existing themes that are set in the config object

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
   removeThemes: ["dark"],
};

4. If you want to remove the default background-color and color properties that are by default turned on you can disable this behavior.

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
     defaultStyle: false,
};

This is a fully example using the config

in the tailwind.config.js add the following code

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
  defaultStyle: true,
  removeThemes: [],
  themes: [
    {
      themeName: "light",
      colorScheme: "light",
      colors: {
        // Customize Colors
        primary: "#235264",
      },
    },
    {
      themeName: "custom",
      colorScheme: "dark",
      colors: {
        primary: "#573242",
        backgroundPrimary: "#123673",
        // Same Variables
      },
    },
  ],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [],
  rippleui: {
    ...config,
  },
  theme: {
    extend: {},
  },
  plugins: [require("rippleui")],
};

5. If you declare custom colors in whatever theme use this.

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
   themes: [
     {
      themeName: "light",
      colorScheme: "dark",
      colors: {
!        customColor: "#123673",
      },
    },
  ],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [],
- rippleui: {
-   ...config,
- },
  theme: {
    extend: {},
  },
+  plugins: [require("rippleui")({
+         ....config
+   )],
};