# Theme and branding

## Available Themes

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

[Check DaisyUI Themes](https://daisyui.com/docs/themes/)

<figure><img src="https://2221554152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPCf6vtFuZEPHXJd7JfIe%2Fuploads%2FXD0v5q0QmV72iK5HUAcL%2FScreenshot%202024-08-19%20at%2020.38.36.png?alt=media&#x26;token=f379b70c-4d55-4fb6-9289-21070b314878" alt=""><figcaption><p>All the themes available from DaisyUI and therefore LighningRails</p></figcaption></figure>

### 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.

<figure><img src="https://2221554152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPCf6vtFuZEPHXJd7JfIe%2Fuploads%2FYZ38iMeN4ZevDHxGnFjS%2FScreenshot%202024-12-01%20at%2021.05.09.png?alt=media&#x26;token=1a33be8d-2f2f-48be-98ee-1e65852ad2b4" alt=""><figcaption></figcaption></figure>

### 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](https://www.hyperui.dev/) 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:

```html
<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.](https://shipfa.st/tools/logo-fast)

\
Then, change the favicon in `images/favicon.ico` by your own. You can create your own favicon in this [favicon generator.](https://favicon.io/)

Happy UI design! 🎨
