Ignore Tailwind CSS dark attribute

Question

I am building a simple web page in Svelte using shadcn-svelte. Some of the components they ship seem to add the dark attribute as a default to my HTML element during building which is something I do not want. Is there a away to set up my Tailwind config file to simply ignore the dark attribute on my HTML tag? Thank you.

Answer 1

No, Tailwind CSS doesn't currently offer a direct way to exclude the dark attribute from the HTML tag through the configuration file.

However, there is just one way of workarounds you can consider:

Force your browser to be in light mode in every prefer-color-scheme.

You can just add this code snippet in your App.svelte or everywhere you prefer in your Svelte project:

<script>
  import { onMount } from 'svelte';

  // it just preferred color scheme natively in your browser
  function setPreferredColorScheme(mode = "light") {
    console.log("changing")
    for (var i = document.styleSheets[0].rules.length - 1; i >= 0; i--) {
      var rule = document.styleSheets[0].rules[i].media;
      if (rule.mediaText.includes("prefers-color-scheme")) {
        console.log("includes color scheme")
        switch (mode) {
          case "dark":
            console.log("dark")
            rule.appendMedium("original-prefers-color-scheme");
            if (rule.mediaText.includes("light")) rule.deleteMedium("(prefers-color-scheme: light)");
            if (rule.mediaText.includes("dark")) rule.deleteMedium("(prefers-color-scheme: dark)");
            break;
          case "light":
            console.log("light")
            rule.appendMedium("(prefers-color-scheme: light)");
            rule.appendMedium("(prefers-color-scheme: dark)");
            if (rule.mediaText.includes("original")) rule.deleteMedium("original-prefers-color-scheme");
            break;
          default:
            console.log("default")
            rule.appendMedium("(prefers-color-scheme: dark)");
            if (rule.mediaText.includes("light")) rule.deleteMedium("(prefers-color-scheme: light)");
            if (rule.mediaText.includes("original")) rule.deleteMedium("original-prefers-color-scheme");
        }
        break;
      }
    }
  }



  let isDarkMode = false;


  onMount(() => {
    isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if(isDarkMode){
      // it switch browser theme to light if user's system theme was dark
      setPreferredColorScheme('light')
    }
  });

</script>


<style>
  /* apply the light color-scheme globally */
  :root {
    @media (prefers-color-scheme: dark) {
      color-scheme: light;
    }
  }
</style>

It can do the trick... it's working like a charm...