@qdesignsystems/theme-q

Q theme for the Q Design System. Black primary color, clean minimal aesthetic.

Setup

Step 1 — Install

npm install @qdesignsystems/design-system-core@latest @qdesignsystems/theme-q@latest

Step 2 — Run the init command (recommended)

npx qds-init --theme=q

This automatically:

• Adds the correct CSS imports to src/main.tsx
• Removes the default :root { } variable block from src/index.css that would otherwise override the theme

Step 3 — Done

Manual Setup

src/main.tsx — add at the very top, before all other imports

import '@qdesignsystems/design-system-core/styles.css';
import '@qdesignsystems/theme-q/styles.css';

src/index.css — remove the :root and .dark variable blocks

Replace the entire file with:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Important: The default index.css in Vite/shadcn projects contains hardcoded CSS variable values that override the theme. You must remove the :root { } and .dark { } blocks for the theme to apply.