> For the complete documentation index, see [llms.txt](https://docs.lightningrails.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lightningrails.com/getting-started/lightning-landing/theme-and-branding.md).

# 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="/files/zvgi6KL7emN5WOG0yIxr" 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="/files/EV2Tgu8ugmzqhAbFF2H2" 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! 🎨
