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

ItzShubhamDev commented 11 months ago

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 commented 11 months ago

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: https://github.com/jjranalli/nightwind/issues/71 I suspect when this is fixed then things will work a lot better.

ItzShubhamDev commented 11 months ago

@brutaldev thanks for your help

jjranalli / nightwind

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