diff --git a/apps/docs/components/themes/constants.ts b/apps/docs/components/themes/constants.ts
index 5cc984685..1e85d8511 100644
--- a/apps/docs/components/themes/constants.ts
+++ b/apps/docs/components/themes/constants.ts
@@ -39,7 +39,7 @@ export const initialLightTheme: ConfigColors = {
     foreground: colors.black,
     background: colors.white,
     focus: colors.blue[500],
-    overlay: colors.black,
+    overlay: colors.white,
   },
   contentColor: {
     content1: colors.white,
@@ -64,7 +64,7 @@ export const initialDarkTheme: ConfigColors = {
     foreground: colors.white,
     background: colors.black,
     focus: colors.blue[500],
-    overlay: colors.white,
+    overlay: colors.black,
   },
   contentColor: {
     content1: colors.zinc[900],
diff --git a/apps/docs/components/themes/templates/coffee.ts b/apps/docs/components/themes/templates/coffee.ts
index de48f682e..5b74e7f2e 100644
--- a/apps/docs/components/themes/templates/coffee.ts
+++ b/apps/docs/components/themes/templates/coffee.ts
@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const coffee: Config = {
   name: "coffee",
@@ -20,7 +18,7 @@ export const coffee: Config = {
     layoutColor: {
       foreground: "#a27225",
       background: "#fffbf6",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#db924b",
     },
     contentColor: {
@@ -45,7 +43,7 @@ export const coffee: Config = {
       foreground: "#c59f60",
       background: "#20161F",
       focus: "#db924b",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
     },
     contentColor: {
       content1: "#2c1f2b",
diff --git a/apps/docs/components/themes/templates/elegant.ts b/apps/docs/components/themes/templates/elegant.ts
index df1328917..36f5f6fae 100644
--- a/apps/docs/components/themes/templates/elegant.ts
+++ b/apps/docs/components/themes/templates/elegant.ts
@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const elegant: Config = {
   name: "elegant",
@@ -20,7 +18,7 @@ export const elegant: Config = {
     layoutColor: {
       foreground: "#4a4a4a",
       background: "#ffffff",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#db924b",
     },
     contentColor: {
@@ -44,7 +42,7 @@ export const elegant: Config = {
     layoutColor: {
       foreground: "#b0b0b0",
       background: "#000000",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
       focus: "#000000",
     },
     contentColor: {
diff --git a/apps/docs/components/themes/templates/modern.ts b/apps/docs/components/themes/templates/modern.ts
index 5ef2afbf4..10fae828b 100644
--- a/apps/docs/components/themes/templates/modern.ts
+++ b/apps/docs/components/themes/templates/modern.ts
@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const modern: Config = {
   name: "modern",
@@ -20,7 +18,7 @@ export const modern: Config = {
     layoutColor: {
       foreground: "#4a3d77",
       background: "#f9f7fd",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#7828c8",
     },
     contentColor: {
@@ -44,7 +42,7 @@ export const modern: Config = {
     layoutColor: {
       foreground: "#d0aaff",
       background: "#1b1526",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
       focus: "#9353d3",
     },
     contentColor: {
diff --git a/apps/docs/components/themes/templates/retro.ts b/apps/docs/components/themes/templates/retro.ts
index 303d9eaec..7452c914c 100644
--- a/apps/docs/components/themes/templates/retro.ts
+++ b/apps/docs/components/themes/templates/retro.ts
@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const retro: Config = {
   name: "retro",
@@ -20,7 +18,7 @@ export const retro: Config = {
     layoutColor: {
       foreground: "#5A4A42",
       background: "#F4E8D1",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#FFD34E",
     },
     contentColor: {
@@ -44,7 +42,7 @@ export const retro: Config = {
     layoutColor: {
       foreground: "#000000",
       background: "#E1CA9E",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
       focus: "#FFD34E",
     },
     contentColor: {