From 7bdfc7cef884d01c7989e8b649f49cbde17502dc Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sat, 28 Oct 2023 11:55:12 +0200
Subject: [PATCH 1/9] feat: :sparkles: Added a theme selector in the header

- Updated `tailwind.config.cjs` to add the `darkMode:"class"` property
- Added a script to handle the default theme value in the `DocsPage`
- Added two icons (Moon and Sun) from `heroicons`
- Implemented the `ThemeToggle` component inside the Header
---
 src/components/Header.astro           | 62 ++++++++++++++-------------
 src/components/react/icons/moon.tsx   | 18 ++++++++
 src/components/react/icons/sun.tsx    | 18 ++++++++
 src/components/react/theme-toggle.tsx | 38 ++++++++++++++++
 src/layouts/DocsPage.astro            | 22 ++++++++++
 tailwind.config.cjs                   |  1 +
 6 files changed, 129 insertions(+), 30 deletions(-)
 create mode 100644 src/components/react/icons/moon.tsx
 create mode 100644 src/components/react/icons/sun.tsx
 create mode 100644 src/components/react/theme-toggle.tsx

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2c49b7a5..ecf8178c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,21 +1,26 @@
 ---
-import NavLink from './NavLink.astro';
-import { Container } from './react/container';
-import mswLogo from '../images/msw.svg'
-import Search from './Search.astro';
-import { MobileMenu } from './react/mobileMenu';
-import { SponsorLink } from './react/sponsorLink';
+import NavLink from "./NavLink.astro";
+import { Container } from "./react/container";
+import mswLogo from "../images/msw.svg";
+import Search from "./Search.astro";
+import { MobileMenu } from "./react/mobileMenu";
+import { SponsorLink } from "./react/sponsorLink";
+import { ThemeToggle } from "./react/theme-toggle";
 
 type Props = {
-  isFluid?: boolean
-}
+  isFluid?: boolean;
+};
 
-const { isFluid } = Astro.props
+const { isFluid } = Astro.props;
 ---
 
-<header class="header sticky top-0 z-10 text-sm h-[60px] font-semibold bg-neutral-900 border-b h-15 border-neutral-800">
+<header
+  class="header sticky top-0 z-10 text-sm h-[60px] font-semibold bg-neutral-900 border-b h-15 border-neutral-800"
+>
   <Container isFluid={isFluid} className="h-full">
-    <div class="grid items-center h-full xl:grid-cols-12 gap-6 md:gap-16 grid-cols-[auto_1fr_auto]">
+    <div
+      class="grid items-center h-full xl:grid-cols-12 gap-6 md:gap-16 grid-cols-[auto_1fr_auto]"
+    >
       <div class="xl:col-span-2 flex">
         <a
           href="/"
@@ -25,47 +30,44 @@ const { isFluid } = Astro.props
           <img src={mswLogo.src} class="w-9 h-9" />
         </a>
       </div>
-      <div class:list={[
-        'xl:col-span-3 pl-3 xl:p-0',
-        {'xl:col-start-4': isFluid }
-      ]}>
+      <div
+        class:list={[
+          "xl:col-span-3 pl-3 xl:p-0",
+          { "xl:col-start-4": isFluid },
+        ]}
+      >
         <Search />
       </div>
       <nav
         aria-label="Main navigation"
         class:list={[
-          '-mb-px text-neutral-400 justify-self-end',
-          { 'xl:col-span-7': !isFluid },
-          { 'xl:col-span-6': isFluid },
+          "-mb-px text-neutral-400 justify-self-end",
+          { "xl:col-span-7": !isFluid },
+          { "xl:col-span-6": isFluid },
         ]}
       >
         <ul class="flex items-center gap-4 list-none">
           <li class="hidden md:block">
-            <NavLink href="/docs">
-              Docs
-            </NavLink>
+            <NavLink href="/docs">Docs</NavLink>
           </li>
           <li class="hidden lg:block">
-            <NavLink href="/blog">
-              Blog
-            </NavLink>
+            <NavLink href="/blog">Blog</NavLink>
           </li>
           <li>
             <SponsorLink />
           </li>
+          <li>
+            <ThemeToggle client:only="react" />
+          </li>
           <li class="flex w-[38px] lg:hidden items-center -mr-2">
             <MobileMenu client:only="react">
               <nav id="mobile-menu">
                 <ul>
                   <li>
-                    <NavLink href="/docs">
-                      Documentation
-                    </NavLink>
+                    <NavLink href="/docs">Documentation</NavLink>
                   </li>
                   <li>
-                    <NavLink href="/blog">
-                      Blog
-                    </NavLink>
+                    <NavLink href="/blog">Blog</NavLink>
                   </li>
                 </ul>
               </nav>
diff --git a/src/components/react/icons/moon.tsx b/src/components/react/icons/moon.tsx
new file mode 100644
index 00000000..2e4adf9d
--- /dev/null
+++ b/src/components/react/icons/moon.tsx
@@ -0,0 +1,18 @@
+export function MoonIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/react/icons/sun.tsx b/src/components/react/icons/sun.tsx
new file mode 100644
index 00000000..641433ce
--- /dev/null
+++ b/src/components/react/icons/sun.tsx
@@ -0,0 +1,18 @@
+export function SunIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      version="1.1"
+      fill="currentColor"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/react/theme-toggle.tsx b/src/components/react/theme-toggle.tsx
new file mode 100644
index 00000000..3670550b
--- /dev/null
+++ b/src/components/react/theme-toggle.tsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+import { MoonIcon } from "./icons/moon";
+import { SunIcon } from "./icons/sun";
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState(() => {
+    const localTheme = localStorage.getItem("theme");
+    return localTheme ? localTheme : "light";
+  });
+
+  const handleClick = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  useEffect(() => {
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="  px-3 inline-flex py-1 h-[36px] w-[36px] justify-center items-center space-x-1 border rounded-md border-orange text-orange hover:bg-orange hover:text-black dark:bg-orange dark:text-black"
+    >
+      <span>
+        {theme === "light" ? (
+          <MoonIcon className="w-5 h-5" />
+        ) : (
+          <SunIcon className="w-5 h-5" />
+        )}
+      </span>
+    </button>
+  );
+}
diff --git a/src/layouts/DocsPage.astro b/src/layouts/DocsPage.astro
index fffe8d1a..0a9ce3a4 100644
--- a/src/layouts/DocsPage.astro
+++ b/src/layouts/DocsPage.astro
@@ -177,6 +177,28 @@ const shouldDisplayAds = import.meta.env.ADS
   </body>
 </html>
 
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme");
+    }
+    // If the user hasn't explicitly chosen light or dark, we use the prefers-color-scheme media query
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  })();
+
+  if (theme === "light") {
+    document.documentElement.classList.remove("dark");
+  } else {
+    document.documentElement.classList.add("dark");
+  }
+  
+  window.localStorage.setItem("theme", theme);
+</script>
+
+
 <script is:inline>
 	{
     const NAV_TREE_SCROLL_KEY = 'nav-tree-scroll'
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3d962ef3..b2baabb5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,6 +5,7 @@ const COLOR_ORANGE = '#FF6A33'
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  darkMode: "class",
   theme: {
     fontFamily: {
       sans: [

From badbc4a455d26a7d1007de4da8e80c8539bb0ed5 Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sat, 28 Oct 2023 13:00:27 +0200
Subject: [PATCH 2/9] revert: :fire: Removed moon and sun icons

- Import directly from the npm package
---
 src/components/react/icons/moon.tsx   | 18 ------------------
 src/components/react/icons/sun.tsx    | 18 ------------------
 src/components/react/theme-toggle.tsx |  4 ++--
 3 files changed, 2 insertions(+), 38 deletions(-)
 delete mode 100644 src/components/react/icons/moon.tsx
 delete mode 100644 src/components/react/icons/sun.tsx

diff --git a/src/components/react/icons/moon.tsx b/src/components/react/icons/moon.tsx
deleted file mode 100644
index 2e4adf9d..00000000
--- a/src/components/react/icons/moon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export function MoonIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
-      />
-    </svg>
-  );
-}
diff --git a/src/components/react/icons/sun.tsx b/src/components/react/icons/sun.tsx
deleted file mode 100644
index 641433ce..00000000
--- a/src/components/react/icons/sun.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export function SunIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      version="1.1"
-      fill="currentColor"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
-      />
-    </svg>
-  );
-}
diff --git a/src/components/react/theme-toggle.tsx b/src/components/react/theme-toggle.tsx
index 3670550b..64dc4397 100644
--- a/src/components/react/theme-toggle.tsx
+++ b/src/components/react/theme-toggle.tsx
@@ -1,6 +1,6 @@
+import { SunIcon } from "@heroicons/react/24/outline";
+import { MoonIcon } from "@heroicons/react/24/solid";
 import { useState, useEffect } from "react";
