Definiciones de color más allá de los esquemas de color claro/oscuro

Soporte
1

Hola, me gustaría saber cómo definir colores para más de un esquema de color, es decir, claro, oscuro, tenue, similar a como funciona Twitter.

Mi problema actual:
Actualmente puedo estilizar los colores claros y oscuros predeterminados que no están listados, como primary-low, en un componente de tema personalizado, pero no sé cómo agregar este modo de color personalizado a un esquema de color diferente.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins};

}
2

Hola :wave:

Discourse puede manejar dos esquemas de color: Claro y Oscuro. Así que cuando cambies tu dispositivo a modo oscuro, usará la configuración del sitio default dark mode color scheme id (ID del esquema de color predeterminado en modo oscuro) por defecto.

Puedes configurar más paletas de colores personalizadas en Discourse.

Puedes configurar nuevas paletas de colores en la página /admin/customize/colors.

o

Por ejemplo, si usas un tema personalizado, puedes configurar esto en el archivo about.json.
Como usamos, por ejemplo, en el tema FKB Pro.

En este caso, agregará estas paletas de colores a /admin/customize/colors.

Cuando se agreguen estas paletas de colores, los usuarios podrán seleccionarlas en la página de preferencias de la interfaz de usuario. Si la habilitas.

Screenshot 2024-01-06 at 9.43.56
Screenshot 2024-01-06 at 9.43.56512×134 4.66 KB

dark-light-choose()

La función dark-light-choose() solo puede manejar los dos esquemas de color claro/oscuro, no la paleta de colores. Te sugiero que la uses solo para crear variables de color personalizadas, no para sobrescribir las predeterminadas. Para sobrescribir las variables de color predeterminadas, puedes hacer lo que te mostré anteriormente.

Si el usuario configura una paleta de colores diferente a la predeterminada del sitio Claro/Oscuro en la página de preferencias de la interfaz de usuario, usará la variable de color que creaste con dark-light-choose(), para todas las paletas de colores claras u oscuras para los esquemas de color.

Esta es una de las razones por las que creé el siguiente Theme component.

En este componente de tema puedes apuntar por separado a los color-scheme="id"s.

Entonces, lo que puedes hacer es :arrow_down_small:

Crear paletas de colores (Claro, Tenue, Oscuro)

Usa el componente anterior para hacer modificaciones en los colores del color-scheme="id" Tenue u otras cosas, si es necesario.

2 Me gusta
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.