Theme and branding

Make Lightning landing your own. Choose one of the 24 availables themes and leave the branding hassle for later.

PreviousQuickstart NextPage structure

Last updated 6 months ago

Was this helpful?

Theme and branding

Make Lightning landing your own. Choose one of the 24 availables themes and leave the branding hassle for later.

Available Themes

To see the different themes you can choose from, check the DaisyUI documentation or their themes page below:

How do we change the theme?

In index.html by changing the data-theme attribute in the <body> tag, you can quickly switch between these themes.

Can we change other Tailwind libraries?

Can I add my custom theme?

Of course! Just add this code before your closing </body> tag and adapt the variables to your taste:

<script>
  tailwind.config = {
    theme: {
      extend: {
        fontFamily: {
          sans: ['Inter', 'sans-serif'], // Set your custom font as the default
        },
      },
    },
    plugins: [daisyui],
    daisyui: {
      themes: [
        {
          customtheme: {
            "primary": "#4CAF50",
            "secondary": "#FFC107",
            "accent": "#673AB7",
            "neutral": "#333333",
            "base-100": "#FFFFFF",
            "info": "#2196F3",
            "success": "#4CAF50",
            "warning": "#FF9800",
            "error": "#F44336",
            "fontFamily": "sans", // Use the extended font in the theme
          },
        },
      ],
    },
  };
</script>

That's it for branding and theme setup, next you will need to adapt the sections of the landing page.

Custom Logo & Favicon

Happy UI design! 🎨

PreviousQuickstart NextPage structure

Last updated 6 months ago

Was this helpful?