NodlumeMoody Blues — a shadcn/ui theme for Tailwind v4
A dark-first developer-tool theme with an electric blue accent.
Moody Blues starts dark. The palette's ink entry becomes the page background, so the light-mode export is already a dark UI and the derived .dark block is a deeper variant of the same thing — which is what a developer tool, a terminal companion, or a monitoring dashboard actually wants.
Space Grotesk carries the headings with its sliced terminals and ink traps, and Inter keeps the body neutral so those quirks read as deliberate. Tighter radii and a barely-there shadow suit dense screens where elevation is drawn with borders, not blur.
The eight color roles
Every shadcn/ui variable in the export derives from these eight. The dark values are not a second theme: they are the light roles with lightness moved, hue and saturation held, and each pair repaired until it meets its WCAG threshold.
| Role | Light | Dark |
|---|---|---|
| primary | #5f75ba | #697ebe |
| secondary | #6a89ae | #6a89ae |
| accent | #5bc0be | #64c4c2 |
| background | #0b132b | #080e20 |
| surface | #0f1a3b | #0d1735 |
| text | #f3f4f6 | #f3f4f6 |
| muted | #969eb6 | #282c39 |
| border | #2c3551 | #4f5f91 |
Typography
Space Grotesk for headings, Inter for body copy and JetBrains Mono for code, on a 16px base with a 1.2 modular ratio.
Shape and elevation
A 0.375rem base radius derives the --radius-sm/md/lg/xl steps; the base shadow derives the four-step elevation scale.
Extended tokens
Foregrounds, destructive, a five-step chart ramp and the sidebar set are derived from the roles — exactly the variables a Tailwind v4 shadcn/ui project reads.
The exported globals.css
This is the stylesheet the generator downloads for this preset — a Tailwind v4 @theme block that any shadcn/ui project can replace its own app/globals.css with. Open the preset in the generator to change anything, preview it on a full landing page, and add the derived .dark block or the W3C design-tokens export.
/* Moody Blues — Tailwind v4 theme (generated from the styling step) */
@import "tailwindcss";
@theme {
--color-primary: #5f75ba;
--color-secondary: #6a89ae;
--color-accent: #5bc0be;
--color-background: #0b132b;
--color-surface: #0f1a3b;
--color-text: #f3f4f6;
--color-muted: #969eb6;
--color-border: #2c3551;
--color-primary-foreground: #0b132b;
--color-secondary-foreground: #f3f4f6;
--color-accent-foreground: #f3f4f6;
--color-destructive: oklch(0.577 0.245 27.325);
--color-chart-1: #5f75ba;
--color-chart-2: #6a89ae;
--color-chart-3: #5bc0be;
--color-chart-4: #969eb6;
--color-chart-5: #2c3551;
--color-sidebar: #0f1a3b;
--color-sidebar-foreground: #f3f4f6;
--color-sidebar-primary: #5f75ba;
--color-sidebar-primary-foreground: #0b132b;
--color-sidebar-accent: #5bc0be;
--color-sidebar-accent-foreground: #f3f4f6;
--color-sidebar-border: #2c3551;
--color-sidebar-ring: #5f75ba;
--font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
--font-body: Inter, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', Consolas, monospace;
--radius-sm: calc(0.375rem * 0.5);
--radius-md: 0.375rem;
--radius-lg: calc(0.375rem * 1.5);
--radius-xl: calc(0.375rem * 2);
--text-xs: 0.6875rem;
--text-sm: 0.84375rem;
--text-base: 1rem;
--text-lg: 1.1875rem;
--text-xl: 1.4375rem;
--text-2xl: 1.71875rem;
--text-3xl: 2.0625rem;
--text-4xl: 2.5rem;
--shadow-sm: 0 0.667px 1.333px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-lg: 0 1.5px 3px 0 rgba(0, 0, 0, 0.05);
--shadow-xl: 0 2.25px 4.5px 0 rgba(0, 0, 0, 0.05);
--scrollbar-size: 10px;
--scrollbar-radius: 999px;
--scrollbar-track: transparent;
--scrollbar-thumb: #2c3551;
--scrollbar-thumb-hover: #5f75ba;
--scrollbar-thumb-border: #0b132b;
--animate-marquee: marquee 25s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@layer base {
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dark { color-scheme: dark; }
html {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: var(--scrollbar-radius);
border: 2px solid var(--scrollbar-thumb-border);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
}
/* Generated with Nodlume — https://nodlume.dev/theme-generator/moody-blues */
Make it yours
A preset is a starting point, not a decision. The shadcn/ui theme generator opens this one with every control live — swap the palette, try another of the 67 font pairings, tune the radius — and exports the result. For the thinking behind the roles, read how to build a semantic UI color palette; for how the whole system is generated, read generating custom themes.
Open in the theme generator