daisyUI 4 upgrade guide #2507

saadeghi · 2023-11-13T05:00:38Z

saadeghi
Nov 13, 2023
Maintainer

daisyUI 4.0 is here 🎉
Thank you for using daisyUI and thanks for reporting issues.

If you're upgrading from daisyUI 3 to daisyUI 4, here you can see all the changes:
https://daisyui.com/docs/changelog/

In this page you can see the things you need to change:

Themes and Colors

The biggest breaking change (as you can see in the changelog) is using OKLCH colors internally instead of HSL.
That means if you're using the value of daisyUI color variables in your project (like --p for primary color) the value of those CSS variables are no longer H S L. They're L C H now and you need to use them in oklch() CSS color function.
daisyUI themes are no longer supposed in old browsers (see OKLCH compatibility chart) and old browsers will only show a fallback default theme.

daisyUI 3	daisyUI 4
CSS variable was HSL values --p: 251.47 100% 56%; Using `hsl()` function color: hsl(var(--p))	CSS variable is OKLCH values --p: .4912 .3096 275.75; Using `oklch()` function color: oklch(var(--p))

All `*-focus` colors are removed

You can use a color-mix() arbitrary class to have more control on the the colors:

bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]
                   │              │       │
                   │              │       │
                   │              │       │
                   │              │       ╰── black with 7% opacity = 7% darker
                   │              │
                   │              ╰── primary color
                   │
                   ╰── OKLAB gives a better result

For example, here we mix each color with black to create the same colors from daisyUI 3:

daisyUI 3

daisyUI 4

<div class="bg-primary-focus">
<div class="bg-secondary-focus">
<div class="bg-accent-focus">
<div class="bg-neutral-focus">

<div class="bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]">
<div class="bg-[color-mix(in_oklab,oklch(var(--s)),black_7%)]">
<div class="bg-[color-mix(in_oklab,oklch(var(--a)),black_7%)]">
<div class="bg-[color-mix(in_oklab,oklch(var(--n)),black_7%)]">

Extending themes

There's a change in property names in daisyui/src/theming/themes.js file.
If you're customizing built-in daisyUI themes, change it:

daisyUI 3

daisyUI 4

daisyui: {
  themes: [
    {
      light: {
        ...require("daisyui/src/theming/themes")["[data-theme=light]"],
        primary: "blue",
        secondary: "teal",
      },
    },
  ],
},

daisyui: {
  themes: [
    {
      light: {
        ...require("daisyui/src/theming/themes")["light"],
        primary: "blue",
        secondary: "teal",
      },
    },
  ],
},

RTL

All components now support LTR/RTL without any config or plugin.
Just add dir=rtl to <html> tag and everything will be RTL on runtime.

