Founding price: $35, then $99

Get Pro
Get Pro
All themes

Retro Arcade themeFree

8-bit cabinet: square corners, monospace type, magenta buttons on warm paper, and a deep CRT purple at night. Part of Retro. Radius 0rem.

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/retro-arcade.json
Or paste the CSS into globals.css
:root {
  --radius: 0rem;
  --font-sans: "Space Mono", ui-monospace, SFMono-Regular, monospace;
  --background: oklch(0.965 0.018 95);
  --foreground: oklch(0.22 0.06 295);
  --card: oklch(0.985 0.012 95);
  --card-foreground: oklch(0.22 0.06 295);
  --popover: oklch(0.985 0.012 95);
  --popover-foreground: oklch(0.22 0.06 295);
  --primary: oklch(0.5 0.22 350);
  --primary-foreground: oklch(0.985 0.012 95);
  --secondary: oklch(0.92 0.03 200);
  --secondary-foreground: oklch(0.25 0.06 250);
  --muted: oklch(0.93 0.02 95);
  --muted-foreground: oklch(0.46 0.05 295);
  --accent: oklch(0.92 0.06 195);
  --accent-foreground: oklch(0.3 0.07 230);
  --destructive: oklch(0.52 0.2 28);
  --border: oklch(0.3 0.06 295);
  --input: oklch(0.3 0.06 295);
  --ring: oklch(0.6 0.2 350);
  --chart-1: oklch(0.58 0.22 350);
  --chart-2: oklch(0.66 0.13 210);
  --chart-3: oklch(0.78 0.16 95);
  --chart-4: oklch(0.62 0.18 145);
  --chart-5: oklch(0.5 0.2 290);
  --sidebar: oklch(0.985 0.012 95);
  --sidebar-foreground: oklch(0.22 0.06 295);
  --sidebar-primary: oklch(0.5 0.22 350);
  --sidebar-primary-foreground: oklch(0.985 0.012 95);
  --sidebar-accent: oklch(0.92 0.06 195);
  --sidebar-accent-foreground: oklch(0.3 0.07 230);
  --sidebar-border: oklch(0.3 0.06 295);
  --sidebar-ring: oklch(0.6 0.2 350);
}

.dark {
  --background: oklch(0.17 0.055 292);
  --foreground: oklch(0.95 0.03 110);
  --card: oklch(0.21 0.065 292);
  --card-foreground: oklch(0.95 0.03 110);
  --popover: oklch(0.23 0.07 292);
  --popover-foreground: oklch(0.95 0.03 110);
  --primary: oklch(0.78 0.17 350);
  --primary-foreground: oklch(0.17 0.055 292);
  --secondary: oklch(0.27 0.07 260);
  --secondary-foreground: oklch(0.95 0.03 110);
  --muted: oklch(0.25 0.06 292);
  --muted-foreground: oklch(0.76 0.05 292);
  --accent: oklch(0.3 0.08 210);
  --accent-foreground: oklch(0.92 0.08 195);
  --destructive: oklch(0.7 0.19 28);
  --border: oklch(0.85 0.1 195 / 30%);
  --input: oklch(0.85 0.1 195 / 35%);
  --ring: oklch(0.8 0.15 195);
  --chart-1: oklch(0.78 0.17 350);
  --chart-2: oklch(0.82 0.12 200);
  --chart-3: oklch(0.9 0.15 100);
  --chart-4: oklch(0.8 0.18 145);
  --chart-5: oklch(0.7 0.16 290);
  --sidebar: oklch(0.21 0.065 292);
  --sidebar-foreground: oklch(0.95 0.03 110);
  --sidebar-primary: oklch(0.78 0.17 350);
  --sidebar-primary-foreground: oklch(0.17 0.055 292);
  --sidebar-accent: oklch(0.3 0.08 210);
  --sidebar-accent-foreground: oklch(0.92 0.08 195);
  --sidebar-border: oklch(0.85 0.1 195 / 30%);
  --sidebar-ring: oklch(0.8 0.15 195);
}

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 Arcade (retro-arcade) */
@import "tailwindcss";

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

