theme adjustments

src/app.css

@@ -230,12 +230,39 @@ main {
   cursor: pointer;
 }
 
+
 :global(.dark) .write-button {
   border-color: var(--fog-dark-border, #374151);
-  background: var(--fog-dark-surface, #1e293b);
+  background: var(--fog-dark-surface, #1e293b); /* Use surface color for contrast with page background */
+  color: var(--fog-dark-text, #f9fafb);
+}
+
+/* Ensure icon inherits color - the SVG's stroke="currentColor" will use this */
+.write-button :global(.icon-wrapper) {
+  color: inherit;
+}
+
+/* Directly set stroke color on SVG paths for write-button */
+/* This ensures the icon is visible even if currentColor doesn't resolve correctly */
+.write-button :global(.icon-wrapper svg[stroke="currentColor"]),
+.write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
+  stroke: currentColor;
+  fill: none;
+}
+
+/* Ensure write-button icon is always visible in dark mode */
+:global(.dark) .write-button :global(.icon-wrapper) {
   color: var(--fog-dark-text, #f9fafb);
 }
 
+/* Directly set stroke color on SVG paths for write-button in dark mode */
+/* Use !important to override any conflicting rules */
+:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"]),
+:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
+  stroke: var(--fog-dark-text, #f9fafb) !important;
+  fill: none !important;
+}
+
 .write-button:hover {
   background: var(--fog-highlight, #f3f4f6);
   border-color: var(--fog-accent, #64748b);
@@ -1871,3 +1898,82 @@ audio {
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Publish Button Theme Support */
+/* forum Theme - Publish Button */
+[data-design-theme="forum"] .publish-button,
+[data-design-theme="forum"] .republish-button {
+  background-color: #ff4500 !important; /* forum orange */
+  color: #ffffff !important; /* White text on orange for good contrast */
+  border: none !important;
+}
+
+[data-design-theme="forum"] .publish-button:hover:not(:disabled),
+[data-design-theme="forum"] .republish-button:hover:not(:disabled) {
+  background-color: #d93a00 !important; /* Darker orange on hover */
+  opacity: 1 !important; /* Override opacity for better visibility */
+}
+
+[data-design-theme="forum"].dark .publish-button,
+[data-design-theme="forum"].dark .republish-button {
+  background-color: #ff4500 !important; /* forum orange (same in dark mode) */
+  color: #ffffff !important; /* White text on orange */
+}
+
+[data-design-theme="forum"].dark .publish-button:hover:not(:disabled),
+[data-design-theme="forum"].dark .republish-button:hover:not(:disabled) {
+  background-color: #ff6b35 !important; /* Lighter orange on hover in dark mode */
+  opacity: 1 !important;
+}
+
+/* Terminal Theme - Publish Button */
+[data-design-theme="terminal"] .publish-button,
+[data-design-theme="terminal"] .republish-button {
+  background-color: rgba(0, 255, 0, 0.2) !important; /* Green background */
+  color: #00ff00 !important; /* Green text */
+  border: 2px solid #00ff00 !important; /* Green border */
+  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important; /* Green glow */
+  text-shadow: 0 0 5px rgba(0, 255, 0, 0.8) !important; /* Green text glow */
+}
+
+[data-design-theme="terminal"] .publish-button:hover:not(:disabled),
+[data-design-theme="terminal"] .republish-button:hover:not(:disabled) {
+  background-color: rgba(0, 255, 0, 0.3) !important; /* Brighter green on hover */
+  box-shadow: 0 0 15px rgba(0, 255, 0, 0.8) !important; /* Stronger glow */
+  text-shadow: 0 0 8px rgba(0, 255, 0, 1) !important; /* Stronger text glow */
+  opacity: 1 !important; /* Override opacity */
+}
+
+[data-design-theme="terminal"] .publish-button:disabled,
+[data-design-theme="terminal"] .republish-button:disabled {
+  opacity: 0.4 !important; /* Reduced opacity for disabled state */
+  cursor: not-allowed !important;
+}
+
+/* socialmedia Theme - Publish Button */
+[data-design-theme="socialmedia"] .publish-button,
+[data-design-theme="socialmedia"] .republish-button {
+  background-color: #1d9bf0 !important; /* socialmedia blue */
+  color: #ffffff !important; /* White text on blue for good contrast */
+  border: none !important;
+  border-radius: 9999px !important; /* Rounded pill shape */
+  font-weight: 700 !important;
+}
+
+[data-design-theme="socialmedia"] .publish-button:hover:not(:disabled),
+[data-design-theme="socialmedia"] .republish-button:hover:not(:disabled) {
+  background-color: #1a8cd8 !important; /* Darker blue on hover */
+  opacity: 1 !important; /* Override opacity */
+}
+
+[data-design-theme="socialmedia"].dark .publish-button,
+[data-design-theme="socialmedia"].dark .republish-button {
+  background-color: #1d9bf0 !important; /* socialmedia blue (same in dark mode) */
+  color: #ffffff !important; /* White text on blue */
+}
+
+[data-design-theme="socialmedia"].dark .publish-button:hover:not(:disabled),
+[data-design-theme="socialmedia"].dark .republish-button:hover:not(:disabled) {
+  background-color: #1a8cd8 !important; /* Darker blue on hover */
+  opacity: 1 !important;
+}

src/lib/components/content/EmojiPicker.svelte

@@ -602,14 +602,20 @@
   .emoji-footer-button {
     padding: 0.5rem 1rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: #ffffff; /* White text on accent background for good contrast */
     border: none;
     border-radius: 0.375rem;
     cursor: pointer;
     font-size: 0.875rem;
+    font-weight: 500;
     transition: opacity 0.2s;
   }
 
+  :global(.dark) .emoji-footer-button {
+    background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
+  }
+
   .emoji-footer-button:hover:not(:disabled) {
     opacity: 0.9;
   }

src/lib/components/content/GifPicker.svelte

@@ -807,14 +807,20 @@
     margin-top: 1rem;
     padding: 0.5rem 1rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: #ffffff; /* White text on accent background for good contrast */
     border: none;
     border-radius: 0.375rem;
     cursor: pointer;
     font-size: 0.875rem;
+    font-weight: 500;
     transition: opacity 0.2s;
   }
 
+  :global(.dark) .retry-button {
+    background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
+  }
+
   .retry-button:hover {
     opacity: 0.9;
   }
@@ -898,14 +904,20 @@
   .gif-footer-button {
     padding: 0.5rem 1rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: #ffffff; /* White text on accent background for good contrast */
     border: none;
     border-radius: 0.375rem;
     cursor: pointer;
     font-size: 0.875rem;
+    font-weight: 500;
     transition: opacity 0.2s;
   }
 
+  :global(.dark) .gif-footer-button {
+    background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
+  }
+
   .gif-footer-button:hover:not(:disabled) {
     opacity: 0.9;
   }
@@ -1085,16 +1097,28 @@
 
   .metadata-button.cancel:hover {
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: #ffffff; /* White text on accent background for good contrast */
     border-color: var(--fog-accent, #64748b);
   }
 
+  :global(.dark) .metadata-button.cancel:hover {
+    background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
+    border-color: var(--fog-dark-accent, #94a3b8);
+  }
+
   .metadata-button.publish {
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: #ffffff; /* White text on accent background for good contrast */
     border-color: var(--fog-accent, #64748b);
   }
 
+  :global(.dark) .metadata-button.publish {
+    background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
+    border-color: var(--fog-dark-accent, #94a3b8);
+  }
+
   .metadata-button.publish:hover:not(:disabled) {
     opacity: 0.9;
   }

src/lib/components/modals/PublicationStatusModal.svelte

@@ -175,6 +175,17 @@
     border-bottom-color: #475569;
   }
 
+  .modal-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-header h2 {
+    color: var(--fog-dark-text, #f1f5f9);
+  }
+
   .close-button {
     background: none;
     border: none;
@@ -183,10 +194,35 @@
     padding: 0;
     width: 2rem;
     height: 2rem;
+    color: var(--fog-text, #64748b);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    transition: background-color 0.2s, color 0.2s;
+  }
+
+  .close-button:hover {
+    background: var(--fog-highlight, #e2e8f0);
+    color: var(--fog-text, #1e2937);
+  }
+
+  :global(.dark) .close-button {
+    color: var(--fog-dark-text, #94a3b8);
+  }
+
+  :global(.dark) .close-button:hover {
+    background: var(--fog-dark-highlight, #334155);
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .modal-body {
     padding: 1rem;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-body {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .success-section,
@@ -196,10 +232,24 @@
 
   .success-section h3 {
     color: #64748b;
+    margin: 0 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  :global(.dark) .success-section h3 {
+    color: #94a3b8;
   }
 
   .failed-section h3 {
     color: #dc2626;
+    margin: 0 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  :global(.dark) .failed-section h3 {
+    color: #f87171;
   }
 
   .modal-body ul {
@@ -210,10 +260,28 @@
 
   .modal-body li {
     padding: 0.25rem 0;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-body li {
+    color: var(--fog-dark-text, #f1f5f9);
+  }
+
+  .modal-body li strong {
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-body li strong {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .error-message {
     word-break: break-word;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .error-message {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .error-link {
@@ -246,15 +314,25 @@
 
   .modal-footer button {
     padding: 0.5rem 1rem;
-    background: #94a3b8;
+    background: var(--fog-accent, #64748b);
-    color: white;
+    color: #ffffff; /* White text on accent background for good contrast */
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.2s;
+    font-weight: 500;
   }
 
   .modal-footer button:hover {
-    background: #64748b;
+    background: var(--fog-accent, #475569);
+  }
+
+  :global(.dark) .modal-footer button {
+    background: var(--fog-dark-accent, #64748b);
+    color: #ffffff; /* White text on dark accent for good contrast */
+  }
+
+  :global(.dark) .modal-footer button:hover {
+    background: var(--fog-dark-accent, #94a3b8);
   }
 </style>

src/lib/components/ui/Icon.svelte

@@ -31,7 +31,7 @@
 {#if svgContent}
   <div
     class="icon-wrapper {className}"
-    style="width: {sizeValue}; height: {sizeValue}; color: currentColor;"
+    style="width: {sizeValue}; height: {sizeValue};"
   >
     {@html svgContent}
   </div>
@@ -48,12 +48,32 @@
     display: inline-block;
     vertical-align: middle;
     flex-shrink: 0;
+    /* Ensure color is set so SVG's currentColor resolves */
+    color: inherit;
   }
   
   .icon-wrapper :global(svg) {
     width: 100%;
     height: 100%;
     display: block;
+    /* Ensure SVG inherits color so currentColor resolves correctly */
+    color: inherit;
+  }
+  
+  /* Ensure stroke-only SVGs don't get filled */
+  .icon-wrapper :global(svg[fill="none"]) {
+    fill: none;
+  }
+  
+  /* Ensure stroke="currentColor" SVGs use the wrapper's color */
+  .icon-wrapper :global(svg[stroke="currentColor"]) {
+    stroke: currentColor;
+  }
+  
+  /* For path elements in stroke-only SVGs, ensure fill stays none */
+  .icon-wrapper :global(svg[fill="none"] path),
+  .icon-wrapper :global(svg[fill="none"] *) {
+    fill: none;
   }
   
   .icon-placeholder {

src/lib/components/ui/IconButton.svelte

@@ -73,13 +73,13 @@
 
   .icon-button.active {
     background: var(--fog-accent, #64748b);
-    color: var(--fog-text, #ffffff);
+    color: #ffffff; /* White text on accent background for good contrast */
     border-color: var(--fog-accent, #64748b);
   }
 
   :global(.dark) .icon-button.active {
     background: var(--fog-dark-accent, #64748b);
-    color: var(--fog-dark-text, #ffffff);
+    color: #ffffff; /* White text on dark accent for good contrast */
     border-color: var(--fog-dark-accent, #64748b);
   }
 
@@ -93,6 +93,21 @@
     outline-offset: 2px;
   }
 
+  /* Ensure icons inside icon-button inherit color - let SVG attributes work naturally */
+  .icon-button :global(.icon-wrapper) {
+    color: inherit;
+  }
+  
+  /* Only set stroke for SVGs that use stroke, don't force fill */
+  .icon-button :global(.icon-wrapper svg[stroke="currentColor"]) {
+    /* SVG already has stroke="currentColor" attribute, just ensure color is set */
+  }
+  
+  /* For stroke-only SVGs, ensure fill stays none */
+  .icon-button :global(.icon-wrapper svg[fill="none"]) {
+    fill: none;
+  }
+
   .icon-button-label {
     display: none;
   }

src/lib/components/write/AdvancedEditor.svelte

@@ -1450,6 +1450,11 @@
     flex: 1;
     overflow: auto;
     padding: 1.5rem;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-body {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   @media (max-width: 640px) {
@@ -1637,12 +1642,13 @@
 
   .save-button {
     background: var(--fog-accent, #64748b);
-    color: var(--fog-text, #f1f5f9);
+    color: #ffffff; /* White text on accent background for good contrast */
     border: none;
   }
 
   :global(.dark) .save-button {
     background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
   }
 
   .save-button:hover {

src/lib/components/write/CreateEventForm.svelte

@@ -1038,12 +1038,13 @@
 
   .example-button:hover {
     background: var(--fog-accent, #64748b);
-    color: var(--fog-text, #f1f5f9);
+    color: #ffffff; /* White text on accent background for good contrast */
     border-color: var(--fog-accent, #64748b);
   }
 
   :global(.dark) .example-button:hover {
     background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
     border-color: var(--fog-dark-accent, #94a3b8);
   }
 
@@ -1141,12 +1142,13 @@
 
   .advanced-editor-button:hover:not(:disabled) {
     background: var(--fog-accent, #64748b);
-    color: var(--fog-text, #f1f5f9);
+    color: #ffffff; /* White text on accent background for good contrast */
     border-color: var(--fog-accent, #64748b);
   }
 
   :global(.dark) .advanced-editor-button:hover:not(:disabled) {
     background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
     border-color: var(--fog-dark-accent, #94a3b8);
   }
 
@@ -1332,16 +1334,18 @@
   .publish-button {
     padding: 0.75rem 1.5rem;
     background: var(--fog-accent, #64748b);
-    color: var(--fog-text, #f1f5f9);
+    color: #ffffff; /* White text on accent background for good contrast */
     border: none;
     border-radius: 0.25rem;
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 500;
+    transition: background-color 0.2s, opacity 0.2s;
   }
 
   :global(.dark) .publish-button {
     background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
   }
 
   .publish-button:hover:not(:disabled) {
@@ -1379,15 +1383,18 @@
   .republish-button {
     padding: 0.5rem 1rem;
     background: var(--fog-accent, #64748b);
-    color: var(--fog-text, #f1f5f9);
+    color: #ffffff; /* White text on accent background for good contrast */
     border: none;
     border-radius: 0.25rem;
     cursor: pointer;
     font-size: 0.875rem;
+    font-weight: 500;
+    transition: background-color 0.2s, opacity 0.2s;
   }
 
   :global(.dark) .republish-button {
     background: var(--fog-dark-accent, #94a3b8);
+    color: #ffffff; /* White text on dark accent for good contrast */
   }
 
   .republish-button:hover:not(:disabled) {
@@ -1538,6 +1545,11 @@
     margin: 0;
     font-size: 1.25rem;
     font-weight: 600;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-header h2 {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .close-button {
@@ -1574,6 +1586,11 @@
     max-height: 60vh;
     overflow: auto;
     flex: 1;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-body {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   @media (max-width: 640px) {
@@ -1695,16 +1712,39 @@
 
   .d-tag-preview {
     padding: 0.75rem;
-    background: #f1f5f9;
+    background: var(--fog-highlight, #f1f5f9);
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--fog-border, #cbd5e1);
     border-radius: 0.375rem;
     margin-bottom: 1rem;
     font-size: 0.875rem;
+    color: var(--fog-text, #1f2937);
   }
 
   :global(.dark) .d-tag-preview {
-    background: #1e293b;
+    background: var(--fog-dark-highlight, #1e293b);
-    border-color: #475569;
+    border-color: var(--fog-dark-border, #475569);
+    color: var(--fog-dark-text, #f1f5f9);
+  }
+
+  .d-tag-preview code {
+    background: var(--fog-post, #ffffff);
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .d-tag-preview code {
+    background: var(--fog-dark-post, #334155);
+    color: var(--fog-dark-text, #f1f5f9);
+  }
+
+  .text-muted {
+    color: var(--fog-text-light, #64748b);
+  }
+
+  :global(.dark) .text-muted {
+    color: var(--fog-dark-text-light, #94a3b8);
   }
 
   .d-tag-preview code {
@@ -1742,17 +1782,18 @@
   }
 
   :global(.dark) .modal-footer {
-    border-top-color: #475569;
+    border-top-color: var(--fog-dark-border, #475569);
   }
 
   .modal-footer button {
     padding: 0.5rem 1rem;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--fog-border, #cbd5e1);
     border-radius: 0.375rem;
-    background: #ffffff;
+    background: var(--fog-post, #ffffff);
-    color: #1e2937;
+    color: var(--fog-text, #1e2937);
     cursor: pointer;
     font-size: 0.875rem;
+    font-weight: 500;
     transition: all 0.2s;
     display: inline-flex;
     align-items: center;
@@ -1760,18 +1801,18 @@
   }
 
   .modal-footer button:hover {
-    background: #f1f5f9;
+    background: var(--fog-highlight, #f1f5f9);
-    border-color: #94a3b8;
+    border-color: var(--fog-accent, #94a3b8);
   }
 
   :global(.dark) .modal-footer button {
-    background: #334155;
+    background: var(--fog-dark-highlight, #334155);
-    border-color: #475569;
+    border-color: var(--fog-dark-border, #475569);
-    color: #f1f5f9;
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   :global(.dark) .modal-footer button:hover {
-    background: #475569;
+    background: var(--fog-dark-border, #475569);
-    border-color: #64748b;
+    border-color: var(--fog-dark-accent, #64748b);
   }
 </style>

src/lib/modules/comments/CommentForm.svelte

@@ -697,6 +697,11 @@
     margin: 0;
     font-size: 1.25rem;
     font-weight: 600;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-header h2 {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .close-button {
@@ -704,7 +709,7 @@
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
-    color: #64748b;
+    color: var(--fog-text, #64748b);
     padding: 0;
     width: 2rem;
     height: 2rem;
@@ -712,20 +717,21 @@
     align-items: center;
     justify-content: center;
     border-radius: 0.25rem;
+    transition: background-color 0.2s, color 0.2s;
   }
 
   .close-button:hover {
-    background: #e2e8f0;
+    background: var(--fog-highlight, #e2e8f0);
-    color: #1e2937;
+    color: var(--fog-text, #1e2937);
   }
 
   :global(.dark) .close-button {
-    color: #94a3b8;
+    color: var(--fog-dark-text-light, #94a3b8);
   }
 
   :global(.dark) .close-button:hover {
-    background: #334155;
+    background: var(--fog-dark-highlight, #334155);
-    color: #f1f5f9;
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .modal-body {
@@ -733,6 +739,11 @@
     max-height: 60vh;
     overflow: auto;
     flex: 1;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-body {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   @media (max-width: 640px) {
@@ -809,6 +820,14 @@
     }
   }
 
+  .text-muted {
+    color: var(--fog-text-light, #64748b);
+  }
+
+  :global(.dark) .text-muted {
+    color: var(--fog-dark-text-light, #94a3b8);
+  }
+
   .modal-footer {
     display: flex;
     justify-content: flex-end;
@@ -831,34 +850,35 @@
   }
 
   :global(.dark) .modal-footer {
-    border-top-color: #475569;
+    border-top-color: var(--fog-dark-border, #475569);
   }
 
   .modal-footer button {
     padding: 0.5rem 1rem;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--fog-border, #cbd5e1);
     border-radius: 0.375rem;
-    background: #ffffff;
+    background: var(--fog-post, #ffffff);
-    color: #1e2937;
+    color: var(--fog-text, #1e2937);
     cursor: pointer;
     font-size: 0.875rem;
+    font-weight: 500;
     transition: all 0.2s;
   }
 
   .modal-footer button:hover {
-    background: #f1f5f9;
+    background: var(--fog-highlight, #f1f5f9);
-    border-color: #94a3b8;
+    border-color: var(--fog-accent, #94a3b8);
   }
 
   :global(.dark) .modal-footer button {
-    background: #334155;
+    background: var(--fog-dark-highlight, #334155);
-    border-color: #475569;
+    border-color: var(--fog-dark-border, #475569);
-    color: #f1f5f9;
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   :global(.dark) .modal-footer button:hover {
-    background: #475569;
+    background: var(--fog-dark-border, #475569);
-    border-color: #64748b;
+    border-color: var(--fog-dark-accent, #64748b);
   }
 
   .comment-form-actions {

src/lib/modules/reactions/FeedReactionButtons.svelte

@@ -769,13 +769,13 @@
 
   .reaction-btn.active {
     background: var(--fog-accent, #64748b);
-    color: var(--fog-text, #475569);
+    color: #ffffff; /* White text on accent background for good contrast */
     border-color: var(--fog-accent, #64748b);
   }
 
   :global(.dark) .reaction-btn.active {
     background: var(--fog-dark-accent, #64748b);
-    color: var(--fog-dark-text, #cbd5e1);
+    color: #ffffff; /* White text on dark accent for good contrast */
     border-color: var(--fog-dark-accent, #64748b);
   }
 

src/lib/modules/rss/RSSCommentForm.svelte

@@ -662,6 +662,11 @@
     padding: 1rem;
     overflow-y: auto;
     flex: 1;
+    color: var(--fog-text, #1f2937);
+  }
+
+  :global(.dark) .modal-body {
+    color: var(--fog-dark-text, #f1f5f9);
   }
 
   .preview-body {