From c71deb18cce71942cb78951852817e481ff5bb67 Mon Sep 17 00:00:00 2001
From: aegroto <aegroto@protonmail.com>
Date: Tue, 19 Nov 2024 13:56:52 +0100
Subject: [PATCH] chore: dark mode code rendering based on useDarkMode hook

---
 components/codeblock.js         | 15 +++++++--------
 components/codeblock.module.css | 11 -----------
 2 files changed, 7 insertions(+), 19 deletions(-)
 delete mode 100644 components/codeblock.module.css

diff --git a/components/codeblock.js b/components/codeblock.js
index 41cb32463..90c525954 100644
--- a/components/codeblock.js
+++ b/components/codeblock.js
@@ -2,14 +2,14 @@ import { useMemo, useEffect, useState, Fragment } from 'react'
 import { createHighlighter, makeSingletonHighlighter } from 'shiki'
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
 import { jsx, jsxs } from 'react/jsx-runtime'
-import './codeblock.module.css'
+import useDarkMode from './dark-mode'
 
 const SHIKI_LIGHT_THEME = 'github-light'
 const SHIKI_DARK_THEME = 'github-dark'
 
 const getHighlighter = makeSingletonHighlighter(createHighlighter)
 
-export const codeToHast = async ({ code, language }) => {
+const codeToHast = async ({ code, language, dark }) => {
   const highlighter = await getHighlighter({
     themes: [SHIKI_LIGHT_THEME, SHIKI_DARK_THEME],
     langs: [language]
@@ -17,28 +17,27 @@ export const codeToHast = async ({ code, language }) => {
 
   return highlighter.codeToHast(code, {
     lang: language,
-    themes: {
-      light: SHIKI_LIGHT_THEME,
-      dark: SHIKI_DARK_THEME
-    }
+    theme: dark ? SHIKI_DARK_THEME : SHIKI_LIGHT_THEME
   })
 }
 
 export default function CodeBlock ({ code, language }) {
   const [hast, setHast] = useState(undefined)
+  const [darkMode] = useDarkMode()
 
   useEffect(() => {
     async function processCode () {
       const hast = await codeToHast({
         code,
-        language
+        language,
+        dark: darkMode
       })
 
       setHast(hast)
     }
 
     processCode()
-  }, [])
+  }, [darkMode])
 
   const element = useMemo(() => {
     if (!hast) {
diff --git a/components/codeblock.module.css b/components/codeblock.module.css
deleted file mode 100644
index 18c18bc5c..000000000
--- a/components/codeblock.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@media (prefers-color-scheme: dark) {
-  .shiki,
-  .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-  }
-}
\ No newline at end of file