Intentui/theme Cyan

style

[Intent UI]

pnpm dlx shadcn@latest add "https://registry.directory/r/intentui/theme-cyan.json"

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Intentui/theme Cyan

style

[Intent UI]

pnpm dlx shadcn@latest add "https://registry.directory/r/intentui/theme-cyan.json"

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Light Mode

--background:

oklch(1 0 0)

--foreground:

oklch(0.208 0.042 265.755)

--card:

oklch(1 0 0)

--card-foreground:

oklch(0.208 0.042 265.755)

--primary:

oklch(0.789 0.154 211.53)

--primary-foreground:

oklch(0.302 0.056 229.695)

--primary-subtle:

oklch(0.789 0.154 211.53 / 0.2)

--primary-subtle-foreground:

oklch(0.52 0.105 223.128)

--secondary:

oklch(0.929 0.013 255.508)

--secondary-foreground:

oklch(0.129 0.042 264.695)

--overlay:

oklch(1 0 0)

--overlay-foreground:

oklch(0.129 0.042 264.695)

--accent:

oklch(0.929 0.013 255.508)

--accent-foreground:

oklch(0.129 0.042 264.695)

--muted:

oklch(0.968 0.007 247.896)

--muted-foreground:

oklch(0.554 0.046 257.417)

--success:

oklch(0.596 0.145 163.225)

--success-foreground:

oklch(1 0 0)

--success-subtle:

oklch(0.696 0.17 162.48 / 0.15)

--success-subtle-foreground:

oklch(0.508 0.118 165.612)

--info-subtle:

oklch(0.685 0.169 237.323 / 0.15)

--info-subtle-foreground:

oklch(0.5 0.134 242.749)

--warning:

oklch(0.828 0.189 84.429)

--warning-foreground:

oklch(0.279 0.077 45.635)

--warning-subtle:

oklch(0.828 0.189 84.429 / 0.2)

--warning-subtle-foreground:

oklch(0.555 0.163 48.998)

--danger:

oklch(0.577 0.245 27.325)

--danger-foreground:

oklch(0.971 0.013 17.38)

--danger-subtle:

oklch(0.637 0.237 25.331 / 0.15)

--danger-subtle-foreground:

oklch(0.505 0.213 27.518)

--border:

oklch(0.909 0.022 252.894)

--input:

oklch(0.869 0.022 252.894)

--ring:

oklch(0.609 0.126 221.723)

--navbar:

oklch(0.994 0.003 247.858)

--navbar-foreground:

oklch(0.129 0.042 264.695)

--sidebar:

oklch(0.984 0.003 247.858)

--sidebar-foreground:

oklch(0.129 0.042 264.695)

--sidebar-primary:

oklch(0.789 0.154 211.53 / 0.2)

--sidebar-primary-foreground:

oklch(0.52 0.105 223.128)

--sidebar-accent:

oklch(0.929 0.013 255.508)

--sidebar-accent-foreground:

oklch(0.129 0.042 264.695)

--sidebar-border:

oklch(0.899 0.022 252.894)

--sidebar-ring:

oklch(0.609 0.126 221.723)

--chart-1:

oklch(0.609 0.126 221.723)

--chart-2:

oklch(0.715 0.143 215.221)

--chart-3:

oklch(0.789 0.154 211.53)

--chart-4:

oklch(0.865 0.127 207.078)

--chart-5:

oklch(0.917 0.08 205.041)

--radius:

0.5rem

Dark Mode

--background:

oklch(0.169 0.042 264.695)

--foreground:

oklch(0.984 0.003 247.858)

--card:

oklch(0.169 0.042 264.695)

--card-foreground:

oklch(0.984 0.003 247.858)

--primary:

oklch(0.789 0.154 211.53)

--primary-foreground:

oklch(0.302 0.056 229.695)

--primary-subtle:

Theme

--font-sans:

"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

--font-mono:

"Geist Mono", 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'

--font-sans--font-feature-settings:

"cv02", "cv03", "cv04", "cv11"

--font-mono--font-feature-settings:

"ss02", "zero"

--color-border:

var(--border)

--color-input:

var(--input)

--color-ring:

var(--ring)

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-card:

Light Mode

--background:

oklch(1 0 0)

--foreground:

oklch(0.208 0.042 265.755)

--card:

oklch(1 0 0)

--card-foreground:

oklch(0.208 0.042 265.755)

--primary:

oklch(0.789 0.154 211.53)

--primary-foreground:

oklch(0.302 0.056 229.695)

--primary-subtle:

oklch(0.789 0.154 211.53 / 0.2)

--primary-subtle-foreground:

oklch(0.52 0.105 223.128)

--secondary:

oklch(0.929 0.013 255.508)

--secondary-foreground:

oklch(0.129 0.042 264.695)

--overlay:

oklch(1 0 0)

--overlay-foreground:

oklch(0.129 0.042 264.695)

--accent:

oklch(0.929 0.013 255.508)

--accent-foreground:

oklch(0.129 0.042 264.695)

--muted:

oklch(0.968 0.007 247.896)

--muted-foreground:

oklch(0.554 0.046 257.417)

--success:

oklch(0.596 0.145 163.225)

--success-foreground:

oklch(1 0 0)

--success-subtle:

oklch(0.696 0.17 162.48 / 0.15)

--success-subtle-foreground:

oklch(0.508 0.118 165.612)

--info-subtle:

oklch(0.685 0.169 237.323 / 0.15)

--info-subtle-foreground:

oklch(0.5 0.134 242.749)

--warning:

oklch(0.828 0.189 84.429)

--warning-foreground:

oklch(0.279 0.077 45.635)

--warning-subtle:

oklch(0.828 0.189 84.429 / 0.2)

