From 0a64b14664ae12437cafada9139c42d2b544b818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mauro=20=F0=9F=A4=99?=
 <91018726+mauro-balades@users.noreply.github.com>
Date: Thu, 22 Aug 2024 21:07:53 +0000
Subject: [PATCH] refactor: Add dialog background color input to
 CreateThemePage component

---
 src/components/create-theme.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/create-theme.tsx b/src/components/create-theme.tsx
index 663e666..01a6a1f 100644
--- a/src/components/create-theme.tsx
+++ b/src/components/create-theme.tsx
@@ -179,6 +179,13 @@ export default function CreateThemePage() {
             <div className="flex items-center mt-2">
               <input type="text" className="border text-gray-500 rounded-lg p-2 w-2/3" value={colorsBorder} onChange={(e) => setColorsBorder(e.target.value)} />
               <div className="w-11 h-11 ml-4 rounded-lg border bg-[var(--zen-colors-border)]"></div>
+            </div
+            <h2 className="text-lg mt-8 font-bold opacity-70">
+              Dialog background color
+            </h2>
+            <div className="flex items-center mt-2">
+              <input type="text" className="border text-gray-500 rounded-lg p-2 w-2/3" value={dialogBg} onChange={(e) => setDialogBg(e.target.value)} />
+              <div className="w-11 h-11 ml-4 rounded-lg border bg-[var(--zen-dialog-background)]"></div>
             </div>
             <Sheet>
               <SheetTrigger asChild>