diff --git a/mini_agent/skills/algorithmic-art/templates/viewer.html b/mini_agent/skills/algorithmic-art/templates/viewer.html
index 630cc1f..e180878 100644
--- a/mini_agent/skills/algorithmic-art/templates/viewer.html
+++ b/mini_agent/skills/algorithmic-art/templates/viewer.html
@@ -19,7 +19,10 @@
+
+
Generative Art Viewer
+
@@ -34,6 +37,39 @@
--anthropic-orange: #d97757;
--anthropic-blue: #6a9bcc;
--anthropic-green: #788c5d;
+
+ /* Theme Variables */
+ --bg-color: var(--anthropic-light);
+ --bg-gradient-end: #f5f3ee;
+ --text-color: var(--anthropic-dark);
+ --sidebar-bg: rgba(255, 255, 255, 0.95);
+ --input-bg: var(--anthropic-light);
+ --input-focus-bg: white;
+ --canvas-container-bg: white;
+ }
+
+ /* Dark Mode Support */
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --bg-color: #141413;
+ --bg-gradient-end: #1a1a19;
+ --text-color: #faf9f5;
+ --sidebar-bg: rgba(30, 30, 29, 0.95);
+ --input-bg: #2a2a29;
+ --input-focus-bg: #3a3a39;
+ --canvas-container-bg: #1a1a19;
+ --anthropic-light-gray: #4a4a49;
+ }
+
+ /* Adjust headings for dark mode */
+ .sidebar h1, .control-section h3, .control-group label {
+ color: var(--text-color);
+ }
+
+ .seed-input {
+ color: var(--text-color);
+ border-color: #4a4a49;
+ }
}
* {
@@ -44,9 +80,9 @@
body {
font-family: 'Poppins', sans-serif;
- background: linear-gradient(135deg, var(--anthropic-light) 0%, #f5f3ee 100%);
+ background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-gradient-end) 100%);
min-height: 100vh;
- color: var(--anthropic-dark);
+ color: var(--text-color);
}
.container {
@@ -54,17 +90,20 @@
min-height: 100vh;
padding: 20px;
gap: 20px;
+
+ /* PWA Title Bar Spacing */
+ padding-top: env(titlebar-area-height, 20px);
}
/* Sidebar */
.sidebar {
width: 320px;
flex-shrink: 0;
- background: rgba(255, 255, 255, 0.95);
+ background: var(--sidebar-bg);
backdrop-filter: blur(10px);
padding: 24px;
border-radius: 12px;
- box-shadow: 0 10px 30px rgba(20, 20, 19, 0.1);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow-y: auto;
overflow-x: hidden;
}
@@ -73,7 +112,7 @@
font-family: 'Lora', serif;
font-size: 24px;
font-weight: 500;
- color: var(--anthropic-dark);
+ color: var(--text-color);
margin-bottom: 8px;
}
@@ -92,7 +131,7 @@
.control-section h3 {
font-size: 16px;
font-weight: 600;
- color: var(--anthropic-dark);
+ color: var(--text-color);
margin-bottom: 16px;
display: flex;
align-items: center;
@@ -108,7 +147,7 @@
/* Seed Controls */
.seed-input {
width: 100%;
- background: var(--anthropic-light);
+ background: var(--input-bg);
padding: 12px;
border-radius: 8px;
font-family: 'Courier New', monospace;
@@ -116,13 +155,14 @@
margin-bottom: 12px;
border: 1px solid var(--anthropic-light-gray);
text-align: center;
+ color: var(--text-color);
}
.seed-input:focus {
outline: none;
border-color: var(--anthropic-orange);
box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.1);
- background: white;
+ background: var(--input-focus-bg);
}
.seed-controls {
@@ -145,7 +185,7 @@
display: block;
font-size: 14px;
font-weight: 500;
- color: var(--anthropic-dark);
+ color: var(--text-color);
margin-bottom: 8px;
}
@@ -293,8 +333,8 @@
max-width: 1000px;
border-radius: 12px;
overflow: hidden;
- box-shadow: 0 20px 40px rgba(20, 20, 19, 0.1);
- background: white;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+ background: var(--canvas-container-bg);
}
#canvas-container canvas {