Theming

For theming, feel free to use both Utility classes or UI ASTRA CSS Variables.

Utility Classes

You can use Tailwind's dark: variant to apply dark mode styles. Here's an example:

<div className="bg-slate-900 dark:bg-white" />

CSS Variables

You can also use UI ASTRA's custom made CSS variables to apply dark mode styles automatically. Here's an example:

<div className="bg-grayscale-surface" />

Convention

We're using the following naming convention for CSS variables:

The preset colors are named according to their usage.

  • Background colors are named as surface. For example, bg-grayscale-surface.
  • Text or Icon colors are named as textIcon. For example, text-grayscale-textIcon-title.
  • Border colors are named as border. For example, border-grayscale-border.

UI ASTRA offers a vibrant color palette tailored for modern web applications. You can use these colors to create a visually appealing design.

  • Primary colors are named as primary. For example, bg-primary-500.
  • Secondary colors are named as secondary. For example, bg-secondary-500.
  • Info colors are named as info. For example, bg-info-500.
  • Error colors are named as error. For example, bg-error-500.
  • Warning colors are named as warning. For example, bg-warning-500.

The above sets of colors consist of a variety of shades ranging from 50 to 950.

  • Neutral colors are named as neutral. For example, bg-neutral-500. This color shade has a range from 50 to 1150.
  • Dark and Light Background overlay colors are named as dark overlay black and white respectively. For example, bg-dark-overlay-black and bg-dark-overlay-white. These too have shades ranging from 50 to 950.
  • A special selection of colors for dark mode applications is named as dark mode. For example, bg-dark-mode-500. This color shade has a wider range from 10 to 950.
  • The standard shades of white and black are called shape colors. For example, bg-shape-white and bg-shape-dark.

We higly recommend checking out the colors documentation page to get a better glimpse of the color palette.

Adding New Colors

Follow these steps to add your own custom colors as CSS variables:

  1. Open the globals.css file that contains the global styles.
/* globals.css */
:root {
  --grayscale-surface-subtle: 210 20% 98%;
  --grayscale-surface-hover: 204 11% 96%;
}

.dark {
  --grayscale-surface-subtle: 0 0% 12%;
  --grayscale-surface-hover: 210 13% 15%;
}
  1. Navigate to the tailwind.config.js file and add the custom colors to the extend section.
module.exports = {
  theme: {
    extend: {
      colors: {
        grayscale: {
          surface: {
            subtle: {
              DEFAULT: "hsl(var(--grayscale-surface-subtle))",
            },
            hover: "hsl(var(--grayscale-surface-hover))",

        },
      },
    },
  },
};

Great! Now you can use the custom colors in your project.

<div className="bg-grayscale-surface-subtle" />
InstallationDark Mode