hrenpack-theme-style

Описание

hrenpack-theme-style — это пакет для быстрой настройки тематического оформления веб-сайтов с поддержкой светлой и тёмной темы. Он предоставляет готовые CSS-стили, компоненты для переключения тем и интеграцию с системными настройками пользователя.

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

Установка

shell

npm install hrenpack-theme-style





Использование

$3

Добавьте следующие стили в ваш HTML-файл:

html

$3

html





$3

Добавьте в HTML-разметку кнопку для переключения между темами:

html





Кнопка будет автоматически обработана скриптом

dark-theme.js

.



Компоненты

$3

-

style.css

 — базовые стили и CSS-переменные для светлой темы



-

style_light.css — расширение базовых стилей (импортирует style.css

)



-

style_dark.css

 — переопределение переменных для тёмной темы



$3

-

script.js

 — основной скрипт пакета



-

dark-theme.js — управление переключением тем, сохранение выбора в localStorage

 и cookies



-

input-reversed.js — утилита для обработки порядка элементов input и label

 внутри формы



-

form.js

 - обработка формы



$3

Пакет использует CSS-переменные для управления цветами. Основные переменные:



-

--hrenpack-background

 — цвет фона



-

--hrenpack-foreground

 — цвет текста



-

--hrenpack-a-hover-coloк

 — цвет ссылок при наведении



-

--hrenpack-button-hover-color

 — цвет кнопок при наведении



-

--hrenpack-fcu-border-color

 — цвет границ полей ввода



- И многие другие



Все переменные переопределяются в

style_dark.css

 для тёмной темы.



$3

.btn-hren



Стандартная кнопка пакета. Автоматически получает цвета из CSS-переменных.

.btn-hren-ahren



Альтернативный стиль кнопки (инвертированные цвета).

.form-control-hrenpack



Стилизованное поле ввода.

.form



Готовый стиль для форм с градиентным фоном.

.grid-div и .grid-panel



Сетка для отображения карточек контента.

.singular-panel, .panel



Панели для выделения контента.



$3



Пакет включает интеграцию с библиотекой

magic-snowflakes

 для создания анимированного снегопада на странице.

> Внимание: Для корректной работы скрипт должен быть подключен синхронно (без атрибутов

async или defer

).



#### Подключение снегопада

> Важно: Для отключения автоматической инициализации добавьте атрибут

data-no-init

:

>

html

> 

>

html





#### Доступные настройки через data-атрибуты:

-

data-count

 (число) - количество снежинок (по умолчанию: 50)

-

data-color

 (строка) - цвет снежинок (по умолчанию: "#5ecdef")

-

data-min-opacity

 (число) - минимальная прозрачность (по умолчанию: 0.6)

-

data-max-opacity

 (число) - максимальная прозрачность (по умолчанию: 1)

-

data-min-size

 (число) - минимальный размер (по умолчанию: 10)

-

data-max-size

 (число) - максимальный размер (по умолчанию: 25)

-

data-rotation

 (булевый) - включить вращение снежинок

-

data-speed

 (число) - скорость падения (по умолчанию: 1)

-

data-stop

 (булевый) - не запускать автоматически

-

data-types

 (число) - количество типов снежинок (по умолчанию: 6)

-

data-z-index

 (число) - z-index снежинок (по умолчанию: 9999)

> Примечание: Некоторые параметры (

width, height, wind, autoResize

) не могут быть установлены через data-атрибуты, но доступны для программного изменения.



#### Программное управление снегопадом

После подключения скрипта доступен глобальный объект

snowManager

javascript

// Остановить снегопад

snowManager.pause();



// Запустить снегопад

snowManager.play();



// Переключить (вкл/выкл)

snowManager.toggle();



// Изменить параметры

snowManager.count = 200;

snowManager.speed = 2;

snowManager.color = "#ff0000";



// Уничтожить снегопад и освободить ресурсы

snowManager.destroy();



> ⚠️ Внимание: Глобальная переменная

snowManager

 создается только при автоматической инициализации. При использовании

data-no-init

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



#### Автоматическое управление

Снегопад автоматически приостанавливается:

- Когда пользователь переключается на другую вкладку

