style. new syntax highlight theme for code

Author: samdevega

astro.config.mjs

@@ -1,9 +1,9 @@
 import { defineConfig } from 'astro/config'
-import ayuMirage from '/src/styles/ayu-mirage.json'
+import kopiLuwak from '/src/styles/kopi-luwak.json'
 
 export default defineConfig({
   markdown: {
-    shikiConfig: { theme: ayuMirage },
+    shikiConfig: { theme: kopiLuwak },
   },
   site: 'https://samdevega.github.io',
 })

src/layouts/MarkdownPostLayout.astro

@@ -148,10 +148,8 @@ const pageTitle = siteTitle +  ' - ' + subtitle
 
   .pre-header {
     align-items: center;
-    background-color: #1f2430;
-    box-shadow: inset 0 -1px 0px #3a445a;
+    box-shadow: inset 0 -1px 0px rgba(255, 255, 255, 0.1);
     border-radius: 0.25rem 0.25rem 0 0;
-    color: var(--light-color);
     display: flex;
     font-family: 'CascadiaCode', monospace;
     font-size: 0.875rem;

src/scripts/copy.js

@@ -8,6 +8,10 @@ codeNodes.forEach(node => {
   let timeoutId
   const preHeader = document.createElement('div')
   const previousDomNode = node.parentElement.previousElementSibling
+  const preBackgroundColor = getComputedStyle(node.parentElement).backgroundColor
+  const preColor = getComputedStyle(node.parentElement).color
+  preHeader.style.backgroundColor = preBackgroundColor
+  preHeader.style.color = preColor
   const isPreTitle = previousDomNode
     && previousDomNode.tagName === 'P'
     && previousDomNode.children.length === 1