Match syntax highlighting with light/dark mode

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",

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",

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;
-}
+}

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

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);
 }

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"
               >

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;