diff --git a/astro.config.mjs b/astro.config.mjs
index ccdb54a..9e19263 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -11,7 +11,11 @@ export default defineConfig({
     smartypants: true,
     syntaxHighlight: "shiki",
     shikiConfig: {
-      theme: "catppuccin-mocha",
+      // theme: "catppuccin-mocha",
+      themes: {
+        light: "catppuccin-latte",
+        dark: "catppuccin-macchiato",
+      },
     },
     rehypePlugins: [
       [
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 08539ca..cb2eb76 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -106,6 +106,10 @@ blockquote {
   @apply mt-6 border-l-2 pl-6 italic border-primary;
 }
 
+pre {
+  @apply border rounded;
+}
+
 ul {
   @apply my-6 ml-6 list-disc [&>li]:mt-2;
 }
@@ -236,3 +240,14 @@ td {
 .callout a {
   @apply hover:text-background;
 }
+
+/* shiki theme */
+html.dark .astro-code,
+html.dark .astro-code 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;
+}