- Когда окно теряет фокус

- Когда страница скрыта



И автоматически возобновляется при возвращении.



#### Ручная инициализация (опционально)

Если вы хотите контролировать момент создания снегопада, используйте атрибут

data-no-init

html

$3

javascript

// Проверка активности снегопада

console.log(

Снегопад активен: ${snowManager.isActive}

);

console.log(

Текущие параметры:

, snowManager.snow?.params);



// Подписка на события

document.addEventListener('visibilitychange', () => {

    console.log(

Видимость страницы: ${document.visibilityState}

);

    console.log(

Состояние снегопада: ${snowManager.isActive ? 'активен' : 'на паузе'}

);

});





$3

Snow Manager автоматически обрабатывает:

- Переключение вкладок браузера

- Сворачивание/разворачивание окна

- Изменение размера окна (при

autoResize: true

)

- Системные уведомления о экономии энергии



$3

js

// Новогодняя тема

const newYearConfig = {

    count: 200,

    color: '#ffffff',

    minSize: 8,

    maxSize: 30,

    speed: 1.5,

    rotation: true,

    wind: true,

    minOpacity: 0.4,

    maxOpacity: 0.9

};



// Легкий снегопад

const lightSnowConfig = {

    count: 30,

    color: '#f0f8ff',

    minSize: 5,

    maxSize: 15,

    speed: 0.7,

    rotation: false,

    minOpacity: 0.2,

    maxOpacity: 0.5

};



// Метель

const blizzardConfig = {

    count: 300,

    color: '#d4eaff',

    minSize: 3,

    maxSize: 20,

    speed: 3,

    rotation: true,

    wind: true,

    minOpacity: 0.7,

    maxOpacity: 1

};





Зависимости

-

hrenpack_js

 (^3.1.5) — базовые утилиты для работы с cookies, темами и DOM

-

magic-snowflakes

 (^7.0.2) — библиотека для создания анимированного снегопада



Ограничения и известные проблемы



$3

1. Пересоздание экземпляра: При изменении любого параметра снегопада через

snowManager.property = value

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

2. Синхронная загрузка: Скрипт

snow.js должен загружаться синхронно. Использование атрибутов async или defer приведет к ошибке document.currentScript is null

.

3. Производительность: Большое количество снежинок (особенно на мобильных устройствах) может снизить производительность. Рекомендуется использовать

data-count

 не более 150.

4. Ручное управление: При использовании

data-no-init необходимо самостоятельно создать экземпляр SnowManager и назначить его глобальной переменной snowManager

 для совместимости с существующим кодом.



$3

1. Последовательность загрузки: Стили

style.css

 должны подключаться после Bootstrap для корректного переопределения переменных.

2. Браузерная поддержка: Некоторые старые браузеры могут не поддерживать CSS-переменные, что приведет к отображению только светлой темы.



$3

1. Графические ускорители: На устройствах без аппаратного ускорения Canvas может наблюдаться снижение производительности при большом количестве снежинок.

2. Экономия заряда батареи: На мобильных устройствах в режиме энергосбережения снегопад автоматически снижает частоту кадров.

3. Память: Каждая снежинка использует ~2-5KB памяти. При 150 снежинках общее потребление составляет 300-750KB.



$3

- React/Vue/Angular: Snow Manager можно использовать внутри компонентов, но требуется ручное управление жизненным циклом:

javascript

// Пример для React

useEffect(() => {

    const manager = new SnowManager(config);

    return () => manager.destroy(); // Очистка при размонтировании

}, []);





Совместимость

- Поддерживает современные браузеры (ES2020+)

- TypeScript 5.9.3 и выше

- Работает в средах с поддержкой модулей ES

- Интеграция с magic-snowflakes 7.0.2+

    - Изменение параметров снегопада происходит через пересоздание экземпляра

    - Динамическое обновление конфигурации требует полной реинициализации



Разработка

Для сборки из исходников:

shell

git clone https://github.com/MagIlyasDOMA/hrenpack-theme-style.git

cd hrenpack-theme-style

npm install

npm run build  # Компиляция TypeScript в JavaScript

Лицензия

