styling fixes

src/tui/main.py

@@ -32,7 +32,7 @@ class OpenRAGTUI(App):
 
     CSS = """
     Screen {
-        background: #0f172a;
+        background: #27272a;
     }
 
     #main-container {
@@ -60,6 +60,7 @@ class OpenRAGTUI(App):
     .button-row Button {
         margin: 0 1;
         min-width: 20;
+        border: solid #3f3f46;
     }
     
     #config-header {
@@ -182,80 +183,131 @@ class OpenRAGTUI(App):
         padding: 1;
     }
 
-    /* Frontend-inspired color scheme */
+    /* Modern dark theme with pink accents */
     Static {
-        color: #f1f5f9;
+        color: #fafafa;
     }
 
-    Button.success {
+    Button,
-        background: #4ade80;
+    Button.-default,
-        color: #000;
+    Button.-primary,
+    Button.-success,
+    Button.-warning,
+    Button.-error {
+        background: #27272a !important;
+        color: #fafafa !important;
+        border: round #52525b !important;
+        text-style: none !important;
+        tint: transparent 0% !important;
     }
 
-    Button.error {
+    Button > *,
-        background: #ef4444;
+    Button.-default > *,
-        color: #fff;
+    Button.-primary > *,
+    Button.-success > *,
+    Button.-warning > *,
+    Button.-error > * {
+        background: transparent !important;
+        color: #fafafa !important;
+        text-style: none !important;
     }
 
-    Button.warning {
+    Button:hover,
-        background: #eab308;
+    Button.-default:hover,
-        color: #000;
+    Button.-primary:hover,
+    Button.-success:hover,
+    Button.-warning:hover,
+    Button.-error:hover {
+        background: #27272a !important;
+        color: #fafafa !important;
+        border: round #52525b !important;
     }
 
-    Button.primary {
+    Button:focus,
-        background: #2563eb;
+    Button:focus-within,
-        color: #fff;
+    Button.-active,
-    }
+    Button.-default:focus,
-
+    Button.-default:focus-within,
-    Button.default {
+    Button.-default.-active,
-        background: #475569;
+    Button.-primary:focus,
-        color: #f1f5f9;
+    Button.-primary:focus-within,
-        border: solid #64748b;
+    Button.-primary.-active,
+    Button.-success:focus,
+    Button.-success:focus-within,
+    Button.-success.-active,
+    Button.-warning:focus,
+    Button.-warning:focus-within,
+    Button.-warning.-active,
+    Button.-error:focus,
+    Button.-error:focus-within,
+    Button.-error.-active {
+        background: #27272a !important;
+        color: #fafafa !important;
+        border: round #ec4899 !important;
     }
 
     DataTable {
-        background: #1e293b;
+        background: #27272a;
-        color: #f1f5f9;
+        color: #fafafa;
     }
 
     DataTable > .datatable--header {
-        background: #334155;
+        background: #3f3f46;
-        color: #f1f5f9;
+        color: #fafafa;
     }
 
     DataTable > .datatable--cursor {
-        background: #475569;
+        background: #52525b;
     }
 
     Input {
-        background: #334155;
+        background: #18181b;
-        color: #f1f5f9;
+        color: #fafafa;
-        border: solid #64748b;
+        border: solid #3f3f46;
+    }
+
+    Input:focus {
+        border: solid #ec4899;
     }
 
     Label {
-        color: #f1f5f9;
+        color: #fafafa;
+    }
+
+    Header {
+        background: #27272a;
+        color: #fafafa;
     }
 
     Footer {
-        background: #334155;
+        background: #27272a;
-        color: #f1f5f9;
+        color: #a1a1aa;
     }
 
     #runtime-status {
-        background: #1e293b;
+        background: #27272a;
-        border: solid #64748b;
+        border: solid #3f3f46;
-        color: #f1f5f9;
+        color: #fafafa;
     }
 
     #system-info {
-        background: #1e293b;
+        background: #27272a;
-        border: solid #64748b;
+        border: solid #3f3f46;
-        color: #f1f5f9;
+        color: #fafafa;
     }
 
     #services-table, #images-table {
-        background: #1e293b;
+        background: #27272a;
+    }
+
+    * {
+        scrollbar-background: #27272a;
+        scrollbar-background-hover: #3f3f46;
+        scrollbar-background-active: #3f3f46;
+        scrollbar-color: #52525b;
+        scrollbar-color-hover: #71717a;
+        scrollbar-color-active: #71717a;
+        scrollbar-corner-color: #27272a;
     }
     """
 

