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

[awhitford]

Yeah, that's pretty awesome! How about this gets integrated into Theme Controller, or a variant?

[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.