theme code snippets

bacher · bacher · commit d28cf9f1a9d3 · 2025-05-20T12:38:01.000+02:00
diff --git a/landing/app/layout.tsx b/landing/app/layout.tsx
@@ -3,6 +3,8 @@ import type { Metadata } from 'next';
 import Head from 'next/head';
 import { Geist, Geist_Mono } from 'next/font/google';
 
+import { ThemeProvider } from '@/components/ThemeProvider';
+
 import './globals.css';
 
 const geistSans = Geist({
@@ -29,7 +31,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider>{children}</ThemeProvider>
       </body>
     </html>
   );
diff --git a/landing/components/CodeSnippet.tsx b/landing/components/CodeSnippet.tsx
@@ -2,7 +2,11 @@
 
 import { Suspense } from 'react';
 import dynamic from 'next/dynamic';
-import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import {
+  docco,
+  stackoverflowDark,
+} from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { useTheme } from '@/components/ThemeProvider';
 
 const SyntaxHighlighter = dynamic(() => import('react-syntax-highlighter'));
 
@@ -11,18 +15,25 @@ type Props = {
   children: string;
 };
 
-export const CodeSnippet = ({ type, children }: Props) => (
-  <div className="my-2">
-    <Suspense
-      fallback={
-        <div className="monospaced whitespace-pre-wrap bg-secondary px-2 py-[0.5em] border-l-4">
+export const CodeSnippet = ({ type, children }: Props) => {
+  const theme = useTheme();
+
+  return (
+    <div className="my-2">
+      <Suspense
+        fallback={
+          <div className="monospaced whitespace-pre-wrap bg-secondary px-2 py-[0.5em] border-l-4">
+            {children}
+          </div>
+        }
+      >
+        <SyntaxHighlighter
+          language={type}
+          style={theme === 'light' ? docco : stackoverflowDark}
+        >
           {children}
-        </div>
-      }
-    >
-      <SyntaxHighlighter language={type} style={docco}>
-        {children}
-      </SyntaxHighlighter>
-    </Suspense>
-  </div>
-);
+        </SyntaxHighlighter>
+      </Suspense>
+    </div>
+  );
+};
diff --git a/landing/components/ThemeProvider.tsx b/landing/components/ThemeProvider.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useLayoutEffect,
+  useState,
+} from 'react';
+
+export type Theme = 'light' | 'dark';
+
+type ThemeProviderState = {
+  theme: Theme;
+};
+
+const ThemeContext = createContext<ThemeProviderState>({
+  theme: 'light',
+});
+
+export const ThemeProvider = ({ children }: { children?: ReactNode }) => {
+  const [themeState, setThemeState] = useState<ThemeProviderState>({
+    theme: 'light',
+  });
+
+  useLayoutEffect(() => {
+    const match = window.matchMedia('(prefers-color-scheme:dark)');
+
+    function onChange(event: { matches: boolean }) {
+      setThemeState((themeState) => {
+        const targetTheme = event.matches ? 'dark' : 'light';
+
+        if (themeState.theme === targetTheme) {
+          return themeState;
+        }
+
+        return {
+          ...themeState,
+          theme: targetTheme,
+        };
+      });
+    }
+
+    onChange(match);
+
+    match.addEventListener('change', onChange);
+    return () => {
+      match.removeEventListener('change', onChange);
+    };
+  }, []);
+
+  return <ThemeContext value={themeState}>{children}</ThemeContext>;
+};
+
+export function useTheme(): Theme {
+  return useContext(ThemeContext).theme;
+}
