Tri-state theme-controller

[awhitford]

I like that Theme Controller is a built-in component, but i prefer a tri-state theme controller that can switch between Light, Dark, and System. (A workaround is to use a Dropdown menu, but a fancy toggle would be neat.) I know I've seen a tri-state solution somewhere. Anybody have a reference?

[pdanpdan]

you can try something like this - adjust as needed: https://play.tailwindcss.com/morRgFSjSw?file=css

[JessMTermini]

Yes, that's awesome, can't wait to try it, however I can't get prefersdark to work at all right now, but I am new to daisy, so I'm prob configuring things wrong atm lol...the docs are a bit confusing, I see all these variations in the docs about how to write stuff, and they're not very clear on where to write what and when... lol..

[saadeghi]

@JessMTermini

I can't get prefersdark to work at all

I can help better If you share the code. What's the expected behavior?

[JessMTermini]

@saadeghi

I can help better If you share the code. What's the expected behavior?

Ok, thank you. So I have a theme.css file that has:

@import "tailwindcss";
@plugin "daisyui"{
  themes: quartz --default, quartz-dark --prefersdark; // in this line I have tried both the text "light" to replace "quartz" and "dark" to replace "dark-quartz" incase it's referencing the light or dark scheme of a theme instead, but doesn't break the css or even change the site theming behavior - at all. I have also remove the entire {} block and left it at the default `;`, after the `@plugin "daisyui"` and thus has also changed nothing.
}

/* Pull in your custom variables */
@import "./_variables.css";

Then I have a _variables.css file that says:

@plugin "daisyui/theme" {
  name: "quartz";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(44% 0.017 285.786);
  --color-base-200: oklch(70% 0.015 286.067);
  // ...rest of congig...
}

@plugin "daisyui/theme" {
  name: "quartz-dark";
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(70% 0.015 286.067);
  --color-base-200: oklch(21% 0.006 285.885);
  // ...rest of config...
}

Then I have a default theme toggle in my html like:

<!-- Theme Toggle -->
    <label class="swap swap-rotate">
        <!-- this hidden checkbox controls the state -->
        <input type="checkbox" class="theme-controller" value="quartz-dark" />

        <!-- sun icon -->
        <svg
            class="swap-off h-10 w-10 fill-current"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24">
            <path
            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
        </svg>

        <!-- moon icon -->
        <svg
            class="swap-on h-10 w-10 fill-current"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24">
            <path
            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
        </svg>
    </label>

So while my theme toggle works, it changes my theme to light and dark on click, the default theme that shows up is the light theme even though my browser settings is set to dark mode...what am I doing wrong?

I expect it to show the default site as browser prefence first if a user specifies one, and if they don't then it defaults ot the light default - and the toggle should still work on click (showing the correct current state) regardless of whiich is loaded by their broweser based on user settings/pref... so if their user settings is set to dark mode, the page should load dark theme by default, the toggle shoudl reflect this state showing they're actually in dake mode, letting them click the "sun" icon to manually switch them over to light overriding their browser pref of dark.

[JessMTermini]

Actually, never mind, I think it actually - is - working lol... I am in a brand new project and I think I just used a bad combination of html (not enough html) and colors to represent light and dark mode that I was getting confused by it lol. I will post again later, as necessary, if I find it is still not working as expected after I add more html content. Thank you for replying, and being ready to help out!! much appreciated.

[JessMTermini]

@saadeghi ok so I am pretty much loosing my mind at this point lol. I have been banging my head for the last 8+ hours trying to get daisyui to respect my browser preference on first paint. I have created everything from simple swap icons (sun/moon) to the tri-toggle shown in the above tailwind playground example. I have also coded a 3rd and 4th custom tri-toggle of my own. And I cannit reproduce the playground behavior where it respects my browser pref on first paint. While it works in the playground above, it is not wotking in ANY toggles I create locally. Not even the one using the exact code in the playground example!! I am at a - complete loss. I don't know what it could be. It just somply refuses to work.

In the simple sun/moon awap example I shared above, requires data-theme to be hard coded in my html, like <html lang="en" data-theme="quartz"> and the swap toggle to be hard coded to value="quartz-dark" to work, but even then it still loads light mode on first paint, even when configured as shown in the above code (except I removed prefersdark: false; from the quartz (light) theme in the @plugin "daisyui/theme" { directive/block just in case) with themes: quartz --default, quartz-dark --prefersdark;. If I try to remove the data-theme="quartz" from my html tag, and remove the hard-coded value of value="quartz-dark" on my swap/toggle html (to let the theme generated media query decide), the first paint actually respects my dark mode and quartz-dark is NOW shown by default on page-load BUT the toggle stops toggling...well, it toggles, but it no longer switches themes on toggle...?

But I can't even get the tri-toggle to respect browser pref no matter how I set it up...(read below)

The tri-toggle however, (as far as I understand it) requires removing the hard coded data-theme coded in the html, like removing <html lang="en" data-theme="quartz"> and using <html lang="en"> instead...but this also is not enough to get it to respect my browser preferences for dark mode on first paint...it still keeps wanting to load my default light theme (quartz) on page-load...I feel ikke I have tried everything.

What else can I be missing? Any ideas at all? I could share my code, but I am pretty sure I was very careful and that it is an exact duplicate of what is shown in the playground above except for my theme names inserted (in both the html and css portions of it). The fact that the toggle is working, on all of them, but also all of them are not respecting my browser reference is maddening...I don't know what else it could be at this point...I feel like I am going crazy lol...

Thank you.

[pdanpdan]

Please share a minimal reproduction of what you have and is not working (the reproduction should run - by not working I mean not generating the expected result for the toggle)

The best would be to use one of these: https://daisyui.com/tailwindplay/, https://stackblitz.com/@saadeghi/collections/daisyui

If that is not possible the share the code clearly delimited in files, and the tools/steps that need to be used to run the reproduction.

Do not use complicated svg icons or other non-related to the problem elements (you can just use letters - A / B / C)

Watch out that the values for the theme names in input[type="radio"] and in css must match.
Also if you set a default theme on the page you should also set the checked attribute on the right input[type="radio"]

[JessMTermini]

OMG I FOUND THE ROGUE CHECK!! LOL... wow what a JOURNEY!!! lmao...holy cow, I made so many toggles, one lone one had a checked attribute hard coded in the html (I had a some of them all in the same html file lol) and it was affecting them all... THANK THE LORD ahahahahaha.... I say journey cause, new project, new to daisy, wasn't sure of my config, so tried millions of variations of config lol, all for it to be in the end, one lone checked attribute. But it was a GOOD journey as now I think I leanred everything there is to possibly know about daisyui config and theme toggles lol. I am officially now a daisyui theme toggle config expert lmao (ok maybe not a full blown expert per say - yet -, I got the all my tri-toggles working - first paint - browser respected pref -, but the simple swap toggle is in another html file, not sure about that one yet, I will have to continue to dig into that one) :P XP hahahaha.

Ahhh...I can rest easy now. Oh My God lol....!!!! Wooooweeeeeee Gotta love it. lol

ty for your help and for responding...