5 files changed, 46 insertions, 37 deletions

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