knight/TLC-Search
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode support to Python app

Browse Source 
- Implement CSS custom properties for theming
- Add comprehensive light and dark color schemes
- Create theme toggle button in header
- Add theme persistence with localStorage
- Support system color scheme preference
- Smooth transitions between themes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
knight
2025-11-04 23:07:59 -05:00
parent 3e939a4beb
commit 178f6fa5e5
3 changed files with 161 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
static/app.js
View File

@@ -1,4 +1,42 @@
(() => { (() => {
// Theme management
const themeToggle = document.getElementById("themeToggle");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
function getTheme() {
const saved = localStorage.getItem("theme");
if (saved) return saved;
return prefersDark.matches ? "dark" : "light";
}
function setTheme(theme) {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
if (themeToggle) {
themeToggle.textContent = theme === "dark" ? "☀️ Light Mode" : "🌙 Dark Mode";
}
}
function toggleTheme() {
const current = document.documentElement.getAttribute("data-theme") || "light";
setTheme(current === "dark" ? "light" : "dark");
}
// Initialize theme
setTheme(getTheme());
// Listen for theme toggle
if (themeToggle) {
themeToggle.addEventListener("click", toggleTheme);
}
// Listen for system theme changes
prefersDark.addEventListener("change", (e) => {
if (!localStorage.getItem("theme")) {
setTheme(e.matches ? "dark" : "light");
}
});
let qs = new URLSearchParams(window.location.search); let qs = new URLSearchParams(window.location.search);
const qInput = document.getElementById("q"); const qInput = document.getElementById("q");
const channelDropdown = document.getElementById("channelDropdown"); const channelDropdown = document.getElementById("channelDropdown");

7
static/index.html
View File

@@ -9,7 +9,12 @@
</head> </head>
<body> <body>
<header> <header>
<h1>This Little Corner — Elastic Search</h1> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<h1 style="margin: 0;">This Little Corner — Elastic Search</h1>
<button id="themeToggle" style="padding: 8px 16px; cursor: pointer; border-radius: 4px; border: 1px solid var(--color-border-primary); background: var(--color-bg-button); color: var(--color-text-primary); font-size: 14px; transition: background 0.2s;" title="Toggle dark mode">
🌙 Dark Mode
</button>
</div>
<p class="muted"> <p class="muted">
Enter a phrase to query title, description, and transcript text. Enter a phrase to query title, description, and transcript text.
</p> </p>

157
static/style.css
View File

@@ -1,7 +1,79 @@
/* Light theme (default) */
:root {
--color-bg-primary: #ffffff;
--color-bg-secondary: #f5f5f5;
--color-bg-tertiary: #fafafa;
--color-bg-button: #f0f0f0;
--color-bg-button-hover: #e8e8e8;
--color-bg-highlight: #ffe58a;
--color-bg-focus: #fff3cd;
--color-bg-focus-border: #ffc107;
--color-bg-timestamp: #e8f4ff;
--color-bg-timestamp-hover: #cce5ff;
--color-bg-hover: #f0f7ff;
--color-text-primary: #222;
--color-text-secondary: #666;
--color-text-tertiary: #444;
--color-text-quaternary: #333;
--color-text-muted: #999;
--color-text-inverse: #fff;
--color-border-primary: #ccc;
--color-border-secondary: #ddd;
--color-border-tertiary: #ececec;
--color-border-focus: #e1e1e1;
--color-link: #0366d6;
--color-badge: #0b6efd;
--color-chart-stroke: #ccc;
--color-chart-stroke-secondary: #fff;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08);
--shadow-dropdown: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Dark theme */
[data-theme="dark"] {
--color-bg-primary: #1a1a1a;
--color-bg-secondary: #2a2a2a;
--color-bg-tertiary: #252525;
--color-bg-button: #333333;
--color-bg-button-hover: #3d3d3d;
--color-bg-highlight: #6b5a00;
--color-bg-focus: #4a4200;
--color-bg-focus-border: #7a6b00;
--color-bg-timestamp: #1a3a52;
--color-bg-timestamp-hover: #2a4a62;
--color-bg-hover: #1a2a3a;
--color-text-primary: #e0e0e0;
--color-text-secondary: #a0a0a0;
--color-text-tertiary: #b8b8b8;
--color-text-quaternary: #cccccc;
--color-text-muted: #888888;
--color-text-inverse: #ffffff;
--color-border-primary: #444444;
--color-border-secondary: #3a3a3a;
--color-border-tertiary: #2f2f2f;
--color-border-focus: #3f3f3f;
--color-link: #58a6ff;
--color-badge: #2f81f7;
--color-chart-stroke: #555555;
--color-chart-stroke-secondary: #2a2a2a;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-dropdown: 0 2px 6px rgba(0, 0, 0, 0.4);
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 24px; margin: 24px;
color: #222; color: var(--color-text-primary);
background-color: var(--color-bg-primary);
transition: background-color 0.3s ease, color 0.3s ease;
} }
header { header {
@@ -25,11 +97,11 @@ header {
.channel-dropdown summary { .channel-dropdown summary {
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
border: 1px solid #ccc; border: 1px solid var(--color-border-primary);
border-radius: 4px; border-radius: 4px;
padding: 6px 8px; padding: 6px 8px;
background: #fff; background: var(--color-bg-primary);
color: #222; color: var(--color-text-primary);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
min-height: 32px; min-height: 32px;
@@ -51,12 +123,12 @@ header {
.channel-options { .channel-options {
margin-top: 4px; margin-top: 4px;
padding: 8px; padding: 8px;
border: 1px solid #ccc; border: 1px solid var(--color-border-primary);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
background: #fff; background: var(--color-bg-primary);
max-height: 240px; max-height: 240px;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); box-shadow: var(--shadow-dropdown);
min-width: 220px; min-width: 220px;
width: max(220px, 100%); width: max(220px, 100%);
} }
@@ -80,12 +152,12 @@ button {
} }
.muted { .muted {
color: #666; color: var(--color-text-secondary);
font-size: 12px; font-size: 12px;
} }
#results .item { #results .item {
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--color-border-secondary);
padding: 12px 0; padding: 12px 0;
} }
@@ -105,10 +177,10 @@ button {
.summary-right { .summary-right {
flex: 1 1 0%; flex: 1 1 0%;
min-width: 0; min-width: 0;
background: #f5f5f5; background: var(--color-bg-secondary);
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-card);
} }
#metrics { #metrics {
@@ -138,11 +210,15 @@ button {
#frequencyChart .axis path, #frequencyChart .axis path,
#frequencyChart .axis line { #frequencyChart .axis line {
stroke: #ccc; stroke: var(--color-chart-stroke);
}
#frequencyChart .axis text {
fill: var(--color-text-primary);
} }
#frequencyChart .freq-layer rect { #frequencyChart .freq-layer rect {
stroke: #fff; stroke: var(--color-chart-stroke-secondary);
stroke-width: 0.5px; stroke-width: 0.5px;
} }
@@ -152,7 +228,7 @@ button {
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
font-size: 12px; font-size: 12px;
color: #444; color: var(--color-text-tertiary);
} }
.freq-legend-item { .freq-legend-item {
@@ -169,7 +245,7 @@ button {
} }
.transcript { .transcript {
background: #fafafa; background: var(--color-bg-tertiary);
padding: 8px; padding: 8px;
margin-top: 6px; margin-top: 6px;
max-height: 200px; max-height: 200px;
@@ -186,13 +262,13 @@ button {
.highlight-row { .highlight-row {
padding: 4px 0; padding: 4px 0;
border-bottom: 1px solid #ececec; border-bottom: 1px solid var(--color-border-tertiary);
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
} }
.highlight-row:hover { .highlight-row:hover {
background: #f0f7ff; background: var(--color-bg-hover);
} }
.highlight-row:last-child { .highlight-row:last-child {
@@ -210,7 +286,8 @@ button {
} }
mark { mark {
background: #ffe58a; background: var(--color-bg-highlight);
color: var(--color-text-primary);
padding: 0 2px; padding: 0 2px;
} }
@@ -223,8 +300,8 @@ mark {
} }
.badge { .badge {
background: #0b6efd; background: var(--color-badge);
color: #fff; color: var(--color-text-inverse);
border-radius: 999px; border-radius: 999px;
padding: 2px 8px; padding: 2px 8px;
font-size: 12px; font-size: 12px;
@@ -233,29 +310,29 @@ mark {
.transcript-toggle { .transcript-toggle {
margin-top: 8px; margin-top: 8px;
padding: 6px 12px; padding: 6px 12px;
background: #f0f0f0; background: var(--color-bg-button);
border: 1px solid #ccc; border: 1px solid var(--color-border-primary);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
color: #0366d6; color: var(--color-link);
transition: background 0.2s; transition: background 0.2s;
} }
.transcript-toggle:hover { .transcript-toggle:hover {
background: #e8e8e8; background: var(--color-bg-button-hover);
} }
.transcript-toggle:disabled { .transcript-toggle:disabled {
cursor: not-allowed; cursor: not-allowed;
color: #999; color: var(--color-text-muted);
} }
.full-transcript { .full-transcript {
margin-top: 12px; margin-top: 12px;
padding: 12px; padding: 12px;
background: #fafafa; background: var(--color-bg-tertiary);
border: 1px solid #e1e1e1; border: 1px solid var(--color-border-focus);
border-radius: 4px; border-radius: 4px;
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
@@ -264,7 +341,7 @@ mark {
.transcript-segment { .transcript-segment {
margin-bottom: 12px; margin-bottom: 12px;
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid #ececec; border-bottom: 1px solid var(--color-border-tertiary);
transition: background 0.3s, padding 0.3s; transition: background 0.3s, padding 0.3s;
border-radius: 4px; border-radius: 4px;
} }
@@ -275,49 +352,49 @@ mark {
} }
.transcript-segment.focused { .transcript-segment.focused {
background: #fff3cd; background: var(--color-bg-focus);
padding: 8px; padding: 8px;
border: 2px solid #ffc107; border: 2px solid var(--color-bg-focus-border);
animation: pulse-highlight 1s ease-in-out; animation: pulse-highlight 1s ease-in-out;
} }
@keyframes pulse-highlight { @keyframes pulse-highlight {
0%, 100% { 0%, 100% {
background: #fff3cd; background: var(--color-bg-focus);
} }
50% { 50% {
background: #ffe69c; opacity: 0.8;
} }
} }
.timestamp-link { .timestamp-link {
display: inline-block; display: inline-block;
color: #0366d6; color: var(--color-link);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-size: 11px; font-size: 11px;
font-family: monospace; font-family: monospace;
margin-right: 8px; margin-right: 8px;
padding: 2px 6px; padding: 2px 6px;
background: #e8f4ff; background: var(--color-bg-timestamp);
border-radius: 3px; border-radius: 3px;
transition: background 0.2s; transition: background 0.2s;
} }
.timestamp-link:hover { .timestamp-link:hover {
background: #cce5ff; background: var(--color-bg-timestamp-hover);
text-decoration: underline; text-decoration: underline;
} }
.transcript-text { .transcript-text {
color: #333; color: var(--color-text-quaternary);
line-height: 1.5; line-height: 1.5;
} }
.transcript-header { .transcript-header {
font-weight: bold; font-weight: bold;
margin-bottom: 8px; margin-bottom: 8px;
color: #444; color: var(--color-text-tertiary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -325,16 +402,16 @@ mark {
.transcript-close { .transcript-close {
cursor: pointer; cursor: pointer;
color: #666; color: var(--color-text-secondary);
font-size: 18px; font-size: 18px;
padding: 0 4px; padding: 0 4px;
} }
.transcript-close:hover { .transcript-close:hover {
color: #000; color: var(--color-text-primary);
} }
.loading-text { .loading-text {
color: #666; color: var(--color-text-secondary);
font-style: italic; font-style: italic;
} }