¿Sigue siendo esta la solución para verificar si está en modo oscuro?

[pfaffman (Jay Pfaffman)]

Continuando la discusión de Ninguna clase específica para el modo oscuro:

@awesomerobot

¿Esto lograría lo que necesitas? Esto tendría que agregarse a color_definitions.scss

@if #{schemeType()} == dark {
    body {
        background: red;
    }
} @else {
     body {
        background: blue;
    }
}

Sin embargo, una clase parece útil, probablemente podamos agregar una.

Tengo un componente de tema que está cambiando el logo del sitio según la categoría en la que se encuentre el usuario y agregando logos a las categorías en la barra lateral, y ahora quieren cambiar a un logo diferente en el modo oscuro.

Algo como esto:

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

Soy terrible con CSS, pero parecería mucho más fácil si hubiera una clase “esto-es-modo-oscuro”. O tal vez algo como lo anterior pueda funcionar.

O tal vez si esto fuera un componente de tema “real” con configuraciones (ahora mismo está codificado a mano como lo anterior), entonces sería lo suficientemente fácil como para incluir esas configuraciones en el CSS. Esto parece lo que debería hacer de todos modos, ¿verdad?

[david (David Taylor)]

Casualmente, ¡esto es algo que hemos estado discutiendo internamente esta semana! Un par de pruebas de concepto de PR están aquí:

• DEV: Introduce `html.dark-mode` and `html.light-mode` classes by davidtaylorhq · Pull Request #31397 · discourse/discourse · GitHub

• DEV: Add reactive helpers to `interfaceColor` service by davidtaylorhq · Pull Request #31415 · discourse/discourse · GitHub

Tenga en cuenta que estos son solo experimentos para ayudar con nuestra reflexión; no hay garantía de que se fusionen.

En cuanto a “ahora mismo”, la mejor opción es probablemente usar el componente <LightDarkImg de esta manera:

app/assets/javascripts/discourse/app/components/category-logo.gjs

[Cricket (📚 The Professor of Pyrrhia)]

Tiene sentido. Tuve el mismo problema una vez, pero @david, eso me habría funcionado.
Además, ¿las dificultades para otorgar insignias se considerarían un error o algo más?

[awesomerobot (Kris)]

@Cricket

Además, ¿las dificultades para otorgar insignias se considerarían un error o algo más?

Podría ser un error, pero necesitaríamos más detalles para saberlo con certeza; además, no está relacionado con este tema, por lo que lo mejor sería buscar el problema y, si no encuentras una respuesta, iniciar un nuevo tema explicando lo que intentas y dónde falla.

[Alteras (Steven Chang)]

Una solución puramente CSS probablemente usaría la variable CSS --scheme-type, o incluso la propiedad color-scheme que se añadió hace unas horas (¡genial!), con @container style queries o light-dark().

app/assets/stylesheets/color_definitions.scss

Desafortunadamente, light-dark() solo funciona con valores de color. Podrías usar @container style queries dirigidas a la propiedad color-scheme (firefox aún no soporta style queries para propiedades personalizadas). No he podido probar la idea ya que mi entorno de desarrollo está caído actualmente.

Tener una clase dedicada .dark-mode o .light-mode en la raíz sería definitivamente lo más fácil de usar.