I'm adding color themes (light/dark mode) to my application however, the styling does not affect my modal, built using react-modal. I am using data attributes and CSS variables to switch between themes, with the attribute within a div with class name App. The issue is that the React Portal that contains the Modal is a sibling element to the root div, which is the parent div to App. Thus, the Modal only inherits the CSS variables from :root and not from the [data-theme='dark'] data attribute. What would be the best workaround to this issue? I've thought of the following possible solutions:

• Expanding the scope of the data attributes so that it lies in body, therefore encompassing the React Portal.
• Setting the colors for the React Modal through JavaScript and getting the proper colors from other elements.
• Reworking the way I am implementing different themes (least favorable solution as it works for all other parts of my application)

Screenshots of DOM: Modal closed

Modal open

CSS:

:root {
  --color-background: #F8F0E3;
  --color-background-secondary: #E3EBF8;
  --color-background-third: #E3EBF8;
  --color-text: #000000;
  --color-text-alternate: #757575;
  --theme-color-strong: #FFFFFF;
  --color-background-highlight: #6F7378;
  --color-background-opaque: rgba(248, 240, 227, 0.75);
  --color-link: #0000EE;
  --color-button: #FFFFFF;
  --okay-color: #F9E076;
}
[data-theme='dark'] {
  --color-background: #121212;
  --color-background-secondary: #181818;
  --color-background-third: #caced3;
  --color-text: #FFFFFF;
  --color-text-alternate: #FFFFFF;
  --theme-color-strong: #000000;
  --color-background-highlight: #e6e6e6;
  --color-link: #A5C9FF;
  --color-button: #121212;
  --okay-color: #d3c404;
}
.rating-modal{
  top: 40px;
  bottom: 40px;
  border: 1px solid #ccc;
  background-color: var(--color-background);
  overflow: auto;
  border-radius: 4px;
  outline: none;
  padding: 20px;
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 50%;
  height: 80%;
}