#### MIT © MagIlyasDOMA

---

Ссылки

- GitHub репозиторий

- npm пакет

- Баг-трекер

---

Примечание: Пакет находится в активной разработке. Пожалуйста, сообщайте об ошибках и предлагайте улучшения через Issues на GitHub.

hrenpack-theme-style

Описание

Установка

shell

npm install hrenpack-theme-style





Использование

$3

Добавьте следующие стили в ваш HTML-файл:

html

$3

html





$3

Добавьте в HTML-разметку кнопку для переключения между темами:

html





Кнопка будет автоматически обработана скриптом

dark-theme.js

.



Компоненты

$3

-

style.css

 — базовые стили и CSS-переменные для светлой темы



-

style_light.css — расширение базовых стилей (импортирует style.css

)



-

style_dark.css

 — переопределение переменных для тёмной темы



$3

-

script.js

 — основной скрипт пакета



-

dark-theme.js — управление переключением тем, сохранение выбора в localStorage

 и cookies



-

input-reversed.js — утилита для обработки порядка элементов input и label

 внутри формы



-

form.js

 - обработка формы



$3

Пакет использует CSS-переменные для управления цветами. Основные переменные:



-

--hrenpack-background

 — цвет фона



-

--hrenpack-foreground

 — цвет текста



-

--hrenpack-a-hover-coloк

 — цвет ссылок при наведении



-

--hrenpack-button-hover-color

 — цвет кнопок при наведении



-

--hrenpack-fcu-border-color

 — цвет границ полей ввода



- И многие другие



Все переменные переопределяются в

style_dark.css

 для тёмной темы.



$3

.btn-hren



Стандартная кнопка пакета. Автоматически получает цвета из CSS-переменных.

.btn-hren-ahren



Альтернативный стиль кнопки (инвертированные цвета).

.form-control-hrenpack



Стилизованное поле ввода.

.form



Готовый стиль для форм с градиентным фоном.

.grid-div и .grid-panel



Сетка для отображения карточек контента.

.singular-panel, .panel



Панели для выделения контента.



$3



Пакет включает интеграцию с библиотекой

magic-snowflakes

 для создания анимированного снегопада на странице.

> Внимание: Для корректной работы скрипт должен быть подключен синхронно (без атрибутов

async или defer

).



#### Подключение снегопада

> Важно: Для отключения автоматической инициализации добавьте атрибут

data-no-init

:

>

html

> 

>

html





#### Доступные настройки через data-атрибуты:

-

data-count

 (число) - количество снежинок (по умолчанию: 50)

-

data-color

 (строка) - цвет снежинок (по умолчанию: "#5ecdef")

-

data-min-opacity

 (число) - минимальная прозрачность (по умолчанию: 0.6)

-

data-max-opacity

 (число) - максимальная прозрачность (по умолчанию: 1)

-

data-min-size

 (число) - минимальный размер (по умолчанию: 10)

-

data-max-size

 (число) - максимальный размер (по умолчанию: 25)

-

data-rotation

 (булевый) - включить вращение снежинок

-

data-speed

 (число) - скорость падения (по умолчанию: 1)

-

data-stop

 (булевый) - не запускать автоматически

-

data-types

 (число) - количество типов снежинок (по умолчанию: 6)

-

data-z-index

 (число) - z-index снежинок (по умолчанию: 9999)

> Примечание: Некоторые параметры (

width, height, wind, autoResize

) не могут быть установлены через data-атрибуты, но доступны для программного изменения.



#### Программное управление снегопадом

После подключения скрипта доступен глобальный объект

snowManager

javascript

// Остановить снегопад

snowManager.pause();



// Запустить снегопад

snowManager.play();



// Переключить (вкл/выкл)

snowManager.toggle();



// Изменить параметры

snowManager.count = 200;

snowManager.speed = 2;

snowManager.color = "#ff0000";



// Уничтожить снегопад и освободить ресурсы

snowManager.destroy();



> ⚠️ Внимание: Глобальная переменная

snowManager

 создается только при автоматической инициализации. При использовании

data-no-init

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



#### Автоматическое управление

Снегопад автоматически приостанавливается:

