โšก
LightningRails
  • ๐Ÿ‘‹Welcome
  • Access the Repo
  • Getting Started
    • ๐Ÿš€Quickstart
    • ๐ŸŽจThemes
    • ๐Ÿ–ผ๏ธCustomize the views
    • ๐Ÿ”ฎDaisyUI Library
    • โšกLightning Landing
      • Quickstart
      • Theme and branding
      • Page structure
      • Publish your landing page
  • Features setup
    • ๐Ÿ“ธImages & media
    • ๐Ÿ”Admin Dashboard
    • Search Engine Optimization
    • ๐Ÿ“งAutomatic Emails
      • ๐ŸŸจPostmark
      • ๐Ÿ”ฒResend
    • ๐ŸšชLogin with Devise
    • ๐Ÿช„Magic Link Signup
    • ๐Ÿ’ณStripe Payment Gateway
    • Github Signup
    • Lucide icons
    • ๐Ÿค–Multi-provider AI
    • Open AI API
  • UI Components
    • ๐ŸฆธHeros
    • โ”FAQs
    • ๐Ÿƒcards
    • ๐Ÿ’ฌTestimonials
    • ๐Ÿ‘‹Call To Actions
    • ๐Ÿ”ฆFeatures
  • Deploying to production
    • โฌ†๏ธHeroku Deploy
    • ๐Ÿ›ก๏ธSecurity
      • ๐ŸŽ›๏ธRate Limiting
  • RESOURCES
    • ๐Ÿš€Vote for new features
    • Report an issue
    • ๐Ÿ†˜Get help on Slack
    • ๐ŸญDesign Resources
      • Maria Ba Illustrations
      • Assets Mockup Generator
      • Logo Generator
      • Tailwind Cheatsheet
      • HyperUI Tailwind Library
Powered by GitBook
On this page
  • Changing Themes with DaisyUI
  • How do we change the theme?
  • Can we change other Tailwind libraries?
  • Custom Theme

Was this helpful?

  1. Getting Started

Themes

How to change the branding of your project from a list of 20+ options by changing one word.

PreviousQuickstartNextCustomize the views

Last updated 1 month ago

Was this helpful?

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

  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:

# config/meta.yml
LIGHT_THEME: "cupcake"
DARK_THEME: "forest"

You can replace "cupcake" with any theme name provided by DaisyUI.

Don't forget to restart your server for every change you do int the meta.yml ๐Ÿ’ก

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?

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. ๐Ÿ˜…

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"

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;
}

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 library.

See all the DaisyUI variables you can customize in your custom theme .

๐ŸŽจ
Check DaisyUI Themes
HyperUI
here
All the themes available from DaisyUI and therefore LighningRails
HyperUI library with many components