Ikas Theme

theme

Light-first neutral theme tokens: surfaces, six-color palette, status colors, radius and elevation. Install first.

pnpm dlx shadcn@latest add "https://builders.ikas.com/r/theme.json"

Sign In

Ikas Theme

theme

Light-first neutral theme tokens: surfaces, six-color palette, status colors, radius and elevation. Install first.

pnpm dlx shadcn@latest add "https://builders.ikas.com/r/theme.json"

Light Mode

--radius:

0.5rem

--background:

oklch(0.985 0 0)

--foreground:

oklch(0.175 0 0)

--card:

oklch(1 0 0)

--card-foreground:

oklch(0.175 0 0)

--popover:

oklch(1 0 0)

--popover-foreground:

oklch(0.175 0 0)

--primary:

oklch(0.205 0 0)

--primary-foreground:

oklch(0.985 0 0)

--primary-subtle:

oklch(0.96 0 0)

--primary-subtle-foreground:

oklch(0.205 0 0)

--secondary:

oklch(0.965 0 0)

--secondary-foreground:

oklch(0.205 0 0)

--muted:

oklch(0.97 0 0)

--muted-foreground:

oklch(0.52 0 0)

--accent:

oklch(0.965 0 0)

--accent-foreground:

oklch(0.205 0 0)

--destructive:

oklch(0.577 0.215 27.3)

--destructive-foreground:

oklch(0.985 0 0)

--border:

oklch(0.925 0 0)

--border-strong:

oklch(0.875 0 0)

--input:

oklch(0.885 0 0)

--ring:

oklch(0.62 0.19 259.8)

--icon:

oklch(0.58 0 0)

--tint-surface:

oklch(1 0 0 / 0.72)

--tint-surface-hover:

oklch(1 0 0 / 0.42)

--shade-1:

rgb(0 0 0 / 0.05)

--shade-2:

rgb(0 0 0 / 0.08)

--shade-3:

rgb(0 0 0 / 0.14)

--shade-border:

rgb(0 0 0 / 0.07)

--shade-border-strong:

rgb(0 0 0 / 0.11)

--neutral:

oklch(0.205 0 0)

--neutral-foreground:

oklch(0.985 0 0)

--neutral-subtle:

oklch(0.955 0 0)

--neutral-subtle-foreground:

oklch(0.32 0 0)

--neutral-border:

oklch(0.885 0 0)

--blue:

oklch(0.546 0.215 262.9)

--blue-foreground:

oklch(0.985 0 0)

--blue-subtle:

oklch(0.966 0.018 254.6)

--blue-subtle-foreground:

oklch(0.488 0.2 264.4)

--blue-border:

oklch(0.89 0.05 254.1)

--violet:

oklch(0.541 0.24 293)

--violet-foreground:

oklch(0.985 0 0)

--violet-subtle:

oklch(0.966 0.018 293.8)

--violet-subtle-foreground:

oklch(0.491 0.23 292.6)

--violet-border:

oklch(0.9 0.05 293.3)

--green:

oklch(0.53 0.13 163.2)

--green-foreground:

oklch(0.985 0 0)

--green-subtle:

oklch(0.973 0.025 166.1)

--green-subtle-foreground:

oklch(0.48 0.11 165.6)

--green-border:

oklch(0.9 0.07 164.2)

--lime:

oklch(0.86 0.2 127)

--lime-foreground:

oklch(0.27 0.07 132)

--lime-subtle:

oklch(0.975 0.045 122)

--lime-subtle-foreground:

oklch(0.45 0.12 131)

--lime-border:

oklch(0.9 0.13 124)

--amber:

oklch(0.78 0.16 72)

--amber-foreground:

oklch(0.28 0.07 45.6)

--amber-subtle:

oklch(0.982 0.03 92)

--amber-subtle-foreground:

oklch(0.48 0.13 46.2)

--amber-border:

oklch(0.91 0.1 92)

--red:

oklch(0.577 0.215 27.3)

--red-foreground:

oklch(0.985 0 0)

--red-subtle:

oklch(0.971 0.014 17.4)

--red-subtle-foreground:

oklch(0.505 0.19 27.5)

