Skip to content
LightNet

Set a Primary Color

LightNet allows to customize the primary color to align with your site’s branding.
This color is used in some UI elements, such as the hover effect on the search magnifier icon in the header bar or for the colored button on the highlight section.

primary color button

To change the primary color open the tailwind.config.mjs file.

tailwind.config.mjs
import { lightnetStyles } from "lightnet/tailwind.config.ts"


export default {
  presets: [lightnetStyles({ primaryColor: "#14004B" })],
}

Replace #14004B with the hex color code of your choice.
Ensure that the chosen color contrasts well against white backgrounds.