Problema con selector de modo oscuro

[daniperezluna]

Al cambiar entre los distintos modos se rompe el css, el selector ya no se queda sticky en la parte superior como si pasa cuando está seleccionado sistema. Esto influye también a futuros desarrollos en los que se juega con los position de los elementos.

[jelowin]

Parece que tiene que ver con estos estilos de global.css

html[scheme='light-mode'] body {
  --app-background:
    radial-gradient(#cdd0ff 1px, transparent 0),
    radial-gradient(#cdd0ff 1px,#fefefe 0);
}
html[scheme='light-mode'] #__next {
  filter: invert(0) hue-rotate(0deg);
}

html[scheme='light-mode'] #__next img,
html[scheme='light-mode'] #__next span[role='img'] {
  filter: invert(0) hue-rotate(0deg);
}

html[scheme='dark-mode'] body {
  --app-background:
    radial-gradient(#15155a 1px, #111 0),
    radial-gradient(#15155a 1px,#111 0);
}
html[scheme='dark-mode'] #__next {
  filter: invert(1) hue-rotate(180deg);
}

html[scheme='dark-mode'] #__next img,
html[scheme='dark-mode'] #__next span[role='img'] {
  filter: invert(1) hue-rotate(180deg);
}

---UPDATE--- En concreto son estos dos estilos los que provocan el fallo

html[scheme="light-mode"] #__next {
  filter: invert(0) hue-rotate(0deg);
}
html[scheme="dark-mode"] #__next {
  filter: invert(1) hue-rotate(180deg);
}

[midudev]

He hecho merge de la PR de @jelowin. A ver si puedes comprobar si sigue pasando. :)

[daniperezluna]

Para el selector de modo oscuro sirve este fix, pero para los tooltip del mapa no. Sigue ocurriendo lo mismo, si seleccionas un modo diferente al del sistema y se le agrega a la etiqueta HTML el scheme dark o light falla. Es como si perdiera la referencia del parent, ayer lo estuvimos hablando por privado y cuando hizo Jelowing el commit lo probé.

[daniperezluna]

He estado observando que en safari funciona correctamente sin aplicar ningún tipo de cambio al código. Probando el enlace que crea Vercel para la preview de mi PR he visto que todo se muestra bien Probad a verlo en Safari https://covid-vacuna-git-fork-daniperezluna-main.midudev.vercel.app/

[daniperezluna]

He encontrado esto en la documentación del filter, tiene todo el sentido del mundo, al crear ese bloque, el descendiente pierde la referencia:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

https://drafts.fxtf.org/filter-effects/#FilterProperty

[sergioedo]

vaya currazo @daniperezluna, al final llegaste al origen del problema. @midudev ¿ves viable abordar el dark mode sin usar el "truco" de aplicar estilos globales? ¿o otro truco para que un componente no se vea afectado? (intenté evitar el filter sobre el mapa con algun selector, pero no domino nada CSS...) Al final estamos alterando de manera global los estilos, cuando la gracia de los componentes es que tengan estilado independiente.

[midudev]

Sí, al final lo que se podría hacer es un dark mode a mano, que era la idea original. Habría que sacar tiempo y usar más las variables para hacerlo. :D

[sergioedo]

Ahi va la PR, @midudev @daniperezluna @jelowin echadle un vistazo a ver cómo la veis (es mi primer dark mode!) Intenté tocar lo mínimo (por suerte había mucho ya en ficheros CSS separados)