Dark Matter Shadcn Theme
Dark matter space-inspired theme with cosmic deep blacks for shadcn/ui. Mysterious universe aesthetic with stellar design elements. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Dark Matter Shadcn Theme
Always been fascinated by space and the concept of dark matter—that invisible substance that makes up most of the universe but we can barely detect. This theme captures that mysterious cosmic energy with deep blacks, subtle stellar accents, and the kind of infinite depth that makes you think about what's beyond the screen.
Perfect for astronomy apps, space visualization tools, sci-fi projects, or any React interface where you want that sense of cosmic scale and mystery. The Geist Mono font gives you that technical, space-mission aesthetic that feels both futuristic and precise.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/darkmatter.jsonnpx shadcn@latest add https://www.shadcn.io/registry/darkmatter.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/darkmatter.jsonbunx shadcn@latest add https://www.shadcn.io/registry/darkmatter.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(1.0000 0 0);
--foreground: oklch(0.2101 0.0318 264.6645);
--card: oklch(1.0000 0 0);
--card-foreground: oklch(0.2101 0.0318 264.6645);
--popover: oklch(1.0000 0 0);
--popover-foreground: oklch(0.2101 0.0318 264.6645);
--primary: oklch(0.6716 0.1368 48.5130);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.5360 0.0398 196.0280);
--secondary-foreground: oklch(1.0000 0 0);
--muted: oklch(0.9670 0.0029 264.5419);
--muted-foreground: oklch(0.5510 0.0234 264.3637);
--accent: oklch(0.9491 0 0);
--accent-foreground: oklch(0.2101 0.0318 264.6645);
--destructive: oklch(0.6368 0.2078 25.3313);
--border: oklch(0.9276 0.0058 264.5313);
--input: oklch(0.9276 0.0058 264.5313);
--ring: oklch(0.6716 0.1368 48.5130);
--chart-1: oklch(0.5940 0.0443 196.0233);
--chart-2: oklch(0.7214 0.1337 49.9802);
--chart-3: oklch(0.8721 0.0864 68.5474);
--chart-4: oklch(0.6268 0 0);
--chart-5: oklch(0.6830 0 0);
--sidebar: oklch(0.9670 0.0029 264.5419);
--sidebar-foreground: oklch(0.2101 0.0318 264.6645);
--sidebar-primary: oklch(0.6716 0.1368 48.5130);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(1.0000 0 0);
--sidebar-accent-foreground: oklch(0.2101 0.0318 264.6645);
--sidebar-border: oklch(0.9276 0.0058 264.5313);
--sidebar-ring: oklch(0.6716 0.1368 48.5130);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Geist Mono, ui-monospace, monospace;
--font-serif: serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.75rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: oklch(0.1797 0.0043 308.1928);
--foreground: oklch(0.8109 0 0);
--card: oklch(0.1822 0 0);
--card-foreground: oklch(0.8109 0 0);
--popover: oklch(0.1797 0.0043 308.1928);
--popover-foreground: oklch(0.8109 0 0);
--primary: oklch(0.7214 0.1337 49.9802);
--primary-foreground: oklch(0.1797 0.0043 308.1928);
--secondary: oklch(0.5940 0.0443 196.0233);
--secondary-foreground: oklch(0.1797 0.0043 308.1928);
--muted: oklch(0.2520 0 0);
--muted-foreground: oklch(0.6268 0 0);
--accent: oklch(0.3211 0 0);
--accent-foreground: oklch(0.8109 0 0);
--destructive: oklch(0.5940 0.0443 196.0233);
--border: oklch(0.2520 0 0);
--input: oklch(0.2520 0 0);
--ring: oklch(0.7214 0.1337 49.9802);
--chart-1: oklch(0.5940 0.0443 196.0233);
--chart-2: oklch(0.7214 0.1337 49.9802);
--chart-3: oklch(0.8721 0.0864 68.5474);
--chart-4: oklch(0.6268 0 0);
--chart-5: oklch(0.6830 0 0);
--sidebar: oklch(0.1822 0 0);
--sidebar-foreground: oklch(0.8109 0 0);
--sidebar-primary: oklch(0.7214 0.1337 49.9802);
--sidebar-primary-foreground: oklch(0.1797 0.0043 308.1928);
--sidebar-accent: oklch(0.3211 0 0);
--sidebar-accent-foreground: oklch(0.8109 0 0);
--sidebar-border: oklch(0.2520 0 0);
--sidebar-ring: oklch(0.7214 0.1337 49.9802);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Geist Mono, ui-monospace, monospace;
--font-serif: serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.75rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@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);
--color-destructive-foreground: var(--destructive-foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--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: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}Why this theme actually works
Working on data visualization projects, realized that the deepest blacks create the best contrast for highlighting important information—just like how astronomers use dark skies to see distant stars. This theme uses that same principle to make content appear to float in infinite space.
Most dark themes either go gray and look flat, or use colors that fight for attention. This theme embraces true cosmic darkness—those deep blacks that make every element feel like it's suspended in the void, with subtle stellar accents that guide attention without breaking the immersion.
Light mode transforms the aesthetic into something more clinical and scientific while maintaining that precision feeling. The monospace typography works in both modes, giving everything that mission-control aesthetic where every character matters.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Geist Mono font gives you that technical, space-mission typography that feels both futuristic and precise—perfect for interfaces that handle complex data.
Those stellar yellow accents work like distant stars against the cosmic black—they guide attention to critical actions without overwhelming the infinite space. The deep backgrounds create environments where complex data can float and breathe.
All contrast ratios pass WCAG AA standards because space missions don't compromise on readability. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. works perfectly.
How to use this in projects
The stellar accents should mark critical actions and important data points—anything that needs to shine against the cosmic background. Use the infinite black space to let complex visualizations and data sets have room to breathe and tell their story.
This works especially well for data visualization, scientific applications, space-themed projects, or any interface where precision and focus matter more than warmth. Think mission control, not coffee shop.
In practice, embrace the cosmic scale this palette creates. The deep backgrounds and precise typography reduce visual noise, helping users focus on the data and information that matters in the vast digital universe.
You might also like
Mono Theme
Pure monochromatic theme with cosmic simplicity
Graphite Theme
Sophisticated graphite with deep space appeal
Cyberpunk Theme
Futuristic theme with electric cosmic energy
Vercel Theme
Clean technical theme with space-age precision
Perpetuity Theme
Timeless theme with infinite depth
Notebook Theme
Scientific notebook theme for research interfaces
FAQ
Violet Shadcn Theme
Creative violet theme with artistic inspiration for shadcn/ui. Rich purple design with imaginative creative energy. TypeScript ready.
Graphite Shadcn Theme
Sophisticated graphite theme with elegant gray tones for shadcn/ui. Professional monochromatic design with executive appeal. TypeScript ready.