Merge pull request danielcgilibert#58 from CodeVxDev/main

feat:light/dark mode for codeblocks inside posts
nicoasp · Feb 19, 2024 · eb89a78 · eb89a78
2 parents 3b682a9 + b615e9e
commit eb89a78
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -19,7 +19,10 @@ export default defineConfig({
 		mdx({
 			syntaxHighlight: 'shiki',
 			shikiConfig: {
-				theme: 'material-theme-palenight',
+				experimentalThemes: {
+					light: 'vitesse-light',
+					dark: 'material-theme-palenight',
+				  },
 				wrap: true
 			},
 			drafts: true

diff --git a/src/components/mdx/Code.astro b/src/components/mdx/Code.astro
@@ -4,7 +4,7 @@ import CheckIcon from '../icons/CheckIcon.astro'
 ---
 
 <pre
-	class='relative shadow-2xl bg-black code'><button aria-label="copy-button" class="copy-button absolute  z-20 top-2 right-2  rounded-md transition-all ease-in max-w-full max-h-fit hover:text-indigo-400"><CopyIcon /></button><span class="check-span absolute z-10 top-2 right-2  rounded-md transition-all ease-in opacity-0 text-green-300 max-w-full max-h-fit "><CheckIcon /></span><slot /></pre>
+	class='shiki shiki-themes relative bg-neutral-200/30 dark:shadow-2xl code'><button aria-label="copy-button" class="copy-button absolute  z-20 top-2 right-2  rounded-md transition-all ease-in max-w-full max-h-fit dark:text-gray-600 text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400"><CopyIcon /></button><span class="check-span absolute z-10 top-2 right-2  rounded-md transition-all ease-in opacity-0 text-green-600 dark:text-green-400 max-w-full max-h-fit "><CheckIcon /></span><slot /></pre>
 
 <script>
 	const coppyBlock = () => {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -20,6 +20,12 @@
 	h6 {
 		@apply text-zinc-800 dark:text-zinc-100   !important;
 	}
+
+	html.dark .shiki,
+	html.dark .shiki span {
+	  color: var(--shiki-dark) !important;
+	  background-color: theme(colors.gray.900) !important;
+	}
 }
 
 .glass {