perf: improve overall theme color matching

packages/effects/layouts/src/authentication/form.vue

@@ -8,14 +8,17 @@ defineOptions({
   name: 'AuthenticationFormView',
 });
 </script>
+
 <template>
   <div
     class="flex-col-center bg-background-content relative px-6 py-10 lg:flex-initial lg:px-8"
   >
+    <!-- Toolbar Slot -->
     <slot name="toolbar">
       <Toolbar />
     </slot>
 
+    <!-- Router View with Transition and KeepAlive -->
     <RouterView v-slot="{ Component, route }">
       <Transition appear mode="out-in" name="slide-right">
         <KeepAlive :include="['Login']">
@@ -28,6 +31,7 @@ defineOptions({
       </Transition>
     </RouterView>
 
+    <!-- Footer Copyright -->
     <div
       class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
     >

packages/effects/layouts/src/authentication/toolbar.vue

@@ -10,14 +10,17 @@ defineOptions({
   name: 'AuthenticationToolbar',
 });
 </script>
+
 <template>
   <div
     class="flex-center bg-background dark:bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
   >
+    <!-- Only show on medium and larger screens -->
     <div class="hidden md:flex">
       <AuthenticationColorToggle />
       <AuthenticationLayoutToggle />
     </div>
+    <!-- Always show Language and Theme toggles -->
     <LanguageToggle />
     <ThemeToggle />
   </div>