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

1 files changed, 49 insertions, 0 deletions

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;