Fix dark theme colors

src/CrestApps.Core.Docs/docs/changelog/v1.0.0.md

@@ -48,6 +48,7 @@ description: Initial standalone release notes for the CrestApps.Core repository.
 - detects when uploaded chat-interaction or chat-session documents are being used for whole-document tasks such as summarization, review, rewrite, translation, or complete extraction work, and injects the full document text instead of relying only on chunk-level RAG
 - upgrades the MVC sample host to Font Awesome 7 and adds draggable, resizable AI Chat widget layout persistence with a reset-size control that hosts can disable through widget config
 - makes the shared `@crestapps/ai-chat-ui` message-action icons compatible with both Font Awesome CSS/webfont hosts and SVG+JS hosts that load `fontawesome-free/js/all.js`, so dynamically rendered playback and action buttons now appear correctly in Orchard-style integrations
+- makes the shared `@crestapps/ai-chat-ui` chat styles resolve colors through Bootstrap CSS variables with fallbacks, so admin and frontend chat widgets inherit Bootstrap 5 light/dark theme values when available
 - adds Chat History page listing previous sessions per AI Profile sorted by creation date, with resume, delete, delete-all, and new-chat actions
 - adds Test page for Utility and Agent AI Profiles providing a single-prompt/single-response streamed UI
 - renames the "Chat" button to "New Chat" on the AI Profile list and adds "Chat History" and "Test" buttons for applicable profile types

src/Resources/CrestApps.AI.Resources/Assets/css/ai-chat.css

