From 5a74092c773678474f549c1ab747ceeaf879d351 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 8 Nov 2025 17:03:50 +0000 Subject: [PATCH 1/2] Improve code execution output styling for dark mode Added CSS variables for code execution result colors that adapt to theme: - --text-info: Blue for informational text (language labels) - --text-success: Green for successful output - --text-error: Red for errors and warnings Updated JavaScript to use CSS variables instead of hard-coded colors, ensuring proper contrast and readability in both light and dark modes. --- templates/base.html | 6 ++++++ templates/chat.html | 26 +++++++++++++------------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/templates/base.html b/templates/base.html index 51be076..ee3230d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -45,6 +45,9 @@ --text-primary: #000000; --text-secondary: #495057; --text-muted: #666; + --text-info: #0066cc; + --text-success: #008800; + --text-error: #cc0000; --border-color: #e1e1e1; --border-color-dark: #ced4da; --border-code: #ccc; @@ -69,6 +72,9 @@ --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-muted: #888; + --text-info: #4da3ff; + --text-success: #5fcc5f; + --text-error: #ff6b6b; --border-color: #404040; --border-color-dark: #4a4a4a; --border-code: #555; diff --git a/templates/chat.html b/templates/chat.html index e70b455..0c2af85 100644 --- a/templates/chat.html +++ b/templates/chat.html @@ -1276,7 +1276,7 @@ async function executeCodeBlock(code, blockElement, playButton) { resultsContainer.classList.add('code-execution-results'); resultsContainer.style.marginTop = '10px'; resultsContainer.style.padding = '10px'; - resultsContainer.style.backgroundColor = '#f0f0f0'; + resultsContainer.style.backgroundColor = 'var(--bg-code)'; resultsContainer.style.borderRadius = '5px'; resultsContainer.style.fontFamily = 'monospace'; resultsContainer.style.fontSize = '14px'; @@ -1288,7 +1288,7 @@ async function executeCodeBlock(code, blockElement, playButton) { } // Clear previous results - resultsContainer.innerHTML = '
Executing code...
'; + resultsContainer.innerHTML = '
Executing code...
'; try { // Try to detect language from the code block's class @@ -1338,7 +1338,7 @@ async function executeCodeBlock(code, blockElement, playButton) { cancelButton.style.display = 'none'; cancelButton.style.marginTop = '8px'; cancelButton.style.padding = '4px 8px'; - cancelButton.style.backgroundColor = '#cc0000'; + cancelButton.style.backgroundColor = 'var(--button-danger)'; cancelButton.style.color = 'white'; cancelButton.style.border = 'none'; cancelButton.style.borderRadius = '3px'; @@ -1382,10 +1382,10 @@ async function executeCodeBlock(code, blockElement, playButton) { const errorMsg = job.result?.error || 'Execution failed'; const partialOutput = job.result?.partial_output; - let outputHtml = `
${escapeHtml(errorMsg)}
`; + let outputHtml = `
${escapeHtml(errorMsg)}
`; if (partialOutput) { - outputHtml += '
Partial output before timeout:
'; - outputHtml += `
${escapeHtml(partialOutput)}
`; + outputHtml += '
Partial output before timeout:
'; + outputHtml += `
${escapeHtml(partialOutput)}
`; } resultsContainer.innerHTML = outputHtml; break; @@ -1400,7 +1400,7 @@ async function executeCodeBlock(code, blockElement, playButton) { } catch (error) { console.error('Error executing code:', error); - resultsContainer.innerHTML = `
Error: ${escapeHtml(error.message)}
`; + resultsContainer.innerHTML = `
Error: ${escapeHtml(error.message)}
`; } finally { // Reset button state playButton.textContent = '▶ Run'; @@ -1430,24 +1430,24 @@ function displayExecutionResults(result, resultsContainer, language) { // Show language if (language) { - outputHtml += `
Language: ${language}
`; + outputHtml += `
Language: ${language}
`; } // Show stdout if (actualStdout) { - outputHtml += '
Output:
'; - outputHtml += `
${escapeHtml(actualStdout)}
`; + outputHtml += '
Output:
'; + outputHtml += `
${escapeHtml(actualStdout)}
`; } // Show stderr if present if (actualStderr) { - outputHtml += '
Errors/Warnings:
'; - outputHtml += `
${escapeHtml(actualStderr)}
`; + outputHtml += '
Errors/Warnings:
'; + outputHtml += `
${escapeHtml(actualStderr)}
`; } // If no output at all if (!actualStdout && !actualStderr) { - outputHtml += '
(No output produced)
'; + outputHtml += '
(No output produced)
'; } resultsContainer.innerHTML = outputHtml; From 6402fdb139c46b3317da114b3c9757fafb26a8b6 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 8 Nov 2025 17:06:27 +0000 Subject: [PATCH 2/2] Improve link colors for dark mode visibility Added CSS variables for link colors with better contrast: - Light mode: #0066cc (normal), #004499 (hover) - Dark mode: #58a6ff (normal), #79b8ff (hover) Applied general link styling rules that adapt to both themes, ensuring links are clearly visible and distinguishable in dark mode. --- templates/base.html | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/templates/base.html b/templates/base.html index ee3230d..38cba5a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -48,6 +48,8 @@ --text-info: #0066cc; --text-success: #008800; --text-error: #cc0000; + --link-color: #0066cc; + --link-hover: #004499; --border-color: #e1e1e1; --border-color-dark: #ced4da; --border-code: #ccc; @@ -75,6 +77,8 @@ --text-info: #4da3ff; --text-success: #5fcc5f; --text-error: #ff6b6b; + --link-color: #58a6ff; + --link-hover: #79b8ff; --border-color: #404040; --border-color-dark: #4a4a4a; --border-code: #555; @@ -323,13 +327,28 @@ transition: background-color 0.3s ease, border-color 0.3s ease; } + /* General link styling */ + a { + color: var(--link-color); + text-decoration: none; + transition: color 0.3s ease; + } + + a:hover { + color: var(--link-hover); + text-decoration: underline; + } + /* Styling for links in the rooms list */ #rooms-list a { - text-decoration: none; /* Optional: Removes underline from links */ - color: var(--text-primary); /* Ensures link color matches the text color */ + color: var(--link-color); transition: color 0.3s ease; } + #rooms-list a:hover { + color: var(--link-hover); + } + .hljs { position: relative; padding-left: 46px !important;