From 1aee17a9ba26a7cc4db4b737cf2909271391e701 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Sun, 10 May 2026 02:07:40 +0000
Subject: [PATCH] Add data_visualization/css/theme.css

---
 data_visualization/css/theme.css | 107 +++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 data_visualization/css/theme.css

diff --git a/data_visualization/css/theme.css b/data_visualization/css/theme.css
new file mode 100644
index 0000000..2283a07
--- /dev/null
+++ b/data_visualization/css/theme.css
@@ -0,0 +1,107 @@
+:root {
+  /* Farbvariablen für dunkles Design */
+  --color-bg-dark: #0f0f10;
+  --color-surface-dark: #1a1a1c;
+  --color-text-dark: #e0e0e0;
+  --color-accent-dark: #3fa7ff;
+  --color-muted-dark: #444;
+
+  /* Typografievariablen */
+  --font-base: 'Segoe UI', Roboto, sans-serif;
+  --font-size-base: 1rem;
+  --line-height-base: 1.5;
+}
+
+/* ======================================== */
+/* Dark Theme Styles */
+/* ======================================== */
+body.dark-mode {
+  background-color: var(--color-bg-dark);
+  color: var(--color-text-dark);
+  font-family: var(--font-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+}
+
+.chart-container.dark {
+  background-color: var(--color-surface-dark);
+  border: 1px solid var(--color-muted-dark);
+  color: var(--color-text-dark);
+}
+
+.event-log.dark {
+  background-color: var(--color-surface-dark);
+  border-left: 3px solid var(--color-accent-dark);
+  color: var(--color-text-dark);
+}
+
+.chart-container.dark .axis line,
+.chart-container.dark .axis path {
+  stroke: var(--color-muted-dark);
+}
+
+.chart-container.dark .data-line {
+  stroke: var(--color-accent-dark);
+}
+
+/* Hover- und Fokuseffekte im dunklen Modus */
+a, button, input[type='range'] {
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+body.dark-mode a:hover,
+body.dark-mode button:hover {
+  color: var(--color-accent-dark);
+}
+
+/* Tabellen oder Textlogs */
+.event-log.dark table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.event-log.dark th,
+.event-log.dark td {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--color-muted-dark);
+}
+
+/* Scrollbar Styling */
+body.dark-mode::-webkit-scrollbar {
+  width: 8px;
+}
+
+body.dark-mode::-webkit-scrollbar-track {
+  background: var(--color-bg-dark);
+}
+
+body.dark-mode::-webkit-scrollbar-thumb {
+  background-color: var(--color-muted-dark);
+  border-radius: 4px;
+}
+
+/* Responsives Verhalten */
+@media (min-width: 640px) {
+  .chart-container.dark {
+    padding: 1rem;
+  }
+  .event-log.dark {
+    padding: 1rem;
+  }
+}
+
+/* Footer */
+footer.dark-mode {
+  color: var(--color-muted-dark);
+  text-align: center;
+  font-size: 0.875rem;
+  padding: 1rem 0;
+  border-top: 1px solid var(--color-muted-dark);
+}
+
+footer.dark-mode::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--color-text-dark);
+}
\ No newline at end of file