Founding price: $35, then $99

Get Pro
Get Pro
All themes

Cyan themeFree

Terminal — cyan on an IBM Plex Mono face. Part of Terminal. Radius 0.25rem.

Compare in the galleryUse as a full preset

Live preview

Create an account

Enter your email below to create your account.

or continue with

Team

Seats used this billing period.

  • OM

    Olivia Martin

    Owner
  • JL

    Jackson Lee

    Developer
  • IN

    Isabella Nguyen

    Designer

Traffic

Visitors by source

48,204+12.4%
  • Direct
  • Search
  • Social
  • Email
  • Referral
SD

Sofia Davis

m@example.com

Hi, how can I help you today?

Hey, I'm having trouble with my account.

What seems to be the problem?

I can't log in.

Popular

Team

$29/ month

Everything a growing team needs to ship together.

  • Unlimited projects
  • Shared workspaces
  • Priority support
  • Audit log

Notifications

Choose what you hear about.

Alert volume64%

Payments

Manage your recent payments.

SelectStatusEmailAmount
Successken99@example.com$316.00
Successabe45@example.com$242.00
Processingmonserrat44@example.com$837.00
Failedcarmella@example.com$721.00

1 of 4 row(s) selected.

Install

The CLI writes these variables into your global stylesheet. Every component reads them, so the whole app changes at once.

shadcn CLI
npx shadcn@latest add https://ui.tealmac.com/r/themes/terminal-cyan.json
Or paste the CSS into globals.css
:root {
  --radius: 0.25rem;
  --font-sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --background: oklch(0.985 0.006 190);
  --foreground: oklch(0.23 0.03 190);
  --card: oklch(1 0 190);
  --card-foreground: oklch(0.23 0.03 190);
  --popover: oklch(1 0 190);
  --popover-foreground: oklch(0.23 0.03 190);
  --primary: oklch(0.5 0.12 190);
  --primary-foreground: oklch(0.985 0.012 190);
  --secondary: oklch(0.95 0.02 190);
  --secondary-foreground: oklch(0.26 0.03 190);
  --muted: oklch(0.955 0.015 190);
  --muted-foreground: oklch(0.49 0.035 190);
  --accent: oklch(0.93 0.05 190);
  --accent-foreground: oklch(0.4 0.11 190);
  --destructive: oklch(0.58 0.22 25);
  --border: oklch(0.9 0.02 190);
  --input: oklch(0.87 0.02 190);
  --ring: oklch(0.5 0.12 190);
  --chart-1: oklch(0.58 0.12 190);
  --chart-2: oklch(0.62 0.114 230);
  --chart-3: oklch(0.66 0.108 270);
  --chart-4: oklch(0.7 0.102 150);
  --chart-5: oklch(0.55 0.12 0);
  --sidebar: oklch(1 0 190);
  --sidebar-foreground: oklch(0.23 0.03 190);
  --sidebar-primary: oklch(0.5 0.12 190);
  --sidebar-primary-foreground: oklch(0.985 0.012 190);
  --sidebar-accent: oklch(0.95 0.02 190);
  --sidebar-accent-foreground: oklch(0.26 0.03 190);
  --sidebar-border: oklch(0.9 0.02 190);
  --sidebar-ring: oklch(0.5 0.12 190);
}

.dark {
  --background: oklch(0.16 0.022 190);
  --foreground: oklch(0.95 0.012 190);
  --card: oklch(0.2 0.026 190);
  --card-foreground: oklch(0.95 0.012 190);
  --popover: oklch(0.21 0.03 190);
  --popover-foreground: oklch(0.95 0.012 190);
  --primary: oklch(0.72 0.12 190);
  --primary-foreground: oklch(0.17 0.02 190);
  --secondary: oklch(0.27 0.03 190);
  --secondary-foreground: oklch(0.95 0.012 190);
  --muted: oklch(0.27 0.03 190);
  --muted-foreground: oklch(0.72 0.03 190);
  --accent: oklch(0.31 0.06 190);
  --accent-foreground: oklch(0.9 0.05 190);
  --destructive: oklch(0.66 0.2 25);
  --border: oklch(0.3 0.02 190);
  --input: oklch(0.34 0.025 190);
  --ring: oklch(0.72 0.12 190);
  --chart-1: oklch(0.7 0.12 190);
  --chart-2: oklch(0.74 0.114 230);
  --chart-3: oklch(0.78 0.108 270);
  --chart-4: oklch(0.72 0.102 150);
  --chart-5: oklch(0.68 0.12 0);
  --sidebar: oklch(0.2 0.026 190);
  --sidebar-foreground: oklch(0.95 0.012 190);
  --sidebar-primary: oklch(0.72 0.12 190);
  --sidebar-primary-foreground: oklch(0.17 0.02 190);
  --sidebar-accent: oklch(0.27 0.03 190);
  --sidebar-accent-foreground: oklch(0.95 0.012 190);
  --sidebar-border: oklch(0.3 0.02 190);
  --sidebar-ring: oklch(0.72 0.12 190);
}

Export the tokens

The same theme as Tailwind v4 CSS, plain CSS variables, SCSS, JavaScript, TypeScript, DTCG design tokens, Figma variables and starter files for Swift, Android, Jetpack Compose and Flutter.

