Определения цветов для более чем светлых/тёмных цветовых схем

Поддержка
1

Привет! Я хотел бы узнать, как определить цвета для нескольких цветовых схем, например, светлой, тёмной и приглушённой, аналогично тому, как это сделано в Twitter.

Моя текущая проблема:
Я могу стилизовать цвета по умолчанию для светлой и тёмной тем, которые не указаны явно, например primary-low, в пользовательском компоненте темы, но не знаю, как добавить этот пользовательский режим цвета в другую цветовую схему.

$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

Привет :wave:

Discourse поддерживает две цветовые схемы: светлую и тёмную. Поэтому при переключении вашего устройства в тёмный режим по умолчанию будет использоваться настройка сайта default dark mode color scheme id.

Вы можете добавить в Discourse дополнительные настраиваемые цветовые палитры.

Новые цветовые палитры можно настроить на странице /admin/customize/colors.

Или

Например, если вы используете пользовательскую тему, вы можете задать их в файле about.json.
Как это сделано, например, в теме FKB Pro.

В этом случае эти цветовые палитры будут добавлены в /admin/customize/colors.

После добавления этих цветовых палитр пользователи смогут выбирать их на странице настроек профиля, если вы включите эту возможность.

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

dark-light-choose()

Функция dark-light-choose() работает только с двумя цветовыми схемами: светлой и тёмной, но не с цветовыми палитрами. Я рекомендую использовать её только для создания пользовательских цветовых переменных, а не для переопределения стандартных. Чтобы переопределить стандартные цветовые переменные, вы можете сделать то, что я показал выше.

Если пользователь выберет другую цветовую палитру, отличную от стандартной светлой/тёмной схемы сайта, на странице настроек профиля, то для всех светлых или тёмных палитр будет использоваться цветовая переменная, созданная с помощью dark-light-choose().

Одной из причин, по которой я создал следующий компонент темы, является именно это.

В этом компоненте темы вы можете отдельно настраивать color-scheme="id".

Итак, что вы можете сделать: :arrow_down_small:

Создайте цветовые палитры (Light, Dim, Dark)

Используйте компонент выше для внесения изменений в цвета палитры Dim color-scheme="id" или другие элементы, если это необходимо.