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

Поддержка
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().

Это одна из причин, по которой я создал следующий компонент темы Customization > Theme component.

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

Таким образом, вы можете сделать следующее :arrow_down_small:

Создать цветовые палитры (Светлая, Тёмная, Dim)

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