Changed mode selector

etn-ccis · Dec 19, 2024 · c99786f · c99786f
1 parent ed955b5
commit c99786f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git 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
@@ -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,15 +20,14 @@ 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);
 
     return (
         <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={[