From d56983b26b10db4d9e6e515a46401ef0dccb14a8 Mon Sep 17 00:00:00 2001
From: Dmitry Petrov <dpetroff@gmail.com>
Date: Sat, 24 Jan 2026 00:31:29 +0100
Subject: [PATCH] fix the list of rss feed items in dark mode

---
 AGENTS.md                           | 20 ++++++++++++++++++++
 cmd/web/client/scss/_dark-mode.scss |  8 ++++++++
 2 files changed, 28 insertions(+)

diff --git a/AGENTS.md b/AGENTS.md
index 3354827..80fffd3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -174,8 +174,28 @@ Configured in `NewParser()`:
 3. Register in `NewParser()` via `nodeRenderers` slice
 4. Conditionally add based on view type if needed
 
+## Dark Mode Styling
+
+### Architecture
+Located in `/Users/dima/code/pcom/cmd/web/client/scss/_dark-mode.scss`:
+- Uses Bootstrap 5.3+ color modes with `data-bs-theme="dark"` and `prefers-color-scheme` media query
+- All styles defined in `@mixin dark-mode-styles` for reusability
+
+### CSS Variable Override Pattern
+**Override Bootstrap component variables by scoping them within component selectors:**
+```scss
+.list-group {
+  --bs-list-group-bg: #2d2d2d;
+  --bs-list-group-border-color: #404040;
+  --bs-list-group-color: var(--text-color);
+}
+```
+
+**Do NOT define ad-hoc colors directly on elements** - always use Bootstrap's CSS variables to ensure proper inheritance and theming.
+
 ## File Locations
 - HTML Templates: `/Users/dima/code/pcom/cmd/web/client/html/`
 - JavaScript: `/Users/dima/code/pcom/cmd/web/client/js/`
 - Main JS entry: `/Users/dima/code/pcom/cmd/web/client/js/index.js`
 - Markdown package: `/Users/dima/code/pcom/pkg/markdown/`
+- Dark mode styles: `/Users/dima/code/pcom/cmd/web/client/scss/_dark-mode.scss`
diff --git a/cmd/web/client/scss/_dark-mode.scss b/cmd/web/client/scss/_dark-mode.scss
index 1d3bd32..8babf80 100644
--- a/cmd/web/client/scss/_dark-mode.scss
+++ b/cmd/web/client/scss/_dark-mode.scss
@@ -329,6 +329,14 @@
     border-color: #404040;
     color: #6c757d;
   }
+
+  // List groups
+  .list-group {
+    --bs-list-group-bg: #2d2d2d;
+    --bs-list-group-border-color: #404040;
+    --bs-list-group-color: var(--text-color);
+    --bs-list-group-action-hover-bg: #353535;
+  }
 }
 
 // Apply dark mode styles manually with data-bs-theme="dark"