chore: add dark and light mode of man standing

content/collections/framework-field-guide/above.md

@@ -1,3 +1,6 @@
+<div style="display: flex; flex-wrap: nowrap;">
+<div>
+
 ## Why learn React, Angular, **and** Vue?!
 
 By learning React, Angular, and Vue all at once you gain:
@@ -8,3 +11,17 @@ By learning React, Angular, and Vue all at once you gain:
 - Superpowers to learn new(er) tools faster
 
 Don't want to learn all three? **That's okay.** You can easily select a single framework and use this book to learn it front-to-back.
+
+</div>
+
+<div class="hide-for-mobile hide-on-dark">
+<img src="./hiker_with_bag.png" height="100%" alt="" />
+</div>
+
+
+<div class="hide-for-mobile show-on-dark">
+<img src="./hiker_with_bag_dark.png" height="100%" alt="" />
+</div>
+
+
+</div>

src/components/layout/layout.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import layoutStyles from "./layout.module.scss";
 import BackIcon from "assets/icons/back.svg";
 import { DarkLightButton } from "../dark-light-button";
-import { ThemeProvider } from "constants/theme-context";
+import { ThemeProvider, ThemeClassDiv } from "constants/theme-context";
 import { useRouter } from "next/router";
 import { AnalyticsLink } from "components/analytics-link";
 import DiscordIcon from "assets/icons/discord.svg";
@@ -22,50 +22,52 @@ export const Layout: React.FC<React.PropsWithChildren<unknown>> = ({
 
   return (
     <ThemeProvider>
-      <div className={layoutStyles.horizCenter}>
+      <ThemeClassDiv>
-        <header
+        <div className={layoutStyles.horizCenter}>
-          className={layoutStyles.header}
+          <header
-          aria-label={"Toolbar for primary action buttons"}
+            className={layoutStyles.header}
-        >
+            aria-label={"Toolbar for primary action buttons"}
-          <div className={layoutStyles.headerInsideContainer}>
+          >
-            {!isBase ? (
+            <div className={layoutStyles.headerInsideContainer}>
-              <button
+              {!isBase ? (
-                className={`${layoutStyles.backBtn} baseBtn`}
+                <button
-                aria-label="Go back"
+                  className={`${layoutStyles.backBtn} baseBtn`}
-                onClick={() => {
+                  aria-label="Go back"
-                  back("/");
+                  onClick={() => {
-                }}
+                    back("/");
-              >
+                  }}
-                <BackIcon />
+                >
-              </button>
+                  <BackIcon />
-            ) : (
+                </button>
-              <div />
+              ) : (
-            )}
+                <div />
-            <div className={layoutStyles.iconList}>
+              )}
-              <AnalyticsLink
+              <div className={layoutStyles.iconList}>
-                category={"outbound"}
+                <AnalyticsLink
-                href="https://discord.gg/FMcvc6T"
+                  category={"outbound"}
-                className={"baseBtn"}
+                  href="https://discord.gg/FMcvc6T"
-                aria-label={"Join the Discord"}
+                  className={"baseBtn"}
-              >
+                  aria-label={"Join the Discord"}
-                <DiscordIcon />
+                >
-              </AnalyticsLink>
+                  <DiscordIcon />
-              <DarkLightButton />
+                </AnalyticsLink>
+                <DarkLightButton />
+              </div>
             </div>
+          </header>
+          <div
+            className={
+              isCollection
+                ? ""
+                : !isBlogPost
+                ? "listViewContent"
+                : "postViewContent"
+            }
+          >
+            {children}
           </div>
-        </header>
-        <div
-          className={
-            isCollection
-              ? ""
-              : !isBlogPost
-              ? "listViewContent"
-              : "postViewContent"
-          }
-        >
-          {children}
         </div>
-      </div>
+      </ThemeClassDiv>
     </ThemeProvider>
   );
 };

src/constants/theme-context/theme-context.tsx

@@ -17,6 +17,14 @@ export const ThemeContext = React.createContext<ThemeContextType>({
   setColorMode: () => {},
 });
 
+export const ThemeClassDiv: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
+  const { colorMode } = React.useContext(ThemeContext);
+
+  return <div className={colorMode || "light"}>{children}</div>;
+};
+
 export const ThemeProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {

src/global.scss

@@ -427,3 +427,17 @@ kbd {
   padding: 2px 4px;
   white-space: nowrap;
 }
+
+.hide-for-mobile {
+  @include until($endSmallScreenSize) {
+    display: none;
+  }
+}
+
+.dark .hide-on-dark {
+  display: none;
+}
+
+.light .show-on-dark {
+  display: none;
+}