feat: Dark Mode

apps/example-apps/react/examples/styling/tailwind/CustomNode.jsx

@@ -5,7 +5,7 @@ function CustomNode({ data }) {
   return (
     <div className="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">
       <div className="flex">
-        <div className="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100">
+        <div className="rounded-full w-12 h-12 flex justify-center items-center bg-card">
           {data.emoji}
         </div>
         <div className="ml-2">
@@ -14,16 +14,8 @@ function CustomNode({ data }) {
         </div>
       </div>
 
-      <Handle
-        type="target"
-        position={Position.Top}
-        className="w-16 !bg-teal-500"
-      />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        className="w-16 !bg-teal-500"
-      />
+      <Handle type="target" position={Position.Top} className="w-16 !bg-teal-500" />
+      <Handle type="source" position={Position.Bottom} className="w-16 !bg-teal-500" />
     </div>
   );
 }

apps/example-apps/react/tutorials/components/complete/components/nodes/num-node.tsx

@@ -76,7 +76,7 @@ export function NumNode({ id, data }: NodeProps<NumNode>) {
         </div>
       </BaseNodeContent>
 
-      <BaseNodeFooter className="bg-gray-100 items-end px-0 py-1 w-full rounded-b-md">
+      <BaseNodeFooter className="bg-card items-end px-0 py-1 w-full rounded-b-md">
         <LabeledHandle title="out" type="source" position={Position.Right} />
       </BaseNodeFooter>
     </BaseNode>

apps/example-apps/react/tutorials/components/complete/components/nodes/sum-node.tsx

@@ -78,7 +78,7 @@ export function SumNode({ id }: NodeProps<SumNode>) {
         <LabeledHandle title="x" id="x" type="target" position={Position.Left} />
         <LabeledHandle title="y" id="y" type="target" position={Position.Left} />
       </BaseNodeContent>
-      <BaseNodeFooter className="bg-gray-100 items-end px-0 py-1 w-full rounded-b-md">
+      <BaseNodeFooter className="bg-card items-end px-0 py-1 w-full rounded-b-md">
         <LabeledHandle title="out" type="source" position={Position.Right} />
       </BaseNodeFooter>
     </BaseNode>

apps/example-apps/react/tutorials/webaudio/custom-node/nodes/Osc.jsx

@@ -15,11 +15,7 @@ export default function Osc({ id, data }) {
 
   return (
     <div className={tw('rounded-md bg-white shadow-xl')}>
-      <p
-        className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}
-      >
-        Osc
-      </p>
+      <p className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}>Osc</p>
 
       <label className={tw('flex flex-col px-2 py-1')}>
         <p className={tw('text-xs font-bold mb-2')}>Frequency</p>
@@ -34,7 +30,7 @@ export default function Osc({ id, data }) {
         <p className={tw('text-right text-xs')}>{data.frequency} Hz</p>
       </label>
 
-      <hr className={tw('border-gray-200 mx-2')} />
+      <hr className={tw('border-border mx-2')} />
 
       <label className={tw('flex flex-col px-2 pt-1 pb-4')}>
         <p className={tw('text-xs font-bold mb-2')}>Waveform</p>

apps/example-apps/react/tutorials/webaudio/custom-nodes/nodes/Osc.jsx

@@ -15,11 +15,7 @@ export default function Osc({ id, data }) {
 
   return (
     <div className={tw('rounded-md bg-white shadow-xl')}>
-      <p
-        className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}
-      >
-        Osc
-      </p>
+      <p className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}>Osc</p>
 
       <label className={tw('flex flex-col px-2 py-1')}>
         <p className={tw('text-xs font-bold mb-2')}>Frequency</p>
@@ -34,7 +30,7 @@ export default function Osc({ id, data }) {
         <p className={tw('text-right text-xs')}>{data.frequency} Hz</p>
       </label>
 
-      <hr className={tw('border-gray-200 mx-2')} />
+      <hr className={tw('border-border mx-2')} />
 
       <label className={tw('flex flex-col px-2 pt-1 pb-4')}>
         <p className={tw('text-xs font-bold mb-2')}>Waveform</p>

apps/example-apps/react/tutorials/webaudio/demo/nodes/Osc.jsx

@@ -15,11 +15,7 @@ export default function Osc({ id, data }) {
 
   return (
     <div className={tw('rounded-md bg-white shadow-xl')}>
-      <p
-        className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}
-      >
-        Osc
-      </p>
+      <p className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}>Osc</p>
 
       <label className={tw('flex flex-col px-2 py-1')}>
         <p className={tw('text-xs font-bold mb-2')}>Frequency</p>
@@ -34,7 +30,7 @@ export default function Osc({ id, data }) {
         <p className={tw('text-right text-xs')}>{data.frequency} Hz</p>
       </label>
 
-      <hr className={tw('border-gray-200 mx-2')} />
+      <hr className={tw('border-border mx-2')} />
 
       <label className={tw('flex flex-col px-2 pt-1 pb-4')}>
         <p className={tw('text-xs font-bold mb-2')}>Waveform</p>

apps/example-apps/react/tutorials/webaudio/hardcoded-audio/nodes/Osc.jsx

@@ -15,11 +15,7 @@ export default function Osc({ id, data }) {
 
   return (
     <div className={tw('rounded-md bg-white shadow-xl')}>
-      <p
-        className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}
-      >
-        Osc
-      </p>
+      <p className={tw('rounded-t-md px-2 py-1 bg-pink-500 text-white text-sm')}>Osc</p>
 
       <label className={tw('flex flex-col px-2 py-1')}>
         <p className={tw('text-xs font-bold mb-2')}>Frequency</p>
@@ -34,7 +30,7 @@ export default function Osc({ id, data }) {
         <p className={tw('text-right text-xs')}>{data.frequency} Hz</p>
       </label>
 
-      <hr className={tw('border-gray-200 mx-2')} />
+      <hr className={tw('border-border mx-2')} />
 
       <label className={tw('flex flex-col px-2 pt-1 pb-4')}>
         <p className={tw('text-xs font-bold mb-2')}>Waveform</p>

apps/example-apps/svelte/examples/misc/threlte-flow/NodeWrapper.svelte

@@ -3,10 +3,10 @@
 </script>
 
 <div
-  class="flex flex-col border border-solid border-gray-200 h-full rounded-2xl bg-white/70 shadow-[0_7px_9px_0_rgba(0,0,0,0.02)]"
+  class="flex flex-col border border-solid border-border h-full rounded-2xl bg-white/70 shadow-[0_7px_9px_0_rgba(0,0,0,0.02)]"
 >
   <div
-    class="text-xs px-3 py-2 border-b border-solid border-gray-200 font-mono font-semibold rounded-t-2xl family-mono text-[#0F172A]"
+    class="text-xs px-3 py-2 border-b border-solid border-border font-mono font-semibold rounded-t-2xl family-mono text-[#0F172A]"
   >
     {label}
   </div>

apps/example-apps/svelte/examples/styling/tailwind/CustomNode.svelte

@@ -7,7 +7,7 @@
 <div class="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">
   <div class="flex">
     <div
-      class="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100"
+      class="rounded-full w-12 h-12 flex justify-center items-center bg-card"
     >
       {data.emoji}
     </div>

packages/xy-shared/components/authors-list/index.tsx

@@ -57,7 +57,7 @@ function Author({ name, title, image, url, className, noLink, slim }: AuthorProp
         <LinkOrSpan noLink={noLink} url={url} className="!w-10 !h-10 mr-2">
           <img
             src={image}
-            className="inline w-10 h-10 border border-gray-100 border-solid rounded-full"
+            className="inline w-10 h-10 border border-border border-solid rounded-full"
           />
         </LinkOrSpan>
       )}

packages/xy-shared/components/blog-post/embeds.tsx

@@ -11,7 +11,33 @@ import NxImage from 'next/image';
 import { cn } from '../../lib/utils';
 
 import { LiteYouTubeEmbed } from '../liteyoutube-embed';
-import { wideNegativeMargin } from '../../lib/wide-negative-margin';
+
+// Well this is a pretty funky class, huh. I'm gonna try and break it down a bit
+// so we can understand what's going on here:
+//
+// sm:
+//  This is a tailwind breakpoint. It means the class will only apply on screens
+//  that are at least 640px wide.
+//
+// -mx
+//  This utility sets a *negative* margin, and its ultimately how we get our
+//  content to be wider than its container.
+//
+// calc((100vw-768px)/2)
+//  768px is the max width of our content container. 100vh is the full width of
+//  the viewport. So this expression calculates how much space is left on the
+//  screen for us to fill. We divide it by two because we're applying this margin
+//  equally on both sides of the embed.
+//
+// min(...,12rem)
+//  As the display gets wider, we want to limit the width of our embeds to do
+//  something sensible so they don't end up spanning the entire width of someone's
+//  ultra-wide monitor. 12rem was chosen as an arbitrary sensible limit, it corresponds
+//  to tailwind's `mx-44` utility.
+//
+// Use the actual content width token if available, fall back to 768px.
+const wideNegativeMargin =
+  'sm:-mx-[min(calc((100vw-var(--nextra-content-width,768px))/2),12rem)]';
 
 // IMAGES ----------------------------------------------------------------------
 
@@ -69,14 +95,15 @@ export function Image({
 export type EmbedProps = {
   src: string;
   lazy?: boolean;
+  wide?: boolean;
   className?: string;
 };
 
 type IFrameProps = {
   loading?: 'lazy' | 'eager';
 };
 
-export function Embed({ src, lazy, className }: EmbedProps) {
+export function Embed({ src, lazy, wide = true, className }: EmbedProps) {
   const iFrameProps: IFrameProps = {};
 
   if (lazy) {
@@ -87,7 +114,7 @@ export function Embed({ src, lazy, className }: EmbedProps) {
     <div
       className={cn(
         'relative aspect-video my-8 mx-0 rounded-xl bg-gray-50',
-        wideNegativeMargin,
+        wide && wideNegativeMargin,
         className,
       )}
     >

packages/xy-shared/components/client-logos/index.tsx

@@ -28,7 +28,10 @@ export default function ClientLogos({
             key={logo.alt}
             src={logo.src}
             alt={logo.alt}
-            className={cn('w-auto', logo.className)}
+            className={cn(
+              'w-auto transition-[filter] dark:invert dark:brightness-0 dark:contrast-200',
+              logo.className,
+            )}
           />
         ))}
       </div>

packages/xy-shared/components/flows/flow-a/index.tsx

@@ -31,6 +31,7 @@ export const FlowA: FC = () => {
   return (
     <ReactFlow
       id="a"
+      className="text-black"
       defaultNodes={nodes}
       defaultEdges={edges}
       fitView
@@ -43,4 +44,3 @@ export const FlowA: FC = () => {
     </ReactFlow>
   );
 };
-

packages/xy-shared/components/flows/flow-b/index.tsx

@@ -120,7 +120,7 @@ function Flow() {
   return (
     <ReactFlow
       id="b"
-      className="bg-[#141414]"
+      className="bg-[#141414] text-black"
       defaultNodes={nodes}
       defaultEdges={edges}
       nodeTypes={nodeTypes}

packages/xy-shared/components/flows/flow-c/index.tsx

@@ -124,7 +124,7 @@ export const FlowC = () => {
   return (
     <ReactFlow
       id="c"
-      className="home-flow-c"
+      className="home-flow-c text-black"
       defaultNodes={nodes}
       defaultEdges={edges}
       fitView
@@ -151,4 +151,3 @@ export const FlowC = () => {
     </ReactFlow>
   );
 };
-

packages/xy-shared/components/flows/hero-flow/node-wrapper.tsx

@@ -7,11 +7,11 @@ type NodeWrapperProps = {
 
 export default function NodeWrapper({ label, children }: NodeWrapperProps) {
   return (
-    <div className="flex flex-col border border-solid border-gray-200 h-full rounded-2xl bg-white/70 shadow-[0_7px_9px_0_rgba(0,0,0,0.02)]">
-      <div className="text-xs px-3 py-2 border-b border-solid border-gray-200 font-mono font-semibold rounded-t-2xl">
+    <div className="flex flex-col border border-solid border-border h-full rounded-2xl bg-background/70 shadow-[0_7px_9px_0_rgba(0,0,0,0.02)]">
+      <div className="text-xs px-3 py-2 border-b border-solid border-border font-mono font-semibold rounded-t-2xl">
         {label}
       </div>
-      <div className="relative bg-white p-3 flex rounded-b-2xl">{children}</div>
+      <div className="relative bg-background p-3 flex rounded-b-2xl">{children}</div>
     </div>
   );
 }

packages/xy-shared/components/handle/index.tsx

@@ -48,7 +48,7 @@ function Handle({
         data-position={position}
         data-to={to}
         className={cn(
-          'absolute rounded-full border-2 border-solid bg-white z-20 border-primary',
+          'absolute rounded-full border-2 border-solid bg-background z-20 border-primary',
           handleWidthClass,
           handleHeightClass,
           handleClassName,

packages/xy-shared/components/headline-node/index.tsx

@@ -10,7 +10,7 @@ type HeadlineNodeProps = {
 function HeadlineNode({ children, className, style }: HeadlineNodeProps) {
   return (
     <span
-      className={cn(['relative shadow-lg py-2 rounded-xl bg-white', className])}
+      className={cn(['relative shadow-lg py-2 rounded-xl bg-background', className])}
       style={style}
     >
       <span

packages/xy-shared/components/hero/index.tsx

@@ -40,10 +40,10 @@ export function Hero({
     <div ref={ref}>
       {backgroundVariant === 'gradient' && (
         <div
-          className="absolute -mt-16 opacity-10 w-[100vw] h-[70vw] left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+          className="absolute -mt-16 opacity-10 dark:opacity-20 w-[100vw] h-[70vw] left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
           style={{
             background:
-              'radial-gradient(rgba(68,91,222,1) 0%, rgba(215,78,243,1) 25%, rgba(255,255,255,1) 50%)',
+              'radial-gradient(rgba(68,91,222,1) 0%, rgba(215,78,243,1) 25%, hsl(var(--background)) 60%)',
           }}
         />
       )}

packages/xy-shared/components/html/index.tsx

@@ -1,18 +1,13 @@
 'use client';
 
 import { FC, ReactNode } from 'react';
-import { usePathname } from 'next/navigation';
 import { ntDapperFont } from '../../fonts/index';
 import { cn } from '../../lib/utils';
 
 export const Html: FC<{ children: ReactNode }> = ({ children }) => {
-  const pathname = usePathname();
-  // we need this to be able to override nextra theme styles for specific pages
-  const routeSegment = pathname.split('/', 2)[1];
-
   return (
     <html
-      className={cn(ntDapperFont.className, routeSegment)}
+      className={cn(ntDapperFont.className)}
       dir="ltr"
       lang="en"
       suppressHydrationWarning

packages/xy-shared/components/menubar/index.tsx

@@ -97,7 +97,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-gray-100 focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-card focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -257,4 +257,3 @@ export {
   MenubarSubTrigger,
   MenubarSubContent,
 };
-

packages/xy-shared/components/pricing-table/index.tsx

@@ -71,18 +71,18 @@ const PricingTable = ({
             className,
           )}
         >
-          <div className="rounded-full flex gap-1 bg-gray-100 p-2 ">
+          <div className="rounded-full flex gap-1 bg-card p-2 ">
             <Button
               variant="secondary"
               onClick={() => setBillingInterval(BillingInterval.MONTH)}
-              className={isMonthly ? '' : 'text-gray-400 bg-gray-100 shadow-none'}
+              className={isMonthly ? '' : 'text-gray-400 bg-card shadow-none'}
             >
               Monthly
             </Button>
             <Button
               variant="secondary"
               onClick={() => setBillingInterval(BillingInterval.YEAR)}
-              className={!isMonthly ? '' : 'text-gray-400 bg-gray-100 shadow-none'}
+              className={!isMonthly ? '' : 'text-gray-400 bg-card shadow-none'}
             >
               Yearly
             </Button>

packages/xy-shared/components/pricing-table/subscription-plan.tsx

@@ -117,7 +117,7 @@ export default function Plan({
       className={cn(
         'p-8 md:p-12 lg:p-14',
         highlighted &&
-          'border-x border-solid border-gray-100 bg-gradient-to-b from-primary/5',
+          'border-x border-solid border-border bg-gradient-to-b from-primary/5',
       )}
     >
       <div className={cn('font-bold text-4xl', highlighted && 'text-primary')}>

packages/xy-shared/components/pro-example-viewer/index.tsx

@@ -153,13 +153,12 @@ const ProExampleViewer: FC<{
               : queryParams;
 
           const src = appendSearchParams(iframeBaseSrc, toSearchParams(perIframeParams));
-
           return (
             <iframe
               key={index}
               src={src}
               title={`${slug} preview ${index}`}
-              className={cn('block h-[645px] bg-white', sideBySide ? 'w-1/2' : 'w-full')}
+              className={cn('block h-[645px] bg-background', sideBySide ? 'w-1/2' : 'w-full')}
             />
           );
         })}