DocsElements

Customizing Themes in Rens UI

API

PropertyTypeDescriptionDefault
defaultStylebooleanIf set to true, Rens UI will apply the default background color and text color to the root element. You can disable this behavior by setting it to false.true
removeThemesstring[]An array of theme names that you want to remove. If specified, these themes will not be included in your application.
themesTheme[]An array of theme objects that you can use to add, modify, or create new themes.

Theme Interface

PropertyTypeDescription
**themeName **"light" | "dark" | stringThe name of the theme. You can use "light" or "dark" for built-in light and dark themes, respectively. For custom themes, you can specify a unique name.
**colorScheme **"dark" | "light"The color scheme for the theme. Use "dark" for dark mode and "light" for light mode.
prefersColorSchemeboolean (Optional)If set to true, this theme will be used as a preference when the user's system has a color scheme preference set. This is useful for macOS, Windows, or Linux devices with theme preferences.
colorsobjectAn object that defines various color variables for the theme. You can specify any number of key-value pairs to customize colors.
interface Theme {
  themeName: "light" | "dark" | string;
  colorScheme: "dark" | "light";
  prefersColorScheme?: boolean;
  colors: {
    [key: string]: string;
  };
}

Example Usage

Here's an example of how to use the API to customize themes in Rens UI:

module.exports = {
  rensui: {
    defaultStyle: false, // Disable default background and text color
    removeThemes: ["dark"], // Remove the built-in dark theme
    themes: [
      {
        themeName: "custom-light",
        colorScheme: "light",
        colors: {
          primary: "#235264",
          secondary: "#964643",
          customVariable: "#ABCDEF",
        },
      },
      {
        themeName: "custom-dark",
        colorScheme: "dark",
        prefersColorScheme: true,
        colors: {
          primary: "#573242",
          secondary: "#1a1a1a",
          customVariable: "#FF00FF",
        },
      },
    ],
  },
};

Customizing Default Themes

To customize the default themes (light and dark), use the themes array property in your tailwind.config.js file:

tailwind.config.js
module.exports = {
  rensui: {
    themes: [
      {
        themeName: "light",
        colorScheme: "light",
        colors: {
          'blue-base': "#3b82f6",
          'blue-hover': "#2563eb",
          'backgroundPrimary':'#ffffff'
        },
      },
      {
        themeName: "dark",
        colorScheme: "dark",
        colors: {
          'blue-base': "#3b82f6",
          'blue-hover': "#2563eb",
          'backgroundPrimary':'#0f172a'
        },
      },
    ],
  },
};

Adding a New Theme

To add a new theme, you can use the themes array property and specify the new theme details:

tailwind.config.js
module.exports = {
  rensui: {
    themes: [
      {
        themeName: "custom",
        colorScheme: "dark" | "light",
        colors: {
          primary: "#634673",
          backgroundPrimary: "#583533",
        },
      },
    ],
  },
};

Removing a Theme

To remove a theme, use the removeThemes array property and list the themes you want to remove:

tailwind.config.js
module.exports = {
  rensui: {
    removeThemes: ["dark", "light", "customTheme"],
  },
};

Customizing Existing Themes with Different Variables

To customize existing themes or create new ones with different variables, use the themes array property:

tailwind.config.js
const config = {
  themes: [
    {
      themeName: "custom",
      colorScheme: "dark" | "light",
      colors: {
        primary: "#634673",
        secondary: "#583533",
        customVariable: "#000000",
      },
    },
  ],
};

module.exports = {
  plugins: [
    require("rensui")({
      ...config,
    }),
  ],
};

Disabling Default Background and Text Colors

To disable the default background color and text color, use the defaultStyle boolean property:

tailwind.config.js
module.exports = {
  rensui: {
    defaultStyle: false,
  },
};

Setting a Preference Theme

To set a preference theme based on the user's system preferences, use the prefersColorScheme boolean property:

tailwind.config.js
module.exports = {
  rensui: {
    themes: [
      {
        themeName: "custom",
        colorScheme: "dark" | "light",
        prefersColorScheme: true,
        colors: {
          primary: "#634673",
          backgroundPrimary: "#583533",
        },
      },
    ],
  },
};

With these API options and customization options, you have the flexibility to create unique themes, modify existing ones, or remove specific themes to suit your application's visual style and user preferences. You can easily tailor the appearance of your application with Rens UI to match your desired visual style and provide a delightful user experience. Happy customizing!

Previous

Colors

Next

Dark Mode