diff --git a/src/ui-themes.js b/src/ui-themes.js index 7c73373..6debe6b 100644 --- a/src/ui-themes.js +++ b/src/ui-themes.js @@ -51,9 +51,14 @@ export function getThemeColors(theme = detectCurrentTheme()) { // Text colors primaryText: "#212529", - secondaryText: "#495057", + secondaryText: "#495057", mutedText: "#6c757d", + // Input specific colors + inputBackground: "#ffffff", + inputText: "#212529", + inputBorder: "#ced4da", + // Borders and dividers borderColor: "#dee2e6", dividerColor: "#e9ecef", @@ -90,3 +95,41 @@ export function initializeChunkFiveFont() { `; document.head.appendChild(fontFaceStyle); } + +// Force text colors with high specificity to override blog CSS +export function enforceModalTextColors() { + if (document.getElementById('uncloseai-text-override')) return; // Already added + + const textOverrideStyle = document.createElement("style"); + textOverrideStyle.id = 'uncloseai-text-override'; + textOverrideStyle.textContent = ` + /* High specificity overrides for uncloseai modal text colors */ + #uncloseai-embedded-modal, + #uncloseai-embedded-modal *, + dialog#uncloseai-embedded-modal, + dialog#uncloseai-embedded-modal * { + color: #212529 !important; + } + + /* Input field text colors */ + #uncloseai-embedded-modal input, + #uncloseai-embedded-modal textarea, + #uncloseai-embedded-modal select, + #uncloseai-embedded-modal option { + color: #212529 !important; + background: #ffffff !important; + } + + /* Button text colors */ + #uncloseai-embedded-modal button { + color: #212529 !important; + } + + /* User message text (keep white for contrast) */ + #uncloseai-embedded-modal .user-message, + #uncloseai-embedded-modal .user-message * { + color: #ffffff !important; + } + `; + document.head.appendChild(textOverrideStyle); +} diff --git a/src/uncloseai-embed-modal.js b/src/uncloseai-embed-modal.js index 13c41b6..93cfbf7 100644 --- a/src/uncloseai-embed-modal.js +++ b/src/uncloseai-embed-modal.js @@ -8,6 +8,7 @@ import { detectCurrentTheme, getThemeColors, initializeChunkFiveFont, + enforceModalTextColors, } from "./ui-themes.js"; import { getUIText, @@ -166,8 +167,9 @@ function refreshModalUI() { } async function openUncloseaiEmbeddedModalNew() { - // Ensure ChunkFive font is loaded + // Ensure ChunkFive font is loaded and text colors are enforced initializeChunkFiveFont(); + enforceModalTextColors(); // Get theme colors const theme = detectCurrentTheme(); @@ -1191,6 +1193,7 @@ async function openUncloseaiEmbeddedModalNew() { // Add user message const userMsg = document.createElement("div"); + userMsg.className = "user-message"; userMsg.style.cssText = ` align-self: flex-end; background: ${colors.userMessageBg}; @@ -1821,6 +1824,7 @@ You have complete knowledge of this page content and can reference any details, ); if (msg.role === "user") { const userMsg = document.createElement("div"); + userMsg.className = "user-message"; userMsg.style.cssText = ` align-self: flex-end; background: ${colors.userMessageBg};