Retro Synthwave themeFree

Neon magenta and cyan over a violet night sky, with a grotesque display face. Lavender haze in light mode. Part of Retro. Radius 0.5rem.

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/retro-synthwave.json

Or paste the CSS into globals.css

:root {
  --radius: 0.5rem;
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.975 0.012 315);
  --foreground: oklch(0.21 0.06 300);
  --card: oklch(0.995 0.005 315);
  --card-foreground: oklch(0.21 0.06 300);
  --popover: oklch(0.995 0.005 315);
  --popover-foreground: oklch(0.21 0.06 300);
  --primary: oklch(0.52 0.24 330);
  --primary-foreground: oklch(0.99 0.008 315);
  --secondary: oklch(0.94 0.025 300);
  --secondary-foreground: oklch(0.26 0.07 300);
  --muted: oklch(0.945 0.02 310);
  --muted-foreground: oklch(0.48 0.06 300);
  --accent: oklch(0.93 0.05 210);
  --accent-foreground: oklch(0.32 0.08 240);
  --destructive: oklch(0.53 0.21 25);
  --border: oklch(0.9 0.03 310);
  --input: oklch(0.66 0.06 305);
  --ring: oklch(0.62 0.22 330);
  --chart-1: oklch(0.58 0.24 330);
  --chart-2: oklch(0.66 0.14 215);
  --chart-3: oklch(0.5 0.22 290);
  --chart-4: oklch(0.75 0.16 60);
  --chart-5: oklch(0.65 0.18 160);
  --sidebar: oklch(0.995 0.005 315);
  --sidebar-foreground: oklch(0.21 0.06 300);
  --sidebar-primary: oklch(0.52 0.24 330);
  --sidebar-primary-foreground: oklch(0.99 0.008 315);
  --sidebar-accent: oklch(0.93 0.05 210);
  --sidebar-accent-foreground: oklch(0.32 0.08 240);
  --sidebar-border: oklch(0.9 0.03 310);
  --sidebar-ring: oklch(0.62 0.22 330);
}

.dark {
  --background: oklch(0.15 0.06 292);
  --foreground: oklch(0.95 0.02 310);
  --card: oklch(0.195 0.07 292);
  --card-foreground: oklch(0.95 0.02 310);
  --popover: oklch(0.215 0.075 292);
  --popover-foreground: oklch(0.95 0.02 310);
  --primary: oklch(0.72 0.21 340);
  --primary-foreground: oklch(0.15 0.06 292);
  --secondary: oklch(0.26 0.08 292);
  --secondary-foreground: oklch(0.95 0.02 310);
  --muted: oklch(0.24 0.07 292);
  --muted-foreground: oklch(0.76 0.06 300);
  --accent: oklch(0.3 0.09 250);
  --accent-foreground: oklch(0.9 0.09 200);
  --destructive: oklch(0.7 0.19 25);
  --border: oklch(0.8 0.12 320 / 18%);
  --input: oklch(0.8 0.12 320 / 26%);
  --ring: oklch(0.82 0.13 200);
  --chart-1: oklch(0.72 0.21 340);
  --chart-2: oklch(0.82 0.13 200);
  --chart-3: oklch(0.68 0.2 295);
  --chart-4: oklch(0.84 0.15 75);
  --chart-5: oklch(0.8 0.17 160);
  --sidebar: oklch(0.195 0.07 292);
  --sidebar-foreground: oklch(0.95 0.02 310);
  --sidebar-primary: oklch(0.72 0.21 340);
  --sidebar-primary-foreground: oklch(0.15 0.06 292);
  --sidebar-accent: oklch(0.3 0.09 250);
  --sidebar-accent-foreground: oklch(0.9 0.09 200);
  --sidebar-border: oklch(0.8 0.12 320 / 18%);
  --sidebar-ring: oklch(0.82 0.13 200);
}

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

/* Retro Synthwave (retro-synthwave) */
@import "tailwindcss";

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

