React : Modals (or Dialogs) doesnt inherit the dark mode styles (tailwind)

Question

I have styled my app for both dark and light mode, and the user can change the theme mode from UI. My code looks somethings like this

import React, { useState } from 'react';

const App = () => {
  const [themeMode, setThemeMode] = useState('dark');

  return (
    <main className={` ${themeMode}`}>
      
   {/* This  works fine light and for dark mode */}
        <p className="bg-white text-black dark:bg-black dark:text-white">
        hello world</p>

  {/* rest of my apps components */}
    </main>
  );
};

export default App;

This worked for me on every component i styled with tailwind css.

But it didnt worked for me when i tried to style my modals

P.S: The modals i used are from headlessui

import { useState } from 'react'
import { Dialog } from '@headlessui/react'

function MyDialog() {
  let [isOpen, setIsOpen] = useState(true)

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
      <Dialog.Panel>
        <Dialog.Title>Deactivate account</Dialog.Title>
        <Dialog.Description>
          This will permanently deactivate your account
        </Dialog.Description>


       {/* This dont work for dark mode */}
        <p className="bg-white text-black dark:bg-black dark:text-white">
          Are you sure you want to deactivate your account? All of your data
          will be permanently removed. This action cannot be undone.
        </p>

        <button onClick={() => setIsOpen(false)}>Deactivate</button>
        <button onClick={() => setIsOpen(false)}>Cancel</button>
      </Dialog.Panel>
    </Dialog>
  )
}

Diego Ammann · Answer 1 · 2023-08-01T11:59:19.537

Check this

import { Dialog } from '@headlessui/react';

const Modal = ({ isOpen, onClose, children }) => {
  const themeMode = 'dark'; // replace this with your state or props value

  return (
    <Dialog open={isOpen} onClose={onClose} class={`${themeMode === 'dark' ? 'bg-black text-white' : 'bg-white text-black'}`}>
      {children}
    </Dialog>
  );
};

const MyDialog = () => {
  let [isOpen, setIsOpen] = useState(true);

  return (
    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
      <Dialog.Panel>
        <Dialog.Title>Deactivate account</Dialog.Title>
        <Dialog.Description>
          This will permanently deactivate your account
        </Dialog.Description>

        <p>
          Are you sure you want to deactivate your account? All of your data
          will be permanently removed. This action cannot be undone.
        </p>

        <button onClick={() => setIsOpen(false)}>Deactivate</button>
        <button onClick={() => setIsOpen(false)}>Cancel</button>
      </Dialog.Panel>
    </Modal>
  );
};

it worked somehow if i pass the `light` or ` dark` class to the modal element , which coming is from a parent component, but it is not ideal as i have to do it in every modal component in my app — Ahmer Saud, Aug 01 '23 at 11:35
Appreciates your help Diego, someone else gave the answer [here](https://stackoverflow.com/questions/72071015/darkmode-not-working-on-tailwind-headless-ui) — Ahmer Saud, Aug 02 '23 at 07:18

React : Modals (or Dialogs) doesnt inherit the dark mode styles (tailwind)

1 Answers1