chore: add a new settings to handle prism theme from toolbar

3 files changed, 61 insertions, 0 deletions

diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index a822744..45a6176 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -5,6 +5,7 @@ import Prism from 'prismjs';
 import { ReactChildren, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import '@utils/plugins/prism-color-scheme';
+import { usePrismTheme } from '@utils/providers/prism';
 
 const CodeBlock = ({
   className,
@@ -29,6 +30,15 @@ const CodeBlock = ({
     translateCopyButton(locale, intl);
   }, [intl, locale]);
 
+  const { setCodeBlocks } = usePrismTheme();
+
+  useEffect(() => {
+    const allPre: NodeListOf<HTMLPreElement> = document.querySelectorAll(
+      'pre[data-prismjs-color-scheme'
+    );
+    setCodeBlocks(allPre);
+  }, [setCodeBlocks, router.asPath]);
+
   return (
     <div>
       <pre className={classNames.join(' ')}>
diff --git a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx b/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
new file mode 100644
index 0000000..06f7ac8
--- /dev/null
+++ b/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
@@ -0,0 +1,49 @@
+import { Toggle } from '@components/Form';
+import { MoonIcon, SunIcon } from '@components/Icons';
+import Spinner from '@components/Spinner/Spinner';
+import { usePrismTheme } from '@utils/providers/prism';
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+const PrismThemeToggle = () => {
+  const intl = useIntl();
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const { theme, setTheme, resolvedTheme } = usePrismTheme();
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(theme === 'dark');
+
+  useEffect(() => {
+    if (theme === 'system') {
+      setIsDarkTheme(resolvedTheme === 'dark');
+    } else {
+      setIsDarkTheme(theme === 'dark');
+    }
+  }, [theme, resolvedTheme]);
+
+  const updateTheme = () => {
+    isDarkTheme ? setTheme('light') : setTheme('dark');
+    setIsDarkTheme(!isDarkTheme);
+  };
+
+  if (!isMounted) return <Spinner />;
+
+  return (
+    <Toggle
+      id="prism-theme"
+      label={intl.formatMessage({
+        defaultMessage: 'Code blocks:',
+        description: 'PrismThemeToggle: toggle label',
+      })}
+      leftChoice={<SunIcon />}
+      rightChoice={<MoonIcon />}
+      value={isDarkTheme}
+      changeHandler={updateTheme}
+    />
+  );
+};
+
+export default PrismThemeToggle;
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index 80eb0c3..9f38ecb 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -1,6 +1,7 @@
 import { CogIcon } from '@components/Icons';
 import ThemeToggle from '@components/Settings/ThemeToggle/ThemeToggle';
 import { useIntl } from 'react-intl';
+import PrismThemeToggle from './PrismThemeToggle/PrismThemeToggle';
 import ReduceMotion from './ReduceMotion/ReduceMotion';
 import styles from './Settings.module.scss';
 
@@ -18,6 +19,7 @@ const Settings = () => {
       </div>
       <ThemeToggle />
       <ReduceMotion />
+      <PrismThemeToggle />
     </>
   );
 };