diff --git a/src/components/Code.jsx b/src/components/Code.jsx
index 602dba23..e1e1d247 100644
--- a/src/components/Code.jsx
+++ b/src/components/Code.jsx
@@ -64,7 +64,7 @@ function CopyButton({ code }) {
         'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
         copied
           ? 'bg-orange-400/10 ring-1 ring-inset ring-orange-400/20'
-          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
+          : 'bg-black/5 dark:bg-white/5 hover:bg-black/7.5 dark:hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
       )}
       onClick={() => {
         window.navigator.clipboard.writeText(code).then(() => {
@@ -101,7 +101,7 @@ function CodePanelHeader({ tag, label }) {
   }
 
   return (
-    <div className="flex h-9 items-center gap-2 border-y border-b-white/7.5 border-t-transparent bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
+    <div className="flex h-9 items-center gap-2 border-y border-b-black/7.5 border-t-transparent bg-white/2.5 bg-zinc-100 px-4 dark:border-b-white/5 dark:bg-white/1">
       {tag && (
         <div className="dark flex">
           <Tag variant="small">{tag}</Tag>
@@ -142,9 +142,9 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
   }
 
   return (
-    <div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
+    <div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-300 dark:border-zinc-800 bg-stone-100 dark:bg-zinc-900 px-4 dark:border-zinc-800 dark:bg-transparent">
       {title && (
-        <h3 className="mr-auto pt-3 text-xs font-semibold text-white">
+        <h3 className="mr-auto pt-3 text-xs font-semibold text-black dark:text-white">
           {title}
         </h3>
       )}
@@ -156,7 +156,7 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
                 'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
                 childIndex === selectedIndex
                   ? 'border-orange-500 text-orange-400'
-                  : 'border-transparent text-zinc-400 hover:text-zinc-300'
+                  : 'border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300'
               )}
             >
               {getPanelTitle(child.props)}
@@ -266,7 +266,7 @@ export function CodeGroup({ children, title, ...props }) {
     <CodeGroupContext.Provider value={true}>
       <Container
         {...containerProps}
-        className="not-prose my-6 overflow-hidden rounded-l bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
+        className="not-prose my-6 overflow-hidden rounded-md bg-zinc-50 ring-1 ring-black/10 dark:bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
       >
         <CodeGroupHeader title={title} {...headerProps}>
           {children}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 3f32aeaa..afd21615 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,4 +1,17 @@
 :root {
+  --shiki-color-text: theme('colors.black');
+  --shiki-token-constant: theme('colors.orange.600');
+  --shiki-token-string: theme('colors.orange.600');
+  --shiki-token-comment: theme('colors.zinc.500');
+  --shiki-token-keyword: theme('colors.sky.600');
+  --shiki-token-parameter: theme('colors.pink.600');
+  --shiki-token-function: theme('colors.violet.600');
+  --shiki-token-string-expression: theme('colors.orange.600');
+  --shiki-token-punctuation: theme('colors.zinc.800');
+}
+
+/* Dark mode styles */
+:root.dark {
   --shiki-color-text: theme('colors.white');
   --shiki-token-constant: theme('colors.orange.300');
   --shiki-token-string: theme('colors.orange.300');