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?

Most definitely! DaisyUi has a lot of components but frankly lacks pre-designed sections, for us developers who don't want to spend hours creating from scratch. You can easily find more Tailwind components in the HyperUI library.

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

To make the landing page your own. You will need to change the logo file in images/logo.png by your logo. Feel free to create your custom Logo with Logofa.st.

Then, change the favicon in images/favicon.ico by your own. You can create your own favicon in this favicon generator.

Happy UI design! 🎨

PreviousQuickstart NextPage structure

Last updated 20 days ago