Color variables

You can find color variables for light and dark mode in the src/globals.css file. Color values are saved in HSL format. You can use a HEX to HSL converter (opens in a new tab).

We recommend to use your brand color as the primary color. You can use the same color(s) for light and dark theme, however, design experts suggest to use less harsh colors for dark mode.

Use the primary color for backgrounds and primary-foreground color e.g. for text that goes inside it.

Examples

Teal

 
--primary: 175 84% 32%;
--primary-foreground: 167 85% 89%;
 

Sky blue

 
--primary: 201 96% 32%;
--primary-foreground: 201 94% 86%;
 

Switch themes

By default, the dark/light mode switch is in the footer of the landing page. You can of course build your own theme switcher or work with themes programmatically.

LandingBud uses next-themes to handle theme context. Use the useThemes hook to work with it:

import { useTheme } from "next-themes";
 
export default function YourComponent() {
    const { setTheme } = useTheme()
 
    setTheme('light')
}

System themes

It is always best to consult the official documention. (opens in a new tab)

With system themes, the selected theme is based on the user's system setting. For example, they might have their phone or computer always set to dark mode. In that case you might want the landing page to be on dark mode by default.

For this, head to the src/app/[locale]/layout.tsx file and adapt the ThemeProvider:

• Set enableSystem to true
• Set defaultTheme to system