# Themes {% embed url="" %} ### **Tailwind CSS 4 Setup 🆕** LightningRails uses Tailwind CSS 4 with the tailwindcss-rails gem for optimal performance and a better development experience. The configuration is located in app/assets/tailwind/application.css.Key benefits of this setup: * Faster build times * Better integration with Rails asset pipeline * More flexibility for custom configurations * Automatic purging of unused CSS ### Changing Themes with DaisyUI DaisyUI offers a variety of themes that you can easily apply to your Ruby on Rails application. To change the theme with DaisyUI default configuration, you would need to add and change `data-theme` attribute in the `` tag of your `application.html.erb` layout file. However, Lightning Rails comes by default with a theme toggle for dark and light theme. To change the tehme follow these steps: #### (Option A) Change the Dark/Light Theme 1. Open your `config/meta.yml` file. 2. Locate the `LIGHT_THEME` and `DARK_THEME` meta's 3. Update value with the desired theme name. For example: ```yaml # config/meta.yml LIGHT_THEME: "cupcake" DARK_THEME: "forest" ``` You can replace "cupcake" with any theme name provided by DaisyUI. {% hint style="info" %} Don't forget to **restart your server** for every change you do int the meta.yml 💡 {% endhint %} #### (Option B) Change the config to only have one Theme 1. Comment out or delete the theme toggle in `_navbar.html.erb` 2. Comment out or delete the variable in meta.yml: 3. in `application.html.erb` replace: 1.

<html data-light-theme="<%= DEFAULT_META['LIGHT_THEME'] %>" data-dark-theme="<%= DEFAULT_META['DARK_THEME'] %>">

2. By your theme of choice: `` 4. Comment out or delete the `theme_controller.js` file.. Et voila, those are the two ways of changing your theme with Lightning Rails, either by keeping the Dark/light logic or removing it and changing a single theme at a time. #### 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/)

All the themes available from DaisyUI and therefore LighningRails

### How do we change the theme? In `application.html.erb` by changing the `data-theme` attribute in the `` tag, you can quickly switch between these themes, allowing for a customizable look and feel for your application! ### 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 for scratch. You can easily find more Tailwind components in the [HyperUI](https://www.hyperui.dev/) library.

Find a component you like? Just copy/paste it into your LightningRails project. {% hint style="info" %} **Pro Tip:** Avoid hard-coded color classes in non-DaisyUI components (like HyperUI). For example, using a class like `bg-white` won’t adapt to theme changes. This can result in a dark theme with a mismatched white background—definitely not ideal. 😅 {% endhint %} ### Custom Theme If you wish to add a custom theme or modify an existing one. We won't be able to do it on the tailwind config file. However, Lightning Rails now uses Tailwind CSS 4 with the tailwindcss-rails gem, which provides better performance and more flexibility than the CDN approach. DaisyUI is integrated via CDN import in the Tailwind configuration. Here is how to create your custom theme: #### Custom Theme Colors In app/assets/tailwind/application.css, create a custom theme using the new Tailwind CSS 4 syntax: ```css /* tailwind/application.css */ @import "tailwindcss" source(none); @source "../../../public/*.html"; @source "../../../app/helpers/**/*.rb"; @source "../../../app/javascript/**/*.js"; @source "../../../app/views/**/*"; @plugin "./daisyui.js"; /* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */ @plugin "./daisyui-theme.js"{ /* custom theme here */ name: "lightning-theme"; default: true; /* set as default */ prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ color-scheme: light; /* color of browser-provided UI */ --color-base-100: oklch(98% 0.02 240); --color-base-200: oklch(95% 0.03 240); --color-base-300: oklch(92% 0.04 240); --color-base-content: oklch(20% 0.05 240); --color-primary: oklch(55% 0.3 240); --color-primary-content: oklch(98% 0.01 240); --color-secondary: oklch(70% 0.25 200); --color-secondary-content: oklch(98% 0.01 200); --color-accent: oklch(65% 0.25 160); --color-accent-content: oklch(98% 0.01 160); --color-neutral: oklch(50% 0.05 240); --color-neutral-content: oklch(98% 0.01 240); --color-info: oklch(70% 0.2 220); --color-info-content: oklch(98% 0.01 220); --color-success: oklch(65% 0.25 140); --color-success-content: oklch(98% 0.01 140); --color-warning: oklch(80% 0.25 80); --color-warning-content: oklch(20% 0.05 80); --color-error: oklch(65% 0.3 30); --color-error-content: oklch(98% 0.01 30); /* border radius */ --radius-selector: 1rem; --radius-field: 0.25rem; --radius-box: 0.5rem; /* base sizes */ --size-selector: 0.25rem; --size-field: 0.25rem; /* border size */ --border: 1px; /* effects */ --depth: 1; --noise: 0; } ``` Then call the new theme in your `meta.yml` ```css /* config/meta.yml */ LIGHT_THEME: "lightning-theme" DARK_THEME: "forest" ``` See all the DaisyUI variables you can customize in your custom theme [here](https://daisyui.com/docs/utilities/#component-specific-css-variables). #### Customize fonts To customize the default fonts of your projects, import the custom fonts in `tailwind/application.css` and assign them to your headers and paragraphs in the same file. ```css /* tailwind/application.css */ @import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico&display=swap'); h1, h2, h3 { font-family: "Pacifico", serif; font-weight: 400; font-style: normal; } ```