:root {
  --radius: 0rem;
  --spacing: 0.25rem;
  --font-sans: "Space Mono", ui-monospace, SFMono-Regular, monospace;
  --background: oklch(0.965 0.018 95);
  --foreground: oklch(0.22 0.06 295);
  --card: oklch(0.985 0.012 95);
  --card-foreground: oklch(0.22 0.06 295);
  --popover: oklch(0.985 0.012 95);
  --popover-foreground: oklch(0.22 0.06 295);
  --primary: oklch(0.5 0.22 350);
  --primary-foreground: oklch(0.985 0.012 95);
  --secondary: oklch(0.92 0.03 200);
  --secondary-foreground: oklch(0.25 0.06 250);
  --muted: oklch(0.93 0.02 95);
  --muted-foreground: oklch(0.46 0.05 295);
  --accent: oklch(0.92 0.06 195);
  --accent-foreground: oklch(0.3 0.07 230);
  --destructive: oklch(0.52 0.2 28);
  --border: oklch(0.3 0.06 295);
  --input: oklch(0.3 0.06 295);
  --ring: oklch(0.6 0.2 350);
  --chart-1: oklch(0.58 0.22 350);
  --chart-2: oklch(0.66 0.13 210);
  --chart-3: oklch(0.78 0.16 95);
  --chart-4: oklch(0.62 0.18 145);
  --chart-5: oklch(0.5 0.2 290);
  --sidebar: oklch(0.985 0.012 95);
  --sidebar-foreground: oklch(0.22 0.06 295);
  --sidebar-primary: oklch(0.5 0.22 350);
  --sidebar-primary-foreground: oklch(0.985 0.012 95);
  --sidebar-accent: oklch(0.92 0.06 195);
  --sidebar-accent-foreground: oklch(0.3 0.07 230);
  --sidebar-border: oklch(0.3 0.06 295);
  --sidebar-ring: oklch(0.6 0.2 350);
  --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.17 0.055 292);
  --foreground: oklch(0.95 0.03 110);
  --card: oklch(0.21 0.065 292);
  --card-foreground: oklch(0.95 0.03 110);
  --popover: oklch(0.23 0.07 292);
  --popover-foreground: oklch(0.95 0.03 110);
  --primary: oklch(0.78 0.17 350);
  --primary-foreground: oklch(0.17 0.055 292);
  --secondary: oklch(0.27 0.07 260);
  --secondary-foreground: oklch(0.95 0.03 110);
  --muted: oklch(0.25 0.06 292);
  --muted-foreground: oklch(0.76 0.05 292);
  --accent: oklch(0.3 0.08 210);
  --accent-foreground: oklch(0.92 0.08 195);
  --destructive: oklch(0.7 0.19 28);
  --border: oklch(0.85 0.1 195 / 30%);
  --input: oklch(0.85 0.1 195 / 35%);
  --ring: oklch(0.8 0.15 195);
  --chart-1: oklch(0.78 0.17 350);
  --chart-2: oklch(0.82 0.12 200);
  --chart-3: oklch(0.9 0.15 100);
  --chart-4: oklch(0.8 0.18 145);
  --chart-5: oklch(0.7 0.16 290);
  --sidebar: oklch(0.21 0.065 292);
  --sidebar-foreground: oklch(0.95 0.03 110);
  --sidebar-primary: oklch(0.78 0.17 350);
  --sidebar-primary-foreground: oklch(0.17 0.055 292);
  --sidebar-accent: oklch(0.3 0.08 210);
  --sidebar-accent-foreground: oklch(0.92 0.08 195);
  --sidebar-border: oklch(0.85 0.1 195 / 30%);
  --sidebar-ring: oklch(0.8 0.15 195);
  --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 background15.87:1 / 4.5:1Pass
Text on cards16.82:1 / 4.5:1Pass
Popover text16.82:1 / 4.5:1Pass
Muted text on muted5.9:1 / 4.5:1Pass
Muted text on background6.55:1 / 4.5:1Pass
Primary button text6.53:1 / 4.5:1Pass
Secondary button text12.75:1 / 4.5:1Pass
Accent label10.85:1 / 4.5:1Pass
Sidebar text16.82:1 / 4.5:1Pass
Sidebar active item6.53:1 / 4.5:1Pass
Sidebar hover item10.85:1 / 4.5:1Pass
Primary on background6.16:1 / 3:1Pass
Focus ring on background3.98:1 / 3:1Pass
Destructive on background5.52:1 / 4.5:1Pass
Destructive on cards5.85:1 / 4.5:1Pass
dark mode
PairRatioResult
Text on background16.74:1 / 4.5:1Pass
Text on cards15.59:1 / 4.5:1Pass
Popover text14.91:1 / 4.5:1Pass
Muted text on muted7.47:1 / 4.5:1Pass
Muted text on background8.87:1 / 4.5:1Pass
Primary button text8.91:1 / 4.5:1Pass
Secondary button text13.15:1 / 4.5:1Pass
Accent label10.79:1 / 4.5:1Pass
Sidebar text15.59:1 / 4.5:1Pass
Sidebar active item8.91:1 / 4.5:1Pass
Sidebar hover item10.79:1 / 4.5:1Pass
Primary on background8.91:1 / 3:1Pass
Focus ring on background10.95:1 / 3:1Pass
Destructive on background6.64:1 / 4.5:1Pass
Destructive on cards6.18:1 / 4.5:1Pass

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