feat(style): use catppuccin-latte and one-dark-pro for code blocks

Author: stasadev

astro.config.mjs

@@ -60,7 +60,11 @@ export default defineConfig({
     syntaxHighlight: "shiki",
     // https://github.com/shikijs/shiki/blob/main/docs/languages.md
     shikiConfig: {
-      theme: "nord",
+      themes: {
+        light: "catppuccin-latte",
+        dark: "one-dark-pro",
+      },
+      defaultColor: false,
       // You can add options to the transformer here
       // For example, to change the 'copied' state duration:
       // toggle: 3000, // 3 seconds

src/components/Contributors.astro

@@ -30,7 +30,7 @@ const contributors = await getContributors()
       <Sponsors size="large" align="center" />
     </div>
 
-    <h3 class="text-base font-mono text-navy-300 text-center mb-8 dark:text-navy-100">
+    <h3 class="mt-24 mb-8 text-base font-mono text-navy-300 text-center dark:text-navy-100">
       GitHub Contributors
     </h3>
     <div class="max-w-5xl mx-auto flex flex-wrap justify-center">

src/components/Terminal.astro

@@ -27,11 +27,17 @@ export interface Props {
     | "windows-terminal"
     | "ubuntu"
   // Added a language prop for Shiki, defaults to 'bash'
-  lang?: 'bash' | 'sh' | 'powershell' | 'text' 
+  lang?: 'bash' | 'sh' | 'powershell' | 'text'
 }
 
 // Destructure props, adding a default for lang
-const { code, codeTheme = "nord", type = "default", lang = "bash" } = Astro.props
+const { code, type = "default", lang = "bash" } = Astro.props
+
+// Use dual themes for light/dark mode support
+const codeThemes = {
+  light: "catppuccin-latte" as const,
+  dark: "one-dark-pro" as const,
+}
 
 const promptSymbols = {
   default: '→',
@@ -146,6 +152,6 @@ const componentTransformers = [
     )}
   </div>
   <div class="terminal-code-container my-0">
-    <Code code={rawCode} lang={lang} theme={codeTheme} transformers={componentTransformers} />
+    <Code code={rawCode} lang={lang} themes={codeThemes} defaultColor={false} transformers={componentTransformers} />
   </div>
 </div>

src/components/quickstart/Cloud.astro

@@ -41,7 +41,8 @@ const { latestVersion } = Astro.props
     }
 }
 `}
-              theme="nord"
+              themes={{ light: "catppuccin-latte" as const, dark: "one-dark-pro" as const }}
+              defaultColor={false}
               lang="json"
             />
           </li>

src/styles/global.css

@@ -86,7 +86,7 @@ input[type="radio"]:checked + label {
 
 .terminal-wrapper {
   @apply rounded-lg;
-  background: #2e3440;
+  background: var(--shiki-light-bg, #e6e9ef);
   img {
     margin-top: 0px;
     margin-bottom: 0px;
@@ -95,28 +95,44 @@ input[type="radio"]:checked + label {
     @apply font-normal overflow-x-auto font-mono bg-transparent rounded-t-none;
 
     code {
-      color: #d8dee9;
       .prompt {
-        @apply select-none text-slate-400;
+        @apply select-none opacity-60;
       }
     }
   }
 }
 
+html.dark .terminal-wrapper {
+  background: var(--shiki-dark-bg, #2e3440);
+}
+
 .terminal-wrapper .top-bar {
+  @apply bg-gray-200;
+
   &.powershell {
-    @apply justify-between text-white;
-    background: #1f2023;
+    @apply justify-between text-gray-800 bg-gray-300;
   }
   &.powershell-ubuntu {
-    @apply justify-between text-white;
-    background: #1f2023;
+    @apply justify-between text-gray-800 bg-gray-300;
   }
   &.ubuntu {
     @apply justify-end;
   }
 }
 
+html.dark .terminal-wrapper .top-bar {
+  @apply bg-slate-700;
+
+  &.powershell {
+    @apply text-white;
+    background: #1f2023;
+  }
+  &.powershell-ubuntu {
+    @apply text-white;
+    background: #1f2023;
+  }
+}
+
 .prose .terminal-wrapper pre {
   @apply my-0;
 }
@@ -172,6 +188,19 @@ pre.astro-code code {
   padding-bottom: 2px;
 }
 
+/* Shiki dual theme support */
+pre.astro-code,
+pre.astro-code span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+}
+
+html.dark pre.astro-code,
+html.dark pre.astro-code span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+}
+
 /* Copy buttons */
 button.copy,
 .shiki-copy,
@@ -183,8 +212,8 @@ pre.astro-code > button.copy {
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  background-color: rgba(255, 255, 255, 0.1);
-  color: white;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #333;
   opacity: 0.5;
   z-index: 10;
   pointer-events: auto;
@@ -194,6 +223,13 @@ pre.astro-code > button.copy {
     background-color 0.2s;
 }
 
+html.dark button.copy,
+html.dark .shiki-copy,
+html.dark pre.astro-code > button.copy {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
 .terminal-code-container button.copy,
 .terminal-code-container .shiki-copy,
 .terminal-code-container pre.astro-code > button.copy {
@@ -216,13 +252,20 @@ button.copy:hover,
 .shiki-copy:hover,
 pre.astro-code > button.copy:hover {
   opacity: 1;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+html.dark button.copy:hover,
+html.dark .shiki-copy:hover,
+html.dark pre.astro-code > button.copy:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
 button.copy.copied,
 .shiki-copy.copied,
 pre.astro-code > button.copy.copied {
-  background-color: #28a745;
+  background-color: #0891b2 !important;
+  color: white !important;
   opacity: 1;
 }