Post

How to create custom themes for daisyui in Ruby on Rails

Discover how to define custom daisyui themes with your own color pallet and how to use it in your Ruby on Rails application.

Posted
By Yoan Ivanov
1 min read
How to create custom themes for daisyui in Ruby on Rails

Defining the custom theme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

@plugin "./daisyui-theme.mjs" {
  name: "finance_light";

  --color-primary: #00509D;
  --color-primary-content: #FFFFFF;

  --color-secondary: #3399FF;
  --color-secondary-content: #1A1A1A;

  --color-accent: #E5E7EB;
  --color-accent-content: #1A1A1A;

  --color-neutral: #334155;
  --color-neutral-content: #FFFFFF;

  --color-base-100: #FFFFFF;
  --color-base-200: #F5F7FA;
  --color-base-300: #E0E4EB;
  --color-base-content: #1A1A1A;

  --color-info: #60A5FA;
  --color-success: #00A36C;
  --color-warning: #FACC15;
  --color-error: #FF6666;

  --radius-box: 0.5rem;
  --radius-btn: 0.5rem;
}

Using the custom theme

We are manually toggling the theme, because we are not using the Node.js version.

1
2
3

<html data-theme="finance_light">
...
</html>

Using the default daisyui themes

You can use the default themes like so:

1
2
3

@plugin "./daisyui.mjs" {
  themes: light --default, dark --prefersdark;
}
This post is licensed under CC BY-NC 4.0 by the author.