[polaris.shopify.com] Fix next.js rehydration issue (#7922)

Fixes this annoying message in development:

<img width="1011" alt="image"
src="https://user-images.githubusercontent.com/875708/207904298-8ebb19c3-3b9d-43cf-8a1a-78939a3f6b1a.png">

It was caused by the dark mode switcher having different states between
the server and the client, thus breaking rehydration. This fix ensures
that the dark mode toggle is only rendered on the client.

Author: martenbjork

polaris.shopify.com/src/components/Frame/Frame.tsx

@@ -28,6 +28,9 @@ function Frame({darkMode, children}: Props) {
   const menuButtonRef = useRef<HTMLButtonElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
   const {asPath} = useRouter();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => setIsMounted(true), []);
 
   useEffect(() => {
     const mainContent = document.querySelector('#main');
@@ -120,13 +123,15 @@ function Frame({darkMode, children}: Props) {
           Polaris
         </Link>
 
-        <button className={styles.DarkModeToggle} onClick={darkMode.toggle}>
-          {darkMode.value ? (
-            <div className={styles.LightModeIcon}>💡</div>
-          ) : (
-            <div className={styles.DarkModeIcon}>🌙</div>
-          )}
-        </button>
+        {isMounted && (
+          <button className={styles.DarkModeToggle} onClick={darkMode.toggle}>
+            {darkMode.value ? (
+              <span className={styles.LightModeIcon}>💡</span>
+            ) : (
+              <span className={styles.DarkModeIcon}>🌙</span>
+            )}
+          </button>
+        )}
 
         <GlobalSearch />
       </div>