From 817209d5df9b4b43f030058d9edf3569f55f2886 Mon Sep 17 00:00:00 2001
From: shuklatul1021 <165987183+shuklatul1021@users.noreply.github.com>
Date: Sat, 7 Feb 2026 15:33:29 +0530
Subject: [PATCH] Fix #1256: Add dark mode to studio settings for UI
 consistency

---
 .../src/components/Modals/ConfirmModal.tsx    | 42 ++++++++++++-------
 .../Modals/Settings/SettingsModal.tsx         |  8 ++--
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/apps/studio/src/components/Modals/ConfirmModal.tsx b/apps/studio/src/components/Modals/ConfirmModal.tsx
index d921a4f01..adbb8758d 100644
--- a/apps/studio/src/components/Modals/ConfirmModal.tsx
+++ b/apps/studio/src/components/Modals/ConfirmModal.tsx
@@ -1,8 +1,8 @@
-import { Fragment, useRef, useCallback } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import { useModal } from '@ebay/nice-modal-react';
+import { Fragment, useRef, useCallback } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { useModal } from "@ebay/nice-modal-react";
 
-import type { ReactNode, FunctionComponent, PropsWithChildren } from 'react';
+import type { ReactNode, FunctionComponent, PropsWithChildren } from "react";
 
 interface ConfirmModalProps {
   title: ReactNode;
@@ -19,13 +19,15 @@ interface ConfirmModalProps {
   onCancel?: () => void;
 }
 
-export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps>> = ({
+export const ConfirmModal: FunctionComponent<
+  PropsWithChildren<ConfirmModalProps>
+> = ({
   title,
   description,
   warning,
   link,
-  confirmText = 'Save',
-  cancelText = 'Cancel',
+  confirmText = "Save",
+  cancelText = "Cancel",
   confirmDisabled = true,
   cancelDisabled = false,
   closeAfterSumbit = true,
@@ -57,7 +59,11 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
 
   return (
     <>
-      <Transition.Root show={modal.visible} as={Fragment} afterLeave={handleAfterLeave}>
+      <Transition.Root
+        show={modal.visible}
+        as={Fragment}
+        afterLeave={handleAfterLeave}
+      >
         <Dialog
           as="div"
           static
@@ -95,22 +101,24 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <div className={`inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-2/5 sm:p-6 ${containerClassName}`}>
+              <div
+                className={`inline-block align-bottom bg-[#1a1a1a] rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-2/5 sm:p-6 ${containerClassName}`}
+              >
                 <div>
                   <div>
                     <Dialog.Title
                       as="h3"
-                      className="text-lg leading-6 font-medium text-gray-900"
+                      className="text-xl leading-7 font-semibold text-white mb-2"
                     >
                       {title}
                     </Dialog.Title>
                     {description && (
-                      <p className="text-gray-500 text-xs">{description}</p>
+                      <p className="text-white text-sm mt-1">{description}</p>
                     )}
                     {warning && (
                       <a
                         href={link}
-                        className='text-red-500 text-xs underline'
+                        className="text-red-400 text-sm underline hover:text-red-300 mt-2 inline-block"
                         target="_blank"
                         rel="noreferrer"
                       >
@@ -120,11 +128,13 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
                     <div className="my-8 space-y-4">{children}</div>
                   </div>
                 </div>
-                <div className={`mt-5 sm:mt-6 sm:grid sm:gap-3 sm:grid-flow-row-dense ${onSubmit ? 'sm:grid-cols-2' : ''}`}>
+                <div
+                  className={`mt-5 sm:mt-6 sm:grid sm:gap-3 sm:grid-flow-row-dense ${onSubmit ? "sm:grid-cols-2" : ""}`}
+                >
                   {onSubmit && (
                     <button
-                      type="button" 
-                      className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:col-start-2 sm:text-sm ${confirmDisabled ? 'opacity-10' : 'opacity-100'}`}
+                      type="button"
+                      className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-pink-500 sm:col-start-2 sm:text-sm transition-colors ${confirmDisabled ? "opacity-40 cursor-not-allowed" : "opacity-100"}`}
                       disabled={confirmDisabled}
                       onClick={handleOnSubmit}
                       data-test="modal-confirm-button"
@@ -134,7 +144,7 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
                   )}
                   <button
                     type="button"
-                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-800 text-base font-medium text-gray-200 hover:bg-gray-700 hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-500 sm:mt-0 sm:col-start-1 sm:text-sm transition-colors"
                     onClick={handleOnCancel}
                     disabled={cancelDisabled}
                     ref={cancelButtonRef}
diff --git a/apps/studio/src/components/Modals/Settings/SettingsModal.tsx b/apps/studio/src/components/Modals/Settings/SettingsModal.tsx
index 5ee4a9338..d1c836c5f 100644
--- a/apps/studio/src/components/Modals/Settings/SettingsModal.tsx
+++ b/apps/studio/src/components/Modals/Settings/SettingsModal.tsx
@@ -29,7 +29,7 @@ const ShowGovernanceOption: FunctionComponent<ShowGovernanceOptionProps> = ({
         <div className="flex flex-row content-center justify-between">
           <label
             htmlFor={`settings-governance-show-${label}`}
-            className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
+            className="flex justify-right items-center w-1/2 content-center font-medium text-white"
           >
             Show&nbsp;<strong>{label}</strong>&nbsp;governance issues
           </label>
@@ -116,7 +116,7 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
             <div className="flex flex-row content-center justify-between">
               <label
                 htmlFor="settings-auto-saving"
-                className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
+                className="flex justify-right items-center w-1/2 content-center font-medium text-white"
               >
                 Auto saving
               </label>
@@ -133,7 +133,7 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
             <div className="flex flex-row content-center justify-between">
               <label
                 htmlFor="settings-template-delay"
-                className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
+                className="flex justify-right items-center w-1/2 content-center font-medium text-white"
               >
                 Delay (in miliseconds)
               </label>
@@ -179,7 +179,7 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
             <div className="flex flex-row content-center justify-between">
               <label
                 htmlFor="asyncapi-version"
-                className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
+                className="flex justify-right items-center w-1/2 content-center font-medium text-white"
               >
                 Auto rendering
               </label>