add: своя цветовая палитра для темной и светлой темы

etpgrf_site/typograph/templates/typograph/base.html

@@ -31,104 +31,153 @@
     </script>
 
     <style>
+        /* === ЦВЕТОВАЯ СХЕМА === */
+        :root {
+            /* Светлая тема: Темно-серый с легкой желтизной (Warm Charcoal) */
+            --bs-body-bg: #f8f8f2;
+            --bs-body-color: #1f1f19;
+            --bs-primary: #4a4a44;
+            --bs-primary-rgb: 74, 74, 68;
+            --bs-link-color: #4a4a44;
+            --bs-link-hover-color: #2e2e2a;
+            --bs-focus-ring-color: rgba(74, 74, 68, 0.25);
+
+            /* Фон навбара в светлой теме */
+            --bs-navbar-bg: #b8b8d055; /* Тот же, что и body, или чуть темнее */
+            --bs-navbar-color: #1f1f19;
+        }
+
+        [data-bs-theme="dark"] {
+            /* Темная тема: Глубокий черный фон и Стальной акцент */
+            --bs-body-bg: #151111;
+            --bs-body-color: #eceff1;
+
+            /* Акцент: Светлый серо-голубой */
+            --bs-primary: #b0bec5;
+            --bs-primary-rgb: 176, 190, 197;
+
+            --bs-link-color: #90caf9;
+            --bs-link-hover-color: #bbdefb;
+
+            --bs-border-color: #37474f;
+            --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+
+            /* Цвет фокуса для полей ввода */
+            --bs-focus-ring-color: rgba(176, 190, 197, 0.25);
+
+            /* Фон navbar в темной теме */
+            --bs-navbar-bg: #55558555;
+            --bs-navbar-color: #b0bec5;
+        }
+
         /* Небольшие стили для красоты */
         body { background-color: var(--bs-body-bg); }
+
+        /* Navbar: используем переменную для фона */
+        .navbar {
+            background-color: var(--bs-navbar-bg) !important;
+            border-bottom: 1px solid var(--bs-border-color);
+        }
+        .navbar-brand {
+            color: var(--bs-navbar-color) !important;
+            font-weight: bold;
+        }
+
+        /* === ПЕРЕОПРЕДЕЛЕНИЕ КОМПОНЕНТОВ BOOTSTRAP === */
+        /* Кнопки Primary */
+        .btn-primary {
+            --bs-btn-bg: var(--bs-primary);
+            --bs-btn-border-color: var(--bs-primary);
+            --bs-btn-hover-bg: var(--bs-link-hover-color);
+            --bs-btn-hover-border-color: var(--bs-link-hover-color);
+            --bs-btn-active-bg: var(--bs-link-hover-color);
+            --bs-btn-active-border-color: var(--bs-link-hover-color);
+        }
+        /* В темной теме текст на кнопке должен быть темным */
+        [data-bs-theme="dark"] .btn-primary {
+            --bs-btn-color: #151111;
+            --bs-btn-hover-color: #151111;
+            --bs-btn-active-color: #151111;
+        }
+        /* Чекбоксы и Радио */
+        .form-check-input:checked {
+            background-color: var(--bs-primary);
+            border-color: var(--bs-primary);
+        }
+        /* В темной теме галочка должна быть темной */
+        [data-bs-theme="dark"] .form-check-input:checked {
+             /* SVG галочки черного цвета (закодирован в base64) */
+             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23151111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+        }
+        /* Фокус на полях ввода */
+        .form-control:focus, .form-select:focus, .form-check-input:focus {
+            border-color: var(--bs-primary);
+            box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
+        }
         .result-box {
-            /* Используем переменные Bootstrap для адаптации к теме */
             background: var(--bs-body-bg);
             color: var(--bs-body-color);
             border: 1px solid var(--bs-border-color);
             border-radius: 0.375rem;
             padding: 1rem;
             min-height: 300px;
-            /* Для корректного отображения висячей пунктуации нужен отступ слева/справа */
             padding-left: 1.5rem;
             padding-right: 1.5rem;
-            white-space: pre-wrap; /* Чтобы pre переносил строки */
+            white-space: pre-wrap;
-            font-family: inherit; /* Наследуем шрифт, если это pre */
+            font-family: inherit;
         }
-        /* Стили для CodeMirror, чтобы он вписался в Bootstrap */
         .cm-editor {
             border: 1px solid var(--bs-border-color);
             border-radius: 0.375rem;
-            height: 300px; /* Фиксированная высота */
+            height: 300px;
         }
 
         /* --- Висячая пунктуация (Hanging Punctuation) --- */
-        /* Слева */
         .result-box .etp-laquo { margin-left: -0.44em; }
         .result-box .etp-ldquo { margin-left: -0.44em; }
         .result-box .etp-lpar  { margin-left: -0.3em; }
         .result-box .etp-lsqb  { margin-left: -0.3em; }
         .result-box .etp-lcub  { margin-left: -0.3em; }
