Estoy agregando temas de color (modo claro/oscuro) a mi aplicación, sin embargo, el estilo no afecta mi modal, construido usando react-modal. Estoy usando atributos de datos y variables CSS para cambiar entre temas, con el atributo dentro de un div con el nombre de clase App. El problema es que el React Portal que contiene el Modal es un elemento hermano del div raíz, que es el div principal de la aplicación. Por lo tanto, Modal solo hereda las variables CSS de :root y no del atributo de datos [data-theme='dark']. ¿Cuál sería la mejor solución a este problema? He pensado en las siguientes posibles soluciones:

• Ampliar el alcance de los atributos de datos para que se encuentren en el cuerpo, por lo tanto, abarcando el Portal de React.
• Establecer los colores para React Modal a través de JavaScript y obtener los colores adecuados de otros elementos.
• Reelaborando la forma en que estoy implementando diferentes temas (solución menos favorable ya que funciona para todas las demás partes de mi aplicación)

Capturas de pantalla de DOM: modal cerrado

Modalidad abierta

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%; }