Targeting modals in CSS through element_id .className does not work-CodePudding

I am trying to implement dark mode in my app.
The idea is to add this to the root element:

  <div id="dark">

And then this in CSS:

#dark {
  background-color: #1A1A2E;
}

And then in Css, customize each dom element by using classes. For example, here I will work on cards:

#dark .card-body {
  background-color: #16213E !important;;
}

#dark .card-header {
  background-color: #0F3460 !important;
}

Now, this works perfectly fine.
But, with Modals, it does not work. I think it's because Modals are not rendered initially so for some reason the dark style does not apply to them.

What worked though is adding id="dark" to each modal:

#dark .modal-header {
  background-color: #0F3460 !important;
}

#dark .modal-body {
  background-color: #16213E !important;;
}

#dark .modal-footer {
  background-color: #16213E !important;;
}

  <Modal
    // dark doesn't get applied automatically for modals because apparently modals are not rendered in the beginning
    id="dark"
    isOpen={this.state.isModalOpen}
    toggle={this.toggleModal}
  >
    <div className="modal-header">

But, it'll be a pain to apply this to every single modal. Any idea how to fix this?

CodePudding user response：

Modal should be the descendant of a tag which has id="dark". It is loaded by the script right below the script tag and you are trying to put 'dark' id on some div tag and the modal doesn't lie inside it, thus the CSS selector not targeting it.

So, you need to put id="dark" on the body tag.