Тема Midnight и рецепты оформления

Полная тема Midnight

Выберите глубокий синий фон, чуть более светлые карточки, светлый основной текст и два умеренно ярких акцента. Для текста на светлом акценте используйте тёмный цвет. Границы должны отделять карточки даже без тени, фокус — оставаться видимым. Начните с неизменных размеров и структуры: так проще оценить только оформление. Создайте новую тему, назовите Midnight, выберите тёмный режим в визуальных настройках, затем вставьте весь следующий файл в CSS-режим. Здесь есть вся палитра и отдельные правила существующих элементов. Файл не требует внешних ресурсов.

/* Midnight — основа для Xneon Launcher 1.0.7.
   Установка: Настройки → Темы → Создать тему → CSS. */
:root {
  /* Поверхности и читаемый текст. */
  --background: #0d1220;
  --foreground: #edf2ff;
  --card: #161f33;
  --card-foreground: #edf2ff;
  --muted: #202c44;
  --muted-foreground: #acb9d3;
  --border: #364663;
  --input: #202c44;

  /* Акценты и текст поверх них. */
  --primary: #a5b4fc;
  --primary-foreground: #11172b;
  --accent: #67e8d5;
  --accent-foreground: #102522;
  --ring: #a5b4fc;

  /* Боковая навигация. */
  --sidebar: #101828;
  --sidebar-foreground: #d8e3f5;
  --sidebar-primary: #a5b4fc;
  --sidebar-primary-foreground: #11172b;
  --sidebar-accent: #67e8d5;
  --sidebar-accent-foreground: #102522;
  --sidebar-border: #364663;
  --sidebar-ring: #a5b4fc;

  /* Явные статусы. */
  --destructive: #fda4af;
  --destructive-foreground: #291218;
  --warning: #fcd34d;
  --info: #93c5fd;
  --success: #86efac;

  /* Свечение: последние две цифры HEX — непрозрачность. */
  --glow-primary: #a5b4fc33;
  --glow-accent: #67e8d526;
  --ambient-primary: #a5b4fc;
  --ambient-accent: #67e8d5;

  --radius: 0.75rem;
  --font-sans: system-ui, sans-serif;
  font-size: 16px;
}

#launcher-titlebar { border-bottom-color: var(--sidebar-border); }

#home-account-card,
#home-version-card,
[data-component="build-card"] {
  border-color: var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 20px #00000022;
}

#home-play-button {
  border-radius: 12px;
  transition: filter 160ms ease-out;
}

#home-play-button:enabled:hover { filter: brightness(1.06); }
#home-play-button:enabled:active { filter: brightness(0.96); }
#home-play-button:disabled { opacity: 0.55; }

#home-play-button:focus-visible,
.sidebar-item-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.sidebar-item-btn[data-active="true"] {
  background: color-mix(in srgb, var(--sidebar-primary) 18%, transparent);
}

[data-slot="dialog-content"],
[data-slot="select-content"] {
  border-color: var(--border);
  background: var(--card);
  color: var(--card-foreground);
}

::-webkit-scrollbar-thumb { background: #526484; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  #home-play-button { transition: none; }
}

Комментарий перед :root допустим, но может привести к сохранению палитрового блока в текстовой части CSS вместо удаления восстановимой шапки. Если хотите минимальный текст при повторном открытии, поставьте первый :root самым началом файла, а комментарий — после него. Нажмите «Применить CSS», затем «Сохранить». Проверьте главную, сборки в обоих видах, настройки, список Select и диалог. После этого — серверы, аккаунты, скины, логи, облако и AI. Проверьте наведение, Tab-фокус, отключённую кнопку, пустой список и ошибку. Для проверки ошибки не требуется ломать данные: используйте штатное состояние недоступного ресурса, если оно уже есть. Явные статусы из CSS не переписывают автоматически все старые --color-red-* и похожие псевдонимы. Для единых цветов у старых утилит задайте соответствующие цвета в визуальных расширенных настройках. Миниатюра тоже не обязана воспроизводить каждое произвольное CSS-правило. Для восстановления выберите Core; для отмены части темы удалите её правила.

Рецепты оформления