--red-border:

oklch(0.9 0.05 18.3)

--info:

var(--blue)

--info-foreground:

var(--blue-foreground)

--info-subtle:

var(--blue-subtle)

--info-subtle-foreground:

var(--blue-subtle-foreground)

--info-border:

var(--blue-border)

--success:

var(--green)

--success-foreground:

var(--green-foreground)

--success-subtle:

var(--green-subtle)

--success-subtle-foreground:

var(--green-subtle-foreground)

--success-border:

var(--green-border)

--warning:

var(--amber)

--warning-foreground:

var(--amber-foreground)

--warning-subtle:

var(--amber-subtle)

--warning-subtle-foreground:

var(--amber-subtle-foreground)

--warning-border:

var(--amber-border)

--danger:

var(--red)

--danger-foreground:

var(--red-foreground)

--danger-subtle:

var(--red-subtle)

--danger-subtle-foreground:

var(--red-subtle-foreground)

--danger-border:

var(--red-border)

--chart-ink:

oklch(0.205 0 0)

--chart-1:

#2867e4

--chart-2:

#dd6f23

--chart-3:

#008e89

--chart-4:

#8047e1

--chart-5:

#6b9e1f

--chart-6:

#d13d91

--sidebar:

oklch(0.985 0 0)

--sidebar-foreground:

oklch(0.175 0 0)

--sidebar-primary:

oklch(0.205 0 0)

--sidebar-primary-foreground:

oklch(0.985 0 0)

--sidebar-accent:

oklch(0.955 0 0)

--sidebar-accent-foreground:

oklch(0.175 0 0)

--sidebar-border:

oklch(0.925 0 0)

--sidebar-ring:

oklch(0.62 0.19 259.8)

Dark Mode

--background:

oklch(0.155 0 0)

--foreground:

oklch(0.96 0 0)

--card:

oklch(0.195 0 0)

--card-foreground:

oklch(0.96 0 0)

--popover:

oklch(0.215 0 0)

--popover-foreground:

oklch(0.96 0 0)

--primary:

oklch(0.96 0 0)

Theme

--font-sans:

var(--font-inter, ui-sans-serif, system-ui, sans-serif)

--font-mono:

var(--font-geist-mono, ui-monospace, monospace)

--font-heading:

var(--font-sans)

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-popover:

var(--popover)

--color-popover-foreground:

var(--popover-foreground)

--color-primary:

var(--primary)

CSS

Light Mode

--radius:

0.5rem

--background:

oklch(0.985 0 0)

--foreground:

oklch(0.175 0 0)

--card:

oklch(1 0 0)

--card-foreground:

oklch(0.175 0 0)

--popover:

oklch(1 0 0)

--popover-foreground:

oklch(0.175 0 0)

--primary:

oklch(0.205 0 0)

--primary-foreground:

oklch(0.985 0 0)

--primary-subtle:

oklch(0.96 0 0)

--primary-subtle-foreground:

oklch(0.205 0 0)

--secondary:

oklch(0.965 0 0)

--secondary-foreground:

oklch(0.205 0 0)

--muted:

oklch(0.97 0 0)

--muted-foreground:

oklch(0.52 0 0)

--accent:

oklch(0.965 0 0)

--accent-foreground:

oklch(0.205 0 0)

--destructive:

oklch(0.577 0.215 27.3)

--destructive-foreground:

oklch(0.985 0 0)

--border:

oklch(0.925 0 0)

--border-strong:

oklch(0.875 0 0)

--input:

oklch(0.885 0 0)

--ring:

oklch(0.62 0.19 259.8)

--icon:

oklch(0.58 0 0)

--tint-surface:

oklch(1 0 0 / 0.72)

--tint-surface-hover:

oklch(1 0 0 / 0.42)

--shade-1:

rgb(0 0 0 / 0.05)

--shade-2:

rgb(0 0 0 / 0.08)

--shade-3:

rgb(0 0 0 / 0.14)

--shade-border:

rgb(0 0 0 / 0.07)

--shade-border-strong:

rgb(0 0 0 / 0.11)

--neutral:

oklch(0.205 0 0)

--neutral-foreground:

