feat(style): use high-contrast themes for code blocks (#538)

Author: stasadev

astro.config.mjs

@@ -20,6 +20,7 @@ import searchIndex from "./src/lib/search-index.js"
 import sitemap from "@astrojs/sitemap"
 import tailwindcss from "@tailwindcss/vite"
 import { addCopyButton } from "shiki-transformer-copy-button"
+import { SHIKI_THEMES } from "./src/const.ts"
 
 // https://astro.build/config
 export default defineConfig({
@@ -60,7 +61,8 @@ export default defineConfig({
     syntaxHighlight: "shiki",
     // https://github.com/shikijs/shiki/blob/main/docs/languages.md
     shikiConfig: {
-      theme: "nord",
+      themes: SHIKI_THEMES,
+      defaultColor: false,
       // You can add options to the transformer here
       // For example, to change the 'copied' state duration:
       // toggle: 3000, // 3 seconds

src/components/AnimatedTerminal.astro

@@ -246,7 +246,7 @@ ${versionLine}
 </script>
 
 <div class="terminal-wrapper rounded-lg shadow-lg" style="background: #2e3440;" data-latest-release={latestRelease}>
-  <div class={`top-bar flex p-3 space-x-2 rounded-t-lg`}>
+  <div class="top-bar flex p-3 space-x-2 rounded-t-lg" style="background: #2e3440;">
     <div class="block rounded-full bg-slate-500 w-3 h-3"></div>
     <div class="block rounded-full bg-slate-500 w-3 h-3"></div>
     <div class="block rounded-full bg-slate-500 w-3 h-3"></div>

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/Header.astro

@@ -68,12 +68,16 @@ import ThemeToggle from "./ThemeToggle.astro"
         src="/logos/ddev.svg"
         alt="DDEV logo"
         aria-hidden="true"
+        width="293"
+        height="69"
       />
       <img
         class="h-8 w-auto sm:h-10 hidden dark:block"
         src="/logos/dark-ddev.svg"
         alt="DDEV logo"
         aria-hidden="true"
+        width="293"
+        height="69"
       />
     </a>
     <div class="w-2/3 flex justify-end items-center gap-6">

src/components/Terminal.astro

@@ -15,6 +15,7 @@ import { Code } from "astro/components" // Keep this import
 // 1. Import the transformer here!
 import { addCopyButton } from 'shiki-transformer-copy-button';
 import type { ShikiTransformer } from 'shiki';
+import { SHIKI_THEMES } from '../const';
 
 export interface Props {
   code: string
@@ -27,11 +28,14 @@ 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 = SHIKI_THEMES
 
 const promptSymbols = {
   default: '→',
@@ -146,6 +150,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

@@ -4,6 +4,7 @@ import Tabs from "@components/Tabs.astro"
 import { Code } from "astro/components"
 import CommunityCTA from "./CommunityCTA.astro"
 import Examples from "./Examples.astro"
+import { SHIKI_THEMES } from "../../const"
 
 export interface Props {
   latestVersion: string
@@ -41,7 +42,8 @@ const { latestVersion } = Astro.props
     }
 }
 `}
-              theme="nord"
+              themes={SHIKI_THEMES}
+              defaultColor={false}
               lang="json"
             />
           </li>

src/const.ts

@@ -32,3 +32,7 @@ export const ORG_SAME_AS = [
   "https://localdev.foundation",
 ]
 export const BLOG_DESCRIPTION = `Posts about DDEV, Docker, and local development.`
+export const SHIKI_THEMES = {
+  light: "github-light-high-contrast",
+  dark: "github-dark-high-contrast",
+} as const

src/styles/global.css

@@ -2,6 +2,11 @@
 @config "../../tailwind.config.cjs";
 @import "./callouts.css";
 
+:root {
+  --code-bg-light: #dfe2e7;
+  --code-bg-dark: #2e3440;
+}
+
 header {
   a[target="_blank"] {
     &::after {
@@ -86,7 +91,7 @@ input[type="radio"]:checked + label {
 
 .terminal-wrapper {
   @apply rounded-lg;
-  background: #2e3440;
+  background: var(--code-bg-light);
   img {
     margin-top: 0px;
     margin-bottom: 0px;
@@ -95,28 +100,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(--code-bg-dark);
+}
+
 .terminal-wrapper .top-bar {
+  background: var(--code-bg-light);
+
   &.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 {
+  background: var(--code-bg-dark);
+
+  &.powershell {
+    @apply text-white;
+    background: #1f2023;
+  }
+  &.powershell-ubuntu {
+    @apply text-white;
+    background: #1f2023;
+  }
+}
+
 .prose .terminal-wrapper pre {
   @apply my-0;
 }
@@ -172,6 +193,19 @@ pre.astro-code code {
   padding-bottom: 2px;
 }
 
+/* Shiki dual theme support - override backgrounds for better contrast */
+pre.astro-code,
+pre.astro-code span {
+  color: var(--shiki-light) !important;
+  background-color: var(--code-bg-light) !important;
+}
+
+html.dark pre.astro-code,
+html.dark pre.astro-code span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--code-bg-dark) !important;
+}
+
 /* Copy buttons */
 button.copy,
 .shiki-copy,
@@ -183,8 +217,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 +228,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 +257,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;
 }