Download globals.css
Tailwind v4: globals.css
/* Cyan (terminal-cyan) */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.25rem;
  --spacing: 0.25rem;
  --font-sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --background: oklch(0.985 0.006 190);
  --foreground: oklch(0.23 0.03 190);
  --card: oklch(1 0 190);
  --card-foreground: oklch(0.23 0.03 190);
  --popover: oklch(1 0 190);
  --popover-foreground: oklch(0.23 0.03 190);
  --primary: oklch(0.5 0.12 190);
  --primary-foreground: oklch(0.985 0.012 190);
  --secondary: oklch(0.95 0.02 190);
  --secondary-foreground: oklch(0.26 0.03 190);
  --muted: oklch(0.955 0.015 190);
  --muted-foreground: oklch(0.49 0.035 190);
  --accent: oklch(0.93 0.05 190);
  --accent-foreground: oklch(0.4 0.11 190);
  --destructive: oklch(0.58 0.22 25);
  --border: oklch(0.9 0.02 190);
  --input: oklch(0.87 0.02 190);
  --ring: oklch(0.5 0.12 190);
  --chart-1: oklch(0.58 0.12 190);
  --chart-2: oklch(0.62 0.114 230);
  --chart-3: oklch(0.66 0.108 270);
  --chart-4: oklch(0.7 0.102 150);
  --chart-5: oklch(0.55 0.12 0);
  --sidebar: oklch(1 0 190);
  --sidebar-foreground: oklch(0.23 0.03 190);
  --sidebar-primary: oklch(0.5 0.12 190);
  --sidebar-primary-foreground: oklch(0.985 0.012 190);
  --sidebar-accent: oklch(0.95 0.02 190);
  --sidebar-accent-foreground: oklch(0.26 0.03 190);
  --sidebar-border: oklch(0.9 0.02 190);
  --sidebar-ring: oklch(0.5 0.12 190);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-sm: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-md: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-lg: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xl: 0px 0px 0px 0px oklch(0 0 0 / 0%);
}

.dark {
  --background: oklch(0.16 0.022 190);
  --foreground: oklch(0.95 0.012 190);
  --card: oklch(0.2 0.026 190);
  --card-foreground: oklch(0.95 0.012 190);
  --popover: oklch(0.21 0.03 190);
  --popover-foreground: oklch(0.95 0.012 190);
  --primary: oklch(0.72 0.12 190);
  --primary-foreground: oklch(0.17 0.02 190);
  --secondary: oklch(0.27 0.03 190);
  --secondary-foreground: oklch(0.95 0.012 190);
  --muted: oklch(0.27 0.03 190);
  --muted-foreground: oklch(0.72 0.03 190);
  --accent: oklch(0.31 0.06 190);
  --accent-foreground: oklch(0.9 0.05 190);
  --destructive: oklch(0.66 0.2 25);
  --border: oklch(0.3 0.02 190);
  --input: oklch(0.34 0.025 190);
  --ring: oklch(0.72 0.12 190);
  --chart-1: oklch(0.7 0.12 190);
  --chart-2: oklch(0.74 0.114 230);
  --chart-3: oklch(0.78 0.108 270);
  --chart-4: oklch(0.72 0.102 150);
  --chart-5: oklch(0.68 0.12 0);
  --sidebar: oklch(0.2 0.026 190);
  --sidebar-foreground: oklch(0.95 0.012 190);
  --sidebar-primary: oklch(0.72 0.12 190);
  --sidebar-primary-foreground: oklch(0.17 0.02 190);
  --sidebar-accent: oklch(0.27 0.03 190);
  --sidebar-accent-foreground: oklch(0.95 0.012 190);
  --sidebar-border: oklch(0.3 0.02 190);
  --sidebar-ring: oklch(0.72 0.12 190);
  --shadow-2xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xs: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-sm: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-md: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-lg: 0px 0px 0px 0px oklch(0 0 0 / 0%);
  --shadow-xl: 0px 0px 0px 0px oklch(0 0 0 / 0%);
}

@theme inline {
  --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);
  --color-primary-foreground: var(--primary-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-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--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);
  --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) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: var(--font-sans);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Contrast report

Measured contrast of every pair. This preset predates the theme gates and is shown as it is.

light mode
PairRatioResult
Text on background16.06:1 / 4.5:1Pass
Text on cards16.73:1 / 4.5:1Pass
Popover text16.73:1 / 4.5:1Pass
Muted text on muted5.42:1 / 4.5:1Pass
Muted text on background5.9:1 / 4.5:1Pass
Primary button text5.43:1 / 4.5:1Pass
Secondary button text13.38:1 / 4.5:1Pass
Accent label7.22:1 / 4.5:1Pass
Sidebar text16.73:1 / 4.5:1Pass
Sidebar active item5.43:1 / 4.5:1Pass
Sidebar hover item13.38:1 / 4.5:1Pass
Primary on background5.42:1 / 3:1Pass
Focus ring on background5.42:1 / 3:1Pass
Destructive on background4.6:1 / 4.5:1Pass
Destructive on cards4.79:1 / 4.5:1Pass
dark mode
PairRatioResult
Text on background16.78:1 / 4.5:1Pass
Text on cards15.61:1 / 4.5:1Pass
Popover text15.25:1 / 4.5:1Pass
Muted text on muted6.09:1 / 4.5:1Pass
Muted text on background7.9:1 / 4.5:1Pass
Primary button text8.09:1 / 4.5:1Pass
Secondary button text12.93:1 / 4.5:1Pass
Accent label9.69:1 / 4.5:1Pass
Sidebar text15.61:1 / 4.5:1Pass
Sidebar active item8.09:1 / 4.5:1Pass
Sidebar hover item12.93:1 / 4.5:1Pass
Primary on background8.22:1 / 3:1Pass
Focus ring on background8.22:1 / 3:1Pass
Destructive on background5.66:1 / 4.5:1Pass
Destructive on cards5.26:1 / 4.5:1Pass

Similar themes

The closest themes by colour, measured in OKLab across the key tokens in light and dark.

More from Terminal

Back to all themes