Implement Dark Mode with default Components

[armandleopold]

Hello, this would be a great addition to the lib if you could create a dark mode with your components !

Keep up the good work !

[sajadevo]

The v3 will come with the darkmode for components by default.

[GaiusValerius]

Hello @sajadevo, may I politely ask when exactly v3 is due to be released?

[Kansuler]

withMT is overriding settings from the default tailwind theme, specifically it's the overriding of the color block that cause dark mode to not work.

If you want a temporary solution, you could make your own withMT function, that instead extends the color block.

Here is an example.

import defaultTheme from 'tailwindcss/defaultTheme';
// import withMT from "@material-tailwind/html/utils/withMT";

import merge from "deepmerge";
import colors from "@material-tailwind/html/theme/base/colors";
import typography from "@material-tailwind/html/theme/base/typography";
import shadows from "@material-tailwind/html/theme/base/shadows";
import breakpoints from "@material-tailwind/html/theme/base/breakpoints";

const materialTailwindConfig = {
  content: [],
  theme: {
    fontFamily: typography,
    boxShadow: shadows,
    screens: breakpoints,
    extend: {
      colors, // This is the change from the original.
    }
  },
  safelist: ["hidden"],
  plugins: [],
};

/**
 * Merge @material-tailwind and Tailwind CSS configurations
 * @param {object} tailwindConfig - Tailwind config object
 * @return {object} new config object
 */
function withMT(tailwindConfig) {
  const themeFont = materialTailwindConfig.theme.fontFamily;

  if (tailwindConfig.theme.fontFamily) {
    const { sans, serif, body } = tailwindConfig.theme.fontFamily;

    themeFont.sans = sans || themeFont.sans;
    themeFont.serif = serif || themeFont.serif;
    themeFont.body = body || themeFont.body;
  }

  return merge(materialTailwindConfig, { ...tailwindConfig });
}

/** @type {import('tailwindcss').Config} */
export default withMT({
  content: ['./src/**/*.{html,js,svelte,ts}'],
  darkMode: 'selector',
  theme: {},
  },
  plugins: [],
});