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/components/course-card/index.hbs

@@ -1,5 +1,5 @@
 <LinkTo
-  class="group bg-white dark:bg-gray-925 p-5 rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer flex flex-col justify-between border border-gray-200 dark:border-white/5 relative
+  class="group bg-white dark:bg-gray-925/70 p-5 rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer flex flex-col justify-between border border-gray-200 dark:border-white/5 relative
     {{if this.shouldShowLockIcon 'opacity-50 hover:opacity-100'}}"
   @route={{this.linkToRoute.name}}
   @model={{this.linkToRoute.model}}

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

@@ -1,5 +1,36 @@
 {{page-title "Catalog"}}
 
+<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-slow 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/4 right-1/4 opacity-50 animate-spin-slow 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 class="container mx-auto lg:max-w-(--breakpoint-lg) pt-6 md:pt-10 pb-10 md:pb-48 px-3 md:px-6">
   <div class="border-b border-gray-200 dark:border-white/5 pb-2 mb-6">
     <h1 class="text-3xl text-gray-700 dark:text-gray-300 font-bold tracking-tighter">Challenges</h1>