feat: ✨ Introduce light mode on the docs

src/components/Header.astro

@@ -1,10 +1,11 @@
 ---
-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 Search from './Search.astro'
+import { Container } from './react/container'
+import { MobileMenu } from './react/mobileMenu'
+import { SponsorLink } from './react/sponsorLink'
+import { ThemeToggle } from './react/themeToggle'
 
 type Props = {
   isFluid?: boolean
@@ -13,9 +14,13 @@ type 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-white 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,10 +30,12 @@ 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
@@ -41,31 +48,26 @@ const { isFluid } = Astro.props
       >
         <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 />
+          </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

@@ -1,15 +1,22 @@
 ---
-import '@docsearch/css/dist/style.css';
+import '@docsearch/css/dist/style.css'
 import './Search.css'
 import { MagnifyingGlassIcon as SearchIcon } from '@heroicons/react/24/outline'
 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 group 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" />
+    <SearchIcon
+      className="mr-1.5 w-[18px] text-neutral-500 group-hover:text-black dark:group-hover:text-white transition-all duration-300"
+      aria-label="Search"
+    />
     Search
   </div>
   <kbd class="DocSearch-Button-Key" aria-hidden="true">/</kbd>

src/components/Search.css

@@ -1,17 +1,17 @@
 .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 transition-all duration-300;
   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-neutral-50 text-black;
   box-shadow: none;
 }
 
 .DocSearch-Button-Key {
-  @apply inline-block m-0 mt-[2px] h-[18px] w-[18px] bg-none bg-orange bg-opacity-10 text-orange;
+  @apply inline-block m-0 mt-[2px] h-[18px] w-[18px] bg-none bg-orange text-white dark:bg-orange dark:bg-opacity-10 dark:text-orange;
   box-shadow: inset 0 0 0 1px var(--orange);
   font-size: 10px;
   line-height: 17px;

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/DocsSidebarPartners.astro

@@ -1,12 +1,12 @@
 ---
-import { ChromaticIcon } from '../react/icons/chromatic'
+import { ChromaticIcon } from "../react/icons/chromatic";
 ---
 
 <ul class="rounded-md overflow-hidden space-y-1">
   <li>
     <a
       href="https://www.chromatic.com/?ref=mswjs"
-      class="inline-flex flex-col items-center justify-center py-3 px-5 w-full grayscale hover:grayscale-0 bg-neutral-800 hover:bg-neutral-700 hover:bg-opacity-50"
+      class="inline-flex flex-col items-center justify-center py-3 px-5 w-full grayscale hover:grayscale-0 bg-white hover:text-black dark:bg-neutral-800 dark:hover:bg-neutral-700 hover:bg-opacity-50"
       target="_blank"
       rel="noopener noreferer"
     >

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,10 @@ 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 +41,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,18 @@ 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

@@ -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-white dark:bg-neutral-950 inset-0 max-h-[100vh] z-[5]',
         props.className,
       )}
       style={{ display: isOpen ? 'block' : 'none' }}

src/components/react/docsSidebarLinks.tsx

@@ -6,14 +6,14 @@ 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.5 leading-5 text-neutral-400 hover:text-white"
+            className="py-1.5 inline-flex items-center gap-1.5 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.5 leading-5 text-neutral-400 hover:text-white"
+            className="py-1.5 inline-flex items-center gap-1.5 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.5 leading-5 text-neutral-400 hover:text-white"
+            className="py-1.5 inline-flex items-center gap-1.5 leading-5 text-neutral-500 dark:text-neutral-400  hover:text-black dark:hover:text-white"
             target="_blank"
             ref="noopener noreferrer"
           >

src/components/react/eggheadCourseBanner.tsx

@@ -6,16 +6,16 @@ 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  rounded-lg no-underline hover:bg-opacity-70 border bg-opacity-40 bg-white border-neutral-200 dark:bg-neutral-800 dark:border-neutral-800"
     >
       <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>

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 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">
@@ -76,7 +76,7 @@ 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">
+        <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>
@@ -85,7 +85,7 @@ 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{' '}
                 <a
@@ -139,8 +139,8 @@ function FeedbackButton({
     <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 && '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}