fix: light theme

Author: Akryum

packages/app/app/components/AppFooter.vue

@@ -1,7 +1,8 @@
 <template>
   <footer class="text-center p-12 opacity-50 hover:opacity-100 focus-within:opacity-100 flex flex-col items-center gap-3 text-xs">
     <a href="https://stackblitz.com/" target="_blank">
-      <img src="/stackblitz.svg" alt="StackBlitz" width="117" height="24">
+      <img src="/stackblitz.svg" alt="StackBlitz" width="117" height="24" class="not-dark:hidden">
+      <img src="/stackblitz-black.svg" alt="StackBlitz" width="117" height="24" class="dark:hidden">
     </a>
     <div class="flex gap-3 items-center">
       <div>Built by <a href="https://github.com/Aslemammad" target="_blank" class="text-primary">Aslemammad</a></div>

packages/app/app/components/CodeSnippet.vue

@@ -19,7 +19,7 @@ function copyCode() {
 
 <template>
   <div class="relative group">
-    <pre class="bg-black rounded-lg p-6"><code>{{ props.code }}</code></pre>
+    <pre class="text-white bg-gray-500 dark:bg-black rounded-lg p-6"><code>{{ props.code }}</code></pre>
 
     <ClientOnly>
       <UTooltip

packages/app/app/components/GettingStartedStep.vue

@@ -5,8 +5,8 @@ defineProps<{
 </script>
 
 <template>
-  <div class="p-6 rounded-xl border border-primary-900 w-full flex gap-6">
-    <div class="text-4xl size-20 rounded-full bg-primary-900/20 flex items-center justify-center flex-none text-primary-500 font-mono">
+  <div class="p-6 rounded-xl border border-primary-300 bg-primary-100 dark:bg-primary-900/5 dark:border-primary-900 w-full flex gap-6">
+    <div class="text-4xl size-20 rounded-full bg-primary-500/20 dark:bg-primary-900/20 flex items-center justify-center flex-none text-primary-500 font-mono">
       {{ step }}
     </div>
 

packages/app/app/pages/index.vue

@@ -41,7 +41,7 @@ function scrollToGettingStarted() {
       </div>
     </div>
 
-    <div ref="getting-started" class="min-h-screen p-6 flex items-center bg-gray-800">
+    <div ref="getting-started" class="min-h-screen p-6 flex items-center bg-gray-100 dark:bg-gray-800">
       <GettingStarted id="getting-started" class="my-container" />
     </div>
   </div>