Update app.py

app.py

@@ -72,10 +72,10 @@ def highlight_matching_words(text: str, query: str) -> str:
     for token in tokens:
         token_lc = token.lower()
         if token_lc in query_words:
-            highlighted.append(f'<span style="background:yellow">{token}</span>')
+            highlighted.append(f'<span class="exact-match">{token}</span>')
         elif token.strip() and token.isalpha() and any(w in token_lc and w != token_lc for w in query_words):
             def green_sub(m):
-                return f'<span style="background:lightgreen">{m.group(0)}</span>'
+                return f'<span class="partial-match">{m.group(0)}</span>'
             highlighted.append(partial_pattern.sub(green_sub, token))
         else:
             highlighted.append(token)
@@ -151,14 +151,82 @@ def format_results_html(results: List[Dict[str, Any]]) -> str:
         return f'<div style="color:red">Error: {results[0]["Error"]}</div>'
     html = [
         '<style>',
-        '/* Light mode styles */',
-        'td,th{padding:8px;}th{background:#f4f1e9;}tr:nth-child(even){background:#f9f9f9;}tr:hover{background:#e6e2d3;}table{border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #e6e2d3;}td{vertical-align:top;}',
-        'html, body, #root, .gradio-container {',
-        '  background: #fff !important;',
-        '  color: #222 !important;',
+        '/* CSS variables for theming */',
+        ':root {',
+        '  --table-bg: #fff;',
+        '  --table-text: #222;',
+        '  --header-bg: #f4f1e9;',
+        '  --row-even-bg: #f9f9f9;',
+        '  --row-hover-bg: #e6e2d3;',
+        '  --table-shadow: 0 2px 8px #e6e2d3;',
+        '  --exact-match-bg: #ffeb3b;',
+        '  --exact-match-text: #000;',
+        '  --partial-match-bg: #c8e6c9;',
+        '  --partial-match-text: #000;',
+        '}',
+        '',
+        '/* Dark mode styles */',
+        '@media (prefers-color-scheme: dark) {',
+        '  :root {',
+        '    --table-bg: #2d2d2d;',
+        '    --table-text: #e0e0e0;',
+        '    --header-bg: #3d3d3d;',
+        '    --row-even-bg: #333333;',
+        '    --row-hover-bg: #404040;',
+        '    --table-shadow: 0 2px 8px rgba(0,0,0,0.5);',
+        '    --exact-match-bg: #fbc02d;',
+        '    --exact-match-text: #000;',
+        '    --partial-match-bg: #4caf50;',
+        '    --partial-match-text: #fff;',
+        '  }',
+        '}',
+        '',
+        '/* Table styles */',
+        'table {',
+        '  border-collapse: collapse;',
+        '  width: 100%;',
+        '  font-size: 1em;',
+        '  background: var(--table-bg);',
+        '  color: var(--table-text);',
+        '  border-radius: 8px;',
+        '  overflow: hidden;',
+        '  box-shadow: var(--table-shadow);',
+        '}',
+        '',
+        'td, th {',
+        '  padding: 8px;',
+        '  vertical-align: top;',
+        '}',
+        '',
+        'th {',
+        '  background: var(--header-bg);',
+        '  font-weight: bold;',
+        '}',
+        '',
+        'tr:nth-child(even) {',
+        '  background: var(--row-even-bg);',
+        '}',
+        '',
+        'tr:hover {',
+        '  background: var(--row-hover-bg);',
+        '}',
+        '',
+        '/* Highlighting styles */',
+        '.exact-match {',
+        '  background: var(--exact-match-bg);',
+        '  color: var(--exact-match-text);',
+        '  padding: 1px 2px;',
+        '  border-radius: 2px;',
+        '}',
+        '',
+        '.partial-match {',
+        '  background: var(--partial-match-bg);',
+        '  color: var(--partial-match-text);',
+        '  padding: 1px 2px;',
+        '  border-radius: 2px;',
         '}',
         '</style>',
-        '<table style="border-collapse:collapse;width:100%;font-size:1em;">',
+        '<table>',
         '<thead><tr>'
         '<th>Reference</th><th>Text</th><th>Similarity</th><th>Book</th><th>Chapter</th><th>Verse</th>'
         '</tr></thead><tbody>'
@@ -186,7 +254,7 @@ with gr.Blocks(title="Latin Vulgate Verse Similarity Search", theme=gr.themes.So
     # Latin Vulgate Verse Similarity Search
     
     Search for similar verses in the Latin Vulgate Bible using semantic similarity.
-    <br>Words matching your query will be <span style='background:yellow'>highlighted yellow</span> (exact) or <span style='background:lightgreen'>green</span> (partial).
+    <br>Words matching your query will be highlighted (exact matches and partial matches).
     """)
     with gr.Row():
         query = gr.Textbox(