Настройка темы

lh-ui-plus предоставляет полноценную систему тем на CSS-переменных: палитра в китайском стиле, тёмная тема, узорные фона, переключение во время выполнения и другие широкие возможности настройки.

Хотите настроить цвета визуально и сразу экспортировать scss? См. Студия тем.

Палитра в китайском стиле

Библиотека берёт за основу традиционную эстетику живописи тушью 水墨丹青 и определяет 8 тематических цветов:

Цвет	Смысл	Основной	hover	Применение
Индиго	синева 青花瓷	`#2B4C7C`	`#3D649E`	основные кнопки, ссылки, состояние фокуса
松花绿 (сосново-зелёный)	зелень бамбуковых теней	`#5B8C5A`	`#6FA36E`	состояние успеха
藤黄 (gamboge)	золотая осенняя листва	`#C4A35A`	`#D4B76F`	состояние предупреждения
朱砂 (киноварь) (опасность)	красная печатная паста	`#B23A3A`	`#C45050`	состояние опасности / ошибки (`--lh-danger-*`)
Тёмно-серый	лёгкие краски тушью	`#7A7A7A`	`#8F8F8F`	информационное состояние
Золотой	благородная старинная роскошь	`#B8860B`	`#D4A843`	декоративные акценты (`--lh-gold-*`)
朱砂-красный (акцент)	акцентный вариант с уклоном в 朱砂	`#C43A31`	`#E85D4A`	акцентный цвет (`--lh-vermilion-*`)
Нефритовый	изящество зелёного бамбука	`#5B8C5A`	`#7AAE7A`	успех / декор (совпадает с 松花绿)

Каждый цвет обычно включает 4 уровня (основной / hover / active / светлый фон), а для основного цвета и золотого дополнительно предусмотрены более светлые тона границ (*-color-border), обеспечивающие подходящий контраст в разных сценариях.

Система тем на CSS-переменных

Все цвета темы реализованы через CSS custom properties (--lh-*), всего 88+ переменных, покрывающих следующие категории:

Переменные цветов

Префикс переменной	Описание	Пример
`--lh-primary-color`	базовое значение основного цвета	`#2B4C7C`
`--lh-primary-color-hover`	основной цвет в состоянии hover	`#3D649E`
`--lh-primary-color-active`	основной цвет в состоянии active	`#1F3A5F`
`--lh-primary-color-bg`	светлый фон основного цвета	`#E8EDF3`
`--lh-success-color`	цвет успеха	`#5B8C5A`
`--lh-warning-color`	цвет предупреждения	`#C4A35A`
`--lh-danger-color`	цвет опасности	`#B23A3A`
`--lh-info-color`	информационный цвет	`#7A7A7A`

Переменные текста

Переменная	Описание	Значение по умолчанию
`--lh-text-primary`	основной текст	`#2C2C2C`
`--lh-text-regular`	обычный текст	`#5A5A5A`
`--lh-text-secondary`	вспомогательный текст	`#8A8A8A`
`--lh-text-placeholder`	плейсхолдер	`#B0B0B0`
`--lh-text-disabled`	отключённый текст	`#C8C8C8`

Переменные границ

Переменная	Описание	Значение по умолчанию
`--lh-border-color-base`	обычная граница	`#D8D3CC`
`--lh-border-color-light`	лёгкая граница	`#E5E0D8`
`--lh-border-radius-base`	базовый радиус скругления	`2px`
`--lh-border-radius-round`	капсульный радиус скругления	`20px`

Переменные фона

Переменная	Описание	Значение по умолчанию
`--lh-bg-color`	фон компонентов	`#FAF6F0` (цвет 宣纸)
`--lh-bg-color-page`	фон страницы	`#F5F0EB`
`--lh-bg-color-overlay`	фон Overlay-маски	`rgba(26, 26, 26, 0.4)`

Переменные теней

Переменная	Описание
`--lh-box-shadow-base`	обычная тень
`--lh-box-shadow-light`	лёгкая тень
`--lh-box-shadow-lighter`	очень лёгкая тень

Переменные шрифтов

Переменная	Описание	Значение по умолчанию
`--lh-font-family`	семейство шрифтов	`Noto Serif SC, STSong, SimSun...`
`--lh-font-size-base`	базовый размер шрифта	`14px`
`--lh-font-size-small`	мелкий размер шрифта	`13px`
`--lh-font-weight-primary`	обычная насыщенность шрифта	`400`
`--lh-font-line-height-primary`	межстрочный интервал	`1.8`

Переменные отступов

