🎨Themes
How to change the branding of your project from a list of 20+ options by changing one word.
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, you simply need to modify the data-theme attribute in the <body> tag of your application.html.erb layout file.
Steps to Change the Theme
Open your
app/views/layouts/application.html.erbfile.Locate the
<html>tag.Add or update the
data-themeattribute with the desired theme name. For example:
You can replace "dark" with any theme name provided by DaisyUI.
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 application.html.erb by changing the data-theme attribute in the <body> 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 library.
Find a component you like? Just copy/paste it into your LightningRails project.
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. 😅
Last updated
