Tealmac Midnight themeFree

Dark-leaning tealmac: ink-navy buttons and teal focus by day, a midnight-blue canvas with luminous aqua by night. Part of tealmac signature. Radius 0.625rem.

Compare in the gallery Use as a full preset

Create an account

Enter your email below to create your account.

or continue with

Password

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%

Jan

Feb

Mar

Apr

May

Jun

Jul

Direct
Search
Social
Email
Referral

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.

Email digestsA summary every Monday.

Push alertsWhen a build fails.

Alert volume64%

Payments

Manage your recent payments.

Status	Email	Amount
Success	ken99@example.com	$316.00
Success	abe45@example.com	$242.00
Processing	monserrat44@example.com	$837.00
Failed	carmella@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/tealmac-midnight.json

Or paste the CSS into globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(0.976 0.005 232);
  --foreground: oklch(0.19 0.032 244);
  --card: oklch(0.995 0.002 232);
  --card-foreground: oklch(0.19 0.032 244);
  --popover: oklch(0.995 0.002 232);
  --popover-foreground: oklch(0.19 0.032 244);
  --primary: oklch(0.27 0.05 236);
  --primary-foreground: oklch(0.975 0.012 190);
  --secondary: oklch(0.948 0.008 232);
  --secondary-foreground: oklch(0.24 0.04 240);
  --muted: oklch(0.948 0.008 232);
  --muted-foreground: oklch(0.48 0.028 240);
  --accent: oklch(0.94 0.032 192);
  --accent-foreground: oklch(0.33 0.07 198);
  --destructive: oklch(0.55 0.2 26);
  --border: oklch(0.905 0.012 232);
  --input: oklch(0.67 0.025 236);
  --ring: oklch(0.6 0.1 192);
  --chart-1: oklch(0.58 0.1 192);
  --chart-2: oklch(0.42 0.09 250);
  --chart-3: oklch(0.74 0.12 168);
  --chart-4: oklch(0.7 0.14 70);
  --chart-5: oklch(0.6 0.15 340);
  --sidebar: oklch(0.995 0.002 232);
  --sidebar-foreground: oklch(0.19 0.032 244);
  --sidebar-primary: oklch(0.27 0.05 236);
  --sidebar-primary-foreground: oklch(0.975 0.012 190);
  --sidebar-accent: oklch(0.94 0.032 192);
  --sidebar-accent-foreground: oklch(0.33 0.07 198);
  --sidebar-border: oklch(0.905 0.012 232);
  --sidebar-ring: oklch(0.6 0.1 192);
  --shadow-2xs: 0 1px 0 0 oklch(0.25 0.05 240 / 6%);
  --shadow-xs: 0 1px 2px 0 oklch(0.25 0.05 240 / 7.2%);
  --shadow-sm: 0 1px 3px 0 oklch(0.25 0.05 240 / 9.6%), 0 1px 2px -1px oklch(0.25 0.05 240 / 7.2%);
  --shadow: 0 2px 6px -1px oklch(0.25 0.05 240 / 9.6%), 0 1px 3px -1px oklch(0.25 0.05 240 / 7.2%);
  --shadow-md: 0 6px 14px -4px oklch(0.25 0.05 240 / 12%), 0 2px 6px -2px oklch(0.25 0.05 240 / 7.2%);
  --shadow-lg: 0 14px 30px -8px oklch(0.25 0.05 240 / 16.8%), 0 4px 10px -4px oklch(0.25 0.05 240 / 7.2%);
  --shadow-xl: 0 24px 48px -12px oklch(0.25 0.05 240 / 21.6%), 0 8px 16px -6px oklch(0.25 0.05 240 / 9.6%);
}