oklch(0.985 0 0)

--neutral-subtle:

oklch(0.955 0 0)

--neutral-subtle-foreground:

oklch(0.32 0 0)

--neutral-border:

oklch(0.885 0 0)

--blue:

oklch(0.546 0.215 262.9)

--blue-foreground:

oklch(0.985 0 0)

--blue-subtle:

oklch(0.966 0.018 254.6)

--blue-subtle-foreground:

oklch(0.488 0.2 264.4)

--blue-border:

oklch(0.89 0.05 254.1)

--violet:

oklch(0.541 0.24 293)

--violet-foreground:

oklch(0.985 0 0)

--violet-subtle:

oklch(0.966 0.018 293.8)

--violet-subtle-foreground:

oklch(0.491 0.23 292.6)

--violet-border:

oklch(0.9 0.05 293.3)

--green:

oklch(0.53 0.13 163.2)

--green-foreground:

oklch(0.985 0 0)

--green-subtle:

oklch(0.973 0.025 166.1)

--green-subtle-foreground:

oklch(0.48 0.11 165.6)

--green-border:

oklch(0.9 0.07 164.2)

--lime:

oklch(0.86 0.2 127)

--lime-foreground:

oklch(0.27 0.07 132)

--lime-subtle:

oklch(0.975 0.045 122)

--lime-subtle-foreground:

oklch(0.45 0.12 131)

--lime-border:

oklch(0.9 0.13 124)

--amber:

oklch(0.78 0.16 72)

--amber-foreground:

oklch(0.28 0.07 45.6)

--amber-subtle:

oklch(0.982 0.03 92)

--amber-subtle-foreground:

oklch(0.48 0.13 46.2)

--amber-border:

oklch(0.91 0.1 92)

--red:

oklch(0.577 0.215 27.3)

--red-foreground:

oklch(0.985 0 0)

--red-subtle:

oklch(0.971 0.014 17.4)

--red-subtle-foreground:

oklch(0.505 0.19 27.5)

--red-border:

oklch(0.9 0.05 18.3)

--info:

var(--blue)

--info-foreground:

var(--blue-foreground)

--info-subtle:

var(--blue-subtle)

--info-subtle-foreground:

var(--blue-subtle-foreground)

--info-border:

var(--blue-border)

--success:

var(--green)

--success-foreground:

var(--green-foreground)

--success-subtle:

var(--green-subtle)

--success-subtle-foreground:

var(--green-subtle-foreground)

--success-border:

var(--green-border)

--warning:

var(--amber)

--warning-foreground:

var(--amber-foreground)

--warning-subtle:

var(--amber-subtle)

--warning-subtle-foreground:

var(--amber-subtle-foreground)

--warning-border:

var(--amber-border)

--danger:

var(--red)

--danger-foreground:

var(--red-foreground)

--danger-subtle:

var(--red-subtle)

--danger-subtle-foreground:

var(--red-subtle-foreground)

--danger-border:

var(--red-border)

--chart-ink:

oklch(0.205 0 0)

--chart-1:

#2867e4

--chart-2:

#dd6f23

--chart-3:

#008e89

--chart-4:

#8047e1

--chart-5:

#6b9e1f

--chart-6:

#d13d91

--sidebar:

oklch(0.985 0 0)

--sidebar-foreground:

oklch(0.175 0 0)

--sidebar-primary:

oklch(0.205 0 0)

--sidebar-primary-foreground:

oklch(0.985 0 0)

--sidebar-accent:

oklch(0.955 0 0)

--sidebar-accent-foreground:

oklch(0.175 0 0)

--sidebar-border:

oklch(0.925 0 0)

--sidebar-ring:

oklch(0.62 0.19 259.8)

Dark Mode

--background:

oklch(0.155 0 0)

--foreground:

oklch(0.96 0 0)

--card:

oklch(0.195 0 0)

--card-foreground:

oklch(0.96 0 0)

--popover:

oklch(0.215 0 0)

--popover-foreground:

oklch(0.96 0 0)

--primary:

oklch(0.96 0 0)

Theme

--font-sans:

var(--font-inter, ui-sans-serif, system-ui, sans-serif)

--font-mono:

