Update docusaurus hook 'useColorMode' according to the update from fa…

…cebook/docusaurus#6116
Luos-io · Jul 18, 2022 · 366928e · 366928e
1 parent e204f22
commit 366928e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/apps/documentation/src/components/index/anatomy/anatomy.js b/apps/documentation/src/components/index/anatomy/anatomy.js
@@ -20,7 +20,7 @@ import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 
 const Anatomy = (props) => {
-  const { isDarkTheme } = useColorMode();
+  const { colorMode } = useColorMode();
   const img = {
     topo: 'topology',
     micro: 'microservice',
@@ -174,7 +174,7 @@ const Anatomy = (props) => {
             <Grid item xs={2} md={2} lg={1} className={styles.docs}>
               <FileCopyIcon fontSize="large" className={styles.icons} />
               <SearchIcon fontSize="large" className={styles.icons} />
-              {isDarkTheme ? (
+              {colorMode === 'dark' ? (
                 <>
                   {' '}
                   <img src="img/index/header/luos.svg" alt="luos" />{' '}

diff --git a/apps/documentation/src/components/index/header/header.js b/apps/documentation/src/components/index/header/header.js
@@ -15,7 +15,7 @@ import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 const Header = (props) => {
-  const { isDarkTheme } = useColorMode();
+  const { colorMode } = useColorMode();
   return (
     <div className={styles.container}>
       <Grid container>
@@ -32,7 +32,7 @@ const Header = (props) => {
             <Grid item xs={2} md={1} lg={1} className={styles.docs}>
               <FileCopyIcon fontSize="large" className={styles.icons} />
               <SearchIcon fontSize="large" className={styles.icons} />
-              {isDarkTheme ? (
+              {colorMode === 'dark' ? (
                 <>
                   {' '}
                   <img src="img/index/header/luos.svg" alt="luos" />{' '}
@@ -131,7 +131,7 @@ const Header = (props) => {
               <Grid item md={1} lg={1} className={styles.docs}>
                 <FileCopyIcon fontSize="large" className={styles.icons} />
                 <SearchIcon fontSize="large" className={styles.icons} />
-                {isDarkTheme ? (
+                {colorMode === 'dark' ? (
                   <>
                     {' '}
                     <img src="img/index/header/luos.svg" alt="luos" />{' '}

diff --git a/apps/documentation/src/components/index/integration/integration.js b/apps/documentation/src/components/index/integration/integration.js
@@ -17,7 +17,7 @@ import SearchIcon from '@mui/icons-material/Search';
 // DO NOT REMOVE WIP INTEGRATION BLOCK
 
 const Integration = (props) => {
-  const { isDarkTheme } = useColorMode();
+  const { colorMode } = useColorMode();
 
   const img = {
     mcu: [
@@ -131,7 +131,7 @@ const Integration = (props) => {
             <Grid item md={1} lg={1} className={styles.docs}>
               <FileCopyIcon fontSize="large" className={styles.icons} />
               <SearchIcon fontSize="large" className={styles.icons} />
-              {isDarkTheme ? (
+              {colorMode === 'dark' ? (
                 <>
                   {' '}
                   <img src="img/index/header/luos.svg" alt="luos" />{' '}
@@ -192,7 +192,7 @@ const Integration = (props) => {
                     <ImageListItem key={index} alignitems="center">
                       <img
                         src={
-                          isDarkTheme
+                          colorMode === 'dark'
                             ? element[2]
                               ? `img/index/integration/icons/${element[2]}.svg`
                               : `img/index/integration/icons/${element[0]}.svg`

diff --git a/apps/documentation/src/components/index/powered/powered.js b/apps/documentation/src/components/index/powered/powered.js
@@ -19,15 +19,19 @@ import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
 import Link from '@mui/material/Link';
 
 const Powered = (props) => {
-  const { isDarkTheme } = useColorMode();
+  const { colorMode } = useColorMode();
   return (
     <div className={styles.container}>
       <div className={styles.containerTitle}>
         {' '}
         <h2 className={`${styles.title}`}>
           More features powered by{' '}
           <img
-            src={isDarkTheme ? 'img/index/powered/luos.svg' : 'img/index/powered/luos-dark.svg'}
+            src={
+              colorMode === 'dark'
+                ? 'img/index/powered/luos.svg'
+                : 'img/index/powered/luos-dark.svg'
+            }
             style={{ verticalAlign: 'middle', width: '100px' }}
             alt="luos-dark"
           />