:root {
  --radius: 0.5rem;
  --spacing: 0.25rem;
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.975 0.012 315);
  --foreground: oklch(0.21 0.06 300);
  --card: oklch(0.995 0.005 315);
  --card-foreground: oklch(0.21 0.06 300);
  --popover: oklch(0.995 0.005 315);
  --popover-foreground: oklch(0.21 0.06 300);
  --primary: oklch(0.52 0.24 330);
  --primary-foreground: oklch(0.99 0.008 315);
  --secondary: oklch(0.94 0.025 300);
  --secondary-foreground: oklch(0.26 0.07 300);
  --muted: oklch(0.945 0.02 310);
  --muted-foreground: oklch(0.48 0.06 300);
  --accent: oklch(0.93 0.05 210);
  --accent-foreground: oklch(0.32 0.08 240);
  --destructive: oklch(0.53 0.21 25);
  --border: oklch(0.9 0.03 310);
  --input: oklch(0.66 0.06 305);
  --ring: oklch(0.62 0.22 330);
  --chart-1: oklch(0.58 0.24 330);
  --chart-2: oklch(0.66 0.14 215);
  --chart-3: oklch(0.5 0.22 290);
  --chart-4: oklch(0.75 0.16 60);
  --chart-5: oklch(0.65 0.18 160);
  --sidebar: oklch(0.995 0.005 315);
  --sidebar-foreground: oklch(0.21 0.06 300);
  --sidebar-primary: oklch(0.52 0.24 330);
  --sidebar-primary-foreground: oklch(0.99 0.008 315);
  --sidebar-accent: oklch(0.93 0.05 210);
  --sidebar-accent-foreground: oklch(0.32 0.08 240);
  --sidebar-border: oklch(0.9 0.03 310);
  --sidebar-ring: oklch(0.62 0.22 330);
  --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.15 0.06 292);
  --foreground: oklch(0.95 0.02 310);
  --card: oklch(0.195 0.07 292);
  --card-foreground: oklch(0.95 0.02 310);
  --popover: oklch(0.215 0.075 292);
  --popover-foreground: oklch(0.95 0.02 310);
  --primary: oklch(0.72 0.21 340);
  --primary-foreground: oklch(0.15 0.06 292);
  --secondary: oklch(0.26 0.08 292);
  --secondary-foreground: oklch(0.95 0.02 310);
  --muted: oklch(0.24 0.07 292);
  --muted-foreground: oklch(0.76 0.06 300);
  --accent: oklch(0.3 0.09 250);
  --accent-foreground: oklch(0.9 0.09 200);
  --destructive: oklch(0.7 0.19 25);
  --border: oklch(0.8 0.12 320 / 18%);
  --input: oklch(0.8 0.12 320 / 26%);
  --ring: oklch(0.82 0.13 200);
  --chart-1: oklch(0.72 0.21 340);
  --chart-2: oklch(0.82 0.13 200);
  --chart-3: oklch(0.68 0.2 295);
  --chart-4: oklch(0.84 0.15 75);
  --chart-5: oklch(0.8 0.17 160);
  --sidebar: oklch(0.195 0.07 292);
  --sidebar-foreground: oklch(0.95 0.02 310);
  --sidebar-primary: oklch(0.72 0.21 340);
  --sidebar-primary-foreground: oklch(0.15 0.06 292);
  --sidebar-accent: oklch(0.3 0.09 250);
  --sidebar-accent-foreground: oklch(0.9 0.09 200);
  --sidebar-border: oklch(0.8 0.12 320 / 18%);
  --sidebar-ring: oklch(0.82 0.13 200);
  --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
Pair	Ratio	Result
Text on background	16.65:1 / 4.5:1	Pass
Text on cards	17.68:1 / 4.5:1	Pass
Popover text	17.68:1 / 4.5:1	Pass
Muted text on muted	5.66:1 / 4.5:1	Pass
Muted text on background	6.2:1 / 4.5:1	Pass
Primary button text	6.14:1 / 4.5:1	Pass
Secondary button text	13.23:1 / 4.5:1	Pass
Accent label	10.4:1 / 4.5:1	Pass
Sidebar text	17.68:1 / 4.5:1	Pass
Sidebar active item	6.14:1 / 4.5:1	Pass
Sidebar hover item	10.4:1 / 4.5:1	Pass
Primary on background	5.87:1 / 3:1	Pass
Focus ring on background	3.79:1 / 3:1	Pass
Destructive on background	5.46:1 / 4.5:1	Pass
Destructive on cards	5.8:1 / 4.5:1	Pass

dark mode
Pair	Ratio	Result
Text on background	17.04:1 / 4.5:1	Pass
Text on cards	15.94:1 / 4.5:1	Pass
Popover text	15.31:1 / 4.5:1	Pass
Muted text on muted	7.66:1 / 4.5:1	Pass
Muted text on background	9.07:1 / 4.5:1	Pass
Primary button text	7.22:1 / 4.5:1	Pass
Secondary button text	13.66:1 / 4.5:1	Pass
Accent label	10.45:1 / 4.5:1	Pass
Sidebar text	15.94:1 / 4.5:1	Pass
Sidebar active item	7.22:1 / 4.5:1	Pass
Sidebar hover item	10.45:1 / 4.5:1	Pass
Primary on background	7.22:1 / 3:1	Pass
Focus ring on background	11.92:1 / 3:1	Pass
Destructive on background	6.82:1 / 4.5:1	Pass
Destructive on cards	6.37:1 / 4.5:1	Pass

Similar themes

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

More from Retro

Back to all themes

Retro Synthwave themeFREEFree

Live preview

Create an account

Team

Traffic

Sofia Davis

Team

Notifications

Payments

Install

Export the tokens

Contrast report

Similar themes

More from Retro

Retro Synthwave themeFree