diff --git a/app/components/calendar/menu/MenuSubnav.vue b/app/components/calendar/menu/MenuSubnav.vue
index 1bdb689..9abfa67 100644
--- a/app/components/calendar/menu/MenuSubnav.vue
+++ b/app/components/calendar/menu/MenuSubnav.vue
@@ -139,7 +139,7 @@ function toFutureFar(): void {
 
 <template>
   <div class="flex gap-2">
-    <div class="grid items-center w-40 px-3 md:px-4 py-2 bg-white dark:bg-black border-border border-x-[1px] border-t-[1px] rounded-t-sm text-sm max-md:text-xs transition-colors">
+    <div class="grid items-center w-40 px-3 md:px-4 py-2 bg-background border-border border-x-[1px] border-t-[1px] rounded-t-sm text-sm max-md:text-xs transition-colors">
       <ClientOnly>
         <span>{{ currentDate.currentDateTitle }}</span>
 
diff --git a/app/components/calendar/state/monthly/DayTile.vue b/app/components/calendar/state/monthly/DayTile.vue
index 6e3b5a7..5d099e9 100644
--- a/app/components/calendar/state/monthly/DayTile.vue
+++ b/app/components/calendar/state/monthly/DayTile.vue
@@ -81,7 +81,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 <template>
   <div
     ref="calendarTile"
-    class="tile relative p-1 md:p-2 transition-colors"
+    class="tile relative p-1 md:p-2 transition-all"
     :class="{
       'text-slate-300 dark:text-slate-500': props.faded,
       'text-slate-500 dark:text-slate-300': !props.faded
diff --git a/app/components/global/sidebar/Sidebar.vue b/app/components/global/sidebar/Sidebar.vue
index 1e63911..e73bd6e 100644
--- a/app/components/global/sidebar/Sidebar.vue
+++ b/app/components/global/sidebar/Sidebar.vue
@@ -40,7 +40,7 @@ const breakpoints = useBreakpoints(
   <nav
     ref="sidebarRef"
     :class="cn(
-      ['md:relative md:isolate w-16 py-6 grid gap-4 grid-rows-[1fr_auto] justify-center md:transition-none'], // Base appearance
+      ['md:relative md:isolate w-16 py-6 grid gap-4 grid-rows-[1fr_auto] justify-center md:transition-colors'], // Base appearance
       ['after:opacity-50 after:contrast-125 dark:after:opacity-75'], // After styling
       ['border-r-[1px] border-r-border dark:border-r-border'], // Colours
       ['max-md:justify-stretch max-md:px-4 max-md:py-4 max-md:absolute max-md:left-0 max-md:inset-0 max-md:z-50 max-md:w-40 max-md:max-w-full max-md:transition-all'], // Responsive behaviours
diff --git a/app/components/ui/breadcrumb/BreadcrumbList.vue b/app/components/ui/breadcrumb/BreadcrumbList.vue
index 06ba68f..bc018e2 100644
--- a/app/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbList.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <ol
-    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground transition-colors sm:gap-2.5', props.class)"
   >
     <slot />
   </ol>
diff --git a/app/components/ui/breadcrumb/BreadcrumbPage.vue b/app/components/ui/breadcrumb/BreadcrumbPage.vue
index 64e61b9..7ae8064 100644
--- a/app/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
     role="link"
     aria-disabled="true"
     aria-current="page"
-    :class="cn('font-normal text-foreground', props.class)"
+    :class="cn('font-normal text-foreground transition-colors', props.class)"
   >
     <slot />
   </span>
diff --git a/app/components/ui/dropdown-menu/DropdownMenuContent.vue b/app/components/ui/dropdown-menu/DropdownMenuContent.vue
index e224485..50d8507 100644
--- a/app/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 transition-all',
           props.class
         )
       "
diff --git a/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index 5f2b094..4e462ca 100644
--- a/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -19,6 +19,6 @@ const delegatedProps = computed(() => {
 <template>
   <DropdownMenuSeparator
     v-bind="delegatedProps"
-    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+    :class="cn('-mx-1 my-1 h-px bg-muted transition-colors', props.class)"
   />
 </template>
diff --git a/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 5ae0705..f9c91e2 100644
--- a/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 transition-all',
         props.class
       )
     "
diff --git a/app/error.vue b/app/error.vue
index f12bd30..b6e3254 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -60,7 +60,7 @@ switch (statusCode) {
 
 <template>
   <div class="h-screen">
-    <div class="h-full grid grid-cols-[auto_1fr] dark:bg-black transition-colors">
+    <div class="h-full grid grid-cols-[auto_1fr] transition-colors">
       <Sidebar />
 
       <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index b6fb7db..d98095d 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -6,7 +6,7 @@ const { isSidebarOpened } = storeToRefs(useUiStore())
 
 <template>
   <div
-    class="h-full grid md:grid-cols-[auto_1fr] dark:bg-black transition-colors after:absolute after:transition-colors"
+    class="h-full grid md:grid-cols-[auto_1fr] bg-background transition-colors after:absolute after:transition-colors"
     :class="cn({
       'max-md:after:bg-transparent': isSidebarOpened,
       'has-sidebar max-md:after:bg-black/20 md:after:opacity-0 md:after:pointer-events-none': isSidebarOpened