- Когда пользователь переключается на другую вкладку

- Когда окно теряет фокус

- Когда страница скрыта



И автоматически возобновляется при возвращении.



#### Ручная инициализация (опционально)

Если вы хотите контролировать момент создания снегопада, используйте атрибут

data-no-init

html

$3

javascript

// Проверка активности снегопада

console.log(

Снегопад активен: ${snowManager.isActive}

);

console.log(

Текущие параметры:

, snowManager.snow?.params);



// Подписка на события

document.addEventListener('visibilitychange', () => {

    console.log(

Видимость страницы: ${document.visibilityState}

);

    console.log(

Состояние снегопада: ${snowManager.isActive ? 'активен' : 'на паузе'}

);

});





$3

Snow Manager автоматически обрабатывает:

- Переключение вкладок браузера

- Сворачивание/разворачивание окна

- Изменение размера окна (при

autoResize: true

)

- Системные уведомления о экономии энергии



$3

js

// Новогодняя тема

const newYearConfig = {

    count: 200,

    color: '#ffffff',

    minSize: 8,

    maxSize: 30,

    speed: 1.5,

    rotation: true,

    wind: true,

    minOpacity: 0.4,

    maxOpacity: 0.9

};



// Легкий снегопад

const lightSnowConfig = {

    count: 30,

    color: '#f0f8ff',

    minSize: 5,

    maxSize: 15,

    speed: 0.7,

    rotation: false,

    minOpacity: 0.2,

    maxOpacity: 0.5

};



// Метель

const blizzardConfig = {

    count: 300,

    color: '#d4eaff',

    minSize: 3,

    maxSize: 20,

    speed: 3,

    rotation: true,

    wind: true,

    minOpacity: 0.7,

    maxOpacity: 1

};





Зависимости

-

hrenpack_js

 (^3.1.5) — базовые утилиты для работы с cookies, темами и DOM

-

magic-snowflakes

 (^7.0.2) — библиотека для создания анимированного снегопада



Ограничения и известные проблемы



$3

1. Пересоздание экземпляра: При изменении любого параметра снегопада через

snowManager.property = value

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

2. Синхронная загрузка: Скрипт

snow.js должен загружаться синхронно. Использование атрибутов async или defer приведет к ошибке document.currentScript is null

.

3. Производительность: Большое количество снежинок (особенно на мобильных устройствах) может снизить производительность. Рекомендуется использовать

data-count

 не более 150.

4. Ручное управление: При использовании

data-no-init необходимо самостоятельно создать экземпляр SnowManager и назначить его глобальной переменной snowManager

 для совместимости с существующим кодом.



$3

1. Последовательность загрузки: Стили

style.css

 должны подключаться после Bootstrap для корректного переопределения переменных.

2. Браузерная поддержка: Некоторые старые браузеры могут не поддерживать CSS-переменные, что приведет к отображению только светлой темы.



$3

1. Графические ускорители: На устройствах без аппаратного ускорения Canvas может наблюдаться снижение производительности при большом количестве снежинок.

2. Экономия заряда батареи: На мобильных устройствах в режиме энергосбережения снегопад автоматически снижает частоту кадров.

3. Память: Каждая снежинка использует ~2-5KB памяти. При 150 снежинках общее потребление составляет 300-750KB.



$3

- React/Vue/Angular: Snow Manager можно использовать внутри компонентов, но требуется ручное управление жизненным циклом:

javascript

// Пример для React

useEffect(() => {

    const manager = new SnowManager(config);

    return () => manager.destroy(); // Очистка при размонтировании

}, []);





Совместимость

- Поддерживает современные браузеры (ES2020+)

- TypeScript 5.9.3 и выше

- Работает в средах с поддержкой модулей ES

- Интеграция с magic-snowflakes 7.0.2+

    - Изменение параметров снегопада происходит через пересоздание экземпляра

    - Динамическое обновление конфигурации требует полной реинициализации



Разработка

Для сборки из исходников:

shell

git clone https://github.com/MagIlyasDOMA/hrenpack-theme-style.git

cd hrenpack-theme-style

npm install

npm run build  # Компиляция TypeScript в JavaScript