Dark Mode Toggle Dark

You can preview how Launch Express components look in both light and dark modes right here in the documentation. Simply use the theme toggle in the documentation’s navigation bar to switch between light and dark modes.

​
Overview

The dark mode feature in Launch Express leverages the power of Tailwind CSS and the next-themes package to provide a seamless dark mode experience. Users can switch between light, dark, and system-based themes.

​
Configuration

​
Initial Theme Setting

You can set the initial theme for your application in the config.ts file:

export const config = {
	// ... other configuration options
	theme: "light", // 'light' | 'dark' | 'system'
};

Available options are:

  • 'light': Always use light mode
  • 'dark': Always use dark mode
  • 'system': Use the system preference (default if not specified)

​
Implementation

​
Theme Provider

Launch Express wraps your application with a ThemeProvider component from next-themes. This provider is typically set up in the root layout file:

import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
	return (
		<html lang="en" suppressHydrationWarning>
			<body>
				<ThemeProvider attribute="class" defaultTheme={config.theme}>
					{children}
				</ThemeProvider>
			</body>
		</html>
	);
}

​
Dark Mode Toggle

A dark mode toggle component is included in Launch Express. You can find it in components/DarkModeToggle.tsx. This component allows users to switch between light and dark modes.

​
Usage in Components

When creating or styling components, use Tailwind’s dark mode variant to specify different styles for dark mode:

<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
	This div adapts to dark mode
</div>

​
Custom Dark Mode Logic

If you need more control over when dark mode is applied, you can use the useTheme hook from next-themes:

import { useTheme } from "next-themes";

function MyComponent() {
	const { theme, setTheme } = useTheme();

	return (
		<div>
			<p>Current theme: {theme}</p>
			<button onClick={() => setTheme("light")}>Light Mode</button>
			<button onClick={() => setTheme("dark")}>Dark Mode</button>
		</div>
	);
}