The SortUI tokens v2 as one theme: opaque surfaces with a dark ladder (card 900, popover 800), the translucent fill ladder fill-1…4, the roles field / raised / control, translucent lines (border, field-border, control-border), AA text colours (muted-foreground neutral-550, destructive-foreground red-700) and the fixed radius ladder. Installs over your theme variables.
pnpm dlx shadcn@latest add "https://sortui.dev/r/theme.json"Light Mode
Dark Mode
Theme
--primary-foreground:
oklch(1 0 0)
--secondary:
oklch(0.182 0 0)
--secondary-foreground:
oklch(0.985 0 0)
--muted:
oklch(0.205 0 0)
--muted-foreground:
oklch(0.708 0 0)
--accent:
oklch(1 0 0 / 10%)
--accent-foreground:
oklch(0.985 0 0)
--destructive:
oklch(0.637 0.237 25.331)
--destructive-foreground:
oklch(0.704 0.191 22.216)
--border:
oklch(1 0 0 / 10%)
--input:
oklch(1 0 0 / 10%)
--ring:
oklch(0.556 0 0)
--chart-1:
oklch(0.865 0.127 207.078)
--chart-2:
oklch(0.673 0.182 276.935)
--chart-3:
oklch(0.837 0.128 66.29)
--chart-4:
oklch(0.765 0.177 163.223)
--chart-5:
oklch(0.511 0.096 186.391)
--chart-6:
oklch(0.371 0 0)
--chart-7:
oklch(0.718 0.202 349.761)
--chart-8:
oklch(0.811 0.111 293.571)
--chart-9:
oklch(0.841 0.238 128.85)
--chart-10:
oklch(0.5 0.134 242.749)
--sidebar:
oklch(0.205 0 0)
--sidebar-foreground:
oklch(0.985 0 0)
--sidebar-primary:
oklch(0.585 0.233 277.117)
--sidebar-primary-foreground:
oklch(1 0 0)
--sidebar-accent:
oklch(1 0 0 / 10%)
--sidebar-accent-foreground:
oklch(0.985 0 0)
--sidebar-border:
oklch(1 0 0 / 10%)
--sidebar-ring:
oklch(0.556 0 0)
--fill-1:
oklch(1 0 0 / 5%)
--fill-2:
oklch(1 0 0 / 10%)
--fill-3:
oklch(1 0 0 / 14%)
--fill-4:
oklch(1 0 0 / 18%)
--field:
oklch(1 0 0 / 2.5%)
--raised:
oklch(1 0 0 / 10%)
--control:
oklch(0.237 0 0)
--control-hover:
oklch(0.269 0 0)
--control-border:
oklch(1 0 0 / 10%)
--field-border:
oklch(1 0 0 / 15%)
--syntax-foreground:
oklch(0.985 0 0)
--syntax-comment:
oklch(0.708 0 0)
--syntax-keyword:
oklch(0.704 0.191 22.216)
--syntax-string:
oklch(0.882 0.059 254.128)
--syntax-constant:
oklch(0.707 0.165 254.624)
--syntax-function:
oklch(0.702 0.183 293.541)
--syntax-variable:
oklch(0.837 0.128 66.29)
--syntax-tag:
oklch(0.871 0.15 154.449)
--syntax-added:
oklch(0.723 0.219 149.579 / 15%)
--syntax-removed:
oklch(0.637 0.237 25.331 / 10%)
--syntax-added-word:
oklch(0.723 0.219 149.579 / 30%)
--syntax-removed-word:
oklch(0.637 0.237 25.331 / 30%)
--color-chart-9:
--color-chart-8:
--color-chart-7:
--color-chart-6:
--color-chart-5:
--color-chart-4:
--color-chart-3:
--color-chart-2:
--color-chart-1:
--color-ring:
--color-input:
--color-border:
--color-destructive:
--color-destructive-foreground:
--color-accent-foreground:
--color-accent:
--color-muted-foreground:
--color-muted:
--color-secondary-foreground:
--color-secondary:
--color-primary-foreground:
--color-primary:
--color-popover-foreground:
--color-popover:
--color-card-foreground:
--color-card:
--color-foreground:
--color-background:
--color-syntax-foreground:
--color-syntax-comment:
--color-syntax-keyword:
--color-syntax-string:
--color-syntax-constant:
--color-syntax-function:
--color-syntax-variable:
--color-syntax-tag:
--color-syntax-added:
--color-syntax-removed:
--color-syntax-added-word:
--color-syntax-removed-word:
--color-fill-1:
--color-fill-2:
--color-fill-3:
--color-fill-4:
--color-field:
--color-raised:
--color-control:
--color-control-hover:
--color-control-border:
--color-field-border:
--shadow-2xs:
--shadow-xs:
--shadow-sm:
--shadow-md:
--shadow-lg:
--shadow-xl:
--shadow-2xl:
--shadow-secondary-control:
--shadow-card:
--shadow-dialog:
--shadow-popover:
--radius-xs:
--radius-sm:
--radius-md:
--radius-lg:
--radius-xl:
--radius-14:
--radius-2xl:
--radius-3xl:
--radius-4xl:
--text-2xs:
--text-2xs--line-height:
--text-xs:
--text-xs--line-height:
--text-5xl:
--text-5xl--line-height:
--text-6xl:
--text-6xl--line-height:
--text-7xl:
--text-7xl--line-height:
--text-8xl:
--text-8xl--line-height:
--text-9xl:
--text-9xl--line-height:
--font-weight-540:
--text-2xs--letter-spacing:
--text-xs--letter-spacing:
--text-sm--letter-spacing:
--text-lg--letter-spacing:
--text-xl--letter-spacing:
--text-2xl--letter-spacing:
--text-3xl--letter-spacing:
--text-4xl--letter-spacing:
--text-5xl--letter-spacing:
--text-6xl--letter-spacing:
--text-7xl--letter-spacing:
--text-8xl--letter-spacing:
--text-9xl--letter-spacing: