feat(ui): force-enable dark mode and add blurred gradients

Always enable dark mode by overriding isEnabled to true in the
dark-mode service to simplify theming during development.
Add three layered, animated blurred gradient backgrounds to the catalog
page for enhanced visual appeal. The gradients use overlapping colored
circles with spin animations and blur effects for a dynamic look.

Author: rohitpaulk

app/services/dark-mode.ts

@@ -115,7 +115,8 @@ export default class DarkModeService extends Service {
    * "dark route", or derived from localStorage & system preference
    */
   get isEnabled(): boolean {
-    return this.currentRouteSupportsDarkMode && (this.#currentRouteRequiresDarkMode || this.#isEnabledViaPreferences || this.isEnabledTemporarily);
+    return true;
+    // return this.currentRouteSupportsDarkMode && (this.#currentRouteRequiresDarkMode || this.#isEnabledViaPreferences || this.isEnabledTemporarily);
   }
 
   /**

app/templates/catalog.hbs

@@ -30,4 +30,35 @@
       <TracksPage::TrackCard @language={{language}} />
     {{/each}}
   </div>
+
+  <div class="fixed inset-0 flex items-stretch justify-stretch pointer-events-none">
+    <div class="w-full relative overflow-hidden rounded-sm">
+      {{! Left blurred gradient }}
+      <div class="w-1/2 h-60 absolute -bottom-32 -left-1/4 opacity-50 animate-spin-slow filter blur-[100px]">
+        <div class="relative">
+          <div class="rounded-full h-60 w-full bg-purple-800"></div>
+          <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-red-800"></div>
+          <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+        </div>
+      </div>
+
+      {{! Right blurred gradient }}
+      <div class="w-1/2 h-60 absolute -bottom-40 -right-1/4 opacity-50 animate-spin-medium filter blur-[100px]">
+        <div class="relative">
+          <div class="rounded-full h-60 w-full bg-blue-600"></div>
+          <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-blue-700"></div>
+          <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+        </div>
+      </div>
+      {{! Center blurred gradient }}
+
+      <div class="w-1/2 h-60 absolute top-0 left-1/1 right-1/4 opacity-50 animate-spin-medium filter blur-[100px]">
+        <div class="relative">
+          <div class="rounded-full h-60 w-full bg-blue-600"></div>
+          <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-purple-700"></div>
+          <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>