feat(website): init dark mode

website/src/components/docs/DocsNavigation.astro

@@ -22,10 +22,10 @@ function getGuideUrl<F extends SupportedFramework>(framework: F, style: Supporte
     prev ? (
       <a
         href={getGuideUrl(framework, style, prev.slug)}
-        class="grid items-center gap-x-2 p-4 border border-light-40 rounded-lg intent:border-dark-40"
+        class="grid items-center gap-x-2 p-4 border border-light-40 dark:border-dark-80 rounded-lg intent:border-dark-40 dark:intent:border-dark-40"
         style="grid-template-areas: 'empty direction' 'icon title'; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto minmax(0,1fr);"
       >
-        <div class="text-sm text-dark-80" style="grid-area: direction;">
+        <div class="text-sm text-dark-80 dark:text-light-40" style="grid-area: direction;">
           Previous
         </div>
         <div class="text-base font-medium text-balance" style="grid-area: title">
@@ -43,10 +43,10 @@ function getGuideUrl<F extends SupportedFramework>(framework: F, style: Supporte
     next ? (
       <a
         href={getGuideUrl(framework, style, next.slug)}
-        class="grid items-center gap-x-2 p-4 border border-light-40 rounded-lg intent:border-dark-40 text-right"
+        class="grid items-center gap-x-2 p-4 border border-light-40 dark:border-dark-80 rounded-lg intent:border-dark-40 text-right dark:intent:border-dark-40"
         style="grid-template-areas: 'direction empty' 'title icon';grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto minmax(0,1fr);"
       >
-        <div class="text-sm text-dark-80" style="grid-area: direction;">
+        <div class="text-sm text-dark-80 dark:text-light-40" style="grid-area: direction;">
           Next
         </div>
         <div class="text-base font-medium text-balance" style="grid-area: title">

website/src/components/docs/DocsSidebar.astro

@@ -2,7 +2,6 @@
 import type { SupportedFramework, SupportedStyle } from '@/types/docs';
 
 import { PreferenceUpdater } from '@/components/docs/PreferenceUpdater';
-import { Selectors } from '@/components/docs/Selectors';
 import SidebarItem from '@/components/docs/SidebarItem.astro';
 import { filterSidebar } from '@/utils/docs/sidebar';
 
@@ -18,6 +17,6 @@ const filteredSidebar = filterSidebar(framework, style);
 
 <slot />
 <PreferenceUpdater client:idle currentFramework={framework} currentStyle={style} />
-<nav class="p-6 text-dark-80">
+<nav class="p-6 text-dark-80 dark:text-light-40">
   {filteredSidebar.map((item) => <SidebarItem item={item} framework={framework} style={style} docTitles={docTitles} />)}
 </nav>

website/src/components/docs/Selectors.tsx

@@ -69,7 +69,7 @@ export function Selectors({
   }));
 
   return (
-    <div className="p-6 lg:py-2.5 xl:p-6 border-b border-light-40">
+    <div className="p-6 lg:py-2.5 xl:p-6 border-b border-light-40 dark:border-dark-80">
       <div className="max-w-3xl mx-auto w-full grid gap-x-6 gap-y-2 items-center" style={{ gridTemplateColumns: 'auto minmax(0, 1fr)' }}>
         <span>Framework</span>
         <Select

website/src/components/docs/SidebarItem.astro

@@ -33,10 +33,10 @@ const isActive = containsActivePath(item);
       <summary
         class:list={[
           'py-2 flex items-center gap-4 ',
-          'intent:text-dark-100 cursor-pointer',
+          'intent:text-dark-100 dark:intent:text-light-80 cursor-pointer',
           depth === 0 && 'font-medium',
           depth > 0 && 'border-l',
-          isActive ? 'text-dark-100 border-dark-100 ' : 'border-light-40',
+          isActive ? 'text-dark-100 dark:text-light-80 border-dark-100' : 'border-light-40 dark:border-dark-40',
         ]}
       >
         <span class="flex-1">{item.sidebarLabel}</span>
@@ -52,10 +52,10 @@ const isActive = containsActivePath(item);
     <a
       class:list={[
         'py-2 flex items-center gap-4 ',
-        'intent:text-dark-100 cursor-pointer',
+        'intent:text-dark-100 dark:intent:text-light-100 cursor-pointer',
         depth === 0 && 'font-medium',
         depth > 0 && 'border-l',
-        isActive ? 'text-dark-100 border-dark-100 ' : 'border-light-40',
+        isActive ? 'text-dark-100 dark:text-light-100 border-current ' : 'border-light-40 dark:border-dark-40',
       ]}
       style={`padding-left: calc(var(--spacing) * ${depth * 4})`}
       href={`/docs/framework/${framework}/style/${style}/${item.slug}`}

website/src/components/docs/TableOfContents/TableOfContents.desktop.tsx

@@ -33,7 +33,7 @@ export function TableOfContentsDesktop({ headings, activeId, onNavigate, classNa
               <a
                 href={`#${heading.slug}`}
                 onClick={e => handleClick(e, heading.slug)}
-                className={clsx('text-sm block', activeId === heading.slug ? 'text-dark-100' : 'text-dark-40 intent:text-dark-100',
+                className={clsx('text-sm block', activeId === heading.slug ? 'text-dark-100 dark:text-light-100' : 'text-dark-40 dark:text-light-40 intent:text-dark-100 dark:intent:text-light-100',
                 )}
                 style={{ paddingLeft: `calc(${(heading.depth - 2)} * var(--spacing) * 4)` }}
               >

website/src/components/docs/TableOfContents/TableOfContents.mobile.tsx

@@ -24,7 +24,7 @@ export function TableOfContentsMobile({ headings, activeId, onNavigate, classNam
 
   return (
     <div
-      className={clsx('border-b border-light-40 bg-light-80 px-6 lg:px-12 h-(--h) flex items-center', className)}
+      className={clsx('border-b border-light-40 dark:border-dark-80 bg-light-80 dark:bg-dark-100 px-6 lg:px-12 h-(--h) flex items-center', className)}
       style={{ '--h': 'var(--mobile-toc-h)' } as React.CSSProperties}
     >
       <div className="w-full max-w-3xl mx-auto">