From fecba2011b68f16828f76bb5a6f9274c6b4020d8 Mon Sep 17 00:00:00 2001
From: Zareian <zareian.comp@gmail.com>
Date: Thu, 17 Sep 2026 23:11:44 +0330
Subject: [PATCH] make the content browser readable in dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

صفحه‌ی مرورِ محتوا در پنلِ ادمین عملاً نامرئی بود: هر پنل زمینه‌ی روشنِ ثابت
داشت (#fff، #f6f6f6، #f1f5f9) ولی رنگِ متن تعیین نشده بود. مرورگری که روی
حالتِ تیره است، رنگِ متنِ ادمین را روشن می‌کند — و نتیجه متنِ سفید روی زمینه‌ی
سفید بود.

حالا پنل‌ها از متغیرهای خودِ ادمین استفاده می‌کنند تا با هر دو تم بروند، و
چیپ‌های رنگی که عمداً زمینه‌ی روشنِ ثابت دارند رنگِ متنِ تیره‌ی صریح گرفتند.
همین اشکال در صفحه‌ی واردکردنِ سوال هم بود و درست شد.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 content/templates/admin/content/browser.html  | 44 ++++++++++++-------
 .../admin/content/question/import.html        |  2 +-
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/content/templates/admin/content/browser.html b/content/templates/admin/content/browser.html
index b57c5c2..2addfde 100644
--- a/content/templates/admin/content/browser.html
+++ b/content/templates/admin/content/browser.html
@@ -1,20 +1,31 @@
 {% extends "admin/base_site.html" %}
 {% block content %}
 <style>
-  .cb { direction: rtl; }
+  /* رنگ‌ها از متغیرهای خودِ پنلِ ادمین می‌آیند، نه ثابت.
+     چرا: قبلاً هر پنل background روشن داشت ولی color نداشت. در حالتِ تیره‌ی
+     مرورگر، ادمین رنگِ متن را روشن می‌کند و نتیجه متنِ سفید روی زمینه‌ی سفید
+     می‌شد — یعنی صفحه عملاً خوانا نبود. مقدارِ دومِ هر var پشتیبانِ حالتِ روشن
+     است، پس اگر متغیری نبود هم چیزی خراب نمی‌شود.
+     چیپ‌های رنگی (badge/choice) عمداً زمینه‌ی روشنِ ثابت دارند و برای همین
+     رنگِ متنشان هم صریح و تیره ست شده تا در هر دو حالت خوانا بمانند. */
+  .cb { direction: rtl; color: var(--body-fg, #333); }
   .cb-cols { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
-  .cb-col { flex: 1 1 190px; min-width: 170px; border: 1px solid #ddd; border-radius: 8px;
-            background: #fff; display: flex; flex-direction: column; max-height: 420px; }
-  .cb-col h3 { margin: 0; padding: 8px 10px; font-size: 13px; background: #f6f6f6;
-               border-bottom: 1px solid #ddd; border-radius: 8px 8px 0 0; }
+  .cb-col { flex: 1 1 190px; min-width: 170px; border: 1px solid var(--border-color, #ddd);
+            border-radius: 8px; background: var(--body-bg, #fff); color: var(--body-fg, #333);
+            display: flex; flex-direction: column; max-height: 420px; }
+  .cb-col h3 { margin: 0; padding: 8px 10px; font-size: 13px;
+               background: var(--darkened-bg, #f6f6f6); color: var(--body-fg, #333);
+               border-bottom: 1px solid var(--border-color, #ddd); border-radius: 8px 8px 0 0; }
   .cb-list { overflow-y: auto; flex: 1; }
-  .cb-item { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0;
+  .cb-item { padding: 7px 10px; cursor: pointer;
+             border-bottom: 1px solid var(--hairline-color, #f0f0f0);
              font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
-  .cb-item:hover { background: #eef5ff; }
-  .cb-item.sel { background: #dbeafe; font-weight: 600; }
-  .cb-count { color: #888; font-size: 11px; }
-  .cb-empty { padding: 10px; color: #999; font-size: 12px; }
-  .cb-q { border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin-top: 10px; background: #fff; }
+  .cb-item:hover { background: var(--selected-row, #eef5ff); }
+  .cb-item.sel { background: var(--selected-bg, #dbeafe); font-weight: 600; }
+  .cb-count { color: var(--body-quiet-color, #888); font-size: 11px; }
+  .cb-empty { padding: 10px; color: var(--body-quiet-color, #999); font-size: 12px; }
+  .cb-q { border: 1px solid var(--border-color, #ddd); border-radius: 8px; padding: 12px;
+          margin-top: 10px; background: var(--body-bg, #fff); color: var(--body-fg, #333); }
   .cb-q.flag { border-color: #f0a; border-right: 4px solid #e11d48; }
   .cb-q-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
   .cb-badges { display: flex; gap: 6px; flex-wrap: wrap; }
@@ -23,13 +34,14 @@
   .cb-badge.info { background: #f1f5f9; color: #475569; }
   .cb-choices { margin: 8px 0 0; padding: 0; list-style: none; display: flex;
                 flex-wrap: wrap; gap: 6px; }
-  .cb-choices li { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: #f1f5f9; }
+  .cb-choices li { font-size: 12px; padding: 3px 9px; border-radius: 6px;
+                   background: #f1f5f9; color: #334155; }
   .cb-choices li.ok { background: #dcfce7; color: #15803d; font-weight: 600; }
 </style>
 
 <div class="cb">
   <h1>مرورِ محتوا</h1>
-  <p style="color:#666">از راست به چپ انتخاب کنید تا به سوال‌ها برسید.</p>
+  <p style="color:var(--body-quiet-color,#666)">از راست به چپ انتخاب کنید تا به سوال‌ها برسید.</p>
 
   <div class="cb-cols">
     <div class="cb-col">
@@ -85,7 +97,7 @@
     const box = el('questions');
     let html = '<a class="addlink" href="' + data.addUrl + '">افزودنِ سوالِ تازه به این مبحث</a>';
     if (!data.results.length) {
-      box.innerHTML = html + '<p style="color:#999;margin-top:10px">هنوز سوالی برای این مبحث ساخته نشده.</p>';
+      box.innerHTML = html + '<p style="color:var(--body-quiet-color,#999);margin-top:10px">هنوز سوالی برای این مبحث ساخته نشده.</p>';
       return;
     }
     data.results.forEach((q) => {
@@ -103,7 +115,7 @@
       }
       html += '<div class="cb-q' + (flagged ? ' flag' : '') + '">'
         + '<div class="cb-q-top"><div><b>' + esc(q.prompt) + '</b>'
-        + '<div style="color:#888;font-size:11px;margin-top:2px">' + esc(q.type) + ' · #' + q.id + '</div></div>'
+        + '<div style="color:var(--body-quiet-color,#888);font-size:11px;margin-top:2px">' + esc(q.type) + ' · #' + q.id + '</div></div>'
         + '<div class="cb-badges">' + badges
         + '<a class="cb-badge info" href="' + q.editUrl + '">ویرایش</a></div></div>'
         + '<ul class="cb-choices">'
@@ -132,7 +144,7 @@
           el('questions').innerHTML = '';
           const lessons = await load('lessons/' + nodeId + '/');
           fill(el('col-lesson'), lessons.results, 'question_count', async (lessonId) => {
-            el('questions').innerHTML = '<p style="color:#999">در حالِ بارگذاری…</p>';
+            el('questions').innerHTML = '<p style="color:var(--body-quiet-color,#999)">در حالِ بارگذاری…</p>';
             renderQuestions(await load('questions/' + lessonId + '/'));
           });
         });
diff --git a/content/templates/admin/content/question/import.html b/content/templates/admin/content/question/import.html
index b6581ac..2e56061 100644
--- a/content/templates/admin/content/question/import.html
+++ b/content/templates/admin/content/question/import.html
@@ -7,7 +7,7 @@
      مورد را انتخاب کنید و اکشنِ «دریافتِ فایلِ سوال‌های انتخاب‌شده» را بزنید —
      خروجی دقیقاً همین قالب است.</p>
 
-  <pre style="background:#f6f6f6;padding:12px;border-radius:6px;direction:ltr;text-align:left">[
+  <pre style="background:var(--darkened-bg,#f6f6f6);color:var(--body-fg,#333);padding:12px;border-radius:6px;direction:ltr;text-align:left">[
   {
     "lessonId": 42,
     "prompt": "حاصل ۲+۳ چند است؟",