Add data_visualization/css/theme.css

data_visualization/css/theme.css

@@ -0,0 +1,84 @@
+/* =========================================================
+   Theme Styles for Data Visualization (Light & Dark Modes)
+   ========================================================= */
+
+/* ---------------------------------------------------------
+   Color Themes
+   --------------------------------------------------------- */
+:root {
+  /* Base colors */
+  --color-bg: #ffffff;
+  --color-surface: #f7f9fa;
+  --color-text: #1c1e21;
+  --color-subtle-text: #555b61;
+
+  /* Primary and secondary accents */
+  --color-primary: #0077cc;
+  --color-primary-hover: #005fa3;
+  --color-secondary: #2d9cdb;
+  --color-accent: #33c759;
+
+  /* States */
+  --color-success: #27ae60;
+  --color-warning: #f39c12;
+  --color-error: #e74c3c;
+
+  /* Chart tones */
+  --chart-bandwidth: #0077cc;
+  --chart-latency: #33c759;
+  --chart-retry: #e67e22;
+
+  /* Borders and lines */
+  --color-border: #d0d6db;
+  --color-divider: #eceef0;
+
+  /* Shadows */
+  --shadow-elevation: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+.dark-mode {
+  /* Dark background and contrast adjustments */
+  --color-bg: #121416;
+  --color-surface: #1f2225;
+  --color-text: #e5e7eb;
+  --color-subtle-text: #a0a4a8;
+
+  /* Accents adapted for dark backgrounds */
+  --color-primary: #3d9cff;
+  --color-primary-hover: #6bb5ff;
+  --color-secondary: #5dade2;
+  --color-accent: #58d68d;
+
+  /* States */
+  --color-success: #2ecc71;
+  --color-warning: #f5b041;
+  --color-error: #e74c3c;
+
+  /* Chart tones */
+  --chart-bandwidth: #3498db;
+  --chart-latency: #2ecc71;
+  --chart-retry: #e67e22;
+
+  /* Borders and lines */
+  --color-border: #2f3337;
+  --color-divider: #363a3e;
+
+  /* Shadows */
+  --shadow-elevation: 0 2px 5px rgba(0,0,0,0.3);
+}
+
+/* Metadata Footer */
+footer {
+  font-size: 0.875rem;
+  color: var(--color-subtle-text);
+  text-align: center;
+  padding: 1rem 0;
+  border-top: 1px solid var(--color-divider);
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--color-subtle-text);
+}