From 80438ac1378a60765990639e3a43d3f911ebe224 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Wed, 31 Jul 2024 10:08:16 +0200
Subject: [PATCH] Match syntax highlighting with light/dark mode

Signed-off-by: Damian Stasik <920747+damianstasik@users.noreply.github.com>
---
 docusaurus.config.ts                            | 3 ++-
 src/components/TextContent/index.tsx            | 9 +++++++--
 src/css/custom.css                              | 4 +++-
 src/pages/manifesto.tsx                         | 2 +-
 src/theme/CodeBlock/Container/styles.module.css | 2 --
 src/theme/CodeBlock/Content/String.js           | 1 -
 src/theme/CodeBlock/Content/styles.module.css   | 2 --
 7 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index d96f29a1..3074df0b 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -340,7 +340,8 @@ const config: Config = {
       ],
     },
     prism: {
-      theme: prismThemes.dracula,
+      theme: prismThemes.oneLight,
+      darkTheme: prismThemes.dracula,
       additionalLanguages: ["hcl", "powershell"],
     },
     image: "/img/og.png",
diff --git a/src/components/TextContent/index.tsx b/src/components/TextContent/index.tsx
index e60cf658..8d572598 100644
--- a/src/components/TextContent/index.tsx
+++ b/src/components/TextContent/index.tsx
@@ -8,7 +8,7 @@ const classNames = [
   "dark:prose-invert",
   "lg:prose-lg",
 
-  "max-w-full md:max-w-prose",
+  "max-w-full",
 
   "text-gray-900",
   "dark:text-gray-100",
@@ -23,7 +23,12 @@ const classNames = [
   "dark:prose-hr:border-gray-800",
 
   // <pre>
-  "prose-pre:bg-blue-900",
+  "dark:prose-pre:bg-blue-900",
+  "dark:prose-pre:border-none",
+  "prose-pre:bg-gray-50",
+  "prose-pre:border",
+  "prose-pre:border-gray-200",
+  "prose-pre:rounded-none",
 
   // <code>
   "prose-code:px-1.5",
diff --git a/src/css/custom.css b/src/css/custom.css
index c410d7f0..2caa062f 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -58,12 +58,14 @@ html[data-theme="dark"] {
   --ifm-color-primary: theme("colors.brand.500");
   --ifm-background-color: theme("colors.blue.950");
   --ifm-font-color-base: theme("colors.gray.50");
+  --prism-background-color: theme("colors.gray.900");
 }
 
 html[data-theme="light"] {
   --ifm-color-primary: theme("colors.brand.700");
   --ifm-background-color: theme("colors.gray.50");
   --ifm-font-color-base: theme("colors.gray.900");
+  --prism-background-color: theme("colors.gray.100");
 }
 
 body {
@@ -118,4 +120,4 @@ body {
 
 h1 {
   text-wrap: balance;
-}
\ No newline at end of file
+}
diff --git a/src/pages/manifesto.tsx b/src/pages/manifesto.tsx
index b39f376a..19566a45 100644
--- a/src/pages/manifesto.tsx
+++ b/src/pages/manifesto.tsx
@@ -18,7 +18,7 @@ export default function Manifesto() {
       <Jumbotron>
         <Headline className="max-w-2xl">The OpenTofu Manifesto</Headline>
       </Jumbotron>
-      <TextContent className="mb-4 md:mb-10 mx-auto px-4">
+      <TextContent className="mb-4 md:mb-10 mx-auto px-4 md:max-w-prose">
         <p>
           Terraform was open-sourced in 2014 under the Mozilla Public License
           (v2.0) (the “MPL”). Over the next ~9 years, it built up a community
diff --git a/src/theme/CodeBlock/Container/styles.module.css b/src/theme/CodeBlock/Container/styles.module.css
index 5beb153c..73ef3900 100644
--- a/src/theme/CodeBlock/Container/styles.module.css
+++ b/src/theme/CodeBlock/Container/styles.module.css
@@ -4,6 +4,4 @@
   background: var(--prism-background-color);
   color: var(--prism-color);
   margin-bottom: var(--ifm-leading);
-  box-shadow: var(--ifm-global-shadow-lw);
-  border-radius: var(--ifm-code-border-radius);
 }
diff --git a/src/theme/CodeBlock/Content/String.js b/src/theme/CodeBlock/Content/String.js
index b7152135..dd270de3 100644
--- a/src/theme/CodeBlock/Content/String.js
+++ b/src/theme/CodeBlock/Content/String.js
@@ -84,7 +84,6 @@ export default function CodeBlockString({
                 tabIndex={0}
                 ref={wordWrap.codeBlockRef}
                 className={clsx(className, styles.codeBlock, "thin-scrollbar")}
-                style={style}
                 role="code"
                 aria-label="Code Block"
               >
diff --git a/src/theme/CodeBlock/Content/styles.module.css b/src/theme/CodeBlock/Content/styles.module.css
index 6dc2d0a7..06d0469c 100644
--- a/src/theme/CodeBlock/Content/styles.module.css
+++ b/src/theme/CodeBlock/Content/styles.module.css
@@ -4,7 +4,6 @@
   position: relative;
   /* rtl:ignore */
   direction: ltr;
-  border-radius: inherit;
 }
 
 .codeBlockTitle {
@@ -65,7 +64,6 @@
   background: var(--prism-background-color);
   color: var(--prism-color);
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
   padding: 0.4rem;
   line-height: 0;
   transition: opacity var(--ifm-transition-fast) ease-in-out;