Переменная	Значение	Назначение
`--lh-spacing-xs`	`4px`	минимальный отступ
`--lh-spacing-sm`	`8px`	малый отступ
`--lh-spacing-md`	`12px`	средний отступ
`--lh-spacing-base`	`16px`	базовый отступ
`--lh-spacing-lg`	`20px`	большой отступ
`--lh-spacing-xl`	`24px`	очень большой отступ

Переменные Z-Index

Переменная	Значение	Назначение
`--lh-z-index-dropdown`	`1000`	выпадающее меню
`--lh-z-index-modal`	`1050`	модальное окно
`--lh-z-index-tooltip`	`2000`	всплывающая подсказка

Переменные переходов

Переменная	Значение	Описание
`--lh-transition-duration-fast`	`0.25s`	быстрый переход
`--lh-transition-duration-base`	`0.3s`	переход по умолчанию
`--lh-transition-duration-slow`	`0.4s`	медленный переход

Тёмная тема

В библиотеку встроены стили тёмной темы: все CSS-переменные автоматически переключаются на адаптированные значения в тёмном режиме.

Способ 1: composable-функция `useLhTheme`

Composition API

vue

<script setup lang="ts">
import { useLhTheme } from '@lh-ui/vue3'

const { theme, toggleTheme, setTheme } = useLhTheme()
</script>

<template>
  <div>
    <LhButton @click="toggleTheme">
      {{ theme === 'dark' ? 'Светлая тема' : 'Тёмная тема' }}
    </LhButton>
    <LhButton @click="() => setTheme('light')">Светлая</LhButton>
    <LhButton @click="() => setTheme('dark')">Тёмная</LhButton>
  </div>
</template>

Options API

vue

<script>
import { useLhTheme } from '@lh-ui/vue3'

export default {
  setup() {
    const { theme, toggleTheme, setTheme } = useLhTheme()
    return { theme, toggleTheme, setTheme }
  },
}
</script>

<template>
  <div>
    <LhButton @click="toggleTheme">
      {{ theme === 'dark' ? 'Светлая тема' : 'Тёмная тема' }}
    </LhButton>
  </div>
</template>

useLhTheme автоматически сохраняет состояние темы в localStorage (ключ lh-ui-theme) — после обновления страницы тема не теряется.

Способ 2: переключение HTML-атрибутом

Установите на корневом элементе data-theme="dark", чтобы глобально включить тёмную тему:

html

<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
  <!-- ... -->
</html>

Собственные цвета темы (青花瓷 / 松花绿 / 朱砂-красный)

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

Приведённый ниже пример — демонстрация ручного описания пользовательских переменных, значения подобраны для наглядности и не полностью совпадают со встроенными пресетами с теми же именами из раздела Предустановленные темы (cerblue / songhua / zhusha). Чтобы использовать встроенный пресет напрямую, возьмите useLhPresetTheme или getThemeVars(name).

Тема 青花瓷

Основной цвет — глубокий индиго, вдохновлённый традиционным фарфором 青花瓷.

Composition API

vue

<script setup lang="ts">
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-active': '#1F3A5F',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
  'border-color-base': '#C8D6E5',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhButton type="primary">Сине-белый фарфор</LhButton>
    <LhInput placeholder="Поле ввода сине-белого фарфора" />
  </LhConfigProvider>
</template>

Options API

vue

<script>
import { LhConfigProvider, LhButton, LhInput } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton, LhInput },
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhButton type="primary">Сине-белый фарфор</LhButton>
  </LhConfigProvider>
</template>

Тема 松花绿

Бамбуково-зелёные акценты создают свежую и естественную атмосферу.

vue

<script setup lang="ts">
const bambooTheme = {
  'primary-color': '#5B8C5A',
  'primary-color-hover': '#6FA36E',
  'primary-color-bg': '#EDF5EC',
  'success-color': '#5B8C5A',
  'bg-color': '#F6FAF5',
}
</script>

<template>
  <LhConfigProvider :theme-vars="bambooTheme">
    <LhButton type="primary">Тенистая бамбуковая тропа</LhButton>
    <LhTag type="success">Молодая листва</LhTag>
  </LhConfigProvider>
</template>

Тема 朱砂-красный

Основной тон — красная печатная паста 朱砂, подчёркивающий благородную и торжественную атмосферу.

vue

<script setup lang="ts">
const vermilionTheme = {
  'primary-color': '#C43A31',
  'primary-color-hover': '#E85D4A',
  'primary-color-bg': '#FDF0EE',
  'bg-color': '#FFFBF9',
  'border-color-base': '#F0D5CF',
}
</script>

<template>
  <LhConfigProvider :theme-vars="vermilionTheme">
    <LhButton type="primary">Алый указ</LhButton>
  </LhConfigProvider>
</template>

Система узорных фонов

