Merge branch 'fix-css-darkmode' into 'main'

Fix CSS for darkmode

See merge request ExplorViz/code/code-agent!12

Author: malte-hansen

src/main/resources/META-INF/resources/index.html

@@ -249,7 +249,7 @@ <h2>Analysis Configuration</h2>
                 Landscape Token
                 <span class="tooltip-container">
                   <span class="tooltip-icon">?</span>
-                  <span class="tooltip-text">The landscape token for the ExplorViz.</span>
+                  <span class="tooltip-text">The landscape token for the ExplorViz software landscape.</span>
                 </span>
               </span>
               <input name="landscapeToken" placeholder="mytokenvalue" type="password" />

src/main/resources/META-INF/resources/styles.css

@@ -7,8 +7,15 @@
     BlinkMacSystemFont,
     sans-serif;
   --accent: #0b5fff;
-  --surface: rgba(255, 255, 255, 0.08);
-  --border: rgba(0, 0, 0, 0.1);
+  --surface: light-dark(rgba(255, 255, 255, 0.08), rgba(128, 164, 255, 0.08));
+  --border: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.08));
+  --card-bg: light-dark(#ffffff, rgba(8, 10, 20, 0.75));
+  --text-primary: light-dark(#111, #f3f6ff);
+  --text-secondary: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7));
+  --status-success: light-dark(#0a6b2a, #7dffb1);
+  --status-success-border: #2ac769;
+  --status-error: light-dark(#981b1b, #ff9595);
+  --status-error-border: #ff5c5c;
 }
 
 * {
@@ -19,14 +26,7 @@ body {
   margin: 0;
   min-height: 100vh;
   background: radial-gradient(circle at top, #f4f7ff 0%, #e9edf7 35%, #f7f9ff 70%, #fff 100%);
-  color: #111;
-}
-
-body.dark {
-  background: radial-gradient(circle at top, #202536 0%, #151828 65%, #080912 100%);
-  color: #f3f6ff;
-  --surface: rgba(255, 255, 255, 0.05);
-  --border: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
 }
 
 main {
@@ -37,11 +37,6 @@ main {
 
 header {
   margin-bottom: 2rem;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  align-items: flex-end;
-  justify-content: space-between;
 }
 
 h1 {
@@ -51,13 +46,8 @@ h1 {
 
 p.subtitle {
   margin: 0.35rem 0 0;
-  max-width: 640px;
   font-size: 1rem;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-body.dark p.subtitle {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-secondary);
 }
 
 form {
@@ -69,16 +59,11 @@ section.card {
   padding: 1.5rem;
   border-radius: 1rem;
   border: 1px solid var(--border);
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: var(--card-bg);
   box-shadow: 0 20px 45px -35px rgba(15, 23, 42, 0.6);
   backdrop-filter: blur(6px);
 }
 
-body.dark section.card {
-  background-color: rgba(8, 10, 20, 0.75);
-  box-shadow: 0 20px 45px -35px rgba(5, 5, 10, 0.9);
-}
-
 section.card h2 {
   margin: 0 0 1rem;
   font-size: 1.25rem;
@@ -105,20 +90,12 @@ select {
   border: 1px solid var(--border);
   padding: 0.65rem 0.85rem;
   font: inherit;
-  background: rgba(255, 255, 255, 0.82);
+  background: light-dark(rgba(255, 255, 255, 0.82), rgba(12, 14, 22, 0.85));
   transition:
     border-color 0.2s ease,
     box-shadow 0.2s ease;
 }
 
-body.dark input,
-body.dark textarea,
-body.dark select {
-  background: rgba(12, 14, 22, 0.85);
-  border-color: rgba(255, 255, 255, 0.08);
-  color: inherit;
-}
-
 input:focus,
 textarea:focus,
 select:focus {
@@ -191,21 +168,13 @@ button.primary:hover:not(:disabled) {
 }
 
 .status.success {
-  border-color: #2ac769;
-  color: #0a6b2a;
-}
-
-body.dark .status.success {
-  color: #7dffb1;
+  border-color: var(--status-success-border);
+  color: var(--status-success);
 }
 
 .status.error {
-  border-color: #ff5c5c;
-  color: #981b1b;
-}
-
-body.dark .status.error {
-  color: #ff9595;
+  border-color: var(--status-error-border);
+  color: var(--status-error);
 }
 
 details summary {
@@ -214,16 +183,6 @@ details summary {
   margin-bottom: 0.5rem;
 }
 
-footer {
-  margin-top: 3rem;
-  font-size: 0.9rem;
-  color: rgba(0, 0, 0, 0.65);
-}
-
-body.dark footer {
-  color: rgba(255, 255, 255, 0.55);
-}
-
 /* Tooltip styles */
 .tooltip-container {
   display: inline-flex;
@@ -251,8 +210,8 @@ body.dark footer {
 .tooltip-text {
   visibility: hidden;
   width: 220px;
-  background-color: #1e293b;
-  color: #f8fafc;
+  background-color: light-dark(#f8fafc, #1e293b);
+  color: light-dark(#0f172a, #f8fafc);
   text-align: left;
   border-radius: 0.5rem;
   padding: 0.75rem;
@@ -291,15 +250,6 @@ body.dark footer {
   transform: translateX(-50%) translateY(-5px);
 }
 
-body.dark .tooltip-text {
-  background-color: #f8fafc;
-  color: #0f172a;
-}
-
-body.dark .tooltip-text::after {
-  border-color: #f8fafc transparent transparent transparent;
-}
-
 .label-header {
   display: flex;
   align-items: center;
@@ -327,15 +277,11 @@ body.dark .tooltip-text::after {
 }
 
 .examples-table th {
-  background: rgba(0, 0, 0, 0.03);
+  background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.03));
   font-weight: 600;
   color: var(--accent);
 }
 
-body.dark .examples-table th {
-  background: rgba(255, 255, 255, 0.03);
-}
-
 .examples-table tr:last-child td {
   border-bottom: none;
 }
@@ -347,3 +293,17 @@ body.dark .examples-table th {
   border-radius: 0.35rem;
   font-family: ui-monospace, monospace;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: radial-gradient(circle at top, #202536 0%, #151828 65%, #080912 100%);
+  }
+
+  section.card {
+    box-shadow: 0 20px 45px -35px rgba(5, 5, 10, 0.9);
+  }
+
+  .tooltip-text::after {
+    border-color: #f8fafc transparent transparent transparent;
+  }
+}