WIP | Feature/add dark and light mode on docs

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-50 dark:bg-neutral-900 border-b h-15 border-neutral-200 dark: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>

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>

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>

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

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;
 }
 

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}
 >

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'
 ]}>

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>

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}

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

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>

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-4 border-neutral-300 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>
   )

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' }}

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>
-  )
+  );
 }

src/components/react/eggheadCourseBanner.tsx

@@ -1,24 +1,26 @@
-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}
         alt="Mock REST and GraphQL APIs with Mock Service Worker"
         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>
-  )
+  );
 }