src/tui/screens/welcome.py

@@ -118,7 +118,7 @@ class WelcomeScreen(Screen):
 """
         welcome_text.append(ascii_art, style="bold white")
         welcome_text.append("Terminal User Interface for OpenRAG\n", style="dim")
-        welcome_text.append(f"v{__version__}\n\n", style="dim cyan")
+        welcome_text.append(f"v{__version__}\n\n", style="white")
 
         # Check if all services are running
         all_services_running = self.services_running and self.docling_running

src/tui/widgets/command_modal.py

@@ -24,14 +24,14 @@ class CommandOutputModal(ModalScreen):
     #dialog {
         width: 90%;
         height: 90%;
-        border: thick $primary;
+        border: solid #3f3f46;
-        background: $surface;
+        background: #27272a;
         padding: 0;
     }
 
     #title {
-        background: $primary;
+        background: #3f3f46;
-        color: $text;
+        color: #fafafa;
         padding: 1 2;
         text-align: center;
         width: 100%;
@@ -40,9 +40,10 @@ class CommandOutputModal(ModalScreen):
 
     #command-output {
         height: 1fr;
-        border: solid $accent;
+        border: solid #3f3f46;
         margin: 1;
-        background: $surface-darken-1;
+        background: #18181b;
+        color: #fafafa;
     }
 
     #button-row {
@@ -56,11 +57,96 @@ class CommandOutputModal(ModalScreen):
     #button-row Button {
         margin: 0 1;
         min-width: 16;
+        background: #27272a;
+        color: #fafafa;
+        border: round #52525b;
+        text-style: none;
+        tint: transparent 0%;
+    }
+
+    #button-row Button > Static {
+        background: transparent !important;
+        color: #fafafa !important;
+        text-style: none;
+    }
+
+    #button-row Button > * {
+        background: transparent !important;
+        color: #fafafa !important;
+    }
+
+    #button-row Button:hover {
+        background: #27272a !important;
+        color: #fafafa !important;
+        border: round #52525b;
+        tint: transparent 0%;
+        text-style: none;
+    }
+
+    #button-row Button:hover > Static {
+        background: transparent !important;
+        color: #fafafa !important;
+        text-style: none;
+    }
+
+    #button-row Button:hover > * {
+        background: transparent !important;
+        color: #fafafa !important;
+    }
+
+    #button-row Button:focus {
+        background: #27272a !important;
+        color: #fafafa !important;
+        border: round #ec4899;
+        tint: transparent 0%;
+        text-style: none;
+    }
+
+    #button-row Button:focus > Static {
+        background: transparent !important;
+        color: #fafafa !important;
+        text-style: none;
+    }
+
+    #button-row Button:focus > * {
+        background: transparent !important;
+        color: #fafafa !important;
+    }
+
+    #button-row Button.-active {
+        background: #27272a !important;
+        color: #fafafa !important;
+        border: round #ec4899;
+        tint: transparent 0%;
+        text-style: none;
+    }
+
+    #button-row Button.-active > Static {
+        background: transparent !important;
+        color: #fafafa !important;
+        text-style: none;
+    }
+
+    #button-row Button.-active > * {
+        background: transparent !important;
+        color: #fafafa !important;
+    }
+
+    #button-row Button:disabled {
+        background: #27272a;
+        color: #52525b;
+        border: round #3f3f46;
+    }
+
+    #button-row Button:disabled > Static {
+        background: transparent;
+        color: #52525b;
     }
 
     #copy-status {
         text-align: center;
         margin-bottom: 1;
+        color: #a1a1aa;
     }
     """