Custom shiki theme.

Author: anthonyshew

docs/site/app/global.css

@@ -133,6 +133,24 @@ code {
   --vaul-overlay-background: 255, 255, 255;
   --vaul-overlay-background-start: rgba(0, 0, 0, 0);
   --vaul-overlay-background-end: rgba(0, 0, 0, 0.4);
+
+  pre {
+    --shiki-color-text: var(--ds-gray-1000);
+    --shiki-background: transparent;
+    --shiki-token-constant: var(--ds-blue-900);
+    --shiki-token-string: var(--ds-green-900);
+    --shiki-token-comment: var(--ds-gray-900);
+    --shiki-token-keyword: var(--ds-pink-900);
+    --shiki-token-parameter: var(--ds-amber-900);
+    --shiki-token-function: var(--ds-purple-900);
+    --shiki-token-string-expression: var(--ds-green-900);
+    --shiki-token-punctuation: var(--ds-gray-1000);
+    --shiki-token-link: var(--ds-green-900);
+    --shiki-token-inserted: var(--ds-green-900);
+    --shiki-token-deleted: var(--ds-red-900);
+
+    background: black;
+  }
 }
 
 :root,
@@ -253,6 +271,10 @@ code {
 
   --ds-background-100: hsla(var(--ds-background-100-value), 1);
   --ds-background-200: hsla(var(--ds-background-200-value), 1);
+
+  pre {
+    background: white;
+  }
 }
 
 .dark,

docs/site/lib/nav-links.tsx

@@ -6,6 +6,7 @@ import {
 import type { LinkItemType } from "fumadocs-ui/layouts/links";
 
 export const navLinks: LinkItemType[] = [
+  { url: "/repo/docs", text: "Docs", icon: <BookOpenIcon /> },
   { url: "/blog", text: "Blog", icon: <BookOpenIcon /> },
   { url: "/showcase", text: "Showcase", icon: <StarIcon /> },
   {

docs/site/package.json

@@ -46,6 +46,7 @@
     "remark-mdx": "^3.1.0",
     "remark-stringify": "^11.0.0",
     "semver": "^7.3.8",
+    "shiki": "^3.1.0",
     "swr": "2.2.6-beta.0",
     "zod": "^3.24.2"
   },

docs/site/source.config.ts

@@ -4,6 +4,7 @@ import {
   frontmatterSchema,
 } from "fumadocs-mdx/config";
 import { z } from "zod";
+import { createCssVariablesTheme } from "shiki";
 
 export const { docs: repoDocs, meta: repoMeta } = defineDocs({
   dir: "content/repo-docs",
@@ -51,5 +52,20 @@ export const { docs: openapiDocs, meta: openapiMeta } = defineDocs({
   dir: "content/openapi",
 });
 
+const theme = createCssVariablesTheme({
+  name: "css-variables",
+  variablePrefix: "--shiki-",
+  variableDefaults: {},
+});
+
 // eslint-disable-next-line import/no-default-export
-export default defineConfig();
+export default defineConfig({
+  mdxOptions: {
+    rehypeCodeOptions: {
+      themes: {
+        light: theme,
+        dark: theme,
+      },
+    },
+  },
+});

docs/site/turbo.json

@@ -43,7 +43,7 @@
     },
     "write-private-files": {
       "cache": false,
-      "env": ["SITE_ANALYTICS_MODULE_CODE", "SITE_ANALYTICS_MODULE_CODE"]
+      "env": ["SITE_ANALYTICS_MODULE_CODE", "MIDDLEWARE_MODULE_CODE"]
     },
     "index-docs": {
       "dependsOn": ["build"],