replace theme with resolved theme

json-schema-org · Jun 17, 2024 · c237d28 · c237d28
2 parents a8166d9 + 78ae9f2
commit c237d28
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -164,26 +164,29 @@ const MainNavigation = () => {
   const section = useContext(SectionContext);
   const showMobileNav = useStore((s: any) => s.overlayNavigation === 'docs');
 
-  const { theme } = useTheme();
+  const { resolvedTheme, theme } = useTheme();
   const [icon, setIcon] = useState('');
   const [menu, setMenu] = useState('bg-black');
   const [closeMenu, setCLoseMenu] = useState('url("/icons/cancel.svg")');
 
   useEffect(() => {
     const icon = theme === 'dark' ? 'herobtn' : '';
-    const menu = theme === 'dark' ? 'bg-white' : 'bg-black';
-    const dataTheme = theme === 'dark' ? 'dark' : 'light';
+    const menu = resolvedTheme === 'dark' ? 'bg-white' : 'bg-black';
+    const dataTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
     const closeMenu =
-      theme === 'dark'
+      resolvedTheme === 'dark'
         ? 'url("/icons/cancel-dark.svg")'
         : 'url("/icons/cancel.svg")';
     document.documentElement.setAttribute('data-theme', dataTheme);
-    document.documentElement.setAttribute('class', 'keygrad keyshadow');
+    document.documentElement.setAttribute(
+      'class',
+      `keygrad keyshadow ${dataTheme}`,
+    );
 
     setIcon(icon);
     setMenu(menu);
     setCLoseMenu(closeMenu);
-  }, [theme]);
+  }, [theme, resolvedTheme]);
 
   return (
     <div className='flex justify-end md:mr-8 w-full '>
@@ -402,16 +405,16 @@ const Footer = () => (
 );
 
 const Logo = () => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [imageSrc, setImageSrc] = useState('/img/logos/logo-blue.svg'); // Default to match the server-side render
 
   useEffect(() => {
     const src =
-      theme === 'dark'
+      resolvedTheme === 'dark'
         ? '/img/logos/logo-white.svg'
         : '/img/logos/logo-blue.svg';
     setImageSrc(src);
-  }, [theme]);
+  }, [resolvedTheme]);
 
   return (
     <div>

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -281,15 +281,15 @@ export const DocsNav = ({
   const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)';
   const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)';
 
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const [learn_icon, setLearn_icon] = useState('');
   const [reference_icon, setReference_icon] = useState('');
   const [spec_icon, setSpec_icon] = useState('');
   const [overview_icon, setOverview_icon] = useState('');
 
   useEffect(() => {
-    if (theme === 'dark') {
+    if (resolvedTheme === 'dark') {
       setOverview_icon('/icons/eye-dark.svg');
       setLearn_icon('/icons/compass-dark.svg');
       setReference_icon('/icons/book-dark.svg');
@@ -300,7 +300,7 @@ export const DocsNav = ({
       setReference_icon('/icons/book.svg');
       setSpec_icon('/icons/clipboard.svg');
     }
-  }, [theme]);
+  }, [resolvedTheme]);
 
   return (
     <div id='sidebar' className='lg:mt-8 w-4/5 mx-auto lg:ml-4'>

diff --git a/pages/index.page.tsx b/pages/index.page.tsx
@@ -194,7 +194,7 @@ export function AlgoliaSearch() {
 const Home = (props: any) => {
   const blogPosts = props.blogPosts;
   const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes);
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const [asyncapi_logo, setAsyncapi_logo] = useState('');
   const [vpsserver_logo, setVPSserver_logo] = useState('');
@@ -206,7 +206,7 @@ const Home = (props: any) => {
   const [slack_logo, setSlack_logo] = useState('');
 
   useEffect(() => {
-    if (theme === 'dark') {
+    if (resolvedTheme === 'dark') {
       setAsyncapi_logo('/img/logos/dark-mode/asyncapi_white.svg');
       setAirbnb_logo('/img/logos/dark-mode/airbnb_white.png');
       setPostman_logo('/img/logos/usedby/postman-white.png');
@@ -225,7 +225,7 @@ const Home = (props: any) => {
       setSlack_logo('/img/logos/supported/slack-logo.svg');
       setVPSserver_logo('/img/logos/sponsors/vps-server-logo.svg');
     }
-  }, [theme]);
+  }, [resolvedTheme]);
   return (
     <div>
       <div className='flex flex-col items-center'>