Theming
Adding your custom theme to the components.
You can choose between using CSS variables or Tailwind CSS utility classes for theming based on your setup.
Create Theme
Create theme by opening the Theme Editor ( Press T ). Make sure you create your custom theme for both Light and Dark theme.
Copy Theme
Copy the theme by pressing the Copy Theme. This will copy the theme code to your clipboard.
Add Theme
Now paste this copied code into your top-level CSS file, like global.css.
Copied code should look like this:
:root {
--background: #ffffff;
--foreground: #0f172a;
--muted: #f1f5f9;
--muted-foreground: #64748b;
--popover: #ffffff;
--popover-foreground: #0f172a;
--border: #e2e8f0;
--input: #e2e8f0;
--card: #ffffff;
--card-foreground: #0f172a;
--primary: #0f172a;
--primary-foreground: #f8fafc;
--secondary: #f1f5f9;
--secondary-foreground: #0f172a;
--accent: #f1f5f9;
--accent-foreground: #0f172a;
--destructive: #ff0000;
--destructive-foreground: #f8fafc;
--ring: #94a3b8;
--radius: 0.5rem;
}
.dark {
--background: #030711;
--foreground: #e1e7ef;
--muted: #0f1629;
--muted-foreground: #7f8ea3;
--accent: #1d283a;
--accent-foreground: #f8fafc;
--popover: #030711;
--popover-foreground: #94a3b8;
--border: #1d283a;
--input: #1d283a;
--card: #030711;
--card-foreground: #e1e7ef;
--primary: #f8fafc;
--primary-foreground: #020205;
--secondary: #0f172a;
--secondary-foreground: #f8fafc;
--destructive: #811d1d;
--destructive-foreground: #f8fafc;
--ring: #1d283a;
--radius: 0.5rem;
}
Start using the Theme
If you are already using DubsUI components, they'll automatically pick up the new theme. You can also use the theme using css variables.
To use themes with TailwindCSS refer next page.