var(--font-geist-mono, ui-monospace, monospace)

--font-heading:

var(--font-sans)

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-popover:

var(--popover)

--color-popover-foreground:

var(--popover-foreground)

--color-primary:

var(--primary)

CSS

--primary-foreground:

oklch(0.175 0 0)

--primary-subtle:

oklch(0.26 0 0)

--primary-subtle-foreground:

oklch(0.96 0 0)

--secondary:

oklch(0.25 0 0)

--secondary-foreground:

oklch(0.96 0 0)

--muted:

oklch(0.23 0 0)

--muted-foreground:

oklch(0.68 0 0)

--accent:

oklch(0.25 0 0)

--accent-foreground:

oklch(0.96 0 0)

--destructive:

oklch(0.575 0.2 25)

--destructive-foreground:

oklch(0.985 0 0)

--border:

oklch(1 0 0 / 0.08)

--border-strong:

oklch(1 0 0 / 0.14)

--input:

oklch(1 0 0 / 0.14)

--ring:

oklch(0.68 0.16 259.8)

--icon:

oklch(0.62 0 0)

--tint-surface:

oklch(1 0 0 / 0.06)

--tint-surface-hover:

oklch(1 0 0 / 0.11)

--shade-1:

rgb(0 0 0 / 0.3)

--shade-2:

rgb(0 0 0 / 0.4)

--shade-3:

rgb(0 0 0 / 0.6)

--shade-border:

rgb(255 255 255 / 0.07)

--shade-border-strong:

rgb(255 255 255 / 0.1)

--neutral:

oklch(0.96 0 0)

--neutral-foreground:

oklch(0.175 0 0)

--neutral-subtle:

oklch(0.26 0 0)

--neutral-subtle-foreground:

oklch(0.88 0 0)

--neutral-border:

oklch(1 0 0 / 0.14)

--blue:

oklch(0.56 0.2 262)

--blue-foreground:

oklch(0.985 0 0)

--blue-subtle:

oklch(0.26 0.06 262)

--blue-subtle-foreground:

oklch(0.8 0.1 255)

--blue-border:

oklch(0.36 0.09 262)

--violet:

oklch(0.57 0.22 293)

--violet-foreground:

oklch(0.985 0 0)

--violet-subtle:

oklch(0.26 0.07 293)

--violet-subtle-foreground:

oklch(0.81 0.1 293)

--violet-border:

oklch(0.37 0.11 293)

--green:

oklch(0.65 0.14 163)

--green-foreground:

oklch(0.16 0.04 163)

--green-subtle:

oklch(0.25 0.045 163)

--green-subtle-foreground:

oklch(0.82 0.11 163)

--green-border:

oklch(0.36 0.07 163)

--lime:

oklch(0.85 0.19 128)

--lime-foreground:

oklch(0.22 0.06 132)

--lime-subtle:

oklch(0.26 0.05 130)

--lime-subtle-foreground:

oklch(0.86 0.15 127)

--lime-border:

oklch(0.37 0.08 130)

--amber:

oklch(0.8 0.15 75)

--amber-foreground:

oklch(0.22 0.05 50)

--amber-subtle:

oklch(0.27 0.05 70)

--amber-subtle-foreground:

oklch(0.86 0.12 85)

--amber-border:

oklch(0.38 0.07 70)

--red:

oklch(0.575 0.2 25)

--red-foreground:

oklch(0.985 0 0)

--red-subtle:

oklch(0.26 0.06 25)

--red-subtle-foreground:

oklch(0.8 0.11 20)

--red-border:

oklch(0.38 0.1 25)

--info:

var(--blue)

--info-foreground:

var(--blue-foreground)

--info-subtle:

var(--blue-subtle)

--info-subtle-foreground:

var(--blue-subtle-foreground)

--info-border:

var(--blue-border)

--success:

var(--green)

--success-foreground:

var(--green-foreground)

--success-subtle:

var(--green-subtle)

--success-subtle-foreground:

var(--green-subtle-foreground)

--success-border:

var(--green-border)

--warning:

var(--amber)

--warning-foreground:

var(--amber-foreground)

--warning-subtle:

var(--amber-subtle)

