Was anyone able to setup it on Preact.js, which uses Vite.js #81

ItzShubhamDev · 2023-12-20T14:19:41Z

I tried everything I was able to do but no clue, it didn't worked.

my tailwind config file

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  plugins: [require('nightwind')],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

and I added the purejavascript to the vite's index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script>
    var nightwind = {
      beforeTransition: () => {
        const doc = document.documentElement;
        const onTransitionDone = () => {
          doc.classList.remove('nightwind');
          doc.removeEventListener('transitionend', onTransitionDone);
        }
        doc.addEventListener('transitionend', onTransitionDone);
        if (!doc.classList.contains('nightwind')) {
          doc.classList.add('nightwind');
        }
      },

      toggle: () => {
        nightwind.beforeTransition();
        if (!document.documentElement.classList.contains('dark')) {
          document.documentElement.classList.add('dark');
          window.localStorage.setItem('nightwind-mode', 'dark');
        } else {
          document.documentElement.classList.remove('dark');
          window.localStorage.setItem('nightwind-mode', 'light');
        }
      },

      enable: (dark) => {
        const mode = dark ? "dark" : "light";
        const opposite = dark ? "light" : "dark";

        nightwind.beforeTransition();

        if (document.documentElement.classList.contains(opposite)) {
          document.documentElement.classList.remove(opposite);
        }
        document.documentElement.classList.add(mode);
        window.localStorage.setItem('nightwind-mode', mode);
      },
    }
  </script>
  <script>
      (function () {
        function getInitialColorMode() {
          const persistedColorPreference = window.localStorage.getItem('nightwind-mode');
          const hasPersistedPreference = typeof persistedColorPreference === 'string';
          if (hasPersistedPreference) {
            return persistedColorPreference;
          }
          const mql = window.matchMedia('(prefers-color-scheme: dark)');
          const hasMediaQueryPreference = typeof mql.matches === 'boolean';
          if (hasMediaQueryPreference) {
            return mql.matches ? 'dark' : 'light';
          }
          return 'light';
        }
        getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark');
      })()
  </script>
  <title>Vite + Preact</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

the functions from the console returns undefined

brutaldev · 2023-12-21T12:09:36Z

Firstly, you declared the plugins array twice in your config so not sure what that's going to do.

I had a similar situation setting this up with Svelte. The Vite setup for Tailwind includes PostCSS which strips all CSS that is not present in your HTML and since you have no dark classes in the HTML the resulting CSS file will have no classes for you. This is serious problem for something like Nightwind since it dynamically sets classes based on the mode you toggle to and the build CSS will not have these "opposite" classes.

I could only get this to work when disabling PostCSS and using the unprocessed Tailwind CSS file. If there is a way to still use Nightwind and PostCSS together please let us know...

Weird things can also happen if you are using your own dark: class overrides because of this: #71
I suspect when this is fixed then things will work a lot better.

ItzShubhamDev · 2023-12-21T14:10:34Z

@brutaldev thanks for your help

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Was anyone able to setup it on Preact.js, which uses Vite.js #81

Was anyone able to setup it on Preact.js, which uses Vite.js #81

ItzShubhamDev commented Dec 20, 2023

brutaldev commented Dec 21, 2023 •

edited

Loading

ItzShubhamDev commented Dec 21, 2023

Was anyone able to setup it on Preact.js, which uses Vite.js #81

Was anyone able to setup it on Preact.js, which uses Vite.js #81

Comments

ItzShubhamDev commented Dec 20, 2023

brutaldev commented Dec 21, 2023 • edited Loading

ItzShubhamDev commented Dec 21, 2023

brutaldev commented Dec 21, 2023 •

edited

Loading