Add data_visualization/css/theme.css

2026-03-24 11:10:12 +00:00 · 2026-03-24 11:10:12 +00:00 · 7fff1e9a84
commit 7fff1e9a84
parent ed3f865de5
1 changed files with 106 additions and 0 deletions
--- a/data_visualization/css/theme.css
+++ b/data_visualization/css/theme.css
@ -0,0 +1,106 @@
+/* =============================================================
+   THEME STYLES - data_visualization
+   -------------------------------------------------------------
+   Enthält Farbdefinitionen und Unterstützung für Light/Dark-Mode
+   sowie Akzentfarben für Diagramme und markierte Datenpunkte.
+   ============================================================= */
+
+:root {
+  --color-light-background: #f8f9fa;
+  --color-light-surface: #ffffff;
+  --color-light-text: #212529;
+
+  --color-dark-background: #1e1e1e;
+  --color-dark-surface: #252526;
+  --color-dark-text: #e0e0e0;
+
+  --color-accent-primary: #007acc;
+  --color-accent-secondary: #ff9800;
+  --color-highlight: #4caf50;
+
+  --transition-theme: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* =============================================================
+   Color Modes
+   ============================================================= */
+
+[data-theme='light'] {
+  background-color: var(--color-light-background);
+  color: var(--color-light-text);
+  transition: var(--transition-theme);
+}
+
+[data-theme='light'] main,
+[data-theme='light'] section,
+[data-theme='light'] .card {
+  background-color: var(--color-light-surface);
+  color: var(--color-light-text);
+}
+
+[data-theme='dark'] {
+  background-color: var(--color-dark-background);
+  color: var(--color-dark-text);
+  transition: var(--transition-theme);
+}
+
+[data-theme='dark'] main,
+[data-theme='dark'] section,
+[data-theme='dark'] .card {
+  background-color: var(--color-dark-surface);
+  color: var(--color-dark-text);
+}
+
+/* =============================================================
+   Accent Colors
+   ============================================================= */
+
+.highlight {
+  color: var(--color-highlight);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.accent {
+  color: var(--color-accent-primary);
+  transition: color 0.2s ease;
+}
+
+.accent:hover,
+.accent:focus {
+  color: var(--color-accent-secondary);
+}
+
+/* =============================================================
+   Responsive Adjustments (optional for better UI readability)
+   ============================================================= */
+
+@media (min-width: 640px) {
+  body {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    font-size: 1.1rem;
+  }
+}
+
+/* =============================================================
+   Footer Branding (Konformitäts-Hinweis)
+   ============================================================= */
+
+footer {
+  font-size: 0.85rem;
+  color: var(--color-accent-secondary);
+  text-align: center;
+  margin-top: 2rem;
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--color-dark-text);
+}