Match syntax highlighting with light/dark mode

opentofu · Jul 31, 2024 · f9a38ba · f9a38ba
1 parent 8c3a5f8
commit f9a38ba
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 18 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -102,7 +102,7 @@ const config: Config = {
         },
         docs: {
           includeCurrentVersion: false,
-          lastVersion: 'v1.8',
+          lastVersion: "v1.8",
           docVersionRootComponent: "@theme/DocVersionRoot",
           versions: {
             "v1.6": {
@@ -119,12 +119,12 @@ const config: Config = {
               label: "1.8.x",
               path: "",
             },
-            "main": {
+            main: {
               label: "Development",
               path: "main",
               banner: "unreleased",
-              noIndex: true
-            }
+              noIndex: true,
+            },
           },
           routeBasePath: "/docs",
           editUrl: ({ version, docPath }) => {
@@ -281,19 +281,19 @@ const config: Config = {
           items: [
             {
               label: "v1.8.x (current)",
-              href: "/docs/"
+              href: "/docs/",
             },
             {
               label: "v1.7.x",
-              href: "/docs/v1.7/"
+              href: "/docs/v1.7/",
             },
             {
               label: "v1.6.x",
-              href: "/docs/v1.6/"
+              href: "/docs/v1.6/",
             },
             {
               label: "Development",
-              href: "/docs/main/"
+              href: "/docs/main/",
             },
           ],
         },
@@ -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
@@ -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
@@ -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;
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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;