VS Code Shadcn Theme
Professional VS Code inspired theme with familiar blue tones for shadcn/ui. Developer-friendly design with Source Code Pro fonts. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
VS Code Shadcn Theme
After coding in VS Code for years, figured someone should make a theme that brings that familiar, comfortable feeling to web apps. This theme captures the exact blue tones and clean typography that developers know and trust.
Perfect for developer tools, code editors, admin dashboards, or any React project where you want that professional, no-nonsense developer aesthetic. The Source Code Pro font stack really sells the authentic coding environment feel.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/vs-code.jsonnpx shadcn@latest add https://www.shadcn.io/registry/vs-code.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/vs-code.jsonbunx shadcn@latest add https://www.shadcn.io/registry/vs-code.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.97 0.02 225.66);
--foreground: oklch(0.15 0.02 269.18);
--card: oklch(0.98 0.01 228.79);
--card-foreground: oklch(0.15 0.02 269.18);
--popover: oklch(0.98 0.01 238.45);
--popover-foreground: oklch(0.15 0.02 269.18);
--primary: oklch(0.71 0.15 239.07);
--primary-foreground: oklch(0.94 0.03 232.39);
--secondary: oklch(0.91 0.03 229.20);
--secondary-foreground: oklch(0.15 0.02 269.18);
--muted: oklch(0.89 0.02 225.69);
--muted-foreground: oklch(0.36 0.03 230.30);
--accent: oklch(0.88 0.02 235.72);
--accent-foreground: oklch(0.34 0.05 229.72);
--destructive: oklch(0.61 0.24 20.96);
--border: oklch(0.82 0.02 240.77);
--input: oklch(0.82 0.02 240.77);
--ring: oklch(0.55 0.10 235.72);
--chart-1: oklch(0.57 0.11 228.97);
--chart-2: oklch(0.45 0.10 270.08);
--chart-3: oklch(0.65 0.15 159.03);
--chart-4: oklch(0.75 0.10 100.01);
--chart-5: oklch(0.55 0.15 299.88);
--sidebar: oklch(0.93 0.01 238.46);
--sidebar-foreground: oklch(0.15 0.02 269.18);
--sidebar-primary: oklch(0.57 0.11 228.97);
--sidebar-primary-foreground: oklch(0.99 0.01 203.97);
--sidebar-accent: oklch(0.88 0.02 235.72);
--sidebar-accent-foreground: oklch(0.15 0.02 269.18);
--sidebar-border: oklch(0.82 0.02 240.77);
--sidebar-ring: oklch(0.57 0.11 228.97);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: 'Source Code Pro', 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: 'Source Serif 4', 'Geist', 'Geist Fallback', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: 'Source Code Pro', 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--radius: 0rem;
--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;
}
.dark {
--background: oklch(0.18 0.02 271.27);
--foreground: oklch(0.90 0.01 238.47);
--card: oklch(0.22 0.02 271.67);
--card-foreground: oklch(0.90 0.01 238.47);
--popover: oklch(0.22 0.02 271.67);
--popover-foreground: oklch(0.90 0.01 238.47);
--primary: oklch(0.71 0.15 239.07);
--primary-foreground: oklch(0.94 0.03 232.39);
--secondary: oklch(0.28 0.03 270.91);
--secondary-foreground: oklch(0.90 0.01 238.47);
--muted: oklch(0.28 0.03 270.91);
--muted-foreground: oklch(0.60 0.03 269.46);
--accent: oklch(0.28 0.03 270.91);
--accent-foreground: oklch(0.90 0.01 238.47);
--destructive: oklch(0.64 0.25 19.69);
--border: oklch(0.90 0.01 238.47 / 15%);
--input: oklch(0.90 0.01 238.47 / 20%);
--ring: oklch(0.66 0.13 227.15);
--chart-1: oklch(0.66 0.13 227.15);
--chart-2: oklch(0.60 0.10 269.83);
--chart-3: oklch(0.70 0.15 159.83);
--chart-4: oklch(0.80 0.10 100.65);
--chart-5: oklch(0.60 0.15 300.14);
--sidebar: oklch(0.22 0.02 271.67);
--sidebar-foreground: oklch(0.90 0.01 238.47);
--sidebar-primary: oklch(0.66 0.13 227.15);
--sidebar-primary-foreground: oklch(0.18 0.02 271.27);
--sidebar-accent: oklch(0.28 0.03 270.91);
--sidebar-accent-foreground: oklch(0.90 0.01 238.47);
--sidebar-border: oklch(0.90 0.01 238.47 / 15%);
--sidebar-ring: oklch(0.66 0.13 227.15);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: 'Source Code Pro', 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: 'Source Serif 4', 'Geist', 'Geist Fallback', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: 'Source Code Pro', 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--radius: 0rem;
--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
After using VS Code for thousands of hours, these specific blues and grays become second nature. This theme brings that same visual comfort to web applications—familiar enough to feel right immediately, but polished enough for production apps.
The key insight is that developers spend most of their day looking at code, so when they switch to using web apps, having similar visual patterns reduces cognitive load. The Source Code Pro font stack reinforces this familiarity without being obnoxious about it.
Dark mode especially shines here. It's basically the default VS Code dark theme colors, so it feels natural for developers who code in dark mode all day. No jarring color shifts when switching between editor and web apps.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. No special font loading or configurations. The Source Code Pro font stack gives you that authentic development environment feel while remaining readable for UI text.
The blue accent color is that exact VS Code selection blue that developers recognize instantly. The contrast ratios all pass WCAG AA standards so you won't run into accessibility issues during audits. Zero border radius keeps everything crisp and code-editor-like.
Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. just works. No custom type definitions or weird workarounds.
How to use this in projects
The VS Code blue is perfect for CTAs, selected states, and interactive elements—basically anywhere you want to indicate "active" or "selected." Use the light grays for most content areas and darker grays for secondary elements.
Dark mode uses the familiar VS Code dark blues and grays. The OKLCH colors ensure consistent appearance across both modes. This is especially important for developer tools where users expect specific visual patterns.
In practice, this theme works best for developer-focused applications, admin dashboards, or any app where the users are technical. The familiarity factor is huge—developers immediately feel at home with these colors.
You might also like
Slack Theme
Professional Slack-inspired workspace theme
Vercel Theme
Clean Vercel-inspired development theme
Supabase Theme
Supabase-inspired theme with green accents
Mono Theme
Monochromatic theme perfect for coding
Corporate Theme
Professional corporate design theme
Graphite Theme
Dark graphite theme with subtle elegance
FAQ
Valorant Shadcn Theme
Valorant tactical shooter inspired theme with orange accents and sharp edges for shadcn/ui. Competitive gaming aesthetic with precision design. TypeScript ready.
Red Shadcn Theme
Bold red theme with energetic passion for shadcn/ui. Strong primary color design with confident crimson accents. TypeScript ready.