mod: темы (светлая и темная) включаются автоматически

2026-01-10 15:44:18 +03:00
parent eb79db9f89
commit b03b517970
4 changed files with 45 additions and 7 deletions
--- a/etpgrf_site/typograph/templates/typograph/base.html
+++ b/etpgrf_site/typograph/templates/typograph/base.html
@@ -1,21 +1,37 @@
-<!doctype html>
+{% load static %}<!doctype html>
 <html lang="ru">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
+
    {# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    {# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
    {# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script>
    {# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    {# Polyfill for Import Maps #}<script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js"></script>

+    <script type="text/javascript">
+        // Автоматическое переключение темы (Dark/Light)
+        (function() {
+            function updateTheme(e) {
+                const theme = e.matches ? 'dark' : 'light';
+                document.documentElement.setAttribute('data-bs-theme', theme);
+            }
+            const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            updateTheme(darkModeMediaQuery); // Установить при загрузке
+            darkModeMediaQuery.addEventListener('change', updateTheme); // Слушать изменения
+        })();
+    </script>
+
    <style>
        /* Небольшие стили для красоты */
-        body { background-color: #f8f9fa; }
+        body { background-color: var(--bs-body-bg); }
        .result-box {
-            background: white;
-            border: 1px solid #dee2e6;
+            /* Используем переменные 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;
@@ -25,6 +41,12 @@
            white-space: pre-wrap; /* Чтобы pre переносил строки */
            font-family: inherit; /* Наследуем шрифт, если это pre */
        }
+        /* Стили для CodeMirror, чтобы он вписался в Bootstrap */
+        .cm-editor {
+            border: 1px solid var(--bs-border-color);
+            border-radius: 0.375rem;
+            height: 300px; /* Фиксированная высота */
+        }

        /* --- Висячая пунктуация (Hanging Punctuation) --- */
        /* Слева */
--- a/etpgrf_site/typograph/templates/typograph/index.html
+++ b/etpgrf_site/typograph/templates/typograph/index.html
@@ -266,11 +266,17 @@
      syntaxHighlighting,
      defaultHighlightStyle,
      bracketMatching,
-      defaultKeymap
+      defaultKeymap,
+      Compartment
    } from "{% static 'codemirror/editor.js' %}";

    const resultWrapper = document.getElementById('cm-result-wrapper');

+    const themeCompartment = new Compartment();
+    function getTheme() {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? oneDark : [];
+    }
+
    // Словарь названий для спецсимволов
    const charNames = {
      0x00a0: "NoBreakable Space (неразрывный пробел — &nbsp;)",
@@ -317,7 +323,7 @@
        bracketMatching(),
        keymap.of(defaultKeymap),
        html(),
-        oneDark,
+        themeCompartment.of(getTheme()),
        EditorState.readOnly.of(true)
      ]
    });
@@ -335,5 +341,11 @@
        });
      }
    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      resultView.dispatch({
+        effects: themeCompartment.reconfigure(getTheme())
+      });
+    });
  </script>
 {% endblock %}
--- a/frontend-assembly/src/editor.js
+++ b/frontend-assembly/src/editor.js
@@ -1,6 +1,9 @@
 // Реэкспорт всех необходимых модулей для использования в браузере (через <script type="module">)

-export { EditorState } from "@codemirror/state";
+export {
+  EditorState,
+  Compartment
+} from "@codemirror/state";
 export {
  EditorView,
  lineNumbers,
--- a/public/static/codemirror/editor.js
+++ b/public/static/codemirror/editor.js
@@ -22853,6 +22853,7 @@ var oneDark = [oneDarkTheme, /* @__PURE__ */ syntaxHighlighting(oneDarkHighlight
 function createReadOnlyEditor(parent, text) {
 }
 export {
+  Compartment,
  Decoration,
  EditorState,
  EditorView,