.dark {
  --background: oklch(0.145 0.03 248);
  --foreground: oklch(0.955 0.01 220);
  --card: oklch(0.18 0.034 248);
  --card-foreground: oklch(0.955 0.01 220);
  --popover: oklch(0.2 0.038 248);
  --popover-foreground: oklch(0.955 0.01 220);
  --primary: oklch(0.83 0.12 182);
  --primary-foreground: oklch(0.18 0.04 245);
  --secondary: oklch(0.235 0.036 248);
  --secondary-foreground: oklch(0.955 0.01 220);
  --muted: oklch(0.225 0.034 248);
  --muted-foreground: oklch(0.72 0.03 232);
  --accent: oklch(0.27 0.05 220);
  --accent-foreground: oklch(0.91 0.06 186);
  --destructive: oklch(0.68 0.19 24);
  --border: oklch(0.86 0.05 225 / 12%);
  --input: oklch(0.86 0.05 225 / 20%);
  --ring: oklch(0.76 0.12 184);
  --chart-1: oklch(0.8 0.12 182);
  --chart-2: oklch(0.7 0.13 250);
  --chart-3: oklch(0.82 0.13 150);
  --chart-4: oklch(0.8 0.14 78);
  --chart-5: oklch(0.72 0.15 330);
  --sidebar: oklch(0.18 0.034 248);
  --sidebar-foreground: oklch(0.955 0.01 220);
  --sidebar-primary: oklch(0.83 0.12 182);
  --sidebar-primary-foreground: oklch(0.18 0.04 245);
  --sidebar-accent: oklch(0.27 0.05 220);
  --sidebar-accent-foreground: oklch(0.91 0.06 186);
  --sidebar-border: oklch(0.86 0.05 225 / 12%);
  --sidebar-ring: oklch(0.76 0.12 184);
  --shadow-2xs: 0 1px 0 0 oklch(0.04 0.03 250 / 22.5%);
  --shadow-xs: 0 1px 2px 0 oklch(0.04 0.03 250 / 27%);
  --shadow-sm: 0 1px 3px 0 oklch(0.04 0.03 250 / 36%), 0 1px 2px -1px oklch(0.04 0.03 250 / 27%);
  --shadow: 0 2px 6px -1px oklch(0.04 0.03 250 / 36%), 0 1px 3px -1px oklch(0.04 0.03 250 / 27%);
  --shadow-md: 0 6px 14px -4px oklch(0.04 0.03 250 / 45%), 0 2px 6px -2px oklch(0.04 0.03 250 / 27%);
  --shadow-lg: 0 14px 30px -8px oklch(0.04 0.03 250 / 63%), 0 4px 10px -4px oklch(0.04 0.03 250 / 27%);
  --shadow-xl: 0 24px 48px -12px oklch(0.04 0.03 250 / 81%), 0 8px 16px -6px oklch(0.04 0.03 250 / 36%);
}

@theme inline {
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
}

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

/* Tealmac Midnight (tealmac-midnight) */
@import "tailwindcss";

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

:root {
  --radius: 0.625rem;
  --spacing: 0.25rem;
  --background: oklch(0.976 0.005 232);
  --foreground: oklch(0.19 0.032 244);
  --card: oklch(0.995 0.002 232);
  --card-foreground: oklch(0.19 0.032 244);
  --popover: oklch(0.995 0.002 232);
  --popover-foreground: oklch(0.19 0.032 244);
  --primary: oklch(0.27 0.05 236);
  --primary-foreground: oklch(0.975 0.012 190);
  --secondary: oklch(0.948 0.008 232);
  --secondary-foreground: oklch(0.24 0.04 240);
  --muted: oklch(0.948 0.008 232);
  --muted-foreground: oklch(0.48 0.028 240);
  --accent: oklch(0.94 0.032 192);
  --accent-foreground: oklch(0.33 0.07 198);
  --destructive: oklch(0.55 0.2 26);
  --border: oklch(0.905 0.012 232);
  --input: oklch(0.67 0.025 236);
  --ring: oklch(0.6 0.1 192);
  --chart-1: oklch(0.58 0.1 192);
  --chart-2: oklch(0.42 0.09 250);
  --chart-3: oklch(0.74 0.12 168);
  --chart-4: oklch(0.7 0.14 70);
  --chart-5: oklch(0.6 0.15 340);
  --sidebar: oklch(0.995 0.002 232);
  --sidebar-foreground: oklch(0.19 0.032 244);
  --sidebar-primary: oklch(0.27 0.05 236);
  --sidebar-primary-foreground: oklch(0.975 0.012 190);
  --sidebar-accent: oklch(0.94 0.032 192);
  --sidebar-accent-foreground: oklch(0.33 0.07 198);
  --sidebar-border: oklch(0.905 0.012 232);
  --sidebar-ring: oklch(0.6 0.1 192);
  --shadow-2xs: 0px 1px 0px 0px oklch(0.25 0.05 240 / 6%);
  --shadow-xs: 0px 1px 2px 0px oklch(0.25 0.05 240 / 7.2%);
  --shadow-sm: 0px 1px 3px 0px oklch(0.25 0.05 240 / 9.6%), 0px 1px 2px -1px oklch(0.25 0.05 240 / 7.2%);
  --shadow-md: 0px 6px 14px -4px oklch(0.25 0.05 240 / 12%), 0px 2px 6px -2px oklch(0.25 0.05 240 / 7.2%);
  --shadow-lg: 0px 14px 30px -8px oklch(0.25 0.05 240 / 16.8%), 0px 4px 10px -4px oklch(0.25 0.05 240 / 7.2%);
  --shadow-xl: 0px 24px 48px -12px oklch(0.25 0.05 240 / 21.6%), 0px 8px 16px -6px oklch(0.25 0.05 240 / 9.6%);
}