-
-        /* Справа */
         .result-box .etp-raquo { margin-right: -0.44em; }
         .result-box .etp-rdquo { margin-right: -0.44em; }
         .result-box .etp-rpar  { margin-right: -0.3em; }
         .result-box .etp-rsqb  { margin-right: -0.3em; }
         .result-box .etp-rcub  { margin-right: -0.3em; }
-
-        /* Точки и запятые висят меньше */
         .result-box .etp-r-dot   { margin-right: -0.2em; }
         .result-box .etp-r-comma { margin-right: -0.2em; }
         .result-box .etp-r-colon { margin-right: -0.2em; }
 
         /* --- Стили для Cookie Banner --- */
         #cookie-banner {
-            backdrop-filter: blur(10px); /* Эффект размытия фона */
+            backdrop-filter: blur(10px);
             border-top: 1px solid var(--bs-border-color);
-            z-index: 1050; /* Поверх всего */
+            z-index: 1050;
+            background-color: var(--bs-navbar-bg);
+            color: var(--bs-navbar-color); /* Используем цвет навбара для текста */
         }
-        /* Светлая тема: темная плашка */
+        #cookie-banner a {
-        [data-bs-theme="light"] #cookie-banner {
+            color: var(--bs-primary);
-            background-color: rgba(33, 37, 41, 0.85); /* bg-dark с прозрачностью */
-            color: #fff;
-        }
-        [data-bs-theme="light"] #cookie-banner a {
-            color: #fff;
             text-decoration: none;
-            border-bottom: 1px dotted #fff;
+            border-bottom: 1px dotted var(--bs-primary);
         }
-        [data-bs-theme="light"] #cookie-banner a:hover {
+        #cookie-banner a:hover {
             border-bottom-style: solid;
         }
-        [data-bs-theme="light"] #cookie-accept {
+        #cookie-accept {
-            color: #fff;
+            color: var(--bs-primary);
-            border: 1px dashed #fff;
+            border: 1px dashed var(--bs-primary);
             background: transparent;
         }
-        [data-bs-theme="light"] #cookie-accept:hover {
+        #cookie-accept:hover {
-            background: rgba(255,255,255, 0.2);
+            background: rgba(var(--bs-primary-rgb), 0.1);
-        }
-
-        /* Темная тема: светлая плашка */
-        [data-bs-theme="dark"] #cookie-banner {
-            background-color: rgba(248, 249, 250, 0.85); /* bg-light с прозрачностью */
-            color: #000;
-        }
-        [data-bs-theme="dark"] #cookie-banner a {
-            color: #000;
-            text-decoration: none;
-            border-bottom: 1px dotted #000;
-        }
-        [data-bs-theme="dark"] #cookie-banner a:hover {
-            border-bottom-style: solid;
-        }
-        [data-bs-theme="dark"] #cookie-accept {
-            color: #000;
-            border: 1px dashed #000;
-            background: transparent;
-        }
-        [data-bs-theme="dark"] #cookie-accept:hover {
-            background: rgba(0,0,0, 0.1);
         }
     </style>
 </head>
 <body>
 
 {# ШАПКА и главное меню #}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
+{# Убрал bg-dark и navbar-dark, теперь цвета управляются через CSS #}
+<nav class="navbar navbar-expand-lg mb-4">
   <div class="container">
     <a class="navbar-brand" href="/">ETPGRF — единая типографика для веба</a>
   </div>
@@ -142,16 +191,18 @@
 <div id="cookie-banner" class="fixed-bottom p-4 fs-5" style="display: none;">
   <div class="container d-flex justify-content-between align-items-center">
     <p class="mb-0 pe-5">
-      В&nbsp;соответствии с&nbsp;GDPR и&nbsp;152-ФЗ, уведомляем вас, что настоящий сайт использует файлы cookie
+      В&nbsp;соответствии с&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr>
-      для&nbsp;сбора данных о&nbsp;поведении пользо&shy;вателей, с&nbsp;целью аналитики и&nbsp;улучшения работы
+      и&nbsp;152-<abbr title="Федеральный закон">ФЗ</abbr>, уведомляем вас, что настоящий сайт использует файлы cookie
-      сайта. Оставаясь на&nbsp;сайте, вы&nbsp;соглашаетесь с&nbsp;нашей
+      для&nbsp;сбора данных о&nbsp;поведении пользо&shy;вателей, с&nbsp;целью аналитики и&nbsp;улучшения своей работы.
+      Оставаясь на&nbsp;сайте, вы&nbsp;соглашаетесь с&nbsp;нашей
       <a href="/privacy-policy">политикой конфи&shy;денциаль&shy;ности</a>.
     </p>
     <button id="cookie-accept" class="btn btn-lg ms-3">Принять</button>
   </div>
 </div>
 
-{# Bootstrap JS #}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+{# Bootstrap JS #}
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
 {# Логика куки-баннера и счетчиков #}
 <script>