Библиотека предоставляет систему поэтичных узорных фонов в китайском стиле с 6 предустановленными узорами и точным управлением областью применения через белый список patternComponents.

Предустановленные узоры

Название узора	CSS-переменная	Описание
柳叶 (ивовый лист)	`var(--lh-pattern-willow)`	тонкие длинные листья, гармоничная плотность
祥云 (благоприятное облако)	`var(--lh-pattern-cloud)`	плавно расходящиеся облака, извилистые линии
水波 (волны)	`var(--lh-pattern-water)`	лёгкая рябь, наслаивающаяся рядами
雪花 (снежинка)	`var(--lh-pattern-snow)`	шестиугольная снежинка с тонкими ветвями
梅花 (цветение сливы)	`var(--lh-pattern-plum)`	пять лепестков вокруг отчётливой сердцевины
竹叶 (лист бамбука)	`var(--lh-pattern-bamboo)`	ланцетовидные листья, естественный беспорядок

Глобальная настройка узоров

Composition API

vue

<script setup lang="ts">
const config = {
  themeVars: {
    'bg-pattern': 'var(--lh-pattern-cloud)',
    'bg-pattern-opacity': '0.15',
  },
  patternComponents: ['button', 'input'] as const,
}
</script>

<template>
  <LhConfigProvider
    :theme-vars="config.themeVars"
    :pattern-components="config.patternComponents"
  >
    <!-- Узор применится к кнопке и полю ввода, но не к Dialog -->
    <LhButton>Кнопка с узором</LhButton>
    <LhInput placeholder="Поле ввода с узором" />
  </LhConfigProvider>
</template>

Options API

vue