@@ -11,7 +11,7 @@
 }
 
 .ai-chat-msg-role-assistant {
-    color: var(--ai-chat-primary, #198754);
+    color: var(--ai-chat-primary, var(--bs-success, #198754));
 }
 
 .ai-chat-messages .ai-chat-message-item {
@@ -74,10 +74,10 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.15s ease-in-out;
-    background: rgba(255, 255, 255, 0.96);
+    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.96);
     padding: 0.2rem 0.35rem;
     border-radius: 999px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 3px rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.08);
     margin-bottom: 1rem;
     transform: translateY(50%);
     z-index: 1;
@@ -120,7 +120,7 @@
 }
 
 .ai-chat-messages .message-buttons-container .tts-playing {
-    color: var(--ai-chat-primary, #198754);
+    color: var(--ai-chat-primary, var(--bs-success, #198754));
 }
 
 @keyframes spark-burst {
@@ -249,15 +249,15 @@
 .ai-chat-drag-over {
     outline: 2px dashed var(--bs-primary, #0d6efd) !important;
     outline-offset: -2px;
-    background-color: rgba(13, 110, 253, 0.05) !important;
+    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05) !important;
 }
 
 .ai-chat-notification {
     margin: 0.75rem 0 0.25rem;
     padding: 0.625rem 0.875rem;
     border-radius: 0.5rem;
     border: 1px solid var(--bs-border-color, #dee2e6);
-    background-color: var(--bs-light, #f8f9fa);
+    background-color: var(--bs-tertiary-bg, #f8f9fa);
     font-size: 0.875rem;
     line-height: 1.4;
 }
@@ -302,12 +302,12 @@
 }
 
 .ai-chat-notification-typing {
-    border-color: var(--ai-chat-primary, #198754);
-    background-color: rgba(25, 135, 84, 0.05);
+    border-color: var(--ai-chat-primary, var(--bs-success, #198754));
+    background-color: rgba(var(--ai-chat-primary-rgb, var(--bs-success-rgb, 25, 135, 84)), 0.05);
 }
 
 .ai-chat-notification-typing .ai-chat-notification-icon {
-    color: var(--ai-chat-primary, #198754);
+    color: var(--ai-chat-primary, var(--bs-success, #198754));
     animation: ai-chat-typing-pulse 1.5s ease-in-out infinite;
 }
 
@@ -318,7 +318,7 @@
 
 .ai-chat-notification-transfer {
     border-color: var(--bs-warning, #ffc107);
-    background-color: rgba(255, 193, 7, 0.06);
+    background-color: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.06);
 }
 
 .ai-chat-notification-transfer .ai-chat-notification-icon {
@@ -335,7 +335,7 @@
 .ai-chat-notification-session-ended,
 .ai-chat-notification-conversation-ended {
     border-color: var(--bs-secondary, #6c757d);
-    background-color: rgba(108, 117, 125, 0.05);
+    background-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.05);
 }
 
 .ai-chat-notification-ended .ai-chat-notification-icon,
@@ -347,7 +347,7 @@
 .ai-chat-notification-info,
 .ai-chat-notification-agent-connected {
     border-color: var(--bs-info, #0dcaf0);
-    background-color: rgba(13, 202, 240, 0.05);
+    background-color: rgba(var(--bs-info-rgb, 13, 202, 240), 0.05);
 }
 
 .ai-chat-notification-info .ai-chat-notification-icon,
@@ -358,7 +358,7 @@
 .ai-chat-notification-warning,
 .ai-chat-notification-agent-reconnecting {
     border-color: var(--bs-warning, #ffc107);
-    background-color: rgba(255, 193, 7, 0.06);
+    background-color: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.06);
 }
 
 .ai-chat-notification-warning .ai-chat-notification-icon,
@@ -369,7 +369,7 @@
 .ai-chat-notification-error,
 .ai-chat-notification-connection-lost {
     border-color: var(--bs-danger, #dc3545);
-    background-color: rgba(220, 53, 69, 0.05);
+    background-color: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.05);
 }
 
 .ai-chat-notification-error .ai-chat-notification-icon,

src/Resources/CrestApps.AI.Resources/Assets/css/chat-widget.css

@@ -1,6 +1,7 @@
 /* CrestApps AI Chat Widget */
 :root {
     --ai-widget-primary: var(--bs-secondary, #6c757d);
+    --ai-widget-primary-rgb: var(--bs-secondary-rgb, 108, 117, 125);
     --ai-widget-width: 380px;
     --ai-widget-height: 520px;
 }
@@ -14,20 +15,20 @@
     height: 52px;
     border-radius: 50%;
     background: var(--ai-widget-primary);
-    color: white;
+    color: var(--bs-white, #fff);
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    box-shadow: 0 4px 12px rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.2);
     transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .ai-chat-widget-toggle:hover {
     transform: scale(1.1);
-    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
+    box-shadow: 0 6px 16px rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.3);
 }
 
 .ai-chat-widget-container {
@@ -37,9 +38,11 @@
     z-index: 10001;
     width: var(--ai-widget-width);
     height: var(--ai-widget-height);
-    background: #fff;
+    background: var(--bs-body-bg, #fff);
+    color: var(--bs-body-color, #212529);
+    border: 1px solid var(--bs-border-color, #dee2e6);
     border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+    box-shadow: 0 8px 32px rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.18);
     display: none;
     flex-direction: column;
     overflow: hidden;
@@ -63,7 +66,7 @@
     justify-content: space-between;
     padding: 0.75rem 1rem;
     background: var(--ai-widget-primary);
-    color: white;
+    color: var(--bs-white, #fff);
 }
 
 .ai-chat-widget-header.ai-chat-widget-drag-handle {
@@ -99,7 +102,7 @@
 .ai-chat-widget-header button {
     background: none;
     border: none;
-    color: white;
+    color: var(--bs-white, #fff);
     cursor: pointer;
     font-size: 1rem;
     padding: 0 0.25rem;
@@ -112,14 +115,16 @@
 
 .ai-chat-widget-profile-select {
     padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid #e9ecef;
-    background: #f8f9fa;
+    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
+    background: var(--bs-tertiary-bg, #f8f9fa);
 }
 
 .ai-chat-widget-profile-select select {
     width: 100%;
     padding: 0.35rem 0.5rem;
-    border: 1px solid #ced4da;
+    color: var(--bs-body-color, #212529);
+    background-color: var(--bs-body-bg, #fff);
+    border: 1px solid var(--bs-border-color, #ced4da);
     border-radius: 6px;
     font-size: 0.85rem;
 }
@@ -146,7 +151,7 @@
     display: block;
     width: 100%;
     margin-bottom: 0.5rem;
-    border-top: 1px solid rgba(33, 37, 41, 0.08);
+    border-top: 1px solid rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.08);
 }
 
 .ai-chat-widget-messages .ai-chat-msg-role {
@@ -156,7 +161,7 @@
 }
 
 .ai-chat-widget-messages .ai-chat-msg-role-user {
-    color: #0d6efd;
+    color: var(--bs-primary, #0d6efd);
 }
 
 .ai-chat-widget-messages .ai-chat-msg-role-assistant {
@@ -196,10 +201,10 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.15s ease-in-out;
-    background: rgba(255, 255, 255, 0.96);
+    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.96);
     padding: 0.2rem 0.35rem;
     border-radius: 999px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 3px rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.08);
     margin-bottom: 1rem;
     transform: translateY(50%);
     z-index: 1;
@@ -253,7 +258,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: #fff;
+    background: var(--bs-body-bg, #fff);
     padding: 1rem;
     z-index: 10;
     display: none;
@@ -316,9 +321,9 @@
 .ai-chat-widget-messages .ai-chat-notification {
     margin: 0.75rem 0.5rem 0;
     padding: 0.625rem 0.75rem;
-    border: 1px solid rgba(33, 37, 41, 0.12);
+    border: 1px solid rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.12);
     border-radius: 0.5rem;
-    background: rgba(248, 249, 250, 0.98);
+    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.98);
 }
 
 .ai-chat-widget-messages .ai-chat-notification-content {
@@ -357,8 +362,8 @@
 
 /* ── Code blocks & inline code ── */
 .ai-chat-widget-messages .ai-chat-message-body pre {
-    background: #2d2d2d;
-    color: #f8f8f2;
+    background: var(--bs-dark-bg-subtle, #2d2d2d);
+    color: var(--bs-emphasis-color, #f8f8f2);
     padding: 0.5rem;
     border-radius: 4px;
     overflow-x: auto;
@@ -375,7 +380,7 @@
 }
 
 .ai-chat-widget-input {
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--bs-border-color, #dee2e6);
     padding: 0.5rem 0.75rem;
     display: flex;
     flex-wrap: wrap;
@@ -394,7 +399,9 @@
 .ai-chat-widget-input textarea {
     flex: 1;
     min-width: 0;
-    border: 1px solid #ced4da;
+    color: var(--bs-body-color, #212529);
+    background-color: var(--bs-body-bg, #fff);
+    border: 1px solid var(--bs-border-color, #ced4da);
     border-radius: 8px;
     padding: 0.4rem 0.6rem;
     font-size: 0.9rem;
@@ -407,12 +414,12 @@
 
 .ai-chat-widget-input textarea:focus {
     border-color: var(--ai-widget-primary);
-    box-shadow: 0 0 0 2px rgba(65,182,112,0.15);
+    box-shadow: 0 0 0 2px rgba(var(--ai-widget-primary-rgb, 108, 117, 125), 0.15);
 }
 
 .ai-chat-widget-input button {
     background: var(--ai-widget-primary);
-    color: white;
+    color: var(--bs-white, #fff);
     border: none;
     border-radius: 8px;
     padding: 0.4rem 0.75rem;
@@ -436,7 +443,7 @@
 
 .ai-chat-widget-input .btn.btn-outline-dark {
     background: var(--bs-dark, #212529);
-    color: #fff;
+    color: var(--bs-white, #fff);
     border-color: var(--bs-dark, #212529);
 }
 
@@ -452,7 +459,7 @@
 .ai-chat-widget-status {
     padding: 0.25rem 0.75rem;
     font-size: 0.8rem;
-    color: #6c757d;
+    color: var(--bs-secondary-color, #6c757d);
     display: none;
 }
 
@@ -462,7 +469,7 @@
 
 .ai-chat-widget-welcome {
     text-align: center;
-    color: #6c757d;
+    color: var(--bs-secondary-color, #6c757d);
     padding: 2rem 1rem;
     font-size: 0.9rem;
 }

src/Resources/CrestApps.AI.Resources/Assets/css/document-drop-zone.css

@@ -1,27 +1,27 @@
 .attached-documents-panel {
     border: 1px solid var(--bs-border-color, #dee2e6);
     border-radius: 0.75rem;
-    background: linear-gradient(180deg, rgba(13, 110, 253, 0.04), rgba(13, 110, 253, 0.01));
+    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.04), rgba(var(--bs-primary-rgb, 13, 110, 253), 0.01));
     padding: 1rem;
 }
 
 .document-drop-zone {
     position: relative;
-    border: 2px dashed rgba(13, 110, 253, 0.35);
+    border: 2px dashed rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
     border-radius: 1rem;
-    background: rgba(248, 249, 250, 0.8);
+    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.8);
     transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 }
 
 .document-drop-zone:hover {
-    border-color: rgba(13, 110, 253, 0.55);
-    background: rgba(248, 249, 250, 0.95);
+    border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.55);
+    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.95);
 }
 
 .document-drop-zone--dragover {
     border-color: var(--bs-primary, #0d6efd);
-    background: rgba(13, 110, 253, 0.08);
-    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12);
+    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
+    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
     transform: translateY(-1px);
 }
 
@@ -41,7 +41,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background: rgba(13, 110, 253, 0.12);
+    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
     color: var(--bs-primary, #0d6efd);
     font-size: 1.5rem;
 }
@@ -71,7 +71,7 @@
     padding: 0.75rem 0.875rem;
     border: 1px solid var(--bs-border-color, #dee2e6);
     border-radius: 0.75rem;
-    background: #fff;
+    background: var(--bs-body-bg, #fff);
 }
 
 .attached-document-icon {
@@ -81,7 +81,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 0.65rem;
-    background: rgba(13, 110, 253, 0.1);
+    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
     color: var(--bs-primary, #0d6efd);
     flex-shrink: 0;
 }