# 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! 🎨


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.lightningrails.com/getting-started/lightning-landing/theme-and-branding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
