feat(dark mode): add ThemeSwitch component (#800)

issue #799
sabertazimi · May 4, 2022 · b168313 · b168313 · vercel · May 4, 2022
1 parent 07c9176
commit b168313
Show file tree

Hide file tree

Showing 25 changed files with 558 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@ A great [blog](https://blog.tazimi.dev) system based on Next.js.
 - Motion almost everything.
 - Disqus comments system.
 - Customized 404 not found page.
+- Dark mode support.
 - ...and more.
 
 ### Development Features

diff --git a/components/CodeBlocks/__snapshots__/Pre.test.tsx.snap b/components/CodeBlocks/__snapshots__/Pre.test.tsx.snap
@@ -44,6 +44,7 @@ exports[`Pre should hidden line number correctly (snapshot) 1`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -109,6 +110,7 @@ exports[`Pre should render code title correctly (snapshot) 1`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -176,6 +178,7 @@ exports[`Pre should render different language correctly (snapshot) 1`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -243,6 +246,7 @@ exports[`Pre should render different language correctly (snapshot) 2`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -310,6 +314,7 @@ exports[`Pre should render different language correctly (snapshot) 3`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -377,6 +382,7 @@ exports[`Pre should render different language correctly (snapshot) 4`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -444,6 +450,7 @@ exports[`Pre should render different language correctly (snapshot) 5`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -535,6 +542,7 @@ exports[`Pre should render different language correctly (snapshot) 6`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -602,6 +610,7 @@ exports[`Pre should render different language correctly (snapshot) 7`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -669,6 +678,7 @@ exports[`Pre should render different language correctly (snapshot) 8`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -736,6 +746,7 @@ exports[`Pre should render different language correctly (snapshot) 9`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -844,6 +855,7 @@ exports[`Pre should render different language correctly (snapshot) 10`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -952,6 +964,7 @@ exports[`Pre should render different language correctly (snapshot) 11`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1060,6 +1073,7 @@ exports[`Pre should render different language correctly (snapshot) 12`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1168,6 +1182,7 @@ exports[`Pre should render different language correctly (snapshot) 13`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1270,6 +1285,7 @@ exports[`Pre should render different language correctly (snapshot) 14`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1372,6 +1388,7 @@ exports[`Pre should render different language correctly (snapshot) 15`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1480,6 +1497,7 @@ exports[`Pre should render different language correctly (snapshot) 16`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1588,6 +1606,7 @@ exports[`Pre should render different language correctly (snapshot) 17`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1696,6 +1715,7 @@ exports[`Pre should render different language correctly (snapshot) 18`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1804,6 +1824,7 @@ exports[`Pre should render different language correctly (snapshot) 19`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1871,6 +1892,7 @@ exports[`Pre should render different language correctly (snapshot) 20`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -1979,6 +2001,7 @@ exports[`Pre should render different language correctly (snapshot) 21`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -2046,6 +2069,7 @@ exports[`Pre should render different language correctly (snapshot) 22`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -2113,6 +2137,7 @@ exports[`Pre should render empty children correctly (snapshot) 1`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -2182,6 +2207,7 @@ exports[`Pre should render empty className correctly (snapshot) 1`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span
@@ -2249,6 +2275,7 @@ exports[`Pre should render highlight lines correctly (snapshot) 1`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span

diff --git a/components/Header/DesktopNav.tsx b/components/Header/DesktopNav.tsx
@@ -2,6 +2,7 @@ import Link from '@components/Link';
 import LocalImage from '@components/LocalImage';
 import Menu from '@components/Menu';
 import PostsSearchBar from '@components/PostsSearchBar';
+import ThemeSwitch from '@components/ThemeSwitch';
 import { classNames } from '@components/utils';
 import { routes } from '@config';
 import logo from '@images/logo-full.png';
@@ -63,6 +64,10 @@ const DesktopNav = ({ fixed, posts }: Props): JSX.Element => (
           </span>
         ),
       },
+      {
+        key: 'theme',
+        label: <ThemeSwitch className={fixed ? 'text-dark' : 'text-light'} />,
+      },
     ]}
   />
 );

diff --git a/components/Header/__snapshots__/Header.test.tsx.snap b/components/Header/__snapshots__/Header.test.tsx.snap
@@ -274,6 +274,45 @@ exports[`Header should render correctly (snapshot) 1`] = `
           </span>
         </span>
       </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity: 1; order: 6;"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          <div
+            class="wrapper button"
+            data-testid="toggle-wrapper"
+            tabindex="0"
+          >
+            <span
+              aria-current="true"
+              class="span"
+              style="opacity: 1; transform: none;"
+            >
+              <span
+                aria-label="Sun"
+                class="anticon text-light"
+                role="img"
+              >
+                <svg
+                  fill="currentColor"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                >
+                  <path
+                    d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </span>
+      </li>
       <li
         aria-hidden="true"
         class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"

diff --git a/components/Icons/Hamburger.tsx b/components/Icons/Hamburger.tsx
@@ -1,6 +1,5 @@
 import type { MotionProps } from '@components/utils';
 import { motion } from '@components/utils';
-import type { MouseEvent } from 'react';
 import { useCallback, useState } from 'react';
 import IconFactory from './IconFactory';
 
@@ -22,7 +21,7 @@ const thirdVariants: MotionProps['variants'] = {
 const Svg = (): JSX.Element => {
   const [isChecked, setIsChecked] = useState(false);
   const handleClick = useCallback(
-    (event: MouseEvent) => setIsChecked(isChecked => !isChecked),
+    () => setIsChecked(isChecked => !isChecked),
     []
   );
 

diff --git a/components/Icons/Moon.tsx b/components/Icons/Moon.tsx
@@ -0,0 +1,11 @@
+import { motion } from '@components/utils';
+import IconFactory from './IconFactory';
+
+const Svg = (): JSX.Element => (
+  <motion.svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+    <motion.path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" />
+  </motion.svg>
+);
+
+const Moon = IconFactory(Svg, 'Moon');
+export default Moon;
diff --git a/components/Icons/Sun.tsx b/components/Icons/Sun.tsx
@@ -0,0 +1,11 @@
+import { motion } from '@components/utils';
+import IconFactory from './IconFactory';
+
+const Svg = (): JSX.Element => (
+  <motion.svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+    <motion.path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" />
+  </motion.svg>
+);
+
+const Sun = IconFactory(Svg, 'Sun');
+export default Sun;
diff --git a/components/Icons/index.ts b/components/Icons/index.ts
@@ -20,4 +20,6 @@ export {
 } from '@ant-design/icons';
 export { default as Comment } from './Comment';
 export { default as Hamburger } from './Hamburger';
+export { default as Moon } from './Moon';
 export { default as SocialIcon } from './SocialIcon';
+export { default as Sun } from './Sun';
diff --git a/components/MDX/__snapshots__/MDX.test.tsx.snap b/components/MDX/__snapshots__/MDX.test.tsx.snap
@@ -62,6 +62,7 @@ exports[`MDXPre should render correctly (snapshot) 1`] = `
     >
       <div
         class="wrapper"
+        data-testid="toggle-wrapper"
         tabindex="0"
       >
         <span

diff --git a/components/Motion/Toggle.tsx b/components/Motion/Toggle.tsx
@@ -45,6 +45,7 @@ const Toggle = ({
 }: Props): JSX.Element => (
   <div
     key="toggle-wrapper"
+    data-testid="toggle-wrapper"
     tabIndex={0}
     onClick={onToggle}
     onKeyDown={onToggle}

diff --git a/components/Motion/__snapshots__/Toggle.test.tsx.snap b/components/Motion/__snapshots__/Toggle.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Toggle should render animation correctly (snapshot) 1`] = `
 <div>
   <div
     class="wrapper"
+    data-testid="toggle-wrapper"
     tabindex="0"
   >
     <span
@@ -23,6 +24,7 @@ exports[`Toggle should render animation correctly (snapshot) 2`] = `
 <div>
   <div
     class="wrapper"
+    data-testid="toggle-wrapper"
     tabindex="0"
   >
     <span
@@ -42,6 +44,7 @@ exports[`Toggle should render animation correctly (snapshot) 3`] = `
 <div>
   <div
     class="wrapper"
+    data-testid="toggle-wrapper"
     tabindex="0"
   >
     <span
@@ -61,6 +64,7 @@ exports[`Toggle should render animation correctly (snapshot) 4`] = `
 <div>
   <div
     class="wrapper"
+    data-testid="toggle-wrapper"
     tabindex="0"
   >
     <span