๐จ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 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
config/meta.yml
file.Locate the
LIGHT_THEME
andDARK_THEME
meta'sUpdate value with the desired theme name. For example:
# config/meta.yml
LIGHT_THEME: "cupcake"
DARK_THEME: "forest"
You can replace "cupcake" 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.
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. This is because the Daisyui library doesn't support the configuration of import maps, so Lightning Rails is using CDN instead.
However, you can always create your custom your custom css methods in application.css
.
Custom Theme Colors
In application.css, create a custom theme:
# application.css
@plugin "daisyui" {
themes: light --default;
}
[data-theme="lightning-theme"]{
--color-primary: #F9462F;
--color-primary-content: #ffffff;
--color-secondary: #000000;
--color-secondary-content: #ffffff;
--color-base-100: #ffffff;
--color-base-200: #C3C8FF;
--color-base-300: #9FA6FF;
--color-base-400: #7C85FF;
--color-base-500: #5964FF;
--color-base-600: #3643FF;
--color-base-700: #152642;
--color-accent: #4C5BD7;
--color-neutral: #C1C7CD;
--color-neutral-content: #152642;
}
Then call the new theme in your meta.yml
# config/meta.yml
LIGHT_THEME: "lightning-theme"
DARK_THEME: "forest"
See all the DaisyUI variables you can customize in your custom theme here.
Customize fonts
To customize the default fonts of your projects, import the custom fonts in application.css
and assign them to your headers and p in that same file.
// 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;
}
Last updated
Was this helpful?