-import { MoonIcon } from "./icons/moon";
-import { SunIcon } from "./icons/sun";
 
 export function ThemeToggle() {
   const [theme, setTheme] = useState(() => {

From d23585d512871fdf943a9a6a36791ce8ee451226 Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sat, 28 Oct 2023 15:52:41 +0200
Subject: [PATCH 3/9] feat: :sparkles: WIP | Added light theme on `DocsPage`
 and its components

- Added light and dark versions of styles on a lot the main docs page still need to work on the reminding components
---
 src/components/Header.astro                   |   2 +-
 src/components/PageBanner.astro               |   2 +-
 src/components/Search.astro                   |   2 +-
 src/components/Search.css                     |   4 +-
 src/components/docs/DocsMenuLink.astro        |   6 +-
 src/components/docs/DocsNavTree.astro         |   2 +-
 src/components/docs/DocsRootSection.astro     |   2 +-
 src/components/docs/DocsTableOfContents.astro |   2 +-
 src/components/react/docsMobileNav.tsx        |   4 +-
 src/components/react/docsSidebarLinks.tsx     |  18 +-
 src/components/react/eggheadCourseBanner.tsx  |  16 +-
 src/components/react/feedbackWidget.tsx       |  74 +++---
 src/components/react/footer.tsx               |  68 +++---
 src/components/react/icons/youtube.tsx        |   6 +-
 src/components/react/pageCard.tsx             |  26 ++-
 src/components/react/theme-toggle.tsx         |   1 +
 src/layouts/DocsPage.astro                    | 211 ++++++++++--------
 src/styles/global.css                         |  64 ++++--
 18 files changed, 292 insertions(+), 218 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index ecf8178c..7b6552eb 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -15,7 +15,7 @@ const { isFluid } = Astro.props;
 ---
 
 <header
-  class="header sticky top-0 z-10 text-sm h-[60px] font-semibold bg-neutral-900 border-b h-15 border-neutral-800"
+  class="header sticky top-0 z-10 text-sm h-[60px] font-semibold bg-neutral-50 dark:bg-neutral-900 border-b h-15 border-neutral-200 dark:border-neutral-800"
 >
   <Container isFluid={isFluid} className="h-full">
     <div
diff --git a/src/components/PageBanner.astro b/src/components/PageBanner.astro
index a65583e4..9849fdc9 100644
--- a/src/components/PageBanner.astro
+++ b/src/components/PageBanner.astro
@@ -2,7 +2,7 @@
 import { Container } from "./react/container";
 ---
 
-<aside class="py-1.5 border-b border-neutral-700 bg-neutral-950 text-neutral-200 text-sm text-center font-medium">
+<aside class="py-1.5 border-b bg-white border-neutral-300 text-neutral-800 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-200 text-sm text-center font-medium">
   <Container isFluid={true}>
     <slot />
   </Container>
diff --git a/src/components/Search.astro b/src/components/Search.astro
index 70e58914..7d1fbce8 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -7,7 +7,7 @@ import { DocSearch } from './react/docSearch'
 const { ALGOLIA_APP_ID, PUBLIC_ALGOLIA_SEARCH_API_KEY } = import.meta.env
 ---
 
-<button id="docsearch-search-button" class="DocSearch DocSearch-Button flex items-center gap-1.5 w-full px-2.5 py-1.5 font-medium border border-neutral-700 rounded-md text-neutral-400 hover:border-neutral-600 hover:bg-neutral-800" tabindex={1}>
+<button id="docsearch-search-button" class="DocSearch DocSearch-Button flex items-center gap-1.5 w-full px-2.5 py-1.5 font-medium border rounded-md" tabindex={1}>
   <div class="DocSearch-Button-Container">
     <SearchIcon className='mr-1.5 w-[18px] text-neutral-500' aria-label="Search" />
     Search
diff --git a/src/components/Search.css b/src/components/Search.css
index d627d17d..0ad6674e 100644
--- a/src/components/Search.css
+++ b/src/components/Search.css
@@ -1,12 +1,12 @@
 .DocSearch-Button {
-  @apply m-0 border-neutral-700 rounded-md bg-transparent text-neutral-400;
+  @apply m-0  rounded-md bg-transparent dark:text-neutral-400 dark:border-neutral-700 text-neutral-500 border-neutral-400;
   border-width: 1px !important;
   border-style: solid;
 }
 
 .DocSearch-Button:hover,
 .DocSearch-Button:focus {
-  @apply !bg-neutral-800 !border-neutral-700;
+  @apply dark:!bg-neutral-800 dark:!border-neutral-700 dark:!text-white bg-white text-black;
   box-shadow: none;
 }
 
diff --git a/src/components/docs/DocsMenuLink.astro b/src/components/docs/DocsMenuLink.astro
index a2024d66..f4e2fbc1 100644
--- a/src/components/docs/DocsMenuLink.astro
+++ b/src/components/docs/DocsMenuLink.astro
@@ -14,10 +14,10 @@ const isActive = isPartiallyActiveUrl(props.href, pathname, { standalone })
 
 <a {...props} class:list={[
   props.class,
-  'inline-block py-1.5 leading-5 hover:text-white',
-  { 'text-neutral-400': !isActive },
+  'inline-block py-1.5 leading-5 hover:text-black dark:hover:text-white',
+  { 'text-neutral-500 dark:text-neutral-400': !isActive },
   { 'docs-link-active': isActive },
-  { 'text-white font-bold': isActive }
+  { 'text-black dark:text-white font-bold': isActive }
 ]}
   aria-current={isActive}
 >
diff --git a/src/components/docs/DocsNavTree.astro b/src/components/docs/DocsNavTree.astro
index 7ba8dc48..08225ef2 100644
--- a/src/components/docs/DocsNavTree.astro
+++ b/src/components/docs/DocsNavTree.astro
@@ -14,7 +14,7 @@ const { items, itemKind, className } = Astro.props
 ---
 
 <ul class:list={[
-  { 'pl-3 ml-1 border-l border-neutral-700': itemKind === 'group' },
+  { 'pl-3 ml-1 border-l border-neutral-300 dark:border-neutral-700': itemKind === 'group' },
   className,
   'text-sm font-medium'
 ]}>
diff --git a/src/components/docs/DocsRootSection.astro b/src/components/docs/DocsRootSection.astro
index 008ad6aa..1fb240c7 100644
--- a/src/components/docs/DocsRootSection.astro
+++ b/src/components/docs/DocsRootSection.astro
@@ -37,7 +37,7 @@ const rootSectionIcons: Record<
 const Icon = rootSectionIcons[title] || MenuIcon
 ---
 
-<span class="block pt-10 mt-10 mb-3 text-sm font-bold tracking-widest uppercase border-t border-neutral-800">
+<span class="block pt-10 mt-10 mb-3 text-sm font-bold tracking-widest uppercase border-t border-neutral-200 dark:border-neutral-800 text-black dark:text-white">
   <span class="inline-flex items-center justify-center mr-2 w-5 h-5 rounded-sm align-top bg-orange bg-opacity-10">
     <Icon className="w-4 text-orange" />
   </span>
diff --git a/src/components/docs/DocsTableOfContents.astro b/src/components/docs/DocsTableOfContents.astro
index d802b78f..8787d50e 100644
--- a/src/components/docs/DocsTableOfContents.astro
+++ b/src/components/docs/DocsTableOfContents.astro
@@ -12,7 +12,7 @@ const { headings, isNested } = Astro.props
 <ul class:list={[{ 'ml-3': isNested }]}>
   {headings.map((heading) => (
     <li>
-      <a href={`#${heading.slug}`} class="inline-block text-neutral-400 py-1.5 leading-5 hover:text-white">{heading.text}</a>
+      <a href={`#${heading.slug}`} class="inline-block text-neutral-500 dark:text-neutral-400 py-1.5 leading-5 hover:text-black dark:hover:text-white">{heading.text}</a>
       {heading.children ? (
         <Astro.self headings={heading.children} isNested={true} />
       ) : null}
diff --git a/src/components/react/docsMobileNav.tsx b/src/components/react/docsMobileNav.tsx
index 2dc2391c..6be102d4 100644
--- a/src/components/react/docsMobileNav.tsx
+++ b/src/components/react/docsMobileNav.tsx
@@ -42,7 +42,7 @@ export function DocsMovileNav({ children }: { children: ReactNode }) {
   return (
     <div>
       <button
-        className="fixed z-[6] flex items-center justify-center w-16 h-16 text-black bg-white border-4 border-black rounded-full bottom-5 right-5 xl:hidden"
+        className="fixed z-[6] flex items-center justify-center w-16 h-16 b text-black bg-white border-4 border-black rounded-full bottom-5 right-5 xl:hidden"
         tabIndex={2}
         onClick={handleMenuButtonClick}
         aria-label="Docs menu"
@@ -114,7 +114,7 @@ export const MobileMenuContainer = forwardRef<
       ref={ref}
       {...props}
       className={cls(
-        'fixed block top-[60px] bg-neutral-950 inset-0 max-h-[100vh] z-[5]',
+        'fixed block top-[60px] bg-neutral-50 dark:bg-neutral-950 inset-0 max-h-[100vh] z-[5]',
         props.className,
       )}
       style={{ display: isOpen ? 'block' : 'none' }}
diff --git a/src/components/react/docsSidebarLinks.tsx b/src/components/react/docsSidebarLinks.tsx
index a64996af..1183dee1 100644
--- a/src/components/react/docsSidebarLinks.tsx
+++ b/src/components/react/docsSidebarLinks.tsx
@@ -1,19 +1,19 @@
-import { NewspaperIcon } from '@heroicons/react/24/solid'
-import { DiscordIcon } from './icons/discord'
-import { GitHubIcon } from './icons/github'
-import { DISCORD_URL } from '../../consts'
+import { NewspaperIcon } from "@heroicons/react/24/solid";
+import { DiscordIcon } from "./icons/discord";
+import { GitHubIcon } from "./icons/github";
+import { DISCORD_URL } from "../../consts";
 
 export function DocsSidebarLinks() {
   return (
     <section>
-      <h4 className="text-xs mb-2 font-bold tracking-widest text-white uppercase">
+      <h4 className="text-xs mb-2 font-bold tracking-widest text-black dark:text-white uppercase">
         Community
       </h4>
       <ul>
         <li>
           <a
             href="https://github.com/mswjs/msw"
-            className="py-1.5 inline-flex items-center gap-1 leading-5 text-neutral-400 hover:text-white"
+            className="py-1.5 inline-flex items-center gap-1 leading-5 text-neutral-500 dark:text-neutral-400  hover:text-black dark:hover:text-white"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -24,7 +24,7 @@ export function DocsSidebarLinks() {
         <li>
           <a
             href={DISCORD_URL}
-            className="py-1.5 inline-flex items-center gap-1 leading-5 text-neutral-400 hover:text-white"
+            className="py-1.5 inline-flex items-center gap-1 leading-5 text-neutral-500 dark:text-neutral-400  hover:text-black dark:hover:text-white"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -35,7 +35,7 @@ export function DocsSidebarLinks() {
         <li>
           <a
             href="/blog"
-            className="py-1.5 inline-flex items-center gap-1 leading-5 text-neutral-400 hover:text-white"
+            className="py-1.5 inline-flex items-center gap-1 leading-5 text-neutral-500 dark:text-neutral-400  hover:text-black dark:hover:text-white"
             target="_blank"
             ref="noopener noreferrer"
           >
@@ -45,5 +45,5 @@ export function DocsSidebarLinks() {
         </li>
       </ul>
     </section>
-  )
+  );
 }
diff --git a/src/components/react/eggheadCourseBanner.tsx b/src/components/react/eggheadCourseBanner.tsx
index cc4473d3..a11a02c7 100644
--- a/src/components/react/eggheadCourseBanner.tsx
+++ b/src/components/react/eggheadCourseBanner.tsx
@@ -1,12 +1,12 @@
-import { LinkExternal } from './linkExternal'
-import courseCover from '../../images/egghead-msw-course.png'
-import { EGGHEAD_COURSE_URL } from '../../consts'
+import { LinkExternal } from "./linkExternal";
+import courseCover from "../../images/egghead-msw-course.png";
+import { EGGHEAD_COURSE_URL } from "../../consts";
 
 export function EggheadCourseBanner() {
   return (
     <LinkExternal
       href={EGGHEAD_COURSE_URL}
-      className="relative group my-10 px-5 py-5 min-h-[125px] grid grid-cols-[150px_1fr] gap-8 items-center bg-neutral-800 bg-opacity-40 border border-neutral-800 rounded-lg no-underline hover:bg-opacity-70"
+      className="relative group my-10 px-5 py-5 min-h-[125px] grid grid-cols-[150px_1fr] gap-8 items-center bg-white border-neutral-200 dark:bg-neutral-800 bg-opacity-40 border dark:border-neutral-800 rounded-lg no-underline hover:bg-opacity-70"
     >
       <img
         src={courseCover.src}
@@ -14,11 +14,13 @@ export function EggheadCourseBanner() {
         className="absolute m-0 top-0 left-3 w-[170px] transition-transform duration-500 -translate-y-[25px] group-hover:-translate-y-[35px]"
       />
       <div className="col-start-2">
-        <h4 className="mt-0">Watch our video course</h4>
-        <p className="mb-0 text-neutral-400 leading-6">
+        <h4 className="mt-0 text-black dark:text-white">
+          Watch our video course
+        </h4>
+        <p className="mb-0 text-neutral-500 dark:text-neutral-400 leading-6">
           Learn to control the network with MSW in our new Egghead course.
         </p>
       </div>
     </LinkExternal>
-  )
+  );
 }
diff --git a/src/components/react/feedbackWidget.tsx b/src/components/react/feedbackWidget.tsx
index 1848550e..d3b13c6d 100644
--- a/src/components/react/feedbackWidget.tsx
+++ b/src/components/react/feedbackWidget.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useState } from 'react'
-import { cls } from '../../utils/cls'
+import { useEffect, useState } from "react";
+import { cls } from "../../utils/cls";
 
-type Feedback = 'great' | 'meh' | 'bad'
+type Feedback = "great" | "meh" | "bad";
 
 const newDiscussionUrl = new URL(
-  'discussions/new',
-  'https://github.com/mswjs/mswjs.io/'
-)
-newDiscussionUrl.searchParams.set('category', 'q-a')
-newDiscussionUrl.searchParams.set('labels', 'feedback')
+  "discussions/new",
+  "https://github.com/mswjs/mswjs.io/"
+);
+newDiscussionUrl.searchParams.set("category", "q-a");
+newDiscussionUrl.searchParams.set("labels", "feedback");
 
 export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
-  const [feedback, setFeedback] = useState<Feedback | null>(null)
+  const [feedback, setFeedback] = useState<Feedback | null>(null);
 
   useEffect(() => {
-    if (typeof location !== 'undefined') {
-      const pageUrl = new URL(location.pathname, location.origin)
+    if (typeof location !== "undefined") {
+      const pageUrl = new URL(location.pathname, location.origin);
 
-      newDiscussionUrl.searchParams.set('title', `Feedback: ${pageTitle}`)
+      newDiscussionUrl.searchParams.set("title", `Feedback: ${pageTitle}`);
       newDiscussionUrl.searchParams.set(
-        'body',
+        "body",
         `\
 <!-- Please do not delete this link, it helps us get to the issue faster -->
 - [Open page](${pageUrl.href})
@@ -29,20 +29,20 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
 <!-- Tell us what you were looking for, what you found, and what was missing -->
 
 `
-      )
+      );
     }
-  }, [])
+  }, []);
 
   const setFeedbackOrReset = (nextFeedback: Feedback) => {
     if (feedback !== null) {
-      return setFeedback(null)
+      return setFeedback(null);
     }
 
-    setFeedback(nextFeedback)
-  }
+    setFeedback(nextFeedback);
+  };
 
   return (
-    <aside className="mt-10 px-5 py-4 border border-neutral-700 bg-neutral-800 bg-opacity-40 rounded-md">
+    <aside className="mt-10 px-5 py-4 border-neutral-200 bg-white border dark:border-neutral-700 dark:bg-neutral-800 bg-opacity-40 rounded-md">
       <header className="flex flex-col md:flex-row items-center justify-between gap-4">
         <p className="text-center mb-0 font-bold">Was this helpful?</p>
         <ol className="flex items-center justify-center gap-5 text-2xl">
@@ -50,7 +50,7 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
             <FeedbackButton
               value="great"
               actualValue={feedback}
-              onClick={() => setFeedbackOrReset('great')}
+              onClick={() => setFeedbackOrReset("great")}
             >
               🤩
             </FeedbackButton>
@@ -59,7 +59,7 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
             <FeedbackButton
               value="meh"
               actualValue={feedback}
-              onClick={() => setFeedbackOrReset('meh')}
+              onClick={() => setFeedbackOrReset("meh")}
             >
               😐
             </FeedbackButton>
@@ -68,7 +68,7 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
             <FeedbackButton
               value="bad"
               actualValue={feedback}
-              onClick={() => setFeedbackOrReset('bad')}
+              onClick={() => setFeedbackOrReset("bad")}
             >
               😩
             </FeedbackButton>
@@ -76,8 +76,8 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
         </ol>
       </header>
       {feedback != null ? (
-        <div className="mt-5 mb-1 pt-5 border-t border-neutral-800 text-neutral-300 space-y-5">
-          {feedback === 'great' ? (
+        <div className="mt-5 mb-1 pt-5 border-t border-neutral-200 text-neutral-500 dark:border-neutral-800 dark:text-neutral-300 space-y-5">
+          {feedback === "great" ? (
             <>
               <p>
                 Glad to hear that! Our team and our contributors work hard to
@@ -85,9 +85,9 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
                 prove that open-source projects can have stellar documentation
                 without VC funding or a paid product behind it.
               </p>
-              <p className="p-4 text-white font-medium bg-neutral-800 rounded-sm">
+              <p className="p-4  font-medium bg-neutral-100 text-neutral-800 dark:bg-neutral-600 dark:text-white rounded-sm">
                 If this page answered your question or helped you solve an
-                issue, please consider{' '}
+                issue, please consider{" "}
                 <a
                   href="https://github.com/sponsors/mswjs"
                   target="_blank"
@@ -102,7 +102,7 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
             </>
           ) : null}
 
-          {feedback === 'meh' || feedback === 'bad' ? (
+          {feedback === "meh" || feedback === "bad" ? (
             <div className="md:flex gap-10 space-y-5 md:space-y-0">
               <p>
                 Looks like we could do better. Please, share your thoughts on
@@ -121,7 +121,7 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
         </div>
       ) : null}
     </aside>
-  )
+  );
 }
 
 function FeedbackButton({
@@ -130,23 +130,23 @@ function FeedbackButton({
   actualValue,
   onClick,
 }: {
-  children: React.ReactNode
-  value: Feedback
-  actualValue: Feedback | null
-  onClick: () => void
+  children: React.ReactNode;
+  value: Feedback;
+  actualValue: Feedback | null;
+  onClick: () => void;
 }) {
   return (
     <button
       className={cls(
-        'flex items-center justify-center w-12 h-12 p-3 rounded-sm',
-        !actualValue && 'hover:bg-neutral-700',
-        actualValue === value && 'bg-neutral-700',
-        !!actualValue && actualValue !== value && 'opacity-40 grayscale'
+        "flex items-center justify-center w-12 h-12 p-3 rounded-sm",
+        !actualValue && "hover:bg-neutral-200 dark:hover:bg-neutral-700",
+        actualValue === value && "bg-neutral-200 dark:bg-neutral-700",
+        !!actualValue && actualValue !== value && "opacity-40 grayscale"
       )}
       onClick={onClick}
       disabled={!!actualValue && actualValue !== value}
     >
       {children}
     </button>
-  )
+  );
 }
diff --git a/src/components/react/footer.tsx b/src/components/react/footer.tsx
index 86d1b60c..a040f679 100644
--- a/src/components/react/footer.tsx
+++ b/src/components/react/footer.tsx
@@ -1,42 +1,42 @@
-import { HeartIcon } from '@heroicons/react/24/solid'
-import { DiscordIcon } from './icons/discord'
-import { GitHubIcon } from './icons/github'
-import { TwitterIcon } from './icons/twitter'
-import { OpenCollectiveIcon } from './icons/opencollective'
-import { YouTubeIcon } from './icons/youtube'
-import { Container } from './container'
-import { Grid } from './grid'
-import { cls } from '../../utils/cls'
-import { DISCORD_URL } from '../../consts'
+import { HeartIcon } from "@heroicons/react/24/solid";
+import { DiscordIcon } from "./icons/discord";
+import { GitHubIcon } from "./icons/github";
+import { TwitterIcon } from "./icons/twitter";
+import { OpenCollectiveIcon } from "./icons/opencollective";
+import { YouTubeIcon } from "./icons/youtube";
+import { Container } from "./container";
+import { Grid } from "./grid";
+import { cls } from "../../utils/cls";
+import { DISCORD_URL } from "../../consts";
 
 export function Footer({ isCompact }: { isCompact?: boolean }): JSX.Element {
-  const currentYear = new Date().getFullYear()
+  const currentYear = new Date().getFullYear();
 
   return (
     <footer
       className={cls(
-        'footer',
-        'py-10 text-sm font-medium text-neutral-400',
-        !isCompact && 'border-t border-neutral-800',
+        "footer",
+        "py-10 text-sm font-medium text-neutral-500 dark:text-neutral-400",
+        !isCompact && "border-t border-neutral-200 dark:border-neutral-800"
       )}
     >
       <Container isFluid={isCompact}>
         {isCompact ? (
           <Grid>
-            <div className="pb-12 border-t col-span-full xl:col-span-10 xl:col-start-4 border-neutral-800" />
+            <div className="pb-12 border-t col-span-full xl:col-span-10 xl:col-start-4 border-neutral-200 dark:border-neutral-800" />
           </Grid>
         ) : null}
         <Grid className="sm:grid-cols-6 gap-y-16">
           <div
             className={cls(
-              isCompact ? 'xl:col-span-3 xl:col-start-4' : 'sm:col-span-6',
+              isCompact ? "xl:col-span-3 xl:col-start-4" : "sm:col-span-6"
             )}
           >
-            <p className="text-neutral-200 font-medium">
+            <p className="text-neutral-800 dark:text-neutral-200 font-medium">
               &copy; {currentYear} Mock Service Worker
             </p>
-            <p className="font-normal">
-              Created with <HeartIcon className="w-3.5 inline text-orange" /> by{' '}
+            <p className="font-normal text-neutral-500 dark:text-neutral-400">
+              Created with <HeartIcon className="w-3.5 inline text-orange" /> by{" "}
               <a href="https://twitter.com/kettanaito" target="_blank">
                 kettanaito
               </a>
@@ -45,11 +45,11 @@ export function Footer({ isCompact }: { isCompact?: boolean }): JSX.Element {
           </div>
 
           <div className="sm:col-span-2">
-            <h4 className="mb-8 font-bold tracking-widest uppercase text-md">
+            <h4 className="mb-8 font-bold tracking-widest uppercase text-md text-black dark:text-neutral-400">
               Library
             </h4>
             <nav>
-              <ul className="space-y-3 list-none text-white">
+              <ul className="space-y-3 list-none text-neutral-500 dark:text-white">
                 <li>
                   <a href="/">Home</a>
                 </li>
@@ -64,11 +64,11 @@ export function Footer({ isCompact }: { isCompact?: boolean }): JSX.Element {
           </div>
 
           <div className="sm:col-span-2">
-            <h4 className="mb-8 font-bold tracking-widest uppercase text-md">
+            <h4 className="mb-8 font-bold tracking-widest uppercase text-md text-black dark:text-neutral-400">
               Resources
             </h4>
             <nav>
-              <ul className="space-y-3 list-none text-white">
+              <ul className="space-y-3 list-none text-neutral-500 dark:text-white">
                 <li>
                   <a href="/docs/getting-started">Getting started</a>
                 </li>
@@ -83,11 +83,11 @@ export function Footer({ isCompact }: { isCompact?: boolean }): JSX.Element {
           </div>
 
           <div className="sm:col-span-2">
-            <h4 className="mb-8 font-bold tracking-widest uppercase text-md">
+            <h4 className="mb-8 font-bold tracking-widest uppercase text-md text-black dark:text-neutral-400">
               Community
             </h4>
             <nav>
-              <ul className="space-y-3 list-none text-white">
+              <ul className="space-y-3 list-none text-neutral-500 dark:text-white">
                 <li>
                   <a
                     href="https://github.com/mswjs/msw"
@@ -121,19 +121,19 @@ export function Footer({ isCompact }: { isCompact?: boolean }): JSX.Element {
         </Grid>
       </Container>
     </footer>
-  )
+  );
 }
 
 export function SocialLinksBlock(
-  props: React.HTMLAttributes<HTMLUListElement>,
+  props: React.HTMLAttributes<HTMLUListElement>
 ) {
   return (
-    <ul className={cls('flex items-center gap-1 mt-5 -ml-2', props.className)}>
+    <ul className={cls("flex items-center gap-1 mt-5 -ml-2", props.className)}>
       <li>
         <a
           href="https://github.com/mswjs"
           aria-label="GitHub organization"
-          className="flex p-2 hover:text-white"
+          className="flex p-2 text-neutral-500  dark:hover:text-white"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -144,7 +144,7 @@ export function SocialLinksBlock(
         <a
           href="https://twitter.com/ApiMocking"
           aria-label="Twitter account"
-          className="flex p-2 hover:text-white"
+          className="flex p-2 text-neutral-500  dark:hover:text-white"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -155,7 +155,7 @@ export function SocialLinksBlock(
         <a
           href="https://youtube.com/c/MockServiceWorker"
           aria-label="YouTube channel"
-          className="flex p-2 hover:text-white"
+          className="flex p-2 text-neutral-500  dark:hover:text-white"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -166,7 +166,7 @@ export function SocialLinksBlock(
         <a
           href={DISCORD_URL}
           arial-label="Discord server"
-          className="flex p-2 hover:text-white"
+          className="flex p-2 text-neutral-500  dark:hover:text-white"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -177,7 +177,7 @@ export function SocialLinksBlock(
         <a
           href="https://opencollective.com/mswjs"
           aria-label="Open Collective page"
-          className="flex p-2 hover:text-white"
+          className="flex p-2 text-neutral-500  dark:hover:text-white"
           rel="noopener noreferrer"
           target="_blank"
         >
@@ -185,5 +185,5 @@ export function SocialLinksBlock(
         </a>
       </li>
     </ul>
-  )
+  );
 }
diff --git a/src/components/react/icons/youtube.tsx b/src/components/react/icons/youtube.tsx
index a2146cae..9a3e5352 100644
--- a/src/components/react/icons/youtube.tsx
+++ b/src/components/react/icons/youtube.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from "react";
 
 export function YouTubeIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
@@ -7,7 +7,7 @@ export function YouTubeIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
         d="m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z"
         fill="currentColor"
       />
-      <path d="m105 55-40.8-23.4v46.8z" fill="black" />
+      <path d="m105 55-40.8-23.4v46.8z" className='dark:fill-black fill-white' />
     </svg>
-  )
+  );
 }
diff --git a/src/components/react/pageCard.tsx b/src/components/react/pageCard.tsx
index 0b6cb1d0..79ee7521 100644
--- a/src/components/react/pageCard.tsx
+++ b/src/components/react/pageCard.tsx
@@ -1,8 +1,8 @@
 interface PageCardProps {
-  url: string
-  title: string
-  description: string
-  icon: React.FC<any>
+  url: string;
+  title: string;
+  description: string;
+  icon: React.FC<any>;
 }
 
 export function PageCard({
@@ -11,31 +11,33 @@ export function PageCard({
   title,
   description,
 }: PageCardProps) {
-  const isExternal = !url.startsWith('/')
+  const isExternal = !url.startsWith("/");
   const extraProps = isExternal
     ? {
-        target: '_blank',
-        rel: 'noopener noreferrer',
+        target: "_blank",
+        rel: "noopener noreferrer",
       }
-    : {}
+    : {};
 
   return (
     <a
       {...extraProps}
       href={url}
-      className="block my-5 px-5 py-4 border border-neutral-800 rounded-lg shadow-sm text-white no-underline bg-opacity-40 bg-neutral-800 hover:bg-opacity-70"
+      className="block my-5 px-5 py-4 border bg-white border-neutral-200 dark:border-neutral-800 rounded-lg shadow-sm text-white no-underline bg-opacity-40 dark:bg-neutral-800 hover:bg-opacity-70"
     >
       <article className="flex items-start gap-5">
         <div className="bg-orange bg-opacity-10 rounded-md p-2">
           <Icon className="w-[24px] h-[24px] text-orange text-lg" />
         </div>
         <div>
-          <p className="mt-0 mb-1 text-base font-bold">{title}</p>
-          <p className="mb-0 mt-0 text-sm leading-6 text-neutral-400">
+          <p className="mt-0 mb-1 text-base font-bold text-black dark:text-white">
+            {title}
+          </p>
+          <p className="mb-0 mt-0 text-sm leading-6 text-neutral-500 dark:text-neutral-400">
             {description || url}
           </p>
         </div>
       </article>
     </a>
-  )
+  );
 }
diff --git a/src/components/react/theme-toggle.tsx b/src/components/react/theme-toggle.tsx
index 64dc4397..10e0a27d 100644
--- a/src/components/react/theme-toggle.tsx
+++ b/src/components/react/theme-toggle.tsx
@@ -18,6 +18,7 @@ export function ThemeToggle() {
     } else {
       document.documentElement.classList.remove("dark");
     }
+    document.documentElement.setAttribute("data-theme", theme);
     localStorage.setItem("theme", theme);
   }, [theme]);
 
diff --git a/src/layouts/DocsPage.astro b/src/layouts/DocsPage.astro
index 0a9ce3a4..9b3b6fe0 100644
--- a/src/layouts/DocsPage.astro
+++ b/src/layouts/DocsPage.astro
@@ -1,90 +1,94 @@
 ---
 import { type CollectionEntry } from "astro:content";
-import BaseHead from '../components/BaseHead.astro'
-import Header from '../components/Header.astro'
-import { Footer } from '../components/react/footer'
-import { Grid } from '../components/react/grid'
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import { Footer } from "../components/react/footer";
+import { Grid } from "../components/react/grid";
 import { Container } from "../components/react/container";
-import FormattedDate from '../components/FormattedDate.astro';
-import DocsNavTree from '../components/docs/DocsNavTree.astro'
-import TableOfContents from '../components/docs/DocsTableOfContents.astro'
-import { type DocsItem, type DocsFrontmatter, createNavTreeBuilder } from '../utils/buildNavTree'
-import type { MarkdownHeading } from 'astro';
-import { buildHeadings } from '../utils/buildHeadings';
+import FormattedDate from "../components/FormattedDate.astro";
+import DocsNavTree from "../components/docs/DocsNavTree.astro";
+import TableOfContents from "../components/docs/DocsTableOfContents.astro";
+import {
+  type DocsItem,
+  type DocsFrontmatter,
+  createNavTreeBuilder,
+} from "../utils/buildNavTree";
+import type { MarkdownHeading } from "astro";
+import { buildHeadings } from "../utils/buildHeadings";
 import { DocsSidebarLinks } from "../components/react/docsSidebarLinks";
 import { FeedbackWidget } from "../components/react/feedbackWidget";
-import Ads from '../components/Ads.astro'
+import Ads from "../components/Ads.astro";
 import { DocsMovileNav } from "../components/react/docsMobileNav";
 import { SITE_TITLE } from "../consts";
 import PageBanner from "../components/PageBanner.astro";
 
-type Props = CollectionEntry<'docs'>['data'] & {
-  lastModifiedAt: Date
-  editUrl: URL
-  headings: Array<MarkdownHeading>
-  isFluid?: boolean
-  displayV1DocsBanner?: boolean
-}
+type Props = CollectionEntry<"docs">["data"] & {
+  lastModifiedAt: Date;
+  editUrl: URL;
+  headings: Array<MarkdownHeading>;
+  isFluid?: boolean;
+  displayV1DocsBanner?: boolean;
+};
 
-const allPages = await Astro.glob<DocsFrontmatter>('../content/docs/**/*.mdx')
-const builder = createNavTreeBuilder(allPages)
+const allPages = await Astro.glob<DocsFrontmatter>("../content/docs/**/*.mdx");
+const builder = createNavTreeBuilder(allPages);
 
 const navTree: Array<DocsItem> = [
-  ...builder.get('*.mdx'),
+  ...builder.get("*.mdx"),
   {
-    kind: 'group',
-    title: 'Basics',
-    children: builder.get('basics/**/*.mdx')
+    kind: "group",
+    title: "Basics",
+    children: builder.get("basics/**/*.mdx"),
   },
   {
-    kind: 'group',
-    title: 'Concepts',
-    children: builder.get('concepts/**/*.mdx')
+    kind: "group",
+    title: "Concepts",
+    children: builder.get("concepts/**/*.mdx"),
   },
   {
-    kind: 'group',
-    title: 'Network behavior',
-    children: builder.get('network-behavior/**/*.mdx')
+    kind: "group",
+    title: "Network behavior",
+    children: builder.get("network-behavior/**/*.mdx"),
   },
   {
-    kind: 'group',
-    title: 'Integrations',
-    children: builder.get('integrations/**/*.mdx')
+    kind: "group",
+    title: "Integrations",
+    children: builder.get("integrations/**/*.mdx"),
   },
   {
-    kind: 'group',
-    title: 'API',
-    children: builder.get('api/**/*.mdx')
+    kind: "group",
+    title: "API",
+    children: builder.get("api/**/*.mdx"),
   },
   {
-    kind: 'group',
-    title: 'CLI',
-    children: builder.get('cli/**/*.mdx')
+    kind: "group",
+    title: "CLI",
+    children: builder.get("cli/**/*.mdx"),
   },
   {
-    kind: 'group',
+    kind: "group",
     title: "Best practices",
-    children: builder.get('best-practices/**/*.mdx')
+    children: builder.get("best-practices/**/*.mdx"),
   },
   {
-    kind: 'group',
-    title: 'Recipes',
-    children: builder.get('recipes/**/*.mdx')
-  }
-]
+    kind: "group",
+    title: "Recipes",
+    children: builder.get("recipes/**/*.mdx"),
+  },
+];
 
-const { props: page } = Astro
+const { props: page } = Astro;
 
 const nestedHeadings = buildHeadings(page.headings || [], {
-  maxDepth: page.tableOfContents?.maxDepth
-})
-const lastModifiedAt = new Date(page.lastModifiedAt)
+  maxDepth: page.tableOfContents?.maxDepth,
+});
+const lastModifiedAt = new Date(page.lastModifiedAt);
 
-const shouldDisplayAds = import.meta.env.ADS
+const shouldDisplayAds = import.meta.env.ADS;
 ---
 
 <!doctype html>
-<html lang="en" data-theme="dark" transition:animate="none">
+<html lang="en" transition:animate="none">
   <head>
     <BaseHead
       title={page.title}
@@ -94,11 +98,25 @@ const shouldDisplayAds = import.meta.env.ADS
     />
   </head>
   <body>
-    {page.displayV1DocsBanner ? (
-      <PageBanner>
-        <p>You are viewing the docs for <strong>MSW 2.0</strong>. To access the 1.x docs <a href="https://v1.mswjs.io/" class="text-orange hover:underline" target="_blank" rel="noopener noreferrer">click here</a>.</p>
-      </PageBanner>
-    ) : null}
+    {
+      page.displayV1DocsBanner ? (
+        <PageBanner>
+          <p>
+            You are viewing the docs for <strong>MSW 2.0</strong>. To access the
+            1.x docs{" "}
+            <a
+              href="https://v1.mswjs.io/"
+              class="text-orange hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              click here
+            </a>
+            .
+          </p>
+        </PageBanner>
+      ) : null
+    }
     <Header isFluid={page.isFluid} />
     <main>
       <Container isFluid={page.isFluid}>
@@ -112,8 +130,13 @@ const shouldDisplayAds = import.meta.env.ADS
         <article>
           <Grid>
             <!-- Nav tree -->
-            <section class="hidden xl:block xl:w-1/5 xl:col-span-3 xl:fixed xl:top-[60px]">
-              <nav id="docs-nav-tree" class="py-10 pr-10 overflow-y-auto h-[calc(100vh_-_60px)]">
+            <section
+              class="hidden xl:block xl:w-1/5 xl:col-span-3 xl:fixed xl:top-[60px]"
+            >
+              <nav
+                id="docs-nav-tree"
+                class="py-10 pr-10 overflow-y-auto h-[calc(100vh_-_60px)]"
+              >
                 <DocsNavTree items={navTree} />
               </nav>
             </section>
@@ -122,30 +145,37 @@ const shouldDisplayAds = import.meta.env.ADS
             <div class="mdx py-10 sm:col-span-9 xl:col-start-4 xl:col-span-7">
               <header class="mb-8">
                 <h1 class="mb-3">{page.title}</h1>
-                {page.description ? (
-                  <p class="mb-6 text-lg text-neutral-400 font-medium">{page.description}</p>
-                ) : null}
-                {shouldDisplayAds ? (
-                  <Ads />
-                ) : null}
+                {
+                  page.description ? (
+                    <p class="mb-6 text-lg text-neutral-500 dark:text-neutral-400 font-medium">
+                      {page.description}
+                    </p>
+                  ) : null
+                }
+                {shouldDisplayAds ? <Ads /> : null}
               </header>
-              <div class="prose max-w-none">
+              <div
+                class="prose max-w-none dark:text-neutral-400 text-neutral-600"
+              >
                 <slot />
               </div>
-              <footer class="justify-between pt-5 mt-10 text-sm font-medium border-t text-neutral-400 border-neutral-800 md:flex">
+              <footer
+                class="justify-between pt-5 mt-10 text-sm font-medium border-t text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-800 md:flex"
+              >
                 <p>
-                  {lastModifiedAt ? (
-                    <span>
-                      Last updated on{' '}
-                        <FormattedDate date={lastModifiedAt} />
-                    </span>
-                  ) : null}
+                  {
+                    lastModifiedAt ? (
+                      <span>
+                        Last updated on <FormattedDate date={lastModifiedAt} />
+                      </span>
+                    ) : null
+                  }
                 </p>
                 <a
                   href={page.editUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="text-white hover:underline"
+                  class="text-black dark:text-white hover:underline"
                 >
                   Edit this page on GitHub
                 </a>
@@ -154,16 +184,20 @@ const shouldDisplayAds = import.meta.env.ADS
             </div>
 
             <!-- Table of contents -->
-            <aside class="hidden py-10 pl-5 text-sm font-medium text-neutral-400 lg:block sm:col-span-3 xl:col-span-2">
+            <aside
+              class="hidden py-10 pl-5 text-sm font-medium text-neutral-400 lg:block sm:col-span-3 xl:col-span-2"
+            >
               <div class="sticky top-28 space-y-8">
-                {nestedHeadings.length > 0 ? (
-                  <section>
-                    <h4 class="text-xs mb-2 font-bold tracking-widest text-white uppercase">
-                      Contents
-                    </h4>
-                    <TableOfContents headings={nestedHeadings}  />
-                  </section>
-                ) : null}
+                {
+                  nestedHeadings.length > 0 ? (
+                    <section>
+                      <h4 class="text-xs mb-2 font-bold tracking-widest text-black dark:text-white uppercase">
+                        Contents
+                      </h4>
+                      <TableOfContents headings={nestedHeadings} />
+                    </section>
+                  ) : null
+                }
 
                 <DocsSidebarLinks />
               </div>
@@ -176,10 +210,13 @@ const shouldDisplayAds = import.meta.env.ADS
     <Footer isCompact={true} />
   </body>
 </html>
-
+  
 <script is:inline>
   const theme = (() => {
-    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+    if (
+      typeof localStorage !== "undefined" &&
+      localStorage.getItem("theme")
+    ) {
       return localStorage.getItem("theme");
     }
     // If the user hasn't explicitly chosen light or dark, we use the prefers-color-scheme media query
@@ -194,11 +231,11 @@ const shouldDisplayAds = import.meta.env.ADS
   } else {
     document.documentElement.classList.add("dark");
   }
-  
+
+  document.documentElement.setAttribute("data-theme", theme);
   window.localStorage.setItem("theme", theme);
 </script>
 
-
 <script is:inline>
 	{
     const NAV_TREE_SCROLL_KEY = 'nav-tree-scroll'
diff --git a/src/styles/global.css b/src/styles/global.css
index 62525e0f..54ff502c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
+::-webkit-scrollbar {
+  @apply w-3;
+}
+
+/* Track - Light mode */
+::-webkit-scrollbar-track {
+  @apply bg-neutral-200;
+}
+
+/* Track - Dark mode */
+.dark ::-webkit-scrollbar-track {
+  @apply bg-neutral-800;
+}
+
+/* Thumb - Light mode */
+
+::-webkit-scrollbar-thumb {
+  @apply bg-neutral-400 hover:bg-neutral-600 rounded-xl;
+}
+
+/* Thumb - Dark mode */
+.dark ::-webkit-scrollbar-thumb {
+  @apply bg-neutral-600 hover:bg-neutral-500;
+}
+
 :root {
   --orange: #ff6a33;
 }
@@ -13,18 +38,18 @@ html {
   -moz-osx-font-smoothing: grayscale;
 
   @apply scroll-pt-20;
-  color-scheme: dark;
+  color-scheme: attr(data-theme);
 }
 
 body {
-  @apply bg-neutral-900 text-white;
+  @apply bg-neutral-50 text-black dark:bg-neutral-900 dark:text-white;
 
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
 a {
-  @apply hover:text-white;
+  @apply hover:text-opacity-75 dark:hover:text-white;
 }
 
 .header {
@@ -57,7 +82,7 @@ h3:not(:first-child) {
 }
 
 hr {
-  @apply border-neutral-800;
+  @apply border-neutral-200 dark:border-neutral-800;
 }
 
 blockquote em {
@@ -68,7 +93,7 @@ blockquote em {
   @apply border-b border-dotted border-orange;
 }
 
-[role='alert'] p {
+[role="alert"] p {
   @apply my-0;
 }
 
@@ -85,8 +110,8 @@ blockquote em {
   @apply hover:bg-opacity-70;
 }
 .button-secondary {
-  @apply border border-neutral-600 text-white;
-  @apply hover:border-neutral-500 hover:bg-white hover:bg-opacity-5;
+  @apply border border-neutral-200 text-neutral-800 dark:border-neutral-600 dark:text-white;
+  @apply dark:hover:border-neutral-500 dark:hover:bg-white dark:hover:text-black hover:bg-opacity-5;
 }
 
 /* Code */
@@ -126,15 +151,15 @@ pre[data-language] code {
   @apply inline-block w-[3ch] text-neutral-500;
 }
 
-span[style='color:#6A737D'] {
+span[style="color:#6A737D"] {
   @apply italic;
 }
 
-code[data-line-numbers-max-digits='2'] > [data-line]::before {
+code[data-line-numbers-max-digits="2"] > [data-line]::before {
   width: 2rem;
 }
 
-code[data-line-numbers-max-digits='3'] > [data-line]::before {
+code[data-line-numbers-max-digits="3"] > [data-line]::before {
   width: 3rem;
 }
 
@@ -176,7 +201,7 @@ code[data-line-numbers-max-digits='3'] > [data-line]::before {
   position: absolute;
   top: 0;
   bottom: 0;
-  content: '';
+  content: "";
   width: 15%;
 }
 .companies-list:before {
@@ -192,13 +217,13 @@ code[data-line-numbers-max-digits='3'] > [data-line]::before {
   @apply relative;
 }
 .integration-usage:before {
-  content: '';
+  content: "";
   @apply absolute -inset-10 bg-neutral-900 -z-10;
 }
 
 .integration-line:before,
 .integration-line:after {
-  content: '';
+  content: "";
   @apply absolute left-0 right-0 h-1 w-[50vw] bg-neutral-800 -translate-x-1/2;
   @apply hidden lg:block;
 }
@@ -210,18 +235,25 @@ code[data-line-numbers-max-digits='3'] > [data-line]::before {
 }
 
 /* Docs */
+
+.prose h2,
+.prose h3,
+.prose h4 {
+  @apply border-neutral-200 dark:border-neutral-800;
+}
+
 .prose h2 a,
 .prose h3 a,
 .prose h4 a {
-  @apply text-white no-underline;
+  @apply text-black dark:text-white no-underline;
   font-weight: inherit;
 }
 
 .prose h2 a::after,
 .prose h3 a::after,
 .prose h4 a::after {
-  @apply hidden ml-1 text-neutral-500;
-  content: '#';
+  @apply hidden ml-1 text-neutral-400 dark:text-neutral-500;
+  content: "#";
 }
 
 .prose h2 a:hover::after,

From 90fa904f0b987f32da63d63884ecff5ea91f73bd Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sun, 29 Oct 2023 12:04:45 +0100
Subject: [PATCH 4/9] feat: :sparkles: Added missings light components for the
 docs page

---
 src/components/NavLink.astro     |  4 +-
 src/components/react/info.tsx    |  2 +-
 src/components/react/success.tsx |  2 +-
 src/components/react/warning.tsx |  2 +-
 src/styles/global.css            | 77 +++++++++++++++++++++++++++++---
 tailwind.config.cjs              | 12 +----
 6 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/src/components/NavLink.astro b/src/components/NavLink.astro
index 722de74f..5136f0f5 100644
--- a/src/components/NavLink.astro
+++ b/src/components/NavLink.astro
@@ -28,8 +28,8 @@ const isActive = getIsActive(href, pathname)
 
 <a href={href} class:list={[
 	className,
-	'px-3 py-[19px] font-bold hover:text-white',
-	{ 'menu-link-active text-white -mb-px border-b border-orange': isActive }
+	'px-3 py-[19px] font-bold hover:text-black dark:hover:text-white',
+	{ 'menu-link-active text-black dark:text-white -mb-px border-b border-orange': isActive }
 ]} {...props}>
 	<slot />
 </a>
diff --git a/src/components/react/info.tsx b/src/components/react/info.tsx
index 14f4935d..8431f64f 100644
--- a/src/components/react/info.tsx
+++ b/src/components/react/info.tsx
@@ -4,7 +4,7 @@ export function Info({ children }: { children: ReactNode }): JSX.Element {
   return (
     <div
       role="alert"
-      className="flex items-start gap-2 px-4 py-2.5 my-5 font-medium text-blue-400 bg-blue-900 bg-opacity-10 border border-blue-900 rounded-lg"
+      className="flex items-start gap-2 px-4 py-2.5 my-5 font-medium dark:text-blue-500 text-blue-800 dark:bg-blue-950 bg-blue-50 dark:bg-opacity-10 border border-blue-500 dark:border-blue-900 rounded-lg"
     >
       {children}
     </div>
diff --git a/src/components/react/success.tsx b/src/components/react/success.tsx
index 337b1dcf..a40f90c2 100644
--- a/src/components/react/success.tsx
+++ b/src/components/react/success.tsx
@@ -4,7 +4,7 @@ export function Success({ children }: { children: ReactNode }): JSX.Element {
   return (
     <div
       role="alert"
-      className="flex items-start gap-2 px-4 py-2.5 my-5 font-medium text-green-600 bg-green-900 bg-opacity-10 border border-green-800 rounded-lg"
+      className="flex items-start gap-2 px-4 py-2.5 my-5 font-medium dark:text-green-500 text-green-800 dark:bg-green-950 bg-green-50 dark:bg-opacity-10 border border-green-500 dark:border-green-900 rounded-lg"
     >
       {children}
     </div>
diff --git a/src/components/react/warning.tsx b/src/components/react/warning.tsx
index a609f9e0..69d69511 100644
--- a/src/components/react/warning.tsx
+++ b/src/components/react/warning.tsx
@@ -4,7 +4,7 @@ export function Warning({ children }: { children: ReactNode }): JSX.Element {
   return (
     <div
       role="alert"
-      className="flex items-start gap-2 px-4 py-2.5 my-5 text-yellow-500 bg-yellow-900 bg-opacity-10 font-medium leading-6 border border-yellow-800 rounded-lg"
+      className="flex items-start gap-2 px-4 py-2.5 my-5 font-medium dark:text-yellow-500 text-yellow-800 dark:bg-yellow-950 bg-yellow-50 dark:bg-opacity-10 border border-yellow-500 dark:border-yellow-900 rounded-lg"
     >
       {/* <ExclamationIcon className="flex-shrink-0 w-4 mt-1 text-yellow-500" /> */}
       {children}
diff --git a/src/styles/global.css b/src/styles/global.css
index 54ff502c..6911fd89 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 ::-webkit-scrollbar {
-  @apply w-3;
+  @apply w-3 h-3;
 }
 
 /* Track - Light mode */
@@ -85,10 +85,6 @@ hr {
   @apply border-neutral-200 dark:border-neutral-800;
 }
 
-blockquote em {
-  @apply text-orange border-dotted border-b border-orange not-italic;
-}
-
 .em-border {
   @apply border-b border-dotted border-orange;
 }
@@ -262,6 +258,77 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
   @apply inline;
 }
 
+.prose ::marker {
+  @apply text-black;
+}
+
+.dark .prose ::marker {
+  @apply text-white;
+}
+
+.prose th {
+  @apply text-neutral-600;
+}
+
+.dark .prose th {
+  @apply text-neutral-300;
+}
+
+.prose th code {
+  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+}
+
+.dark .prose th code {
+  @apply bg-neutral-800 border-neutral-700 text-neutral-300;
+}
+
+.prose td code {
+  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+}
+
+.dark .prose td code {
+  @apply bg-neutral-800 border-neutral-700 text-neutral-300;
+}
+
+
+.prose p code {
+  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+}
+
+.dark .prose p code {
+  @apply bg-neutral-800 border-neutral-700 text-neutral-300;
+}
+
+
+
+.prose a code {
+  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+}
+
+.dark .prose a code {
+  @apply bg-neutral-800 border-neutral-700 text-neutral-300;
+}
+
+
+.prose li code {
+  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+}
+
+.dark .prose li code {
+  @apply bg-neutral-800 border-neutral-700 text-neutral-300;
+}
+
+
+/* Blockquote / Callouts */
+
+blockquote {
+  @apply dark:!text-neutral-400 !text-neutral-500 !border-l-2 dark:!border-neutral-700 !border-neutral-200 !not-italic !font-semibold !leading-normal;
+}
+
+blockquote em {
+  @apply text-orange border-dotted border-b border-orange not-italic;
+}
+
 .docs-group-item > summary {
   @apply list-none;
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b2baabb5..2ef651c4 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -63,14 +63,6 @@ module.exports = {
             },
             'code::before': null,
             'code::after': null,
-            blockquote: {
-              color: theme('colors.neutral.400'),
-              borderColor: theme('colors.neutral.700'),
-              borderLeftWidth: 2,
-              fontStyle: 'normal',
-              fontWeight: theme('font.semibold'),
-              lineHeight: 1.5,
-            },
             'blockquote p:first-of-type::before': null,
             'blockquote p:first-of-type::after': null,
             hr: {
@@ -79,9 +71,7 @@ module.exports = {
             thead: {
               borderColor: theme('colors.neutral.600'),
             },
-            th: {
-              color: theme('colors.neutral.300'),
-            },
+        
             tr: {
               borderColor: theme('colors.neutral.700'),
             },

From ccb6d1aed65cbf1903b49bc7674447e60e11082a Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sun, 29 Oct 2023 12:09:35 +0100
Subject: [PATCH 5/9] feat: :sparkles: Blog light mode implementation

---
 src/components/react/pageHeader.tsx | 2 +-
 src/pages/blog/index.astro          | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/react/pageHeader.tsx b/src/components/react/pageHeader.tsx
index 23dc4529..660dfc61 100644
--- a/src/components/react/pageHeader.tsx
+++ b/src/components/react/pageHeader.tsx
@@ -30,7 +30,7 @@ export function PageHeaderSubtitle(
     <p
       {...props}
       className={cls(
-        'mx-auto text-xl text-neutral-400 leading-8 font-medium',
+        'mx-auto text-xl text-neutral-500 dark:text-neutral-400 leading-8 font-medium',
         props.className
       )}
     />
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 7564b1a2..ca31de63 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -44,19 +44,19 @@ const posts = allBlogPosts.sort(
 						<ul class="mb-16 space-y-5 md:space-y-10">
 							{posts.map((post) => (
 								<li>
-									<article class="p-10 flex items-center md:items-start flex-col gap-4 md:flex-row md:gap-8 bg-neutral-800 bg-opacity-40 border border-neutral-800 rounded-lg">
+									<article class="p-10 flex items-center md:items-start flex-col gap-4 md:flex-row md:gap-8 bg-white border-neutral-200 dark:bg-neutral-800 dark:bg-opacity-40 border dark:border-neutral-800 rounded-lg">
 										<img src={post.data.thumbnailUrl} alt={post.data.title} class="inline-flex w-32 drop-shadow-md" />
 										<div>
 											<a href={`/blog/${post.slug}`}
-											class="mb-2 inline-block text-2xl font-bold text-white hover:underline"
+											class="mb-2 inline-block text-2xl font-bold text-black dark:text-white hover:underline"
 											>{post.data.title}</a>
-											<p class="text-sm text-neutral-400 font-medium font-mono italic">
+											<p class="text-sm text-neutral-500 dark:text-neutral-400 font-medium font-mono italic">
 												<FormattedDate
 													date={post.data.publishedAt}
 												/>
 											</p>
 											{post.data.description ? (
-												<p class="mt-5 text-neutral-300">
+												<p class="mt-5 text-neutral-600 dark:text-neutral-300">
 													{post.data.description}
 												</p>
 											) : null}

From cf3c2613ad2d3c57bcf81ce641c81bfaebe61b6b Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sun, 29 Oct 2023 12:15:57 +0100
Subject: [PATCH 6/9] feat: :sparkles: Blog has now light mode supports

---
 src/components/react/avatar.tsx |  6 +++---
 src/layouts/BlogPost.astro      |  8 ++++----
 src/styles/global.css           | 11 +++++++++--
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/react/avatar.tsx b/src/components/react/avatar.tsx
index dfa5bacc..f9d79973 100644
--- a/src/components/react/avatar.tsx
+++ b/src/components/react/avatar.tsx
@@ -14,11 +14,11 @@ export function Avatar({ url, name, children, className }: Props): JSX.Element {
       <img
         src={url}
         alt={name}
-        className={cls('p-1 border-4 border-stone-700 rounded-full', className)}
+        className={cls('p-1 border-2 dark:border-4 border-neutral-200 dark:border-neutral-700 rounded-full', className)}
       />
       <div>
-        <p className="font-semibold leading-5 mb-1.5 text-white">{name}</p>
-        <p className="text-neutral-400 leading-5">{children}</p>
+        <p className="font-semibold leading-5 mb-1.5 text-black dark:text-white">{name}</p>
+        <p className="text-neutral-500 dark:text-neutral-400 leading-5">{children}</p>
       </div>
     </div>
   )
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 7d610d83..b1bf0fae 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -15,7 +15,7 @@ const { title, description, thumbnailUrl, publishedAt, author, keywords } = Astr
 ---
 
 <!doctype html>
-<html lang="en" data-theme="dark" transition:animate="none">
+<html lang="en" transition:animate="none">
 	<head>
 		<BaseHead
 			title={title}
@@ -32,10 +32,10 @@ const { title, description, thumbnailUrl, publishedAt, author, keywords } = Astr
 			<Container>
 				<Grid>
 					<article class="lg:col-span-8 lg:col-start-3">
-						<aside class="sticky z-[2] py-2 text-sm font-medium bg-neutral-900 border-b border-neutral-800 top-[60px]">
+						<aside class="sticky z-[2] py-2 text-sm font-medium bg-neutral-50 border-neutral-200 dark:bg-neutral-900 border-b dark:border-neutral-800 top-[60px]">
 							<a
 								href="/blog"
-								class="inline-flex items-center gap-2 font-medium text-neutral-400 hover:text-white"
+								class="inline-flex items-center gap-2 font-medium text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white"
 							>
 								<ArrowLeftIcon className="w-3" />
 								Back to Blog
@@ -46,7 +46,7 @@ const { title, description, thumbnailUrl, publishedAt, author, keywords } = Astr
 								<img src={thumbnailUrl} alt={title} class="hidden w-24 sm:block sm:w-32 md:w-64 drop-shadow-xl" />
 								<div>
 									<h1 class="mb-4">{title}</h1>
-									<p class="mb-10 text-neutral-400 font-medium font-mono">
+									<p class="mb-10 text-neutral-500 dark:text-neutral-400 font-medium font-mono">
 										<FormattedDate date={publishedAt} />
 									</p>
 									<div class="flex md:justify-center text-left">
diff --git a/src/styles/global.css b/src/styles/global.css
index 6911fd89..609a11ca 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -266,6 +266,15 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
   @apply text-white;
 }
 
+.prose p {
+  @apply text-neutral-800;
+}
+
+.dark .prose p {
+  @apply text-neutral-200
+}
+
+
 .prose th {
   @apply text-neutral-600;
 }
@@ -299,8 +308,6 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
   @apply bg-neutral-800 border-neutral-700 text-neutral-300;
 }
 
-
-
 .prose a code {
   @apply bg-neutral-100 border-neutral-200 text-neutral-600;
 }

From 7d44fc80f0087bdc22746db029d0df664b98a68c Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sun, 29 Oct 2023 19:03:42 +0100
Subject: [PATCH 7/9] feat: :sparkles: Implemented light mode in the index page

---
 src/components/react/announcementBanner.tsx   |  2 +-
 src/components/react/app.tsx                  | 10 ++--
 src/components/react/avatar.tsx               |  2 +-
 src/components/react/feedbackWidget.tsx       |  2 +-
 src/components/react/gettingStarted.tsx       |  4 +-
 src/components/react/heroQuote.tsx            |  2 +-
 src/components/react/icons/vercel.tsx         |  2 +-
 .../react/integrations/cypressRunner.tsx      | 40 +++++++-------
 .../react/integrations/storybookShowcase.tsx  |  8 +--
 .../react/integrations/vitestRunner.tsx       | 12 ++---
 src/components/react/mswBlockItem.tsx         |  2 +-
 src/components/react/quote.tsx                |  2 +-
 src/components/react/section.tsx              |  2 +-
 src/components/react/uppercaseLabel.tsx       |  2 +-
 src/pages/index.astro                         | 52 +++++++++----------
 src/styles/global.css                         | 20 +++----
 16 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/src/components/react/announcementBanner.tsx b/src/components/react/announcementBanner.tsx
index 0d089686..12ab306c 100644
--- a/src/components/react/announcementBanner.tsx
+++ b/src/components/react/announcementBanner.tsx
@@ -12,7 +12,7 @@ export function AnnouncementBanner({
   actionUrl,
 }: Props): JSX.Element {
   return (
-    <aside className="relative text-sm leading-4 font-bold rounded-lg bg-slate-500 bg-opacity-20 border border-slate-700 px-4 py-1.5 flex flex-col sm:inline-flex sm:flex-row items-center gap-2 mb-8">
+    <aside className="relative text-sm leading-4 font-bold rounded-lg bg-neutral-950 text-white  dark:bg-slate-500 dark:bg-opacity-20 border dark:border-slate-700 px-4 py-1.5 flex flex-col sm:inline-flex sm:flex-row items-center gap-2 mb-8">
       {children}
       {actionText ? (
         <a
diff --git a/src/components/react/app.tsx b/src/components/react/app.tsx
index da17c7fa..05e78a45 100644
--- a/src/components/react/app.tsx
+++ b/src/components/react/app.tsx
@@ -23,8 +23,8 @@ export function ProductDetailComponent(): JSX.Element {
     <div className="p-5 flex items-center gap-5">
       <div className="w-14 h-14 rounded-lg bg-gradient-to-tl from-red-500 to-amber-500" />
       <div className="flex-1 text-left">
-        <p className="mb-1 text-lg font-bold leading-5">Porcelain Mug</p>
-        <p className="text-neutral-400">$9.99</p>
+        <p className="mb-1 text-lg font-bold leading-5 text-black dark:text-white">Porcelain Mug</p>
+        <p className="text-neutral-500 dark:text-neutral-400">$9.99</p>
       </div>
       <button className="bg-transparent border border-orange text-orange font-semibold rounded-full px-4 py-1 pointer-events-none">
         Buy
@@ -39,10 +39,10 @@ export function BrowserWindow({
   children: ReactNode
 }): JSX.Element {
   return (
-    <div className="bg-black border border-neutral-700 rounded-xl select-none max-w-full">
-      <header className="px-5 py-2 flex items-center justify-between gap-5 border-b border-neutral-800">
+    <div className="bg-white dark:bg-black border border-neutral-300 dark:border-neutral-700 rounded-xl select-none max-w-full">
+      <header className="px-5 py-2 flex items-center justify-between gap-5 border-b border-neutral-200 dark:border-neutral-800">
         <AppTrayIcons />
-        <div className="px-3 py-0.5 border border-neutral-800 rounded-lg text-neutral-400 text-sm md:text-base font-medium whitespace-nowrap text-ellipsis overflow-hidden">
+        <div className="px-3 py-0.5 border border-neutral-200 dark:border-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 text-sm md:text-base font-medium whitespace-nowrap text-ellipsis overflow-hidden">
           <span className="opacity-60">acme.com</span>
           <span>/product/abc-123</span>
         </div>
diff --git a/src/components/react/avatar.tsx b/src/components/react/avatar.tsx
index f9d79973..c1799dc8 100644
--- a/src/components/react/avatar.tsx
+++ b/src/components/react/avatar.tsx
@@ -14,7 +14,7 @@ export function Avatar({ url, name, children, className }: Props): JSX.Element {
       <img
         src={url}
         alt={name}
-        className={cls('p-1 border-2 dark:border-4 border-neutral-200 dark:border-neutral-700 rounded-full', className)}
+        className={cls('p-1 border-4 border-neutral-300 dark:border-neutral-700 rounded-full', className)}
       />
       <div>
         <p className="font-semibold leading-5 mb-1.5 text-black dark:text-white">{name}</p>
diff --git a/src/components/react/feedbackWidget.tsx b/src/components/react/feedbackWidget.tsx
index d3b13c6d..ef2db15b 100644
--- a/src/components/react/feedbackWidget.tsx
+++ b/src/components/react/feedbackWidget.tsx
@@ -42,7 +42,7 @@ export function FeedbackWidget({ pageTitle }: { pageTitle: string }) {
   };
 
   return (
-    <aside className="mt-10 px-5 py-4 border-neutral-200 bg-white border dark:border-neutral-700 dark:bg-neutral-800 bg-opacity-40 rounded-md">
+    <aside className="mt-10 px-5 py-4 border-neutral-300 bg-white border dark:border-neutral-700 dark:bg-neutral-800 bg-opacity-40 rounded-md">
       <header className="flex flex-col md:flex-row items-center justify-between gap-4">
         <p className="text-center mb-0 font-bold">Was this helpful?</p>
         <ol className="flex items-center justify-center gap-5 text-2xl">
diff --git a/src/components/react/gettingStarted.tsx b/src/components/react/gettingStarted.tsx
index 65e621b6..facc36bb 100644
--- a/src/components/react/gettingStarted.tsx
+++ b/src/components/react/gettingStarted.tsx
@@ -5,14 +5,14 @@ import { PageHeaderSubtitle } from './pageHeader'
 
 export function GettingStarted(): JSX.Element {
   return (
-    <div className="hero-gradient items-center py-24 text-center bg-neutral-800 bg-opacity-40 border-t-neutral-800 border-y border-b-neutral-800 -mb-px">
+    <div className="hero-gradient items-center py-24 text-center bg-white dark:bg-neutral-800 dark:bg-opacity-40 border-neutral-200 dark:border-neutral-800 border-y -mb-px">
       <Container>
         <MswBlockItem />
 
         <div className="max-w-2xl mx-auto">
           <h2 className="mt-12 mb-8 capitalize">Ship better products today.</h2>
           <PageHeaderSubtitle className="text-left md:text-center">
-            <span className="text-white">Mock Service Worker</span> is the best
+            <span className="text-black dark:text-white">Mock Service Worker</span> is the best
             way to integrate API mocking across your entire stack. Test,
             prototype, and debug withouth sacrificing your application's
             integrity. Give it a try, it's open-source and free!
diff --git a/src/components/react/heroQuote.tsx b/src/components/react/heroQuote.tsx
index 0fce2d31..b0cb606c 100644
--- a/src/components/react/heroQuote.tsx
+++ b/src/components/react/heroQuote.tsx
@@ -18,7 +18,7 @@ export function HeroQuote({
   return (
     <blockquote className="relative flex flex-col max-w-2xl mx-auto">
       <QuotesIcon className="select-none lg:absolute mb-10 lg:mb-0 top-0 left-0 right-0 mx-auto lg:-ml-8 lg:mt-3 lg:-translate-x-full text-8xl fill-orange w-16 lg:w-24" />
-      <p className="text-xl md:text-2xl leading-8 md:leading-9 font-medium">
+      <p className="text-xl md:text-2xl leading-8 md:leading-9 font-medium text-black dark:text-white ">
         {children}
       </p>
       <figcaption className="flex items-center md:self-center gap-4 mt-16">
diff --git a/src/components/react/icons/vercel.tsx b/src/components/react/icons/vercel.tsx
index 80cd4150..de219c18 100644
--- a/src/components/react/icons/vercel.tsx
+++ b/src/components/react/icons/vercel.tsx
@@ -8,7 +8,7 @@ export function VercelIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g stroke="none" strokeWidth="1" fillRule="evenodd">
         <image
           id="vercel-logotype-light"
           x="50"
diff --git a/src/components/react/integrations/cypressRunner.tsx b/src/components/react/integrations/cypressRunner.tsx
index a0b91404..c70ec941 100644
--- a/src/components/react/integrations/cypressRunner.tsx
+++ b/src/components/react/integrations/cypressRunner.tsx
@@ -1,66 +1,66 @@
 export function CypressRunnerIntegration(): JSX.Element {
   return (
-    <div className="border border-neutral-700 rounded-lg overflow-hidden ml-auto">
-      <ul className="p-4 border-l-4 border-green-600">
+    <div className="border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-black dark:text-white rounded-lg overflow-hidden ml-auto">
+      <ul className="p-4 border-l-4 border-green-400 dark:border-green-600">
         <li>
           <p className="text-lg font-bold">Product detail page</p>
           <ul className="md:pl-4 py-2 text-neutral-400">
             <li>
               <p>
                 <span className="mr-[1ch] text-green-600 font-mono">✔</span>
-                <span className="font-medium">
+                <span className="font-medium text-neutral-500 dark:text-neutral-400">
                   Displays product item details
                 </span>
               </p>
-              <ul className="ml-1 px-4 py-2 border-l border-neutral-800">
+              <ul className="ml-1 px-4 py-2 border-l border-neutral-400 dark:border-neutral-800">
                 <li>
-                  <p className="mb-1 uppercase font-medium text-neutral-600 text-sm">
+                  <p className="mb-1 uppercase font-medium text-neutral-400 dark:text-neutral-600 text-sm">
                     Test body
                   </p>
                   <table
-                    className="bg-neutral-800 bg-opacity-50 font-mono font-medium text-sm w-full"
+                    className="dark:bg-neutral-800 dark:bg-opacity-50  font-mono font-medium text-sm w-full"
                     cellPadding={5}
                   >
-                    <tr className="border-b border-neutral-800">
-                      <td className="w-[3ch] text-center opacity-50">1</td>
-                      <td className="uppercase font-bold">Visit</td>
-                      <td>/product/abc-123</td>
+                    <tr className="border-b border-neutral-200 dark:border-neutral-800">
+                      <td className="w-[3ch] text-center dark:opacity-50">1</td>
+                      <td className="uppercase font-bold text-neutral-600 dark:text-neutral-400">Visit</td>
+                      <td className='text-neutral-500 dark:text-neutral-400'>/product/abc-123</td>
                     </tr>
-                    <tr className="border-b border-neutral-800">
+                    <tr className="border-b border-neutral-200 dark:border-neutral-800">
                       <td className="w-[3ch] text-center" />
-                      <td className="uppercase text-neutral-600 italic">
+                      <td className="uppercase text-neutral-400 dark:text-neutral-600 italic">
                         (XHR)
                       </td>
-                      <td className="inline-flex items-center gap-2">
+                      <td className="inline-flex items-center gap-2 text-neutral-500 dark:text-neutral-400">
                         <span className="inline-block w-2 h-2 bg-green-600 rounded-full" />{' '}
                         GET 200 api.acme/product/abc-123
                       </td>
                     </tr>
-                    <tr className="border-b border-neutral-800 align-top">
+                    <tr className="border-b border-neutral-200 dark:border-neutral-800 align-top">
                       <td className="w-[3ch] text-center opacity-50">2</td>
                       <td className="uppercase font-bold">
-                        <span className="bg-green-600 text-black rounded-sm px-1">
+                        <span className="bg-green-800 text-white dark:text-black dark:bg-green-600   rounded-sm px-1">
                           Assert
                         </span>
                       </td>
                       <td className="text-green-600">
                         expected{' '}
-                        <span className="text-green-300">h1.title</span> to have
+                        <span className="text-green-900 dark:text-green-300">h1.title</span> to have
                         value{' '}
-                        <span className="text-green-300">Porcelain Mug</span>
+                        <span className="text-green-900 dark:text-green-300">Porcelain Mug</span>
                       </td>
                     </tr>
                     <tr className="align-top">
                       <td className="w-[3ch] text-center opacity-50">3</td>
                       <td className="uppercase font-bold">
-                        <span className="bg-green-600 text-black rounded-sm px-1">
+                        <span className="bg-green-800 text-white dark:text-black dark:bg-green-600  rounded-sm px-1">
                           Assert
                         </span>
                       </td>
                       <td className="text-green-600">
-                        expected <span className="text-green-300">p.price</span>{' '}
+                        expected <span className="text-green-900 dark:text-green-300">p.price</span>{' '}
                         to have value{' '}
-                        <span className="text-green-300">$9.99</span>
+                        <span className="text-green-900 dark:text-green-300">$9.99</span>
                       </td>
                     </tr>
                   </table>
diff --git a/src/components/react/integrations/storybookShowcase.tsx b/src/components/react/integrations/storybookShowcase.tsx
index a876305e..4a21ffd8 100644
--- a/src/components/react/integrations/storybookShowcase.tsx
+++ b/src/components/react/integrations/storybookShowcase.tsx
@@ -15,11 +15,11 @@ export function StorybookBookmarkIcon(
 
 export function StorybookShowcase(): JSX.Element {
   return (
-    <div className="flex flex-col md:flex-row border border-neutral-700 rounded-lg w-full select-none overflow-hidden">
+    <div className="flex flex-col md:flex-row border border-neutral-300 dark:border-neutral-700 rounded-lg w-full select-none overflow-hidden">
       <div>
         <div className="flex-1 py-4">
           <ul>
-            <li className="mt-1.5 mb-2 px-4 uppercase font-bold text-sm text-neutral-500 tracking-widest">
+            <li className="mt-1.5 mb-2 px-4 uppercase font-bold text-sm text-neutral-600 dark:text-neutral-500 tracking-widest">
               Components
             </li>
             <li>
@@ -30,7 +30,7 @@ export function StorybookShowcase(): JSX.Element {
                 <span className="font-bold">ProductDetail</span>
               </p>
               <ul>
-                <li className="px-8 py-0.5 bg-neutral-800 font-bold">
+                <li className="px-8 py-0.5 bg-neutral-100 dark:bg-neutral-800 font-bold">
                   <StorybookBookmarkIcon className="inline-block align-baseline text-[#37d5d3]" />{' '}
                   Idle
                 </li>
@@ -47,7 +47,7 @@ export function StorybookShowcase(): JSX.Element {
           </ul>
         </div>
       </div>
-      <div className="flex-1 flex items-center justify-center p-12 bg-neutral-800">
+      <div className="flex-1 flex items-center justify-center p-12 bg-neutral-100 dark:bg-neutral-800">
         <StorybookIcon className="fill-[#ff528c] w-12" />
       </div>
     </div>
diff --git a/src/components/react/integrations/vitestRunner.tsx b/src/components/react/integrations/vitestRunner.tsx
index d26e64a4..a8fc333c 100644
--- a/src/components/react/integrations/vitestRunner.tsx
+++ b/src/components/react/integrations/vitestRunner.tsx
@@ -2,7 +2,7 @@ import { AppTrayIcons } from '../app'
 
 export function VitestRunner(): JSX.Element {
   return (
-    <div className="border border-neutral-700 rounded-lg p-4 font-mono select-none">
+    <div className="border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-950 text-black dark:text-white rounded-lg p-4 font-mono select-none">
       <header className="pb-4">
         <AppTrayIcons />
       </header>
@@ -11,8 +11,8 @@ export function VitestRunner(): JSX.Element {
       </p>
       <p>
         <span className="text-yellow-500">❯</span>{' '}
-        <span className="text-neutral-400">
-          components/<span className="text-white">ProductDetail</span>.test.ts
+        <span className="text-neutral-500 dark:text-neutral-400">
+          components/<span className="text-black dark:text-white">ProductDetail</span>.test.ts
         </span>
       </p>
       <p className="pl-[2ch] text-ellipsis overflow-hidden whitespace-nowrap">
@@ -28,12 +28,12 @@ export function VitestRunner(): JSX.Element {
         <span>handles network errors</span>
       </p>
       <br />
-      <p className="ml-[5ch] text-neutral-400">
+      <p className="ml-[5ch] dark:text-neutral-400 text-neutral-500">
         <span>Tests</span>{' '}
         <span className="text-green-500 font-bold">3 passed</span> (3)
       </p>
-      <p className="ml-[2ch] text-neutral-400">
-        <span>Duration</span> <span className="text-white">100ms</span>
+      <p className="ml-[2ch] dark:text-neutral-400 text-neutral-500">
+        <span>Duration</span> <span className="text-black dark:text-white">100ms</span>
       </p>
     </div>
   )
diff --git a/src/components/react/mswBlockItem.tsx b/src/components/react/mswBlockItem.tsx
index 713f7892..cb2d9956 100644
--- a/src/components/react/mswBlockItem.tsx
+++ b/src/components/react/mswBlockItem.tsx
@@ -2,7 +2,7 @@ import mswLogo from '../../images/msw.svg'
 
 export function MswBlockItem(): JSX.Element {
   return (
-    <div className="inline-block border-2 border-neutral-800 bg-neutral-900 rounded-xl p-5 w-24 shadow-xl">
+    <div className="inline-block border-2 border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 rounded-xl p-5 w-24 shadow-lg dark:shadow-xl">
       <img src={mswLogo.src} className="flex select-none" />
     </div>
   )
diff --git a/src/components/react/quote.tsx b/src/components/react/quote.tsx
index 31f89dfa..c36d7512 100644
--- a/src/components/react/quote.tsx
+++ b/src/components/react/quote.tsx
@@ -13,7 +13,7 @@ export function Quote({
   imageUrl: string
 }): JSX.Element {
   return (
-    <figure className="p-5 md:p-10 border rounded-md border-neutral-800">
+    <figure className="p-5 md:p-10 border rounded-md border-neutral-200 dark:border-neutral-800">
       <blockquote className="font-medium">{children}</blockquote>
       <figcaption className="relative flex items-center gap-3 mt-8">
         <Avatar name={author} url={imageUrl} className="w-14 h-14">
diff --git a/src/components/react/section.tsx b/src/components/react/section.tsx
index 21f49e5c..259208bc 100644
--- a/src/components/react/section.tsx
+++ b/src/components/react/section.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 
 export function Section({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <section className="py-24 md:py-48 bg-neutral-800 bg-opacity-40 border-t-neutral-800 border-y border-b-neutral-800">
+    <section className="py-24 md:py-48 border-neutral-200 bg-white dark:bg-neutral-800 dark:bg-opacity-40 dark:border-t-neutral-800 border-y dark:border-b-neutral-800">
       {children}
     </section>
   )
diff --git a/src/components/react/uppercaseLabel.tsx b/src/components/react/uppercaseLabel.tsx
index 95440ce8..050af983 100644
--- a/src/components/react/uppercaseLabel.tsx
+++ b/src/components/react/uppercaseLabel.tsx
@@ -6,7 +6,7 @@ export function UppercaseLabel({
   children: ReactNode
 }): JSX.Element {
   return (
-    <p className="mb-10 text-sm font-semibold tracking-widest uppercase text-neutral-400">
+    <p className="mb-10 text-sm font-semibold tracking-widest uppercase text-neutral-500 dark:text-neutral-400">
       {children}
     </p>
   )
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dcaaa412..1301c367 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -53,7 +53,7 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
 ---
 
 <!doctype html>
-<html lang="en" data-theme="dark" transition:animate="none">
+<html lang="en" transition:animate="none">
 	<head>
 		<BaseHead title={SITE_TITLE} displayTitle={`${SITE_TITLE} - ${SITE_DESCRIPTION}`} description={SITE_DESCRIPTION} />
 	</head>
@@ -85,8 +85,8 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
             <br />
             API mocking for JavaScript.
           </h1>
-          <p class="text-xl md:text-2xl md:leading-9 text-neutral-400 tracking-tight">
-            <span class="text-white">Mock Service Worker</span> is an API
+          <p class="text-xl md:text-2xl md:leading-9 text-neutral-500 dark:text-neutral-500 dark:text-neutral-400 tracking-tight">
+            <span class="text-black dark:text-white">Mock Service Worker</span> is an API
             mocking library that allows you to write client-agnostic mocks and
             reuse them across any frameworks, tools, and environments.
           </p>
@@ -100,7 +100,7 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
 						</a>
             <a
               href="https://github.com/mswjs/msw"
-              class="inline-block text-center text-neutral-300 w-full md:w-auto hover:text-white"
+              class="inline-block text-center text-neutral-600 dark:text-neutral-300 w-full md:w-auto hover:text-black dark:hover:text-white"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -112,7 +112,7 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
         <div class="py-16 md:py-40 text-center">
           <UppercaseLabel>Making tests better at</UppercaseLabel>
           <Grid className="relative">
-            <div class="col-span-full lg:col-start-3 lg:col-span-8 grid grid-cols-3 md:grid-cols-6 items-center justify-items-center gap-x-6 gap-y-6 md:gap-y-10 fill-white max-w-full md:max-w-6xl overflow-hidden">
+            <div class="col-span-full lg:col-start-3 lg:col-span-8 grid grid-cols-3 md:grid-cols-6 items-center justify-items-center gap-x-6 gap-y-6 md:gap-y-10 fill-black dark:fill-white max-w-full md:max-w-6xl overflow-hidden">
               <MicrosoftIcon
                 className="h-9 max-w-full"
                 aria-label="Microsoft"
@@ -129,9 +129,9 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
                 aria-label="CodeSandbox"
               />
               <GitHubIcon className="h-9 max-w-full" aria-label="GitHub" />
-              <VercelIcon className="h-9 max-w-full" aria-label="Vercel" />
+              <VercelIcon className="h-9 max-w-full mix-blend-difference dark:mix-blend-normal" aria-label="Vercel" />
               <CloudflareIcon
-                className="h-9 max-w-full"
+                className="h-9 max-w-full mix-blend-difference dark:mix-blend-norma"
                 aria-label="Cloudflare"
               />
               <SpotifyIcon className="h-9 max-w-full" aria-label="Spotify" />
@@ -166,18 +166,18 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
               <ul class="space-y-14">
                 <li>
                   <h3>Omit implementation details</h3>
-                  <p class="text-neutral-400">
+                  <p class="text-neutral-500 dark:text-neutral-500 dark:text-neutral-400">
                     Intercept both{' '}
                     <a
                       href="/docs/network-behavior/rest"
-                      class="text-white hover:underline"
+                      class="text-black dark:text-white hover:underline"
                     >
                       REST
                     </a>{' '}
                     and{' '}
                     <a
                       href="/docs/network-behavior/graphql"
-                      class="text-white hover:underline"
+                      class="text-black dark:text-white hover:underline"
                     >
                       GraphQL API
                   </a>{' '}
@@ -188,7 +188,7 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
                 </li>
                 <li>
                   <h3>Use the platform</h3>
-                  <p class="text-neutral-400">
+                  <p class="text-neutral-500 dark:text-neutral-500 dark:text-neutral-400">
                     Handle requests and responses using the standard Fetch API.
                     Respect the web standards and invest your time into learning
                     the platform, not the tools.
@@ -196,7 +196,7 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
                 </li>
                 <li>
                   <h3>Reuse like never before</h3>
-                  <p class="text-neutral-400">
+                  <p class="text-neutral-500 dark:text-neutral-500 dark:text-neutral-400">
                     No configurations, adapters, or plugins. Reuse the same mocks across environments and tools, be it an
                     integration test with Vitest, an automated browser test with
                     Playwright, a demo showcase in Storybook, or a React Native
@@ -237,21 +237,21 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
             </PageHeaderSubtitle>
           </PageHeaderWrapper>
           <div class="relative grid lg:grid-cols-[1fr_auto_1fr] lg:grid-rows-2 gap-x-10 gap-y-32 max-w-xl md:max-w-none mx-auto">
-            <div class="integration-line absolute inset-0 m-auto w-1 h-full lg:h-1/2 bg-neutral-800 -z-10" />
+            <div class="integration-line absolute inset-0 m-auto w-1 h-full lg:h-1/2 bg-neutral-200 dark:bg-neutral-800 -z-10" />
             {/* Local development */}
             <div class="integration-usage lg:self-end">
               <div class="lg:flex lg:justify-end">
                 <ComponentExample />
               </div>
               <div class="mt-8 lg:text-right">
-                <p class="text-xl font-bold">Local development</p>
-                <p class="text-lg mt-2 text-neutral-400 lg:max-w-lg ml-auto">
+                <p class="text-xl font-bold text-black dark:text-white">Local development</p>
+                <p class="text-lg mt-2 text-neutral-500 dark:text-neutral-400 lg:max-w-lg ml-auto">
                   Create, change, and debug fast by augmenting existing
                   APIs—both third-party and local—or designing them as you go.
                 </p>
               </div>
             </div>
-            <div class="-order-1 lg:order-none lg:row-span-2 flex px-10 self-center justify-self-center bg-neutral-900">
+            <div class="-order-1 lg:order-none lg:row-span-2 flex px-10 self-center justify-self-center bg-transparent dark:bg-neutral-900">
               <MswBlockItem />
             </div>
             {/* Vitest */}
@@ -259,7 +259,7 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
               <VitestRunner />
               <div class="mt-8">
                 <p class="text-xl font-bold">Integration tests</p>
-                <p class="text-lg mt-2 text-neutral-400 lg:max-w-lg">
+                <p class="text-lg mt-2 text-neutral-500 dark:text-neutral-400 lg:max-w-lg">
                   Test happy paths and override network behavior on a per-test
                   basis to test even the most trickest of edge cases.
                 </p>
@@ -270,18 +270,18 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
               <CypressRunnerIntegration />
               <div class="mt-8 lg:text-right">
                 <p class="text-xl font-bold">End-to-end tests</p>
-                <p class="text-lg mt-2 text-neutral-400 lg:max-w-lg ml-auto">
+                <p class="text-lg mt-2 text-neutral-500 dark:text-neutral-400 lg:max-w-lg ml-auto">
                   Take any HTTP call out of your test's equation and focus on
                   the user experience, mocking local or external APIs.
                 </p>
               </div>
             </div>
             {/* Styorybook */}
-            <div class="integration-usage bg-neutral-900">
+            <div class="integration-usage bg-neutral-50 dark:bg-neutral-900">
               <StorybookShowcase />
               <div class="mt-8">
                 <p class="text-xl font-bold">Storybook showcase</p>
-                <p class="text-lg mt-2 text-neutral-400 lg:max-w-lg">
+                <p class="text-lg mt-2 text-neutral-500 dark:text-neutral-400 lg:max-w-lg">
                   Emulate the precise network state to share how your components
                   handle it with the entire team.
                 </p>
@@ -294,12 +294,12 @@ import matanBorenkraoutAvatar from '../images/people/matan-borenkraout.jpg'
               <em class="text-orange not-italic">ever will be</em>
             </UppercaseLabel>
             <div class="inline-grid grid-cols-6 gap-10 items-center text-neutral-500">
-              <ReactIcon className="w-10 text-white" />
-              <VueIcon className="w-10 text-white" />
-              <AngularIcon className="w-10 text-white" />
-              <SvelteIcon className="w-10 text-white" />
-              <NextJsIcon className="w-10 text-white" />
-              <RemixIcon className="w-8 text-white" />
+              <ReactIcon className="w-10 text-black dark:text-white" />
+              <VueIcon className="w-10 text-black dark:text-white" />
+              <AngularIcon className="w-10 text-black dark:text-white" />
+              <SvelteIcon className="w-10 text-black dark:text-white" />
+              <NextJsIcon className="w-10 text-black dark:text-white" />
+              <RemixIcon className="w-8 text-black dark:text-white" />
             </div>
           </footer>
         </Container>
diff --git a/src/styles/global.css b/src/styles/global.css
index 609a11ca..7d471c2a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -102,7 +102,7 @@ hr {
   @apply px-6 py-3 font-bold rounded-lg select-none text-center;
 }
 .button-primary {
-  @apply bg-neutral-700 text-white bg-opacity-40 border border-neutral-700;
+  @apply bg-neutral-950 text-white dark:bg-neutral-700 dark:text-white dark:bg-opacity-40 border dark:border-neutral-700;
   @apply hover:bg-opacity-70;
 }
 .button-secondary {
@@ -214,13 +214,13 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
 }
 .integration-usage:before {
   content: "";
-  @apply absolute -inset-10 bg-neutral-900 -z-10;
+  @apply absolute -inset-10 bg-neutral-50 dark:bg-neutral-900 -z-10;
 }
 
 .integration-line:before,
 .integration-line:after {
   content: "";
-  @apply absolute left-0 right-0 h-1 w-[50vw] bg-neutral-800 -translate-x-1/2;
+  @apply absolute left-0 right-0 h-1 w-[50vw] bg-neutral-200 dark:bg-neutral-800 -translate-x-1/2;
   @apply hidden lg:block;
 }
 .integration-line:before {
@@ -284,7 +284,7 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
 }
 
 .prose th code {
-  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+  @apply bg-neutral-100 border-neutral-300 text-neutral-600;
 }
 
 .dark .prose th code {
@@ -292,7 +292,7 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
 }
 
 .prose td code {
-  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+  @apply bg-neutral-100 border-neutral-300 text-neutral-600;
 }
 
 .dark .prose td code {
@@ -301,7 +301,7 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
 
 
 .prose p code {
-  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+  @apply bg-neutral-100 border-neutral-300 text-neutral-600;
 }
 
 .dark .prose p code {
@@ -309,7 +309,7 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
 }
 
 .prose a code {
-  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+  @apply bg-neutral-100 border-neutral-300 text-neutral-600;
 }
 
 .dark .prose a code {
@@ -318,7 +318,7 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
 
 
 .prose li code {
-  @apply bg-neutral-100 border-neutral-200 text-neutral-600;
+  @apply bg-neutral-100 border-neutral-300 text-neutral-600;
 }
 
 .dark .prose li code {
@@ -328,8 +328,8 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
 
 /* Blockquote / Callouts */
 
-blockquote {
-  @apply dark:!text-neutral-400 !text-neutral-500 !border-l-2 dark:!border-neutral-700 !border-neutral-200 !not-italic !font-semibold !leading-normal;
+.prose blockquote {
+  @apply dark:!text-neutral-400 !text-neutral-500 !border-l-2 dark:!border-neutral-700 !border-neutral-300 !not-italic !font-semibold !leading-normal;
 }
 
 blockquote em {

From cc654588a3fe61acbbb9b2c18b143296f82caef3 Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sun, 29 Oct 2023 19:10:16 +0100
Subject: [PATCH 8/9] feat: :lipstick: Updated UI light/dark mode mobile menu

---
 src/components/react/mobileMenu.tsx | 4 ++--
 src/styles/global.css               | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/react/mobileMenu.tsx b/src/components/react/mobileMenu.tsx
index b358dfdb..8a14d666 100644
--- a/src/components/react/mobileMenu.tsx
+++ b/src/components/react/mobileMenu.tsx
@@ -16,12 +16,12 @@ export function MobileMenu({ children }: { children: ReactNode }) {
   return (
     <>
       <button
-        className="px-2 py-1 hover:text-white transition-colors"
+        className="px-2 py-1 dark:hover:text-white transition-colors"
         aria-labelledby="Menu"
         onClick={handleMenuClick}
       >
         {isOpen ? (
-          <CloseIcon className="w-[22px] text-white" />
+          <CloseIcon className="w-[22px] text-black dark:text-white" />
         ) : (
           <MenuIcon className="w-[22px]" />
         )}
diff --git a/src/styles/global.css b/src/styles/global.css
index 7d471c2a..783e1c1f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -179,10 +179,10 @@ code[data-line-numbers-max-digits="3"] > [data-line]::before {
   @apply p-5;
 }
 #mobile-menu a {
-  @apply block border-b border-neutral-800 hover:bg-neutral-800;
+  @apply block border-b border-neutral-200 dark:border-neutral-800  hover:bg-neutral-100 dark:hover:bg-neutral-800;
 }
 #mobile-menu .menu-link-active {
-  @apply mb-0 bg-neutral-800 bg-opacity-50 border-orange;
+  @apply mb-0 bg-neutral-200 dark:bg-neutral-800 bg-opacity-50 border-orange;
 }
 
 .companies-list {

From 316419b757dd924b00ed1a02992186a4e9b76dec Mon Sep 17 00:00:00 2001
From: adil <68734155+adevinwild@users.noreply.github.com>
Date: Sun, 29 Oct 2023 19:11:13 +0100
Subject: [PATCH 9/9] feat: :lipstick: Improved Moon and Sun icon sizes for
 mobile and desktop

---
 src/components/react/theme-toggle.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/react/theme-toggle.tsx b/src/components/react/theme-toggle.tsx
index 10e0a27d..c6dc8183 100644
--- a/src/components/react/theme-toggle.tsx
+++ b/src/components/react/theme-toggle.tsx
@@ -25,13 +25,13 @@ export function ThemeToggle() {
   return (
     <button
       onClick={handleClick}
-      className="  px-3 inline-flex py-1 h-[36px] w-[36px] justify-center items-center space-x-1 border rounded-md border-orange text-orange hover:bg-orange hover:text-black dark:bg-orange dark:text-black"
+      className="px-3 inline-flex py-1 h-[36px] w-[36px] justify-center items-center space-x-1 border rounded-md border-orange text-orange hover:bg-orange hover:text-black dark:bg-orange dark:text-black"
     >
       <span>
         {theme === "light" ? (
-          <MoonIcon className="w-5 h-5" />
+          <MoonIcon className="w-3 h-3 lg:w-5 lg:h-5" />
         ) : (
-          <SunIcon className="w-5 h-5" />
+          <SunIcon className="w-3 h-3 lg:w-5 lg:h-5" />
         )}
       </span>
     </button>