Docs
Styling
Theming

Theming Guide for StartupBolt

StartupBolt uses Shadcn (opens in a new tab) for theming, which is built on top of Tailwind CSS. This guide will walk you through the theming system, how to use it, and how to customize it for your needs.

Theme Setup and Usage

  1. Basic Setup:

  2. Theme Colors:

    • Theme colors can be edited in /app/globals.css. They can be found in the @layer base directive. The following CSS variables are available for use:
    :root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}
 
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}
  • The :root selector defines colors for the default (light) mode, while the .dark class selector defines colors for dark mode.
  • These CSS variables can be used in your Tailwind classes to apply theme colors. For example:
  <div className="bg-background text-foreground">
    This div will use theme colors in both light and dark modes.
  </div>
  • In this example, bg-background and text-foreground will use the light mode colors by default, and will apply the dark mode colors when dark mode is active.
  1. Color Conventions:
    • We use a simple background and foreground convention for colors.
    • The background variable is used for the component's background color.
    • The foreground variable is used for the text color.

Customizing Theme Colors

  1. Customizing Theme Colors:

  2. Understanding HSL Colors:

    • CSS variables use HSL (Hue, Saturation, Lightness) colors.
    • For more information on HSL and color conversion, visit W3Schools HSL Colors (opens in a new tab).
    • Example: --primary: 222.2 47.4% 11.2%; means bg-primary will have the color hsl(var(--primary)).

  3. Dark Mode:

    • Dark colors are automatically used when dark mode is toggled.
    • StartupBolt is fully dark mode ready.

  4. Adding New Colors:

    To add new colors:

    a. Add the color to /app/globals.css:

    :root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}
.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}

    b. Add the color to tailwind.config.js:

    module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

    c. Use the new color in your components:

    <div className="bg-warning text-warning-foreground" />

By following this guide, you can easily understand, use, and customize the theming system in StartupBolt to create visually appealing and consistent user interfaces.

TailwindDark Mode