`mode-watcher` not working for a fresh project

[shyakadavis]

Hi, @huntabyte

Thanks for this. Been finding some hacks occasionally to make this work.

That said, the package is not working for me.

Context:

I just created a new repo, following the shadcn-svelte docs, and then proceeded to add mode-watcher.

I don't know why, but the package is not working for me. I tried to see if it's an issue with my browser, and tried others, but all failed.

• I tried these browsers: Firefox (both standard & for devs) | Safari | Arc | Chrome, but nothing.

• I also noticed, that when toggling the theme, system-wise, (I'm on Mac), the class name is not toggled and stays as to how it was you first hit the url.

I don't know if you require any more context, but if any, please let me know.

[ollema]

can you share a reproduction? installing mode-watcher, adding the <ModeWatcher> component to the root layout and calling for example setMode or toggleMode works for me

[ollema]

I also noticed, that when toggling the theme, system-wise, (I'm on Mac), the class name is not toggled and stays as to how it was you first hit the url.

aha, just saw this. listening for live changes in the system-wise theme is not supported by mode-watcher out of the box right now. if you toggle the system-wise theme, you should be able to see the theme change if you perform a hard refresh of the site.

I can try to add this functionality today.

@shyakadavis could you try and clarify exactly what is not working? is it only the automatic changing whenever the system theme changes or is nothing working at all (even on hard refresh or when changing the mode with setMode or toggleMode or resetMode

[shyakadavis]

Hey, @ollema

Thanks for the reply.

So, here's my app.postcss:

/* Supports weights 100-900 */
@import '@fontsource-variable/inter';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;

        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;

        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;

        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;

        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;

        --primary: 240 5.9% 10%;
        --primary-foreground: 0 0% 98%;

        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;

        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;

        --ring: 240 10% 3.9%;

        --radius: 0.5rem;
    }

    .dark {
        --background: 240 10% 3.9%;
        --foreground: 0 0% 98%;

        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;

        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;

        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;

        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;

        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;

        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;

        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;

        --ring: 240 4.9% 83.9%;
    }
}

@layer base {
    * {
        @apply border-border relative;
    }

    html,
    body {
        @apply h-full;
    }

    body {
        @apply bg-background text-foreground antialiased font-sans;
        font-feature-settings:
            'rlig' 1,
            'calt' 1;
    }
}

I expected the dark css variables to replace the default ones when the system changes to dark.

This is not what happens. The default css vars still remain. I literally just created 2 new projects using shadcn-svelte to test this, but they all behave like this. It's very strange to be honest. 😅

@shyakadavis could you try and clarify exactly what is not working? is it only the automatic changing whenever the system theme changes or is nothing working at all (even on hard refresh or when changing the mode with setMode or toggleMode or resetMode

• So, automatic changing does not work, and hard refresh doesn't work either.
• What works, is manually toggling the theme, and in the html doc, the dark class gets toggled. But the issue is, the css variables aren't swapped. I have no idea why.

Does this make sense, or should I share a repro? Also, if you would be so kind, could you share the repo where it works for you. Perhaps I messed up somewhere, or we have different config files. I want to compare.

Thank you.

I can try to add this functionality today.

This would be great. Thanks in advance.

[ollema]

hmm, I am also seeing this. it makes no sense to me at all. however, it should not be related to mode-watcher I am pretty sure. as you said, the toggling of the dark class works but the CSS variables seem stuck on the non .dark variants!

will continue to investigate

[ollema]

@shyakadavis I'm sorry but I could not figure it out and I need to leave soon.

I have no idea why this is happening, but it should be related to node-watcher. even with a fresh repo and manually adding the dark class, nothing happens.

I tried to rollback most other dependencies but for some reason it's still not working. I even tried using the same package.json from a project that I know is working, so no clue there either

[huntabyte]

Something that gets me from time to time is when I go from one project to another, but on the same address (localhost:5173). Did you all try clearing local storage and then trying it out?

[ollema]

@huntabyte yes - but this is happening even without mode-watcher.

here is a fresh project with shadcn-svelte: https://github.com/ollema/dark-mode-repro

I can not get this to toggle dark mode by adding class="dark" to the html element (which is what I expected)

[ollema]

in fact, from what I can see only the non .dark rules are "shipped":

that is not the case for my working shadcn-svelte projects:

[shyakadavis]

@shyakadavis I'm sorry but I could not figure it out and I need to leave soon.

Hey, @ollema It's cool. Will keep trying on my end. Let's recap later on.

Did you all try clearing local storage and then trying it out?

@huntabyte I can also confirm that clearing everything didn't resolve it.

in fact, from what I can see only the non .dark rules are "shipped":

Yeah. Forgot to mention this. I wonder what's affecting what here. Have no clue at the moment.

---

Quick question @huntabyte, could the issue be coming from https://github.com/huntabyte/shadcn-svelte, given some recent changes, perhaps the likes of class lists and whatnot?

[ollema]

@shyakadavis good news!

@huntabyte and @AdrianGonz97 figured out that the issue was the you need to mention dark somewhere in your project for tailwind to include it in the output.

therefore, adding a comment somewhere with // dark should be enough. ~could even add it to utils.ts which is what @huntabyte is planning to do in the future anyways.~

the plan is also to include this information in the upcoming dark mode docs for shadcn-svelte

edit: instead of adding it to utils.ts, you could also add it to the tailwind safelist and I believe this is what will actually be used in shadcn-svelte in the future

[shyakadavis]

Hey, @ollema

Thank you very much. Both solutions worked just fine.

Before I close this, I wanted to kindly ask if you plan to work on the auto theme sync with changes from the system. Hard refresh is nice and all, but I feel like that shouldn't be left like this.

If you don't have the time, you could point me in the right direction (resources-wise), and I'd be glad to try and solve it and open a P.R.

What do you think?

[ollema]

I do plan to work on that as it is something I would want as well. feel free to close this issue and I can create a new one :)