--warning-subtle-foreground:

var(--amber-subtle-foreground)

--warning-border:

var(--amber-border)

--danger:

var(--red)

--danger-foreground:

var(--red-foreground)

--danger-subtle:

var(--red-subtle)

--danger-subtle-foreground:

var(--red-subtle-foreground)

--danger-border:

var(--red-border)

--chart-ink:

oklch(0.96 0 0)

--chart-1:

#4a81eb

--chart-2:

#d8732b

--chart-3:

#009b95

--chart-4:

#8b61e3

--chart-5:

#73a434

--chart-6:

#d8559b

--sidebar:

oklch(0.175 0 0)

--sidebar-foreground:

oklch(0.96 0 0)

--sidebar-primary:

oklch(0.96 0 0)

--sidebar-primary-foreground:

oklch(0.175 0 0)

--sidebar-accent:

oklch(0.25 0 0)

--sidebar-accent-foreground:

oklch(0.96 0 0)

--sidebar-border:

oklch(1 0 0 / 0.08)

--sidebar-ring:

oklch(0.68 0.16 259.8)

--color-primary-foreground:

var(--primary-foreground)

--color-primary-subtle:

var(--primary-subtle)

--color-primary-subtle-foreground:

var(--primary-subtle-foreground)

--color-secondary:

var(--secondary)

--color-secondary-foreground:

var(--secondary-foreground)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-accent:

var(--accent)

--color-accent-foreground:

var(--accent-foreground)

--color-destructive:

var(--destructive)

--color-destructive-foreground:

var(--destructive-foreground)

--color-border:

var(--border)

--color-border-strong:

var(--border-strong)

--color-input:

var(--input)

--color-ring:

var(--ring)

--color-icon:

var(--icon)

--color-tint-surface:

var(--tint-surface)

--color-tint-surface-hover:

var(--tint-surface-hover)

--color-neutral:

var(--neutral)

--color-neutral-foreground:

var(--neutral-foreground)

--color-neutral-subtle:

var(--neutral-subtle)

--color-neutral-subtle-foreground:

var(--neutral-subtle-foreground)

--color-neutral-border:

var(--neutral-border)

--color-blue:

var(--blue)

--color-blue-foreground:

var(--blue-foreground)

--color-blue-subtle:

var(--blue-subtle)

--color-blue-subtle-foreground:

var(--blue-subtle-foreground)

--color-blue-border:

var(--blue-border)

--color-violet:

var(--violet)

--color-violet-foreground:

var(--violet-foreground)

--color-violet-subtle:

var(--violet-subtle)

--color-violet-subtle-foreground:

var(--violet-subtle-foreground)

--color-violet-border:

var(--violet-border)

--color-green:

var(--green)

--color-green-foreground:

var(--green-foreground)

--color-green-subtle:

var(--green-subtle)

--color-green-subtle-foreground:

var(--green-subtle-foreground)

--color-green-border:

var(--green-border)

--color-lime:

var(--lime)

--color-lime-foreground:

var(--lime-foreground)

--color-lime-subtle:

var(--lime-subtle)

--color-lime-subtle-foreground:

var(--lime-subtle-foreground)

--color-lime-border:

var(--lime-border)

--color-amber:

var(--amber)

--color-amber-foreground:

var(--amber-foreground)

--color-amber-subtle:

var(--amber-subtle)

--color-amber-subtle-foreground:

var(--amber-subtle-foreground)

--color-amber-border:

var(--amber-border)

--color-red:

var(--red)

--color-red-foreground:

var(--red-foreground)

--color-red-subtle:

var(--red-subtle)

--color-red-subtle-foreground:

var(--red-subtle-foreground)

--color-red-border:

var(--red-border)

--color-info:

var(--info)

--color-info-foreground:

var(--info-foreground)

--color-info-subtle:

var(--info-subtle)

--color-info-subtle-foreground:

var(--info-subtle-foreground)

--color-info-border:

var(--info-border)

--color-success:

var(--success)

--color-success-foreground:

var(--success-foreground)

--color-success-subtle:

var(--success-subtle)

--color-success-subtle-foreground:

var(--success-subtle-foreground)

