A dark and moody palette with gothic aesthetic to it.
Installation
Section titled “Installation”pnpm dlx shadcn@latest add pxl-ui/registry/colors/gothic-bit
Copy and paste the following code into your project.
Include the following CSS vars in your Tailwind main file
:root { --background: var(--color-gothic-bit-base-50); --foreground: var(--color-gothic-bit-base-600); --card: var(--color-gothic-bit-base-50); --card-foreground: var(--color-gothic-bit-base-600); --popover: var(--color-gothic-bit-base-50); --popover-foreground: var(--color-gothic-bit-base-600); --accent: var(--color-gothic-bit-base-100); --accent-foreground: var(--color-gothic-bit-base-700); --border: var(--color-gothic-bit-base-400); --input: var(--color-gothic-bit-base-400); --ring: var(--color-gothic-bit-base-600); --muted: var(--color-gothic-bit-base-100); --muted-foreground: var(--color-gothic-bit-base-400);}.dark,[data-theme="dark"] { --background: var(--color-gothic-bit-base-950); --foreground: var(--color-gothic-bit-base-100); --card: var(--color-gothic-bit-base-700); --card-foreground: var(--color-gothic-bit-base-100); --popover: var(--color-gothic-bit-base-800); --popover-foreground: var(--color-gothic-bit-base-100); --muted: var(--color-gothic-bit-base-600); --muted-foreground: var(--color-gothic-bit-base-400); --accent: var(--color-gothic-bit-base-600); --accent-foreground: var(--color-gothic-bit-base-50); --border: var(--color-gothic-bit-base-600); --input: var(--color-gothic-bit-base-600); --ring: var(--color-gothic-bit-base-400);}