¿Cómo cambiar un elemento CSS según el modo oscuro o claro?

[jordan-violet]

No pareció que encontrara una respuesta definitiva al buscar, pero quiero cambiar un elemento CSS de una manera para oscuro y de otra para claro.

¿Cuál es la mejor manera de lograr esto en Discourse?

[Lilly (Lillian Louis)]

Sospecho que este tema puede ayudarte.

Use color scheme color if dark scheme, otherwise use my color in theme

I want to do something like this .some-link { @if var(--scheme-type) == 'dark' { color: var(--primary); } @else { color: #3b5998; } but of course it is not possible because there is no if in CSS and SCSS is not processed at runtime. And as far as I can see Discourse does not add any classes to indicate whether the dark scheme is active, and CSS does not allow custom properties in selectors. Any ideas what could be the best workaround?

[jordan-violet]

No creo que pueda editar color_definitions.css ya que soy un cliente empresarial que CDCK está alojando. Supongo que tendré que contactarlos al respecto entonces.

¡Gracias, Lilly!

[Lilly (Lillian Louis)]

creo que puedes anularlo con tu propio CSS en otro tema o componente no estoy seguro de cómo funciona esto, así que voy a experimentar con él hoy y ver si puedo crear una condición CSS de modo oscuro/claro. Siento que esto debería ser posible.

[Lilly (Lillian Louis)]

@jordan-violet

Quiero cambiar un elemento CSS

¿qué elemento CSS quieres cambiar según el modo oscuro/claro?

puedes añadir definiciones de color a la pestaña de definiciones de color de la edición CSS/HTML de un tema (hoja de estilos color_definitions).

[jordan-violet]

¡Disculpa la demora en responder! Estaba buscando cambiar el color de la barra resaltada* en la parte superior de una publicación de respuesta experta en un tema, pero quería resaltar la barra con un color diferente para el tema claro y oscuro.

[Lilly (Lillian Louis)]

@jordan-violet

barra marchita

¿No estoy seguro de lo que quieres decir? ¿Puedes proporcionar una captura de pantalla?

[jordan-violet]

Resaltado** ¡perdón, error de escritura en el móvil!

[manuel (Manuel Kostka)]

@Lilly

Voy a jugar con él hoy y ver si puedo encontrar un CSS condicional de modo oscuro/claro. Creo que esto debería ser posible.

Me encantaría que me demostraran que me equivoco, pero creo que no hay una forma fiable de comprobarlo con CSS.

@sp-jordan-violet, normalmente la forma de hacerlo es usar variables de color de tus esquemas de color oscuro y claro. Puedes comprobar tus valores actuales usando el inspector del navegador. Creo que no puedes añadir nuevas variables que cambien según el esquema de color. Pero hay bastantes variables para elegir y puedes usarlas en cualquier declaración personalizada. Por ejemplo:

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

podría darte un resaltado de publicación como este

[Lilly (Lillian Louis)]

@manuel

Me encantaría que me demostraran lo contrario, pero creo que no hay una verificación confiable que puedas usar con CSS.

sí, tiendo a estar de acuerdo. También he estado experimentando con una solución de JavaScript / CSS, pero aún no funciona nada.

[jordan-violet]

¡Guau, me gusta mucho esta idea!

[Lilly (Lillian Louis)]

Eso se ve muy bien. Bien hecho