From ede9a712435a1a655bb784572ecdae0da84fe1ed Mon Sep 17 00:00:00 2001 From: Silberengel Date: Wed, 11 Feb 2026 07:11:55 +0100 Subject: [PATCH] theme adjustments --- src/app.css | 108 +++++++++++++++++- src/lib/components/content/EmojiPicker.svelte | 8 +- src/lib/components/content/GifPicker.svelte | 32 +++++- .../modals/PublicationStatusModal.svelte | 84 +++++++++++++- src/lib/components/ui/Icon.svelte | 22 +++- src/lib/components/ui/IconButton.svelte | 19 ++- .../components/write/AdvancedEditor.svelte | 8 +- .../components/write/CreateEventForm.svelte | 79 ++++++++++--- src/lib/modules/comments/CommentForm.svelte | 54 ++++++--- .../reactions/FeedReactionButtons.svelte | 4 +- src/lib/modules/rss/RSSCommentForm.svelte | 5 + 11 files changed, 372 insertions(+), 51 deletions(-) diff --git a/src/app.css b/src/app.css index ab29f40..bf63e03 100644 --- a/src/app.css +++ b/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; +} diff --git a/src/lib/components/content/EmojiPicker.svelte b/src/lib/components/content/EmojiPicker.svelte index 801c39a..d057043 100644 --- a/src/lib/components/content/EmojiPicker.svelte +++ b/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; } diff --git a/src/lib/components/content/GifPicker.svelte b/src/lib/components/content/GifPicker.svelte index b25e6ae..6c886d2 100644 --- a/src/lib/components/content/GifPicker.svelte +++ b/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; } diff --git a/src/lib/components/modals/PublicationStatusModal.svelte b/src/lib/components/modals/PublicationStatusModal.svelte index d3b7873..29414e0 100644 --- a/src/lib/components/modals/PublicationStatusModal.svelte +++ b/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; - color: white; + background: var(--fog-accent, #64748b); + 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); } diff --git a/src/lib/components/ui/Icon.svelte b/src/lib/components/ui/Icon.svelte index 5a46baf..eed0990 100644 --- a/src/lib/components/ui/Icon.svelte +++ b/src/lib/components/ui/Icon.svelte @@ -31,7 +31,7 @@ {#if svgContent}
{@html svgContent}
@@ -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 { diff --git a/src/lib/components/ui/IconButton.svelte b/src/lib/components/ui/IconButton.svelte index f697d3e..89b53dd 100644 --- a/src/lib/components/ui/IconButton.svelte +++ b/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; } diff --git a/src/lib/components/write/AdvancedEditor.svelte b/src/lib/components/write/AdvancedEditor.svelte index 8b292ed..94e951a 100644 --- a/src/lib/components/write/AdvancedEditor.svelte +++ b/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 { diff --git a/src/lib/components/write/CreateEventForm.svelte b/src/lib/components/write/CreateEventForm.svelte index e79a4c9..9f62a68 100644 --- a/src/lib/components/write/CreateEventForm.svelte +++ b/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; - border: 1px solid #cbd5e1; + background: var(--fog-highlight, #f1f5f9); + 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; - border-color: #475569; + background: var(--fog-dark-highlight, #1e293b); + 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; - color: #1e2937; + background: var(--fog-post, #ffffff); + 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; - border-color: #94a3b8; + background: var(--fog-highlight, #f1f5f9); + border-color: var(--fog-accent, #94a3b8); } :global(.dark) .modal-footer button { - background: #334155; - border-color: #475569; - color: #f1f5f9; + background: var(--fog-dark-highlight, #334155); + border-color: var(--fog-dark-border, #475569); + color: var(--fog-dark-text, #f1f5f9); } :global(.dark) .modal-footer button:hover { - background: #475569; - border-color: #64748b; + background: var(--fog-dark-border, #475569); + border-color: var(--fog-dark-accent, #64748b); } diff --git a/src/lib/modules/comments/CommentForm.svelte b/src/lib/modules/comments/CommentForm.svelte index fb9b84b..b108111 100644 --- a/src/lib/modules/comments/CommentForm.svelte +++ b/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; - color: #1e2937; + background: var(--fog-highlight, #e2e8f0); + 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; - color: #f1f5f9; + background: var(--fog-dark-highlight, #334155); + 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; - color: #1e2937; + background: var(--fog-post, #ffffff); + color: var(--fog-text, #1e2937); cursor: pointer; font-size: 0.875rem; + font-weight: 500; transition: all 0.2s; } .modal-footer button:hover { - background: #f1f5f9; - border-color: #94a3b8; + background: var(--fog-highlight, #f1f5f9); + border-color: var(--fog-accent, #94a3b8); } :global(.dark) .modal-footer button { - background: #334155; - border-color: #475569; - color: #f1f5f9; + background: var(--fog-dark-highlight, #334155); + border-color: var(--fog-dark-border, #475569); + color: var(--fog-dark-text, #f1f5f9); } :global(.dark) .modal-footer button:hover { - background: #475569; - border-color: #64748b; + background: var(--fog-dark-border, #475569); + border-color: var(--fog-dark-accent, #64748b); } .comment-form-actions { diff --git a/src/lib/modules/reactions/FeedReactionButtons.svelte b/src/lib/modules/reactions/FeedReactionButtons.svelte index 74c6a8b..19bf911 100644 --- a/src/lib/modules/reactions/FeedReactionButtons.svelte +++ b/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); } diff --git a/src/lib/modules/rss/RSSCommentForm.svelte b/src/lib/modules/rss/RSSCommentForm.svelte index 87b12b5..04dacb8 100644 --- a/src/lib/modules/rss/RSSCommentForm.svelte +++ b/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 {