--warning-subtle-foreground:

oklch(0.555 0.163 48.998)

--danger:

oklch(0.577 0.245 27.325)

--danger-foreground:

oklch(0.971 0.013 17.38)

--danger-subtle:

oklch(0.637 0.237 25.331 / 0.15)

--danger-subtle-foreground:

oklch(0.505 0.213 27.518)

--border:

oklch(0.909 0.022 252.894)

--input:

oklch(0.869 0.022 252.894)

--ring:

oklch(0.609 0.126 221.723)

--navbar:

oklch(0.994 0.003 247.858)

--navbar-foreground:

oklch(0.129 0.042 264.695)

--sidebar:

oklch(0.984 0.003 247.858)

--sidebar-foreground:

oklch(0.129 0.042 264.695)

--sidebar-primary:

oklch(0.789 0.154 211.53 / 0.2)

--sidebar-primary-foreground:

oklch(0.52 0.105 223.128)

--sidebar-accent:

oklch(0.929 0.013 255.508)

--sidebar-accent-foreground:

oklch(0.129 0.042 264.695)

--sidebar-border:

oklch(0.899 0.022 252.894)

--sidebar-ring:

oklch(0.609 0.126 221.723)

--chart-1:

oklch(0.609 0.126 221.723)

--chart-2:

oklch(0.715 0.143 215.221)

--chart-3:

oklch(0.789 0.154 211.53)

--chart-4:

oklch(0.865 0.127 207.078)

--chart-5:

oklch(0.917 0.08 205.041)

--radius:

0.5rem

Dark Mode

--background:

oklch(0.169 0.042 264.695)

--foreground:

oklch(0.984 0.003 247.858)

--card:

oklch(0.169 0.042 264.695)

--card-foreground:

oklch(0.984 0.003 247.858)

--primary:

oklch(0.789 0.154 211.53)

--primary-foreground:

oklch(0.302 0.056 229.695)

--primary-subtle:

Theme

--font-sans:

"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

--font-mono:

"Geist Mono", 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'

--font-sans--font-feature-settings:

"cv02", "cv03", "cv04", "cv11"

--font-mono--font-feature-settings:

"ss02", "zero"

--color-border:

var(--border)

--color-input:

var(--input)

--color-ring:

var(--ring)

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-card:

oklch(0.789 0.154 211.53 / 0.1)

--primary-subtle-foreground:

oklch(0.865 0.127 207.078)

--secondary:

oklch(0.249 0.041 260.031)

--secondary-foreground:

oklch(0.984 0.003 247.858)

--overlay:

oklch(0.208 0.042 265.755)

--overlay-foreground:

oklch(0.984 0.003 247.858)

--accent:

oklch(0.279 0.041 260.031)

--accent-foreground:

oklch(0.984 0.003 247.858)

--muted:

oklch(0.208 0.042 265.755)

--muted-foreground:

oklch(0.704 0.04 256.788)

--success:

oklch(0.596 0.145 163.225)

--success-foreground:

oklch(1 0 0)

--success-subtle:

oklch(0.696 0.17 162.48 / 0.1)

--success-subtle-foreground:

oklch(0.765 0.177 163.223)

--info-subtle:

oklch(0.685 0.169 237.323 / 0.1)

--info-subtle-foreground:

oklch(0.828 0.111 230.318)

--warning:

oklch(0.828 0.189 84.429)

--warning-foreground:

oklch(0.279 0.077 45.635)

--warning-subtle:

oklch(0.828 0.189 84.429 / 0.1)

--warning-subtle-foreground:

oklch(0.828 0.189 84.429)

--danger:

oklch(0.577 0.245 27.325)

--danger-foreground:

oklch(0.971 0.013 17.38)

--danger-subtle:

oklch(0.637 0.237 25.331 / 0.1)

--danger-subtle-foreground:

oklch(0.704 0.191 22.216)

--border:

oklch(0.272 0.044 257.287)

--input:

oklch(0.312 0.044 257.287)

--ring:

oklch(0.609 0.126 221.723)

--navbar:

oklch(0.188 0.042 265.755)

--navbar-foreground:

oklch(0.984 0.003 247.858)

--sidebar:

oklch(0.178 0.042 265.755)

--sidebar-foreground:

oklch(0.984 0.003 247.858)

--sidebar-primary:

oklch(0.789 0.154 211.53 / 0.1)

--sidebar-primary-foreground:

oklch(0.865 0.127 207.078)

--sidebar-accent:

oklch(0.279 0.041 260.031)

--sidebar-accent-foreground:

oklch(0.984 0.003 247.858)

--sidebar-border:

oklch(0.279 0.041 260.031)

--sidebar-ring:

oklch(0.609 0.126 221.723)

--chart-1:

oklch(0.52 0.105 223.128)

--chart-2:

oklch(0.715 0.143 215.221)

--chart-3:

oklch(0.789 0.154 211.53)

--chart-4:

oklch(0.865 0.127 207.078)

--chart-5:

oklch(0.917 0.08 205.041)

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-primary:

var(--primary)

--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-accent:

var(--accent)

--color-accent-foreground:

var(--accent-foreground)

--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-danger:

var(--danger)

--color-danger-foreground:

var(--danger-foreground)

--color-danger-subtle:

var(--danger-subtle)

--color-danger-subtle-foreground:

var(--danger-subtle-foreground)

--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-info-subtle:

var(--info-subtle)

--color-info-subtle-foreground:

var(--info-subtle-foreground)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-overlay:

var(--overlay)

--color-overlay-foreground:

var(--overlay-foreground)

--color-navbar:

var(--navbar)

--color-navbar-foreground:

var(--navbar-foreground)

--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)

--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)

--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)