:root {
/* Overrides light and dark */--radius: 2.5rem;
/* --spacing: 0.1rem; *//* font-size: 20px; */
}
[data-theme="light"],
.light {
/* Overrides only light */--radius: 2.5rem;
}
/* Dark theme overrides using data-theme or class */[data-theme="dark"],
.dark {
/* Overrides only dark */--radius: 0.5rem;
}
It will automatically calculate the correct values fro each rounded-* e.g rounded-sm/md/lg/etc
Log in to comment and vote
Comments2
Junior Garcia
Nov 23, 2025
Already possible
:root { /* Overrides light and dark */ --radius: 2.5rem; /* --spacing: 0.1rem; */ /* font-size: 20px; */ } [data-theme="light"], .light { /* Overrides only light */ --radius: 2.5rem; } /* Dark theme overrides using data-theme or class */ [data-theme="dark"], .dark { /* Overrides only dark */ --radius: 0.5rem; }It will automatically calculate the correct values fro each
rounded-*e.grounded-sm/md/lg/etctufailra97
Nov 23, 2025
ah nice one!