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 gestionar dos esquemas de color: Claro y Oscuro. Por lo tanto, cuando cambies tu dispositivo al modo oscuro, utilizará por defecto el esquema de color oscuro configurado en la opción default dark mode color scheme id del sitio.

Puedes añadir paletas de color personalizadas a Discourse.

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

o

Por ejemplo, si utilizas un tema personalizado, puedes establecer estos valores en el archivo about.json.
Así lo hacemos, por ejemplo, en el tema FKB Pro.

En este caso, se añadirán estas paletas de colores a /admin/customize/colors.

Una vez añadidas estas paletas de colores, los usuarios podrán seleccionarlas en la página de preferencias de usuario, si lo 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 gestionar los dos esquemas de color claro/oscuro, no las paletas de color. Te sugiero utilizarla únicamente para crear variables de color personalizadas, no para sobrescribir las predeterminadas. Para sobrescribir las variables de color predeterminadas, puedes hacer lo que he mostrado anteriormente.

Si el usuario configura una paleta de colores diferente a la predeterminada del sitio (Claro/Oscuro) en la página de preferencias de usuario, entonces se utilizarán las variables de color que creaste con dark-light-choose() para todas las paletas de color claro u oscuro de los esquemas de color.

Esta es una de las razones por las que creé el siguiente componente de tema Customization > Theme component.

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

Por lo tanto, lo que puedes hacer es :arrow_down_small:

Crear paletas de colores (Claro, Tenue, Oscuro)

Utilizar el componente anterior para realizar modificaciones en los colores del esquema de color "id" Tenue u otras cosas, si es necesario.