From c99786fa896fed20e0ba7f46d76558fdf3c2cff5 Mon Sep 17 00:00:00 2001
From: shubham-eaton <ShubhamkVishwakarma@eaton.com>
Date: Thu, 19 Dec 2024 17:58:26 +0530
Subject: [PATCH] Changed mode selector

---
 docs/src/shared/CallToActionButton.tsx  | 4 +++-
 docs/src/shared/theme/ThemeExplorer.tsx | 5 ++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/src/shared/CallToActionButton.tsx b/docs/src/shared/CallToActionButton.tsx
index 7d374d83d..ad2334e62 100644
--- a/docs/src/shared/CallToActionButton.tsx
+++ b/docs/src/shared/CallToActionButton.tsx
@@ -11,6 +11,7 @@ import {
     CardActionAreaProps,
     SxProps,
     Box,
+    useColorScheme,
 } from '@mui/material';
 
 type CallToActionButtonProps = {
@@ -63,6 +64,7 @@ const styles: { [key: string]: SxProps<Theme> } = {
 
 export const CallToActionButton: React.FC<CallToActionButtonProps> = (props): JSX.Element => {
     const theme = useTheme();
+    const colorScheme = useColorScheme();
     const {
         avatar = <DesignServices sx={{ height: 48, width: 48 }} />,
         description = `Learn about Material Design's description of this pattern. Follow their guidance unless Brightlayer UI recommends specific changes.`,
@@ -73,7 +75,7 @@ export const CallToActionButton: React.FC<CallToActionButtonProps> = (props): JS
         ...cardProps
     } = props;
     return (
-        <Card sx={styles.root} variant={theme.palette.mode === 'light' ? 'elevation' : 'outlined'} {...cardProps}>
+        <Card sx={styles.root} variant={colorScheme.mode === 'light' ? 'elevation' : 'outlined'} {...cardProps}>
             <CardActionArea
                 onClick={(e): void => {
                     if (e) {
diff --git a/docs/src/shared/theme/ThemeExplorer.tsx b/docs/src/shared/theme/ThemeExplorer.tsx
index 0fb2cf773..f2c9161a0 100644
--- a/docs/src/shared/theme/ThemeExplorer.tsx
+++ b/docs/src/shared/theme/ThemeExplorer.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Spacer } from '@brightlayer-ui/react-components';
 import { blueThemes as theme } from '@brightlayer-ui/react-themes';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import {
     Card,
     Divider,
@@ -20,7 +20,6 @@ import { SystemStyleObject } from '@mui/system';
 
 export const ThemeExplorer: React.FC = () => {
     const colorScheme = useColorScheme();
-    const globalTheme = useTheme();
     const [localThemeDark, setLocalThemeDark] = useState(colorScheme.mode === 'dark');
     const [selectedComponent, setSelectedComponent] = useState(0);
 
@@ -28,7 +27,7 @@ export const ThemeExplorer: React.FC = () => {
         <ThemeProvider theme={theme}>
             <Card
                 sx={{ mb: 4, boxSizing: 'border-box', '&:hover': { boxShadow: 6 } }}
-                variant={globalTheme.palette.mode === 'dark' ? 'outlined' : undefined}
+                variant={colorScheme.mode === 'dark' ? 'outlined' : undefined}
             >
                 <Toolbar
                     sx={[