From 272cf433227f52f23060020badeccc10bbda5675 Mon Sep 17 00:00:00 2001
From: Kartik Labhshetwar <kartik.labhshetwar@gmail.com>
Date: Tue, 16 Dec 2025 18:15:23 +0530
Subject: [PATCH] fix: add dark mode support to emptypage skeleton and layout
 (#25913)

* fix: add dark mode support to emptypage skeleton and layout

* style: remove dark blur effect from EmptyPage component

* style: add dark mode divide subtle to EmptyPage component
---
 .../eventtypes/components/EmptyPage.tsx        | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/features/eventtypes/components/EmptyPage.tsx b/packages/features/eventtypes/components/EmptyPage.tsx
index f03825f552..fee9d9d72c 100644
--- a/packages/features/eventtypes/components/EmptyPage.tsx
+++ b/packages/features/eventtypes/components/EmptyPage.tsx
@@ -2,20 +2,20 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 const SkeletonEventType = () => {
   return (
-    <div className="bg-default h-24 w-full">
+    <div className="bg-default dark:bg-cal-muted h-24 w-full">
       <div className="p-5">
         <div className="flex space-x-2 rtl:space-x-reverse">
-          <div className="bg-subtle h-2 w-1/6 rounded-md" />
-          <div className="bg-subtle h-2 w-1/6 rounded-md" />
+          <div className="bg-subtle dark:bg-default h-2 w-1/6 rounded-md" />
+          <div className="bg-subtle dark:bg-default h-2 w-1/6 rounded-md" />
         </div>
         <div className="flex space-x-2 py-2 rtl:space-x-reverse">
-          <div className="bg-subtle h-2 w-1/12 rounded-md" />
-          <div className="bg-subtle h-2 w-1/6 rounded-md" />
-          <div className="bg-subtle h-2 w-1/12 rounded-md" />
+          <div className="bg-subtle dark:bg-default h-2 w-1/12 rounded-md" />
+          <div className="bg-subtle dark:bg-default h-2 w-1/6 rounded-md" />
+          <div className="bg-subtle dark:bg-default h-2 w-1/12 rounded-md" />
         </div>
         <div className="flex space-x-2 py-1 rtl:space-x-reverse">
-          <div className="bg-subtle h-6 w-1/6 rounded-md" />
-          <div className="bg-subtle h-6 w-1/6 rounded-md" />
+          <div className="bg-subtle dark:bg-default h-6 w-1/6 rounded-md" />
+          <div className="bg-subtle dark:bg-default h-6 w-1/6 rounded-md" />
         </div>
       </div>
     </div>
@@ -26,7 +26,7 @@ function EmptyPage({ name }: { name: string }) {
   const { t } = useLocale();
   return (
     <div className="relative text-center">
-      <div className="flex flex-col divide-y-2 blur-[3px]">
+      <div className="flex flex-col divide-y-2 blur-[3px] dark:divide-subtle dark:opacity-70">
         <SkeletonEventType />
         <SkeletonEventType />
         <SkeletonEventType />