daisyUI 3	daisyUI 4
module.exports = { //... plugins: [ require("daisyui"), require("tailwindcss-flip"), ], daisyui: { rtl: true, }, }	module.exports = { //... plugins: [ require("daisyui"), ], daisyui: { }, }

Tab

tabs class is now using grid, instead of flex.
Lifted tab now uses a single pseudo element (:before) instead of two (:before and after)
these modifier classes for tab are removed:
- tab-lifted
- tab-bordered
- tab-lg
- tab-md
- tab-sm
- tab-xs
Use the following modifier classes for the parent tabs class instead:
- tabs-lifted
- tabs-bordered
- tabs-lg
- tabs-md
- tabs-sm
- tabs-xs

daisyUI 3

daisyUI 4

<div class="tabs">
  <a class="tab tab-lg tab-lifted">Tab 1</a>
  <a class="tab tab-lg tab-lifted tab-active">Tab 2</a>
  <a class="tab tab-lg tab-lifted">Tab 3</a>
  <a class="tab tab-lg tab-lifted">Tab 4</a>
</div>

<div class="tabs tabs-lg tabs-lifted">
  <a class="tab">Tab 1</a>
  <a class="tab tab-active">Tab 2</a>
  <a class="tab">Tab 3</a>
  <a class="tab">Tab 4</a>
</div>

button

buttons are not uppercase by default anymore. You can use uppercase if you want to make them uppercase.

This guide will be updated if there are any missing details.
Fill free to open issues and open PRs 💚

PS: I'm having a lung surgery today. I will continue to fix issues as soon as I can. Thank you for your patience 🙏

Update: Surgery went well. Thank you all for the warm messages 💚

vegeta897 · 2023-11-13T05:38:44Z

vegeta897
Nov 13, 2023

First of all, I hope your surgery goes well!

Thank you for making daisyUI more awesome.

I'm a little confused about custom theme support in old browsers. You say that custom themes are not supported by old browsers, and in the changelog you say "For old browsers, daisyUI provides HEX fallback colors only for the default dark/light themes". Does that mean I can define a custom theme with HEX colors and it will work in old browsers, or no? If I can, how do I define a custom theme that uses OKLCH as well as providing HEX fallbacks?

3 replies

saadeghi Nov 13, 2023
Maintainer Author

Thanks.
I can't provide an example code right now, but here are the fallback CSS variables:
https://github.com/saadeghi/daisyui/blob/master/src/base/colors.css

You can use a similar code to make a fallback for a custom theme

vegeta897 Nov 13, 2023

Ah I see, so there's a new set of fallback color variables. Good stuff, thanks!

gandlafbtc Feb 20, 2024

FWIW, around 10% of active browsers still don't support OKLCH. I think it would make sense to include the theme fallback to the migration guide, to ensure that the theme looks ok on these 10% too.

https://caniuse.com/mdn-css_types_color_oklch

NikarashiHatsu · 2023-11-13T07:06:42Z

NikarashiHatsu
Nov 13, 2023

Hope you could have a godspeed recovery, thanks a lot for your efforts!

0 replies

rikgirbes · 2023-11-13T07:15:50Z

rikgirbes
Nov 13, 2023

I wish you a speedy recovery ! Hope everything goes well!

0 replies

JacobCoffee · 2023-11-13T18:23:15Z

JacobCoffee
Nov 13, 2023

Thanks Pouya! Hope the surgery and recovery goes well.

0 replies

mdenjamulislam · 2023-11-14T05:31:21Z

mdenjamulislam
Nov 14, 2023

Thank you for making daisyUI more awesome.

0 replies

rajasegar · 2023-11-17T06:52:41Z

rajasegar
Nov 17, 2023

Just wrote a couple of codemods to address the changes and pushed to npm
https://github.com/rajasegar/daisyui-v3-to-v4-codemods
Tested with a simple react project using Vite, codemods were working fine

1 reply

saadeghi Nov 17, 2023
Maintainer Author

Wow. Thank you 🫡

stefanobartoletti · 2023-11-17T19:31:12Z

stefanobartoletti
Nov 17, 2023

Thank you for sharing this and for the v.4 update!

I suggest you to include this guide in the website docs, maybe in a page called "migration to 4" or similar, as it would probably be the first place where people go to check the docs.

I was almost opening an issue myself with a request for clarification about the migration, before checking the discussions here :)

0 replies

Metehan-Altuntekin · 2023-11-21T13:56:41Z

Metehan-Altuntekin
Nov 21, 2023

I have found a difference between how the gradients are rendered. New one seems more accurate.

I am using the light theme with these classes:
bg-gradient-to-tr from-accent from-25% via-secondary via-70% to-primary

DaisyUI 3:

DaisyUI 4:

(Geçmiş olsun)

1 reply

seiry Nov 28, 2023

yeah, for oklch has a different way in gradient.

https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#:~:text=you%E2%80%99ll%20end%20up%20with%20a%20very%20different%20gradient%20for%20the%20same%20starting%20and%20ending%20colors.

wuarmin · 2023-12-19T12:51:31Z

wuarmin
Dec 19, 2023

Hey @saadeghi,

can i migrate the colors during the upgrade as follows:

hsl(var(--b2) / 0.2)

to

oklch(var(--b2) / 0.2)

or do I have to use color-mix here as well?
I still don't understand when I should use color-mix to make colors darker or lighter.
Thanks

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

daisyUI 4 upgrade guide #2507

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 9 comments 5 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

daisyUI 4 upgrade guide #2507

saadeghi Nov 13, 2023 Maintainer

Themes and Colors

All *-focus colors are removed

Extending themes

RTL

Tab

button

Replies: 9 comments · 5 replies

saadeghi Nov 13, 2023 Maintainer Author

saadeghi Nov 17, 2023 Maintainer Author

saadeghi
Nov 13, 2023
Maintainer

All `*-focus` colors are removed

Replies: 9 comments 5 replies

saadeghi Nov 13, 2023
Maintainer Author

saadeghi Nov 17, 2023
Maintainer Author