Merge pull request #639 from C4aZy/fix/dark-theme-background

Fix dark theme background gradients

Author: steam-bell-92

web-app/css/styles.css

@@ -3093,19 +3093,23 @@ body {
 }
 
 body {
-    font-family: 'DM Sans', 'Segoe UI', sans-serif;
+    font-family: 'DM Sans', 'Segoe UI','sans-serif';
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+
+[data-theme="light"] body {
     background:
         radial-gradient(circle at top left, rgba(255, 219, 174, 0.44), transparent 30%),
         radial-gradient(circle at top right, rgba(192, 245, 224, 0.46), transparent 24%),
         linear-gradient(180deg, #fffdf8 0%, #f8f5ee 45%, #f5efe5 100%);
-    color: var(--text-color);
 }
 
-[data-theme="dark"] body {
+html[data-theme="dark"] body {
     background:
         radial-gradient(circle at top left, rgba(242, 166, 90, 0.12), transparent 28%),
         radial-gradient(circle at top right, rgba(159, 221, 181, 0.1), transparent 24%),
-        linear-gradient(180deg, #161211 0%, #0f0c0b 100%);
+        linear-gradient(180deg, #161211 0%, #0f0c0b 100%) !important;
 }
 
 .cursor-glow {
@@ -3234,17 +3238,20 @@ body {
     mix-blend-mode: screen;
 }
 
-.hero-background {
+[data-theme="dark"] .hero-background {
     background:
-        radial-gradient(circle at 20% 30%, rgba(255, 195, 113, 0.32), transparent 40%),
-        radial-gradient(circle at 85% 15%, rgba(106, 191, 141, 0.28), transparent 35%),
-        radial-gradient(circle at 50% 80%, rgba(125, 220, 185, 0.18), transparent 40%),
-        linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(255, 247, 237, 0.6));
-    opacity: 1;
-    mask-image: none;
-    -webkit-mask-image: none;
+        radial-gradient(circle at 20% 30%, rgba(242, 166, 90, 0.08), transparent 40%),
+        radial-gradient(circle at 85% 15%, rgba(106, 191, 141, 0.10), transparent 35%),
+        radial-gradient(circle at 50% 80%, rgba(125, 220, 185, 0.06), transparent 40%),
+        linear-gradient(
+            180deg,
+            #13100f 0%,
+            #181312 45%,
+            #0f0c0b 100%
+        ) !important;
 }
 
+
 .hero-orb {
     position: absolute;
     border-radius: 50%;