Add data_visualization/css/theme.css

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);
+}