Menu
I'm building a React / Redux app combined with some styling libraries. By looking at the documentation of both Mantine and TailwindCSS, I found pages treating about how to make darkmode / lightmode work in the app for each of them.
As I understand, Tailwind will use a class that we have to append and remove from the <html> tag of the webpage. While Mantine asks us to wrap our application inside the MantineProvider with the colorScheme property defined.
But... does that mean that my darkmode / lightmode switchers will have to change both of this values (the <html> class, and the colorScheme property) ? Is there a better way to handle this ?
511
asked Sep 15 '25 19:09
As per tailwind docs https://tailwindcss.com/docs/dark-mode#customizing-the-class-name Some frameworks (like NativeScript) have their own approach to enabling dark mode and add a different class name when dark mode is active.
You can customize the dark mode selector name by setting darkMode to an array with your custom selector as the second item:
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class', '[data-mode="dark"]'],
// ...
}
As Mantime uses --> data-mantine-color-scheme
When MantineProvider is mounted, it sets data-mantine-color-scheme attribute on <html /> element to the value that the user has selected previously or to the value of defaultColorScheme prop. data-mantine-color-scheme attribute is used in all components styles to determine which colors should component use.
https://mantine.dev/theming/color-schemes/#data-mantine-color-scheme-attribute
So combining info from both docs refereces , here is(tailwind.config.js) how I mananaged to get enable dark versions using tailwind utility classes
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class', '[data-mantine-color-scheme="dark"]'],
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
corePlugins: { preflight: false },
theme: {
extend: {},
},
plugins: [],
};
Now in our components, we can use something like
import { Button, Group, Input } from '@mantine/core';
import mycomponent from './MyComponent.module.css';
export function MyComponent() {
return (
<>
<Group>
<h1 className={mycomponent.heading}>MyComponent</h1>
<h2>Start editing to see some magic happen!</h2>
<Button className="dark:bg-red-400">Button</Button>
<Input placeholder="Heys"></Input>
</Group>
</>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With