Фрагменты с :root переносите в первый блок своей темы, остальные добавляйте ниже. Не заменяйте всю тему коротким рецептом, если хотите сохранить прежние правила. Отмена каждого рецепта — вернуть старые значения или удалить его объявления, применить и сохранить; если значение уже перенесено в палитру, восстановите также соответствующий цвет визуально.

Акцент, фон, текст и границы

:root {
  --primary: #a5b4fc;
  --primary-foreground: #11172b;
  --ring: #a5b4fc;
  --background: #0d1220;
  --foreground: #edf2ff;
  --card: #1b2740;
  --card-foreground: #edf2ff;
  --border: #465675;
}

Меняет общий акцент, затемняет фон, делает карточки контрастнее. Не гарантирует новый цвет любому inline-фрагменту. Верните исходные восемь значений для отмены.

Радиусы и тени

[data-component="build-card"] {
  border-radius: 10px;
  box-shadow: 0 4px 16px #00000033;
}

Меняет только карточки сборок; не требует глобального радиуса. Удаление правила вернёт их штатный радиус и тень.

Шрифт и плавное наведение

:root { --font-sans: "Segoe UI", system-ui, sans-serif; }

#home-play-button { transition: filter 140ms ease-out; }
#home-play-button:enabled:hover { filter: brightness(1.05); }

На компьютере без Segoe UI сработает запасной системный шрифт. Моноширинные поля и inline-гарнитуры могут остаться своими. Отменяйте гарнитуру также в визуальных настройках, если редактор перенёс её туда.

Выбранный элемент и прокрутка

[data-component="theme-card"][data-selected="true"] {
  border-color: var(--primary);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--muted); }
::-webkit-scrollbar-thumb { background: #526484; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

Первое правило выделяет выбранную тему. Остальные меняют прокрутку основного документа, но не переопределяют автоматически отдельные правила внутри webview. .scrollbar-none намеренно скрывает некоторые полосы. Удаление фрагмента возвращает исходные 6px там, где нет других переопределений.

Прозрачность, градиент и отключение декора

#home-version-card {
  background: color-mix(in srgb, var(--card) 90%, transparent);
}

#home-play-button {
  background: linear-gradient(135deg, #a5b4fc, #67e8d5);
  color: #11172b;
}

#theme-background { display: none; }

Меняются фон карточки и кнопки, последний селектор скрывает декоративный слой. Он существует лишь при настроенном фоне. display: none не останавливает JS-эффекты и загрузку медиа и не снимает theme-with-background; для полноценного удаления фона используйте его очистку в редакторе. Не применяйте opacity ко всей карточке, если хотите прозрачный фон, но непрозрачный текст. Удаление правил возвращает видимость и фон.

Светлая тема

Надёжный путь — выбрать светлый режим в визуальном редакторе: он согласует класс .dark, color-scheme и поверхности. Затем скорректируйте палитру. Ниже пример поверх светлой основы; остальные цвета возьмутся из неё.

:root {
  --background: #f3f5f9;
  --foreground: #202838;
  --card: #ffffff;
  --card-foreground: #202838;
  --muted: #e8edf4;
  --muted-foreground: #526078;
  --border: #b7c3d4;
  --input: #edf1f7;
  --primary: #4158c9;
  --primary-foreground: #ffffff;
  --accent: #126b70;
  --accent-foreground: #ffffff;
  --ring: #4158c9;
  --sidebar: #e9eef6;
  --sidebar-foreground: #29344a;
  --sidebar-primary: #4158c9;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #126b70;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #b7c3d4;
}

Один светлый --background не заменяет весь набор тёмных состояний. Проверьте также меню, диалоги, поля и тени. Для отмены верните тёмный режим и старую палитру либо выберите готовый пресет.

Минималистичная и высококонтрастная тема

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

[data-component="build-card"] { box-shadow: none; }

Высокий контраст лучше делать на полной тёмной основе с явными цветами текста и границ:

:root {
  --background: #090b10;
  --foreground: #ffffff;
  --card: #151b27;
  --card-foreground: #ffffff;
  --muted: #273249;
  --muted-foreground: #d3dcec;
  --border: #9baaca;
  --ring: #ffe780;
}

#home-play-button:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

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

Начало работы

Игра

Серверы

Аккаунт и данные

Темы оформления

Справка