<script>
export default {
  data() {
    return {
      config: {
        themeVars: {
          'bg-pattern': 'var(--lh-pattern-cloud)',
          'bg-pattern-opacity': '0.15',
        },
        patternComponents: ['button', 'input'],
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider
    :theme-vars="config.themeVars"
    :pattern-components="config.patternComponents"
  >
    <LhButton>Кнопка с узором</LhButton>
  </LhConfigProvider>
</template>

Справочник переменных узора

Переменная	Описание	Значение по умолчанию
`--lh-bg-pattern`	URL узорного фона	`none`
`--lh-bg-pattern-repeat`	режим мозаичного размещения	`repeat`
`--lh-bg-pattern-size`	размер узора	`40px`
`--lh-bg-pattern-opacity`	прозрачность узора	`0.15`
`--lh-bg-pattern-color`	цвет узора	`var(--lh-decoration-color, rgba(184, 134, 11, 0.12))`
`--lh-bg-pattern-blend`	режим наложения	`soft-light`

Полный пример настройки

Полное использование ConfigProvider, объединяющее все возможности: тему, язык, размер, узоры.

Composition API

vue

<script setup lang="ts">
import { zhCN } from '@lh-ui/vue3'

const configProvider = {
  size: 'medium' as const,
  locale: zhCN,
  themeVars: {
    'primary-color': '#2B4C7C',
    'bg-pattern': 'var(--lh-pattern-cloud)',
    'bg-pattern-opacity': '0.15',
  },
  patternComponents: ['button', 'input', 'dialog'],
}
</script>

<template>
  <LhConfigProvider
    :size="configProvider.size"
    :locale="configProvider.locale"
    :theme-vars="configProvider.themeVars"
    :pattern-components="configProvider.patternComponents"
  >
    <slot />
  </LhConfigProvider>
</template>

Options API

vue

<script>
import { zhCN } from '@lh-ui/vue3'

export default {
  data() {
    return {
      configProvider: {
        size: 'medium',
        locale: zhCN,
        themeVars: {
          'primary-color': '#2B4C7C',
          'bg-pattern': 'var(--lh-pattern-cloud)',
        },
        patternComponents: ['button', 'input', 'dialog'],
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider
    :size="configProvider.size"
    :locale="configProvider.locale"
    :theme-vars="configProvider.themeVars"
    :pattern-components="configProvider.patternComponents"
  >
    <slot />
  </LhConfigProvider>
</template>

Приоритет переменных темы

Итоговые CSS-переменные компонента сливаются со следующим приоритетом (последующее перекрывает предыдущее):

Глобальные themeVars ConfigProvider (низший приоритет)
Покомпонентные componentTheme[имя-компонента] ConfigProvider
Собственный проп themeVars компонента
Собственный проп bgPattern компонента (высший приоритет)

Для переменной bg-pattern дополнительно действует белый список patternComponents: глобальный bg-pattern применяется только к компонентам из списка.

Быстрая раскладка sx

Пропс sx — декларативный способ задать раскладку компонента инлайн: отступы и размеры без написания CSS. Сейчас поддерживается в компонентах: Button, Input, Dialog, Tooltip, Alert, Card, Empty, Breadcrumb, Pagination, Steps, Tabs, Skeleton.

Принцип

sx основан на сетке с базой 8px: числовое значение умножается на 8 и даёт пиксели. Например mt: 2 эквивалентно marginTop: 16px.

Поддерживаемые свойства

Отступы

Свойство	Описание	Пример	Эквивалент в CSS
`m`	внешние отступы со всех сторон	`m: 2`	`margin: 16px`
`mx`	горизонтальные внешние отступы	`mx: 1`	`marginLeft: 8px; marginRight: 8px`
`my`	вертикальные внешние отступы	`my: 1`	`marginTop: 8px; marginBottom: 8px`
`mt`, `mr`, `mb`, `ml`	односторонние внешние отступы	`mt: 2`	`marginTop: 16px`
`p`	внутренние отступы со всех сторон	`p: 3`	`padding: 24px`
`px`	горизонтальные внутренние отступы	`px: 2`	`paddingLeft: 16px; paddingRight: 16px`
`py`	вертикальные внутренние отступы	`py: 1`	`paddingTop: 8px; paddingBottom: 8px`
`pt`, `pr`, `pb`, `pl`	односторонние внутренние отступы	`pt: 2`	`paddingTop: 16px`

Размеры

Свойство	Описание	Пример
`w`	ширина (число — px, строка — как есть)	`w: 200` или `w: '100%'`
`h`	высота	`h: 100` или `h: 'auto'`

Flex-раскладка

Свойство	Описание	Пример
`display`	тип отображения	`display: 'flex'`
`flex`	сокращение flex	`flex: '1 1 0%'`
`flexDirection`	направление главной оси	`flexDirection: 'column'`
`alignItems`	выравнивание по поперечной оси	`alignItems: 'center'`
`justifyContent`	выравнивание по главной оси	`justifyContent: 'flex-end'`

Пример использования

vue

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <!-- Отступы кнопки -->
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Кнопка с отступами</LhButton>

  <!-- Внешние отступы поля ввода -->
  <LhInput placeholder="Вертикальные отступы поля" :sx="{ my: 1 }" />

  <!-- Ширина Dialog: sx поддерживает только w/h и отступы -->
  <LhDialog v-model="visible" title="Пример" :sx="{ w: 480 }">
    <p>Диалог фиксированной ширины</p>
  </LhDialog>
</template>

vue

<script>
export default {
  data() {
    return { visible: false }
  },
}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Кнопка с отступами</LhButton>
</template>

Настройка темы ​

Палитра в китайском стиле ​

Система тем на CSS-переменных ​

Переменные цветов ​

Переменные текста ​

Переменные границ ​

Переменные фона ​

Переменные теней ​

Переменные шрифтов ​

Переменные отступов ​

Переменные Z-Index ​

Переменные переходов ​

Тёмная тема ​

Способ 1: composable-функция useLhTheme ​

Composition API ​

Options API ​

Способ 2: переключение HTML-атрибутом ​

Собственные цвета темы (青花瓷 / 松花绿 / 朱砂-красный) ​

Тема 青花瓷 ​

Composition API ​

Options API ​

Тема 松花绿 ​

Тема 朱砂-красный ​

Система узорных фонов ​

Предустановленные узоры ​

Глобальная настройка узоров ​

Composition API ​

Options API ​

Справочник переменных узора ​

Полный пример настройки ​

Composition API ​

Options API ​

Приоритет переменных темы ​

Быстрая раскладка sx ​

Принцип ​

Поддерживаемые свойства ​

Отступы ​

Размеры ​

Flex-раскладка ​

Пример использования ​

Настройка темы

Палитра в китайском стиле

Система тем на CSS-переменных

Переменные цветов

Переменные текста

Переменные границ

Переменные фона

Переменные теней

Переменные шрифтов

Переменные отступов

Переменные Z-Index

Переменные переходов

Тёмная тема

Способ 1: composable-функция `useLhTheme`

Composition API

Options API

Способ 2: переключение HTML-атрибутом

Собственные цвета темы (青花瓷 / 松花绿 / 朱砂-красный)

Тема 青花瓷

Composition API

Options API

Тема 松花绿

Тема 朱砂-красный

Система узорных фонов

Предустановленные узоры

Глобальная настройка узоров

Composition API

Options API

Справочник переменных узора

Полный пример настройки

Composition API

Options API

Приоритет переменных темы

Быстрая раскладка sx

Принцип

Поддерживаемые свойства

Отступы

Размеры

Flex-раскладка

Пример использования