Dark theme for MySKU site (by Qwen-coder)

mysku-dark.css

/* mysku-dark.css (by Qwen-coder) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light dark;
    /* Основные цвета темной темы */
    --bg-body: #1e1e1e; /* Основной фон страницы */
    --fg-text: #dcdcdc; /* Основной цвет текста */
    --fg-muted: #a0a0a0; /* Приглушенный текст */
    --border: #444; /* Цвет границ */
    --bg-card: #2d2d2d; /* Фон карточек, блоков */
    --bg-input: #2a2a2a; /* Фон полей ввода */
    --bg-header: #252526; /* Фон шапки */
    --accent-primary: #4d78cc; /* Основной акцентный цвет (ссылки, кнопки) */
    --accent-primary-hover: #598cff; /* Акцентный цвет при наведении */
    --accent-danger: #d22b14; /* Цвет ошибок/удаления */
    --accent-success: #4caf50; /* Цвет успеха */
    --bg-code: #2a2a2d; /* Фон блоков кода */
    --bg-quote: #2a2a2d; /* Фон цитат */
    --bg-table-row-even: #252526; /* Фон четных строк таблицы */
    --bg-sidebar: #252526; /* Фон сайдбара */
    --fg-link: #598cff; /* Цвет ссылок */
    --fg-link-hover: #7abaff; /* Цвет ссылок при наведении */
    --fg-header-text: #dcdcdc; /* Текст заголовков */
    --fg-icon: #a0a0a0; /* Цвет иконок */
  }

  /* Основные элементы */
  body {
    color: var(--fg-text) !important;
    background-color: var(--bg-body) !important;
  }

  /* Шапка */
  .page-header {
    background-color: var(--bg-header) !important;
    background-image: none !important; /* Отключаем возможный фон */
  }

  /* Ссылки */
  a,
  .topic .topic-title a,
  .topic .topic-title h1,
  .sidebar .block.block-stream ul.stream-content a,
  .topic .topic-footer li a,
  .topic .topic-content .product-info ol > li a,
  .sidebar .block.block-moderation ul.events li li a {
    color: var(--fg-link) !important;
  }
  a:hover,
  .topic .topic-title a:hover,
  .sidebar .block.block-stream ul.stream-content a:hover,
  .topic .topic-footer li a:hover,
  .topic .topic-content .product-info ol > li a:hover {
    color: var(--fg-link-hover) !important;
  }

  /* Заголовки */
  h1, h2, h3, h4, h5, h6,
  .topic .topic-title h1,
  .user-profile h1,
  .sidebar .block .title {
    color: var(--fg-header-text) !important;
  }

  /* Текст */
  p, div, span, li, td, th {
    color: var(--fg-text) !important;
  }

  /* Кнопки */
  input[type="button"],
  input[type="submit"],
  .base-button {
    color: var(--fg-text) !important;
    background-image: linear-gradient(to bottom, #3a3a3a 1px, #303030 1px, #2a2a2a) !important;
    border-color: #444 !important;
  }
  input[type="button"]:hover,
  input[type="submit"]:hover,
  .base-button:hover {
    background-image: linear-gradient(to bottom, #444 1px, #3a3a3a 1px, #333) !important;
  }
  input[type="button"]:active,
  input[type="submit"]:active,
  .base-button:active {
    background-image: linear-gradient(to bottom, #2a2a2a 1px, #252525 1px, #202020) !important;
  }
  input[type="button"].button-color-red,
  input[type="submit"].button-color-red,
  .base-button.button-color-red {
    background-image: linear-gradient(to bottom, #9e1b0d 1px, #8a170d 1px, #7a140b) !important;
    border-color: #6a1109 !important;
  }
  input[type="button"].button-color-green,
  input[type="submit"].button-color-green,
  .base-button.button-color-green {
    background-image: linear-gradient(to bottom, #3d8a42 1px, #357739 1px, #2e6832) !important;
    border-color: #285a2c !important;
  }

  /* Формы */
  input[type="text"],
  textarea,
  select {
    color: var(--fg-text) !important;
    background-color: var(--bg-input) !important;
    border-color: var(--border) !important;
  }

  /* Карточки / Блоки */
  .topic,
  .comment .comment-body,
  .sidebar .block,
  .window-popup .content,
  .text-editor,
  .ck-content {
    background-color: var(--bg-card) !important;
  }

  /* Сайдбар */
  .sidebar {
    background-color: var(--bg-sidebar) !important;
  }

  /* Таблицы */
  table tr:nth-child(even) {
    background-color: var(--bg-table-row-even) !important;
  }
  th, td {
    border-color: var(--border) !important;
  }

  /* Цитаты */
  .topic .topic-content blockquote,
  .comment .comment-body .text blockquote {
    background-color: var(--bg-quote) !important;
    border-left-color: var(--accent-primary) !important; /* Или другой акцентный цвет */
  }

  /* Блоки кода */
  .topic .topic-content pre,
  .comment .comment-body .text pre {
    background-color: var(--bg-code) !important;
    background-image: none !important; /* Отключаем возможный фон */
  }

  /* Иконки (если цвет задается через fill) */
  svg {
    color: var(--fg-icon) !important; /* Используем color, так как fill наследует его */
  }

  /* Системные сообщения */
  .system-messages-notice .notice,
  .system-messages-notice .error,
  .topic .moderation-message,
  .topic .moderation-user-note {
    background-color: var(--bg-card) !important;
    color: var(--fg-text) !important;
    border-color: var(--border) !important;
  }

  /* Особые состояния комментариев */
  .comment .comment-body.state-deleted .text {
    opacity: 0.5 !important;
  }
  .comment .comment-body.state-self {
    background-color: #2a2a2a !important; /* Темный оттенок */
  }
  .comment .comment-body.state-new {
    background-color: #253a31 !important; /* Темный оттенок зеленого */
  }
  .comment .comment-body.state-from-mod {
    border-left-color: var(--accent-danger) !important;
  }
  .comment .comment-body.state-pending-hard {
    border-left-color: #3d71e2 !important; /* Оставим как есть или под цветовую схему */
  }
  .comment .comment-body.state-pending-soft {
    border-left-color: #aa6cff !important; /* Оставим как есть */
  }
  .comment .comment-body.state-blacklisted {
    border-left-color: #666 !important; /* Темнее */
  }

  /* Форма редактирования */
  .text-editor.disabled {
    background-image: none !important; /* Отключаем фон */
    background-color: var(--bg-input) !important;
  }

  /* CKEditor */
  .ck-content blockquote {
    background-color: var(--bg-quote) !important;
  }

  /* Различные элементы с цветом */
  .topic .topic-footer li,
  .topic .topic-footer li.author,
  .topic .topic-footer li.date,
  .topic .topic-tags li a,
  .topic .topic-content .product-info ol > li,
  .comment .comment-body .info ul li span,
  .comment .comment-body .info ul li a,
  .sidebar .block.users ul.users li a,
  .sidebar .block.block-stream ul.stream-content .posted_date_time,
  .sidebar .block.block-stream ul.stream-content .sep,
  .sidebar .block.block-stream ul.stream-content .comment,
  .sidebar .block.block-stream ul.stream-content a.author,
  .topic .topic-content .product-info .product-link a,
  .topic .topic-content .product-info .product-link .product-link-text,
  .topic .topic-content .product-info .product-link .product-link-domain,
  .topic .topic-content .product-info .product-link .product-link-price,
  .topic .topic-content .product-info .product-link .product-link-shop,
  .topic .topic-content .product-info .product-link .product-link-status,
  .topic .topic-content .product-info .product-link .product-link-coupon,
  .topic .topic-content .product-info .product-link .product-link-coupon-code,
  .topic .topic-content .product-info .product-link .product-link-coupon-expiry,
  .topic .topic-content .product-info .product-link .product-link-coupon-used,
  .topic .topic-content .product-info .product-link .product-link-coupon-error,
  .topic .topic-content .product-info .product-link .product-link-coupon-success,
  .topic .topic-content .product-info .product-link .product-link-coupon-loading,
  .topic .topic-content .product-info .product-link .product-link-coupon-default,
  .topic .topic-content .product-info .product-link .product-link-coupon-default-text,
  .topic .topic-content .product-info .product-link .product-link-coupon-default-code,
  .topic .topic-content .product-info .product-link .product-link-coupon-default-expiry,
  .topic .topic-content .product-info .product-link .product-link-coupon-default-used,
  .topic .topic-content .product-info .product-link .product-link-coupon-default-error,
  .topic .topic-content .product-info .product-link .product-link-coupon-default-success,
  .topic .topic-content .product-info .product-link .product-link-coupon-default-loading {
    color: var(--fg-muted) !important;
  }

  .topic .topic-tags li a:hover {
    background-color: var(--accent-primary) !important;
    color: white !important;
  }

  .topic .topic-content .product-info ol > li a {
    border-bottom-color: var(--accent-primary) !important;
  }

  /* Убираем белый фон у некоторых элементов, если он остался */
  .quotation-hr::before { /* Если вы используете hr с символами */
    background-color: var(--bg-body) !important;
  }
}