Theming

Learn how the Neo-brutalist theme system works and how to customize it.

Concept

NeoUI uses a high-contrast Neo-brutalist design system. In light mode, it emphasizesSharp Black Borders andHeavy Shadows. In dark mode, these shift toWhite or Vibrant Borders to maintain visibility and impact.

Theme Toggle

Toggle Component

Use this to switch between light and dark modes.

import { ThemeToggle } from "@/components/theme-toggle";

export default function Navbar() {
  return (
    <nav>
      <ThemeToggle />
    </nav>
  );
}

Customization

You can customize the Neo-brutalist colors by overriding the following CSS variables in your globals.css:

Light Mode

:root {
  --neo-border: #000000;
  --neo-shadow: 4px 4px 0px 0px #000;
  --neo-shadow-hover: 2px 2px 0px #000;
}

Dark Mode

.dark {
  --neo-border: #fafafa;
  --neo-shadow: 4px 4px 0px 0px #fafafa;
  --neo-shadow-hover: 2px 2px #fafafa;
}