Docs
Styling
Dark Mode

Dark Mode Support

  • StartupBolt is fully equipped with dark mode support.
  • Every module and component is dark mode ready.
  • By default, dark mode is enabled, but you can easily disable it in the settings.js file.
  • We recommend using Tailwind’s dark: utility classes or Shadcn theme colors for any new modules or components you create.

Enabling Dark Mode in settings.js

The settings.js file, located at /settings.js is the central configuration file for your StartupBolt application. This file contains various settings that control different aspects of your app, allowing for easy customization and management of your project's core parameters. It is important to update these configuration values as per your product or service.

  1. ENABLE_DARK_MODE

  • Set this to true if you want to enable dark mode support. By default, this is set as false.

  • Set this to false if you want to disable dark mode support.

    const ENABLE_DARK_MODE = false; // Dark mode is disabled by default
// or
const ENABLE_DARK_MODE = true; // Enable dark mode

DarkMode Colors

  • To customize dark mode colors, simply edit the theme colors in /app/globals.css.
  • For more details, refer to this guide: Theming.

DarkModeToggle Component

  • The DarkModeToggle component allows users to switch between light, dark, and system themes.
  • Learn more about it in this guide: DarkModeToggle Component.

Enabling dark mode in your StartupBolt application is an easy way to enhance user experience and create a more visually appealing interface.

ThemingFonts