--color-success-border:

var(--success-border)

--color-warning:

var(--warning)

--color-warning-foreground:

var(--warning-foreground)

--color-warning-subtle:

var(--warning-subtle)

--color-warning-subtle-foreground:

var(--warning-subtle-foreground)

--color-warning-border:

var(--warning-border)

--color-danger:

var(--danger)

--color-danger-foreground:

var(--danger-foreground)

--color-danger-subtle:

var(--danger-subtle)

--color-danger-subtle-foreground:

var(--danger-subtle-foreground)

--color-danger-border:

var(--danger-border)

--color-chart-1:

var(--chart-1)

--color-chart-2:

var(--chart-2)

--color-chart-3:

var(--chart-3)

--color-chart-4:

var(--chart-4)

--color-chart-5:

var(--chart-5)

--color-chart-6:

var(--chart-6)

--color-chart-ink:

var(--chart-ink)

--color-sidebar:

var(--sidebar)

--color-sidebar-foreground:

var(--sidebar-foreground)

--color-sidebar-primary:

var(--sidebar-primary)

--color-sidebar-primary-foreground:

var(--sidebar-primary-foreground)

--color-sidebar-accent:

var(--sidebar-accent)

--color-sidebar-accent-foreground:

var(--sidebar-accent-foreground)

--color-sidebar-border:

var(--sidebar-border)

--color-sidebar-ring:

var(--sidebar-ring)

--radius-sm:

calc(var(--radius) * 0.6)

--radius-md:

calc(var(--radius) * 0.8)

--radius-lg:

var(--radius)

--radius-xl:

calc(var(--radius) * 1.4)

--radius-2xl:

calc(var(--radius) * 1.8)

--radius-3xl:

calc(var(--radius) * 2.2)

--radius-4xl:

calc(var(--radius) * 2.6)

--shadow-card:

0 0 0 1px var(--shade-border), 0 1px 2px 0 var(--shade-1), 0 2px 6px -2px var(--shade-1)

--shadow-overlay:

0 0 0 1px var(--shade-border), 0 12px 32px -8px var(--shade-3), 0 4px 10px -4px var(--shade-2)

--shadow-raised:

inset 0 -1px 0 0 var(--shade-1), 0 0 0 1px var(--shade-border-strong), 0 1px 2px 0 var(--shade-1)

--shadow-raised-hover:

inset 0 -1px 0 0 var(--shade-1), 0 0 0 1px var(--shade-border-strong), 0 2px 4px -1px var(--shade-2)

--shadow-solid:

inset 0 1px 0 0 rgb(255 255 255 / 0.2), inset 0 -1px 0 0 rgb(0 0 0 / 0.12), 0 0 0 1px color-mix(in oklab, var(--c) 86%, black), 0 1px 2px 0 rgb(0 0 0 / 0.1), 0 3px 10px -3px color-mix(in oklab, var(--c) 55%, transparent)

--shadow-solid-hover:

inset 0 1px 0 0 rgb(255 255 255 / 0.24), inset 0 -1px 0 0 rgb(0 0 0 / 0.12), 0 0 0 1px color-mix(in oklab, var(--c) 86%, black), 0 1px 2px 0 rgb(0 0 0 / 0.1), 0 5px 16px -4px color-mix(in oklab, var(--c) 70%, transparent)

--shadow-pressed:

inset 0 1px 2px 0 rgb(0 0 0 / 0.22), 0 0 0 1px color-mix(in oklab, var(--c) 86%, black)

--shadow-inset:

inset 0 1px 2px 0 var(--shade-1)

--ease-out:

cubic-bezier(0.23, 1, 0.32, 1)

--ease-in-out:

cubic-bezier(0.77, 0, 0.175, 1)

--ease-reveal:

cubic-bezier(0.33, 1, 0.68, 1)

--ease-drawer:

cubic-bezier(0.32, 0.72, 0, 1)

--ease-spring:

cubic-bezier(0.34, 1.45, 0.64, 1)

--shadow-thumb:

0 0 0 0.5px var(--shade-border-strong), 0 1px 2px 0 var(--shade-2), 0 2px 4px -1px var(--shade-1)