.dark {
  --background: oklch(0.145 0.03 248);
  --foreground: oklch(0.955 0.01 220);
  --card: oklch(0.18 0.034 248);
  --card-foreground: oklch(0.955 0.01 220);
  --popover: oklch(0.2 0.038 248);
  --popover-foreground: oklch(0.955 0.01 220);
  --primary: oklch(0.83 0.12 182);
  --primary-foreground: oklch(0.18 0.04 245);
  --secondary: oklch(0.235 0.036 248);
  --secondary-foreground: oklch(0.955 0.01 220);
  --muted: oklch(0.225 0.034 248);
  --muted-foreground: oklch(0.72 0.03 232);
  --accent: oklch(0.27 0.05 220);
  --accent-foreground: oklch(0.91 0.06 186);
  --destructive: oklch(0.68 0.19 24);
  --border: oklch(0.86 0.05 225 / 12%);
  --input: oklch(0.86 0.05 225 / 20%);
  --ring: oklch(0.76 0.12 184);
  --chart-1: oklch(0.8 0.12 182);
  --chart-2: oklch(0.7 0.13 250);
  --chart-3: oklch(0.82 0.13 150);
  --chart-4: oklch(0.8 0.14 78);
  --chart-5: oklch(0.72 0.15 330);
  --sidebar: oklch(0.18 0.034 248);
  --sidebar-foreground: oklch(0.955 0.01 220);
  --sidebar-primary: oklch(0.83 0.12 182);
  --sidebar-primary-foreground: oklch(0.18 0.04 245);
  --sidebar-accent: oklch(0.27 0.05 220);
  --sidebar-accent-foreground: oklch(0.91 0.06 186);
  --sidebar-border: oklch(0.86 0.05 225 / 12%);
  --sidebar-ring: oklch(0.76 0.12 184);
  --shadow-2xs: 0px 1px 0px 0px oklch(0.04 0.03 250 / 22.5%);
  --shadow-xs: 0px 1px 2px 0px oklch(0.04 0.03 250 / 27%);
  --shadow-sm: 0px 1px 3px 0px oklch(0.04 0.03 250 / 36%), 0px 1px 2px -1px oklch(0.04 0.03 250 / 27%);
  --shadow-md: 0px 6px 14px -4px oklch(0.04 0.03 250 / 45%), 0px 2px 6px -2px oklch(0.04 0.03 250 / 27%);
  --shadow-lg: 0px 14px 30px -8px oklch(0.04 0.03 250 / 63%), 0px 4px 10px -4px oklch(0.04 0.03 250 / 27%);
  --shadow-xl: 0px 24px 48px -12px oklch(0.04 0.03 250 / 81%), 0px 8px 16px -6px oklch(0.04 0.03 250 / 36%);
}

@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);
  --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
Pair	Ratio	Result
Text on background	17.22:1 / 4.5:1	Pass
Text on cards	18.18:1 / 4.5:1	Pass
Popover text	18.18:1 / 4.5:1	Pass
Muted text on muted	5.59:1 / 4.5:1	Pass
Muted text on background	6.07:1 / 4.5:1	Pass
Primary button text	13.98:1 / 4.5:1	Pass
Secondary button text	14.1:1 / 4.5:1	Pass
Accent label	10.06:1 / 4.5:1	Pass
Sidebar text	18.18:1 / 4.5:1	Pass
Sidebar active item	13.98:1 / 4.5:1	Pass
Sidebar hover item	10.06:1 / 4.5:1	Pass
Primary on background	13.98:1 / 3:1	Pass
Focus ring on background	3.51:1 / 3:1	Pass
Destructive on background	5.02:1 / 4.5:1	Pass
Destructive on cards	5.3:1 / 4.5:1	Pass

dark mode
Pair	Ratio	Result
Text on background	17.4:1 / 4.5:1	Pass
Text on cards	16.52:1 / 4.5:1	Pass
Popover text	15.9:1 / 4.5:1	Pass
Muted text on muted	6.93:1 / 4.5:1	Pass
Muted text on background	8.03:1 / 4.5:1	Pass
Primary button text	11.69:1 / 4.5:1	Pass
Secondary button text	14.64:1 / 4.5:1	Pass
Accent label	11.65:1 / 4.5:1	Pass
Sidebar text	16.52:1 / 4.5:1	Pass
Sidebar active item	11.69:1 / 4.5:1	Pass
Sidebar hover item	11.65:1 / 4.5:1	Pass
Primary on background	12.31:1 / 3:1	Pass
Focus ring on background	9.71:1 / 3:1	Pass
Destructive on background	6.29:1 / 4.5:1	Pass
Destructive on cards	5.98:1 / 4.5:1	Pass

Similar themes

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

Tealmac Midnight themeFREEFree

Live preview

Create an account

Team

Traffic

Sofia Davis

Team

Notifications

Payments

Install

Export the tokens

Contrast report

Similar themes

More from tealmac signature

Tealmac Midnight themeFree