use stitches-normalize 🧵

https://github.com/jakejarvis/stitches-normalize

components/Footer/Footer.tsx

@@ -11,7 +11,9 @@ const Wrapper = styled("footer", {
   borderTop: "1px solid $kindaLight",
   backgroundColor: "$backgroundOuter",
   color: "$mediumDark",
-  transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
+
+  // light-dark theme switch fading
+  transition: "background 0.25s ease, border 0.25s ease",
 
   "@medium": {
     padding: "1em 1.25em",
@@ -50,6 +52,9 @@ const ViewSourceLink = styled(Link, {
   borderBottom: "1px solid",
   borderColor: "$light",
 
+  // light-dark theme switch fading
+  transition: "border 0.25s ease",
+
   "&:hover": {
     borderColor: "$kindaLight",
   },

components/Header/Header.tsx

@@ -12,7 +12,7 @@ const Wrapper = styled("header", {
   backgroundColor: "$backgroundHeader",
 
   // light-dark theme switch fading
-  transition: "color 0.25s ease, background 0.25s ease, border 0.25s ease",
+  transition: "background 0.25s ease, border 0.25s ease",
 
   "@medium": {
     padding: "0.75em 1.25em",
@@ -27,7 +27,7 @@ const Wrapper = styled("header", {
 
         // blurry glass-like background effect (except on firefox)
         backdropFilter: "saturate(180%) blur(5px)",
-        zIndex: 1000,
+        zIndex: 9999,
       },
     },
   },

components/Layout/Layout.tsx

@@ -41,9 +41,7 @@ const Layout = ({ container = true, stickyHeader = true, children, ...rest }: La
         {/* dynamically set browser theme color to match the background color; default to light for SSR */}
         <meta
           name="theme-color"
-          content={
-            resolvedTheme === "dark" ? darkTheme.colors.backgroundOuter.value : theme.colors.backgroundOuter.value
-          }
+          content={(resolvedTheme === "dark" ? darkTheme : theme).colors.backgroundOuter?.value}
         />
       </Head>
 

components/TweetEmbed/TweetEmbed.tsx

@@ -1,4 +1,5 @@
-import Tweet from "react-tweet-embed";
+import { useTheme } from "next-themes";
+import { TwitterTweetEmbed } from "react-twitter-embed";
 
 export type TweetEmbedProps = {
   id: string;
@@ -6,16 +7,20 @@ export type TweetEmbedProps = {
   className?: string;
 };
 
-const TweetEmbed = ({ id, className, options }: TweetEmbedProps) => (
-  <Tweet
-    className={className}
-    tweetId={id}
-    options={{
-      dnt: true,
-      align: "center",
-      ...options,
-    }}
-  />
-);
+const TweetEmbed = ({ id, options }: TweetEmbedProps) => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <TwitterTweetEmbed
+      tweetId={id}
+      options={{
+        dnt: true,
+        align: "center",
+        theme: resolvedTheme === "dark" ? "dark" : "light",
+        ...options,
+      }}
+    />
+  );
+};
 
 export default TweetEmbed;