# Tailwind DaisyUI defaulting to dark in Pinegrow **URL:** \ **Category:** Third party Apps & plugins related to Pinegrow\ **Tags:** css\ **Created:** [December 19, 2023, 9:17pm UTC](https://forum.pinegrow.com/t/tailwind-daisyui-defaulting-to-dark-in-pinegrow/8588 "2023-12-19T21:17:27Z")\ **Posts on this page:** 1\ **Showing post:** 9
**Author:** ![kris](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kris/32/6056_2.png) [@kris](https://forum.pinegrow.com/u/kris)\ **Post date:** [December 20, 2023, 8:59pm UTC](https://forum.pinegrow.com/t/tailwind-daisyui-defaulting-to-dark-in-pinegrow/8588/9 "2023-12-20T20:59:14Z")
Does Pinegrow support `oklch`? Looking in the generated css, it will overrides the selected theme if the browser doesn’t support `oklch`, with this: `@supports not (color: oklch(0 0 0))`. See below for a larger section of code. The themes are using RGB colors… Looks like Chrome picked up [support for `oklch` in version 111](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch). What version of Chrome/Chromium is Pinegrow using? [DaisyUI v4](https://github.com/saadeghi/daisyui/discussions/2507) dropped support for ‘old’ browsers. I checked against both Chrome and FireFox. It looks like Pinegrow is defaulting to the first set of themes, and it’s not loading the themes lower down in tailwind.css. FireFox and Chrome will both update the theme when I change `data-theme="light"` to `data-theme="synthwave"` in the `` tag. ```auto @supports not (color: oklch(0 0 0)){ :root{ color-scheme: light; --fallback-p: #491eff; --fallback-pc: #d4dbff; --fallback-s: #ff41c7; --fallback-sc: #fff9fc; --fallback-a: #00cfbd; --fallback-ac: #00100d; --fallback-n: #2b3440; --fallback-nc: #d7dde4; --fallback-b1: #ffffff; --fallback-b2: #e5e6e6; --fallback-b3: #e5e6e6; --fallback-bc: #1f2937; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } @media (prefers-color-scheme: dark){ :root{ color-scheme: dark; --fallback-p: #7582ff; --fallback-pc: #050617; --fallback-s: #ff71cf; --fallback-sc: #190211; --fallback-a: #00c7b5; --fallback-ac: #000e0c; --fallback-n: #2a323c; --fallback-nc: #a6adbb; --fallback-b1: #1d232a; --fallback-b2: #191e24; --fallback-b3: #15191e; --fallback-bc: #a6adbb; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } } } html{ -webkit-tap-highlight-color: transparent; } :root{ color-scheme: light; --in: 0.7206 0.191 231.6; --su: 64.8% 0.150 160; --wa: 0.8471 0.199 83.87; --er: 0.7176 0.221 22.18; --pc: 0.89824 0.06192 275.75; --ac: 0.15352 0.0368 183.61; --inc: 0 0 0; --suc: 0 0 0; --wac: 0 0 0; --erc: 0 0 0; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 0.4912 0.3096 275.75; --s: 0.6971 0.329 342.55; --sc: 0.9871 0.0106 342.55; --a: 0.7676 0.184 183.61; --n: 0.321785 0.02476 255.701624; --nc: 0.894994 0.011585 252.096176; --b1: 1 0 0; --b2: 0.961151 0 0; --b3: 0.924169 0.00108 197.137559; --bc: 0.278078 0.029596 256.847952; } @media (prefers-color-scheme: dark){ :root{ color-scheme: dark; --b2: 0.202941 0.076211 287.835609; --b3: 0.187665 0.070475 287.835609; --pc: 0.144421 0.031903 342.009383; --sc: 0.156543 0.02362 227.382405; --ac: 0.17608 0.0412 93.72; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 0.722105 0.159514 342.009383; --s: 0.782714 0.118101 227.382405; --a: 0.8804 0.206 93.72; --n: 0.255554 0.103537 286.507967; --nc: 0.979365 0.00819 301.358346; --b1: 0.218216 0.081948 287.835609; --bc: 0.979365 0.00819 301.358346; --in: 0.765197 0.12273 231.831603; --inc: 0.235017 0.096418 290.329844; --su: 0.860572 0.115038 178.624677; --suc: 0.235017 0.096418 290.329844; --wa: 0.85531 0.122117 93.722227; --wac: 0.235017 0.096418 290.329844; --er: 0.737005 0.121339 32.639257; --erc: 0.235017 0.096418 290.329844; } } [data-theme=light]{ color-scheme: light; --in: 0.7206 0.191 231.6; --su: 64.8% 0.150 160; --wa: 0.8471 0.199 83.87; --er: 0.7176 0.221 22.18; --pc: 0.89824 0.06192 275.75; --ac: 0.15352 0.0368 183.61; --inc: 0 0 0; --suc: 0 0 0; --wac: 0 0 0; --erc: 0 0 0; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 0.4912 0.3096 275.75; --s: 0.6971 0.329 342.55; --sc: 0.9871 0.0106 342.55; --a: 0.7676 0.184 183.61; --n: 0.321785 0.02476 255.701624; --nc: 0.894994 0.011585 252.096176; --b1: 1 0 0; --b2: 0.961151 0 0; --b3: 0.924169 0.00108 197.137559; --bc: 0.278078 0.029596 256.847952; } [data-theme=synthwave]{ color-scheme: dark; --b2: 0.202941 0.076211 287.835609; --b3: 0.187665 0.070475 287.835609; --pc: 0.144421 0.031903 342.009383; --sc: 0.156543 0.02362 227.382405; --ac: 0.17608 0.0412 93.72; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 0.722105 0.159514 342.009383; --s: 0.782714 0.118101 227.382405; --a: 0.8804 0.206 93.72; --n: 0.255554 0.103537 286.507967; --nc: 0.979365 0.00819 301.358346; --b1: 0.218216 0.081948 287.835609; --bc: 0.979365 0.00819 301.358346; --in: 0.765197 0.12273 231.831603; --inc: 0.235017 0.096418 290.329844; --su: 0.860572 0.115038 178.624677; --suc: 0.235017 0.096418 290.329844; --wa: 0.85531 0.122117 93.722227; --wac: 0.235017 0.096418 290.329844; --er: 0.737005 0.121339 32.639257; --erc: 0.235017 0.096418 290.329844; } ``` --- _[View the full topic](https://forum.pinegrow.com/t/tailwind-daisyui-defaulting-to-dark-in-pinegrow/8588)._