From 22eacbaf2712aee2a1c448a0e53f241f8c7bd255 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Sat, 14 Feb 2026 09:30:16 -0800
Subject: ui: simplify themes to light/dark and improve theme-aware styling
 (fixing NK-dp5efo)

---
 frontend/src/App.css                  |  2 +-
 frontend/src/components/FeedItem.css  | 12 +++++++-----
 frontend/src/components/FeedItems.css |  2 +-
 frontend/src/components/FeedList.css  | 33 ++++++++++++++++-----------------
 frontend/src/components/FeedList.tsx  | 19 ++++++++++++-------
 frontend/src/components/Settings.css  | 17 ++++++++++-------
 frontend/src/index.css                | 23 ++++++++++++-----------
 7 files changed, 59 insertions(+), 49 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/App.css b/frontend/src/App.css
index ff3ea60..97b7d65 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -66,7 +66,7 @@ body {
 .dashboard-sidebar {
   width: 15rem;
   background: var(--sidebar-bg);
-  border-right: 1px solid #999;
+  border-right: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
diff --git a/frontend/src/components/FeedItem.css b/frontend/src/components/FeedItem.css
index 1736032..fc2c850 100644
--- a/frontend/src/components/FeedItem.css
+++ b/frontend/src/components/FeedItem.css
@@ -52,7 +52,8 @@
 }
 
 .star-btn.is-unstarred {
-  color: black;
+  color: var(--text-color);
+  opacity: 0.3;
 }
 
 .star-btn:hover {
@@ -60,8 +61,8 @@
 }
 
 .action-btn {
-  background: whitesmoke;
-  border: none;
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border-color, #ccc);
   cursor: pointer;
   padding: 2px 6px;
   font-size: 1rem;
@@ -102,7 +103,8 @@
 
 .item-description blockquote {
   padding: 1rem 1rem 0 1rem;
-  border-left: 4px solid #ddd;
-  color: #666;
+  border-left: 4px solid var(--sidebar-bg);
+  color: var(--text-color);
+  opacity: 0.8;
   margin-left: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/components/FeedItems.css b/frontend/src/components/FeedItems.css
index 02323a9..7154ac2 100644
--- a/frontend/src/components/FeedItems.css
+++ b/frontend/src/components/FeedItems.css
@@ -5,7 +5,7 @@
 
 .feed-items h2 {
   margin-top: 0;
-  border-bottom: 2px solid #eee;
+  border-bottom: 2px solid var(--border-color);
   padding-bottom: 0.5rem;
 }
 
diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
index ff0f41b..fa0278a 100644
--- a/frontend/src/components/FeedList.css
+++ b/frontend/src/components/FeedList.css
@@ -15,23 +15,24 @@
 .search-input {
   width: 100%;
   padding: 0.5rem;
-  border: 1px solid #999;
-  background: #eee;
+  border: 1px solid var(--border-color, #999);
+  background: var(--bg-color);
+  color: var(--text-color);
   font-size: 1rem;
   font-family: inherit;
 }
 
 .search-input:focus {
   outline: none;
-  background: white;
-  border-color: #000;
+  background: var(--bg-color);
+  border-color: var(--link-color);
 }
 
 .feed-list h2,
 .feed-section-header {
   font-size: 1.2rem;
   margin-bottom: 0.5rem;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--border-color, #999);
   padding-bottom: 0.25rem;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -149,22 +150,20 @@
 }
 
 .theme-selector button {
-  font-size: 0.8rem;
-  padding: 0.2rem 0.5rem;
-  width: 30%;
-  background: whitesmoke;
-  color: blue;
-  border: 1px solid #ccc;
+  font-size: 1.2rem;
+  padding: 0.5rem;
+  width: 48%;
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border-color, #ccc);
   border-radius: 4px;
-  font-variant: small-caps;
-  text-transform: lowercase;
 }
 
 .theme-selector button:hover {
-  background: #eee;
+  background: var(--bg-color);
 }
 
 .theme-selector button.active {
-  color: black;
-  border-color: #000;
-}
+  background: var(--bg-color);
+  border-color: var(--link-color);
+  box-shadow: 0 0 5px var(--link-color);
+}
\ No newline at end of file
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index d2dc8e1..1cd1bfd 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -138,14 +138,19 @@ export default function FeedList({
 
       <div className="theme-section">
         <div className="theme-selector">
-          <button onClick={() => setTheme('light')} className={theme === 'light' ? 'active' : ''}>
-            light
+          <button
+            onClick={() => setTheme('light')}
+            className={theme === 'light' ? 'active' : ''}
+            title="Light Theme"
+          >
+            ☀️
           </button>
-          <button onClick={() => setTheme('dark')} className={theme === 'dark' ? 'active' : ''}>
-            dark
-          </button>
-          <button onClick={() => setTheme('black')} className={theme === 'black' ? 'active' : ''}>
-            black
+          <button
+            onClick={() => setTheme('dark')}
+            className={theme === 'dark' ? 'active' : ''}
+            title="Dark Theme"
+          >
+            🌙
           </button>
         </div>
       </div>
diff --git a/frontend/src/components/Settings.css b/frontend/src/components/Settings.css
index 6e74475..171dcad 100644
--- a/frontend/src/components/Settings.css
+++ b/frontend/src/components/Settings.css
@@ -5,11 +5,11 @@
 }
 
 .add-feed-section {
-  background: #f9f9f9;
+  background: var(--sidebar-bg);
   padding: 1.5rem;
   border-radius: 8px;
   margin-bottom: 2rem;
-  border: 1px solid #eee;
+  border: 1px solid var(--border-color);
 }
 
 .add-feed-form {
@@ -20,7 +20,9 @@
 .feed-input {
   flex: 1;
   padding: 0.5rem;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
   border-radius: 4px;
   font-size: 1rem;
 }
@@ -33,7 +35,7 @@
 .settings-feed-list {
   list-style: none;
   padding: 0;
-  border: 1px solid #eee;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
 }
 
@@ -42,7 +44,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .settings-feed-item:last-child {
@@ -61,7 +63,8 @@
 }
 
 .feed-url {
-  color: #666;
+  color: var(--text-color);
+  opacity: 0.6;
   font-size: 0.9rem;
 }
 
@@ -81,4 +84,4 @@
 .delete-btn:disabled {
   background: #ffcdd2;
   cursor: not-allowed;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 209a30a..3365d34 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -30,6 +30,16 @@ h5,
   background-color: var(--bg-color);
 }
 
+.theme-light {
+  --bg-color: #ffffff;
+  --text-color: rgba(0, 0, 0, 0.87);
+  --sidebar-bg: #ccc;
+  --link-color: #0000ee;
+  --border-color: #999;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #24292e;
@@ -43,25 +53,16 @@ h5,
 }
 
 .theme-dark {
-  --bg-color: #24292e;
-  --text-color: #ffffff;
-  --sidebar-bg: #1b1f23;
-  --link-color: rgb(90, 200, 250);
-  background-color: var(--bg-color);
-  color: var(--text-color);
-}
-
-.theme-black {
   --bg-color: #000000;
   --text-color: #ffffff;
   --sidebar-bg: #111111;
   --link-color: rgb(90, 200, 250);
+  --border-color: #333;
   background-color: var(--bg-color);
   color: var(--text-color);
 }
 
-.theme-dark button,
-.theme-black button {
+.theme-dark button {
   background-color: #333;
   color: #fff;
 }
-- 
cgit v1.2.3