Change your theme
At the end of this tutorial, you will be able to change the base colors of your application
The globals.css
Inside your apps/web/styles
, you will have a globals.css
with the following value:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* default light theme */
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--primary: 225 74% 57%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 100%;
--secondary-foreground: 240 10% 3.9%;
--danger: 0 84.3% 60%;
--danger-foreground: 0 0% 100%;
--accent: 240 4.8% 95.9;
--accent-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
--chart-1: var(--primary);
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}
}
::-moz-selection {
color: hsl(var(--primary-foreground));
background: hsl(var(--primary));
}
::selection {
color: hsl(var(--primary-foreground));
background: hsl(var(--primary));
}
All the CSS Variables exposed here uses hsl
values. This allows us to change saturation, brightness without having to make changes to the hex code or mapping different levels of saturation in tailwind.config.ts
file.
Convention
We use a simple background
and foreground
convention for colors. The background
variable is used for the background color of the component and the foreground
variable is used for the text color.
background
suffix is omitted when the variable is used for the background color of the component.Given the following CSS variables:
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
The background color of the following component will be hsl(var(--primary))
and the foreground color will be hsl(var(--primary-foreground))
.
<div className="bg-primary text-primary-foreground">Hello</div>
Adding new colors
To add new colors, you need to add them to your globals.css
and to your packages/tailwind-config/tailwind.config.ts
file.
:root {
--warning: 38 92% 50%;
--warning-foreground: 48 96% 89%;
}
const config: Config = {
// rest of file,
theme: {
extend: {
colors: {
// rest of colors defined
warning: {
DEFAULT: 'hsl(var(--warning))',
foreground: 'hsl(var(--warning-foreground))'
}
}
}
}
}
export { config };
You can now use warning
utility class in your components:
<div className="bg-warning text-warning-foreground" />