Настройка стилей

@waline/client предоставляет набор CSS-переменных. С их помощью можно легко настроить стиль Waline:

Кроме того, @waline/client имеет встроенную поддержку тёмного режима.

Поддержка тёмного режима

Вы можете включить поддержку тёмного режима Waline с помощью параметра dark.

Обычно сайты включают поддержку тёмного режима двумя способами:

• использование селектора @media для автоматического переключения в соответствии с цветовой схемой устройства через prefers-color-scheme
• динамическое применение другого цветового стиля тёмного режима путём изменения атрибутов и классов корневого элемента DOM (html или body).

Если вы включаете Waline на сайте первого типа, достаточно установить для dark значение 'auto'.

Для сайтов второго типа нужно задать в dark CSS-селектор, при котором тёмный режим становится активным. Вот несколько примеров:

Примеры

• vuepress-theme-hop v2: включает тёмный режим, устанавливая data-theme="dark" на самом теге <html>. Поэтому в качестве параметра dark нужно указать 'html[data-theme="dark"]'.

• hexo-theme-fluid: включает тёмный режим, устанавливая data-user-color-scheme="dark" на самом теге <html>. Поэтому в качестве параметра dark нужно указать 'html[data-user-color-scheme="dark"]'.

Иконки метаданных

Если вы хотите добавить иконки к метаданным комментариев пользователей, подключите waline-meta.css.

Пользователи CDN могут подключить его по следующей ссылке:

<!-- Meta icon (optional) -->
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline-meta.css" />

Пользователи NPM могут подключить его так:

import '@waline/client/meta';

Поддержка RTL

@waline/client поддерживает RTL-разметку, достаточно добавить dir="rtl" в тег <html>.

Настройка стилей

CSS-переменные

Значения по умолчанию для CSS-переменных, используемых Waline в обычном и тёмном режиме, приведены в разделе Справочник клиента → CSS-переменные.

Если они отличаются от стиля вашего сайта, соответствующую CSS-переменную можно переопределить.

Тень блока

Если вы используете тему, в которой вместо границ применяются тени (box-shadow), можно изменить отображение Waline, изменив --waline-border и --waline-box-shadow, например:

:root {
  --waline-border: none;
  --waline-box-shadow: 0 12px 40px rgb(134 151 168 / 25%);
}

@media (prefers-color-scheme: dark) {
  body {
    --waline-box-shadow: 0 12px 40px #0f0e0d;
  }
}

Дополнительно

Если перечисленных CSS-переменных недостаточно для ваших требований к стилю Waline, вы можете написать собственный css-файл.