Using CSS Variables for theming in the EVO Design System
To install the theme run:
npx shadcn add https://registry.eds.access-evo.com/eds-style.jsonIn order to properly render the font, you need to include the following CSS at the top of your globals.css (nextjs) or index.css (vite) file:
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]');To implement dark mode in your application, follow the comprehensive guide provided by shadcn/ui. The guide covers theme configuration, component styling, and best practices for creating a seamless dark mode experience.
To use CSS variables for theming set tailwind.cssVariables to true in your components.json file.
<div className="bg-background text-foreground" />{
"style": "default",
"rsc": true,
"tailwind": {
"config": "",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}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.
The background suffix is omitted when the variable is used for the background color of the component.
--primary: oklch(0.5030 0.0859 194.7689);
--primary-foreground: oklch(1.0000 0 0);The background color of the following component will be var(--primary) and the foreground color will be var(--primary-foreground).
<div className="bg-primary text-primary-foreground">Hello</div>The list of variables available for customization in the EVO Design System can be found at:
This JSON file contains all available CSS variables including colors, typography, spacing, and theme configurations for both light and dark modes.
See the Tailwind CSS documentation for more information on using colors in Tailwind CSS.