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. What version of Chrome/Chromium is Pinegrow using? DaisyUI v4 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 <html>
tag.
@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;
}