change shiki dark theme and add light theme

package.json

@@ -17,6 +17,7 @@
     "@astrojs/solid-js": "^4.4.2",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@pagefind/default-ui": "^1.1.1",
+    "@shikijs/rehype": "^1.22.0",
     "@types/node": "^20.14.11",
     "astro": "^4.15.9",
     "astro-breadcrumbs": "^2.3.1",

src/config/io/markdown.ts

@@ -11,6 +11,7 @@ import type {
 } from "@astrojs/markdown-remark";
 import { createMarkdownProcessor } from "@astrojs/markdown-remark";
 import { remarkAlert } from "remark-github-blockquote-alert";
+import rehypeShiki from "@shikijs/rehype";
 import sectionize from "@hbsnow/rehype-sectionize";
 import type { ShikiTransformer } from "shiki";
 
@@ -122,14 +123,28 @@ const shikiRewriteTypelinks: ShikiTransformer = {
 };
 
 export const markdownConfig: AstroMarkdownOptions = {
-  syntaxHighlight: "shiki",
+  syntaxHighlight: false,
-  shikiConfig: {
-    theme: "material-theme-ocean",
-    wrap: true,
-    transformers: [shikiRewriteTypelinks],
-  },
   remarkPlugins: [remarkParseAtTypes, [remarkAlert, { legacyTitle: true }]],
   rehypePlugins: [
+    [rehypeShiki, {
+      themes: {
+        light: "slack-ochin",
+        dark: "slack-dark",
+      },
+      colorReplacements: {
+        "slack-ochin": {
+          "#357b42": "#989eb9", // comments
+          "#b1108e": "#224bbb", // fields
+        },
+        "slack-dark": {
+          "#222222": "#0f111a", // bg
+          "#6a9955": "#525666", // comments
+        },
+      },
+      defaultColor: false,
+      wrap: true,
+      transformers: [shikiRewriteTypelinks],
+    }],
     // FIXME: incompatible types between unified/Plugin and Astro/RehypePlugin
     [sectionize as RehypePlugin, { idPropertyName: "id" }],
     rehypeRewriteTypelinks,

src/styles/css-config/code.css

@@ -5,6 +5,18 @@
   background-color: hsl(var(--blue) 85 35 / 0.1);
 }
 
+.shiki,
+.shiki span {
+  color: var(--shiki-light);
+  background-color: var(--shiki-light-bg);
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark);
+  background-color: var(--shiki-dark-bg);
+}
+
 pre {
   padding: 1rem;
   border-radius: 0.618rem;

yarn.lock

@@ -1402,6 +1402,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/core@npm:1.22.0":
+  version: 1.22.0
+  resolution: "@shikijs/core@npm:1.22.0"
+  dependencies:
+    "@shikijs/engine-javascript": "npm:1.22.0"
+    "@shikijs/engine-oniguruma": "npm:1.22.0"
+    "@shikijs/types": "npm:1.22.0"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    "@types/hast": "npm:^3.0.4"
+    hast-util-to-html: "npm:^9.0.3"
+  checksum: 10c0/d663fee39180680ccb9ea8dd5abb397e953375989a4fd52fb65a2616388db21d1d0a715a68afae93c4b48f0e037bd0c3a600cd52fb8560461ba87e2102e00cd1
+  languageName: node
+  linkType: hard
+
 "@shikijs/engine-javascript@npm:1.20.0":
   version: 1.20.0
   resolution: "@shikijs/engine-javascript@npm:1.20.0"
@@ -1413,6 +1427,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/engine-javascript@npm:1.22.0":
+  version: 1.22.0
+  resolution: "@shikijs/engine-javascript@npm:1.22.0"
+  dependencies:
+    "@shikijs/types": "npm:1.22.0"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    oniguruma-to-js: "npm:0.4.3"
+  checksum: 10c0/f1a2c3c6ad5db549229dafe11a57bef2b0896e5c1b33dec15bd323e4e785dc469a277b088a89f774a66b30c8c62e9e5b76d3d485f46096dc290329aab33d92eb
+  languageName: node
+  linkType: hard
+
 "@shikijs/engine-oniguruma@npm:1.20.0":
   version: 1.20.0
   resolution: "@shikijs/engine-oniguruma@npm:1.20.0"
@@ -1423,6 +1448,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/engine-oniguruma@npm:1.22.0":
+  version: 1.22.0
+  resolution: "@shikijs/engine-oniguruma@npm:1.22.0"
+  dependencies:
+    "@shikijs/types": "npm:1.22.0"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+  checksum: 10c0/a57f2352dc35e6f3705348488c0ec2b91a99380489917bddc1d1444b775ba529fc99491ac0c16d0add6d2552ca9fd197e88bd47b0166d163bfc6a80345294452
+  languageName: node
+  linkType: hard
+
+"@shikijs/rehype@npm:^1.22.0":
+  version: 1.22.0
+  resolution: "@shikijs/rehype@npm:1.22.0"
+  dependencies:
+    "@shikijs/types": "npm:1.22.0"
+    "@types/hast": "npm:^3.0.4"
+    hast-util-to-string: "npm:^3.0.1"
+    shiki: "npm:1.22.0"
+    unified: "npm:^11.0.5"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/9c6d8cbd8e6deb4032fd1bda7934c26f8ebfca7805c7702cade3bf2eaeb5fa7237ece12eac2a66b96139866256aad3a70eddf4cfe4d94572d05c6ba9baf4be5f
+  languageName: node
+  linkType: hard
+
 "@shikijs/types@npm:1.20.0":
   version: 1.20.0
   resolution: "@shikijs/types@npm:1.20.0"
@@ -1433,6 +1482,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/types@npm:1.22.0":
+  version: 1.22.0
+  resolution: "@shikijs/types@npm:1.22.0"
+  dependencies:
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/220ba56b046dd07cb5e12c02f061e926129d5295fba60c4910a45d65312cdcbcc120329ec550195fdb85ab60ae9e3af31430bffce3ceba80b30d21e32467c013
+  languageName: node
+  linkType: hard
+
 "@shikijs/vscode-textmate@npm:^9.2.2":
   version: 9.2.2
   resolution: "@shikijs/vscode-textmate@npm:9.2.2"
@@ -1440,6 +1499,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/vscode-textmate@npm:^9.3.0":
+  version: 9.3.0
+  resolution: "@shikijs/vscode-textmate@npm:9.3.0"
+  checksum: 10c0/6aa80798b7d7f8be8029bb397ce1b9b75c0d0963d6aa444b9ae165595ceee931cf3767ca1681ba71a6e27484eeccab584bd38db3420da477f1a8d745040b1b1f
+  languageName: node
+  linkType: hard
+
 "@sinclair/typebox@npm:^0.27.8":
   version: 0.27.8
   resolution: "@sinclair/typebox@npm:0.27.8"
@@ -4336,6 +4402,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-string@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "hast-util-to-string@npm:3.0.1"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/b5fa1912a6ba6131affae52a0f4394406c4c0d23c2b0307f1d69988f1030c7bb830289303e67c5ad8f674f5f23a454c1dcd492c39e45a22c1f46d3c9bce5bd0c
+  languageName: node
+  linkType: hard
+
 "hast-util-to-text@npm:^4.0.2":
   version: 4.0.2
   resolution: "hast-util-to-text@npm:4.0.2"
@@ -6316,6 +6391,7 @@ __metadata:
     "@biomejs/biome": "npm:^1.8.3"
     "@hbsnow/rehype-sectionize": "npm:^1.0.7"
     "@pagefind/default-ui": "npm:^1.1.1"
+    "@shikijs/rehype": "npm:^1.22.0"
     "@types/node": "npm:^20.14.11"
     astro: "npm:^4.15.9"
     astro-breadcrumbs: "npm:^2.3.1"
@@ -6837,6 +6913,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shiki@npm:1.22.0":
+  version: 1.22.0
+  resolution: "shiki@npm:1.22.0"
+  dependencies:
+    "@shikijs/core": "npm:1.22.0"
+    "@shikijs/engine-javascript": "npm:1.22.0"
+    "@shikijs/engine-oniguruma": "npm:1.22.0"
+    "@shikijs/types": "npm:1.22.0"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/750ee1751340ad65368921a4a4f29249b9632c8b547a0c4052eb8a467be0da8b3af7a5e8751482a9e387f67053f8c8a7e5f50bf1be6fcf6f91ed3952bd20965e
+  languageName: node
+  linkType: hard
+
 "shiki@npm:^1.10.3, shiki@npm:^1.16.2":
   version: 1.20.0
   resolution: "shiki@npm:1.20.0"