Trying to implement dark mode in my app involves adding the following to the root element:
<div id="dark">
Then, in CSS, styling it like this:
#dark {
background-color: #1A1A2E;
}
To customize each DOM element using classes, such as cards:
#dark .card-body {
background-color: #16213E !important;;
}
#dark .card-header {
background-color: #0F3460 !important;
}
This method works well, except for modals. It seems that because modals are not rendered initially, the dark styling does not apply to them.
Adding id="dark" to each modal solves the issue:
#dark .modal-header {
background-color: #0F3460 !important;
}
#dark .modal-body {
background-color: #16213E !important;;
}
#dark .modal-footer {
background-color: #16213E !important;;
}
<Modal
// Dark mode doesn't automatically apply to modals since they're not initially rendered
id="dark"
isOpen={this.state.isModalOpen}
toggle={this.toggleModal}
>
<div className="modal-header">
Applying this to every single modal might be cumbersome. Any suggestions on how to address this?