Проблемы с переключением темы для кода 1С

blog/templates/blog/article_detail.html

@@ -4,6 +4,7 @@
 {% load seo_tags %}
 
 {% block extra_css %}
+    <link id="theme-css-1c" rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}">
     <link rel="stylesheet" href="{% static 'blog/css/article.css' %}">
 {% endblock %}
 

programmer/static/blog/css/article.css

@@ -173,9 +173,13 @@
     margin-bottom: 0;
 }
 
-/* --- Inline code --- */
+/* --- Inline code (not inside pre) --- */
+/*
+ * High specificity is fine here because this selector explicitly
+ * excludes pre > code, so it never touches hljs blocks.
+ */
 
-.content-card .card-content code {
+.content-card .card-content :not(pre) > code {
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
     font-size: 0.875em;
     background: var(--bg-tertiary);
@@ -186,28 +190,39 @@
     word-break: break-all;
 }
 
-/* --- Code blocks (CKEditor generates <pre><code>) --- */
+/* --- Code blocks (CKEditor generates <pre><code class="hljs">) --- */
+/*
+ * ALL pre and pre code rules use :where() — zero specificity.
+ * This guarantees hljs always wins on colors, background, and padding.
+ *
+ * Responsibility split:
+ *   article.css  → layout only: margin, border-radius, overflow, shadow
+ *   hljs CSS     → everything visual: background, color, padding, font-size
+ *
+ * font-size:0 on pre prevents inherited line-height:1.8 from inflating
+ * the spacing between lines (line-height is computed from font-size,
+ * so zeroing it on the wrapper element neutralises the inheritance).
+ * font-size is restored on pre code.
+ */
 
-.content-card .card-content pre {
+:where(.content-card .card-content) pre {
     margin: 1.5rem 0;
-    padding: 1.5rem;
+    padding: 0;           /* hljs sets padding:1em on code.hljs — don't double it */
-    background: #1A1F2E;
     border-radius: var(--radius-md);
     overflow-x: auto;
-    border: 1px solid var(--border-dark);
     box-shadow: var(--shadow-md);
+    font-size: 0;         /* neutralise inherited line-height */
+    line-height: 1;
+    background: none;     /* hljs controls background (#fff or #282c34) */
 }
 
-.content-card .card-content pre code {
+:where(.content-card .card-content) pre code {
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-    font-size: 0.9rem;
+    font-size: 0.9rem;    /* restore font-size for hljs to work from */
-    background: transparent;
+    line-height: 1.5;
-    color: #E2E8F0;
-    padding: 0;
-    border: none;
-    border-radius: 0;
     word-break: normal;
     white-space: pre;
+    /* NO color, NO background, NO padding — hljs owns these */
 }
 
 /* --- Tables --- */
@@ -414,9 +429,10 @@
         margin: 1rem auto;
     }
 
-    .content-card .card-content pre {
+    /* :where() keeps specificity at zero so hljs still wins on mobile */
-        padding: 1rem;
+    :where(.content-card .card-content) pre {
-        font-size: 0.8rem;
+        box-shadow: none;
+        margin: 1rem 0;
     }
 
     .content-card .card-content th,

programmer/static/programmer/js/theme-switcher.js

@@ -1,78 +1,72 @@
-// Theme Switcher Script
+// theme-switcher.js
 document.addEventListener('DOMContentLoaded', function () {
+
     const themeToggle       = document.getElementById('theme-toggle');
     const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
     const themeCSS1C        = document.getElementById('theme-css-1c');
 
-    // Проверяем сохраненную тему в localStorage
+    // FIX: Derive the base path once so we never rely on the current href value.
-    const savedTheme = localStorage.getItem('theme');
+    // href.replace() was silently failing when the filename didn't match exactly.
+    const hljsBasePath = themeCSS1C
+        ? themeCSS1C.href.replace(/1c-(light|dark)\.min\.css$/, '')
+        : null;
 
-    // Устанавливаем светлую тему по умолчанию
+    // console.log('Initial href:', themeCSS1C?.href);
-    if (savedTheme === 'dark') {
+    // console.log('Computed basePath:', hljsBasePath);
-        switchToDarkTheme();
+
+    // ── Theme application ────────────────────────────────────────────────────
+
+    function applyTheme(isDark) {
+        if (isDark) {
+            document.body.classList.add('theme-dark');
+            if (themeCSS1C && hljsBasePath) {
+                themeCSS1C.href = hljsBasePath + '1c-dark.min.css';
+            }
         } else {
-        switchToLightTheme(); // Светлая тема по умолчанию
+            document.body.classList.remove('theme-dark');
+            if (themeCSS1C && hljsBasePath) {
+                themeCSS1C.href = hljsBasePath + '1c-light.min.css';
+            }
         }
 
-    // Обработчик переключения темы для десктопного переключателя
+        // FIX: CSS defines checked = dark (moon icon).
+        // Previously the handlers were calling the wrong function on check/uncheck.
+        if (themeToggle)       themeToggle.checked       = isDark;
+        if (mobileThemeToggle) mobileThemeToggle.checked = isDark;
+
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    }
+
+    // ── Initialise from saved preference ────────────────────────────────────
+
+    const savedTheme = localStorage.getItem('theme');
+    applyTheme(savedTheme === 'dark');
+
+    // ── Event listeners ──────────────────────────────────────────────────────
+
+    // FIX: Both toggles now call the same applyTheme() — no duplicated logic,
+    // and both are always kept in sync with each other automatically.
     if (themeToggle) {
         themeToggle.addEventListener('change', function () {
-            if (this.checked) {
+            applyTheme(this.checked);
-                switchToLightTheme();
-            } else {
-                switchToDarkTheme();
-            }
         });
     }
 
-    // Обработчик переключения темы для мобильного переключателя
     if (mobileThemeToggle) {
         mobileThemeToggle.addEventListener('change', function () {
-            if (this.checked) {
+            applyTheme(this.checked);
-                switchToLightTheme();
-            } else {
-                switchToDarkTheme();
-            }
-            // Синхронизируем оба переключателя
-            if (themeToggle) {
-                themeToggle.checked = this.checked;
-            }
         });
     }
 
-    function switchToLightTheme() {
+    // ── CSS error handling ───────────────────────────────────────────────────
-        document.body.classList.remove('theme-dark');
+
+    // FIX: was referencing undefined variable `themeCSS` instead of `themeCSS1C`
     if (themeCSS1C) {
-            themeCSS1C.href = themeCSS1C.href.replace('1c-dark.min.css', '1c-light.min.css');
+        themeCSS1C.onerror = function () {
-        }
+            console.error('Ошибка загрузки CSS файла темы подсветки кода');
-        if (themeToggle) themeToggle.checked = true;
+            // Fall back to light theme
-        if (mobileThemeToggle) mobileThemeToggle.checked = true;
+            applyTheme(false);
-        localStorage.setItem('theme', 'light');
-        // 👇 Обновляем иконку ИКС
-        updateIKSTheme();
-    }
-
-    function switchToDarkTheme() {
-        document.body.classList.add('theme-dark');
-        if (themeCSS1C) {
-            themeCSS1C.href = themeCSS1C.href.replace('1c-light.min.css', '1c-dark.min.css');
-        }
-        if (themeToggle) themeToggle.checked = false;
-        if (mobileThemeToggle) mobileThemeToggle.checked = false;
-        localStorage.setItem('theme', 'dark');
-        // 👇 Обновляем иконку ИКС
-        updateIKSTheme();
-    }
-
-    // Синхронизация переключателей при загрузке
-    if (themeToggle && mobileThemeToggle) {
-        mobileThemeToggle.checked = themeToggle.checked;
-    }
-
-    // Обработка ошибок загрузки CSS
-    themeCSS.onerror = function() {
-        console.error('Ошибка загрузки CSS файла темы');
-        // Восстанавливаем светлую тему по умолчанию при ошибке
-        themeCSS1C.href = themeCSS1C.href.replace('1c-light.min.css', '1c-dark.min.css');
         };
+    }
+
 });

programmer/templates/programmer/base.html

@@ -48,7 +48,8 @@
 
     <!-- Тема Highlight.js -->
 <!--    <link rel="stylesheet" href="{% static 'programmer/css/highlight-default.min.css' %}">-->
-    <link rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}" id="theme-css-1c">
+    <!-- <link rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}" id="theme-css-1c"> -->
+     <link id="theme-css-1c" rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}">
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <link rel="shortcut icon" href="{% static 'programmer/images/main.ico' %}" type="image/x-icon">