Магазин темРуководство по созданию

🎨 Руководство по созданию тем

Изучите JSON-схему тем ForcedSkin и правила полей палитры — создавайте палитры для любых сайтов и отправляйте их сообществу.

Быстрый старт

Выберите режим

Решите, будет ли тема работать в light (светлые палитры) или dark (тёмные палитры).

Заполните цвета

Следуйте спецификации полей ниже — как минимум все обязательные ключи должны быть в JSON.

Отправьте на проверку

На странице Темы нажмите «Отправить тему». Админы одобряют публикацию для всех.

Цветовые поля

Все записи палитры должны быть hex-строками (#RRGGBB) или значениями CSS rgba(...).

backgroundОбязательно

Основной фон страницы — светлые темы ближе к белому, тёмные — к глубоким нейтральным. CSS-переменная: --color-background

Пример: #F8FFF8 / #101410

foregroundОбязательно

Основной текст — читаемый контраст с фоном. CSS-переменная: --color-foreground

Пример: #2C3E2C / #E0E0E0

surfaceОбязательно

Заливка карточек / панелей / контейнеров — чуть выше фона. CSS-переменная: --color-surface

Пример: #F0FFF0 / #1E221E

surfaceMutedНеобязательно

Приглушённые hover / вложенные контейнеры на ступень ниже surface. CSS-переменная: --color-surface-muted

Пример: #F5FDF5 / #161816

borderОбязательно

Тонкие линии и разделители — обычно малонасыщенные серые / полупрозрачные тона. CSS-переменная: --color-border

Пример: #D8E8D8 / #333633

mutedОбязательно

Второстепенный текст и плейсхолдеры. CSS-переменная: --color-muted

Пример: #6C7E6C / #A0A0A0

primaryОбязательно

Основная брендовая шкала для кнопок / ссылок / фокуса — один цвет или шкала (50–950). Требуются как минимум оттенки 500/600/700. Соответствует CSS-переменным --color-primary- плюс токены оттенков (50–950)

Пример: { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondaryНеобязательно

Вторичные акцентные шкалы для чипов / ghost-кнопок — структура как у primary — соответствует --color-secondary- плюс токены оттенков

Пример: { "500": "#AAA", ... }

accentНеобязательно

Подсветки, бейджи, акцентные цвета — структура как у primary — соответствует --color-accent- плюс токены оттенков

Пример: { "500": "#FFEB3B", ... }

varsНеобязательно

Произвольные CSS custom properties — ключи без «--»; значения применяются как есть на :root

Пример: { "custom-radius": "8px" }

Цветовые шкалы

Ключи JSON primary, secondary и accent принимают любой из двух стилей ниже:

Компактный (три основных оттенка)

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

Движок использует оттенок 500 как основной; 600/700 покрывают hover/active.

Полная шкала (50 → 950, одиннадцать ступеней)

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

Публикация полной шкалы даёт более плавные тональные переходы везде.

Совет: Идентификаторы оттенков следуют шкалам в стиле Tailwind: 50 — самый светлый, 950 — самый тёмный. Светлые темы в основном используют 500/600/700; тёмные часто опираются на 400/500/600.

Полные примеры

🌿 Светлый пример (light-mint)

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 Тёмный пример (dark-forest)

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

Пользовательские переменные (vars)

Если стандартных токенов мало, добавьте дополнительные CSS-переменные в узел vars — опустите префикс -- в каждом ключе.

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

Правила slug (name)

Только строчные ASCII-буквы, цифры и дефис ( a-z 0-9 - ).
Предпочитайте короткие пары «режим-стиль», например «dark-ocean» или «light-sakura».
Slug должен быть глобально уникальным — после публикации его нельзя изменить, проверьте заранее.
Максимальная длина — 50 символов.

Отправка и проверка

🔐 Войдите перед отправкой.

⏳ Заявки попадают в очередь — команда обычно отвечает в течение 1–3 рабочих дней.

✅ Одобренные темы появляются в магазине, и их можно добавлять в избранное.

❌ Некорректные цвета, конфликтующие имена или нарушения правил приведут к отклонению — удалите и отправьте исправленную версию.

🚫 Никакого вредоносного кода, языка ненависти и явно нарушающих права палитр.

Готовы? Перейдите в магазин тем и опубликуйте палитру.

🎨 Отправить тему