From ed0f26cf82b1ecdb783ca44ae17b3990baf3e8cd Mon Sep 17 00:00:00 2001
From: Paul Schultz <pschultz@pobox.com>
Date: Fri, 10 Mar 2023 10:45:50 -0600
Subject: [PATCH] Update prism style to vsDark

Signed-off-by: Paul Schultz <pschultz@pobox.com>
---
 .../software-templates/testing-scaffolder-alpha.md        | 4 ++--
 microsite/docusaurus.config.js                            | 8 +++++++-
 microsite/package.json                                    | 1 +
 microsite/src/css/customTheme.css                         | 8 ++++++++
 microsite/yarn.lock                                       | 1 +
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/features/software-templates/testing-scaffolder-alpha.md b/docs/features/software-templates/testing-scaffolder-alpha.md
index c0b97e897c..1b0368f29c 100644
--- a/docs/features/software-templates/testing-scaffolder-alpha.md
+++ b/docs/features/software-templates/testing-scaffolder-alpha.md
@@ -197,9 +197,9 @@ You will need to change the import for `FieldValidation` to point at the new `re
 
 ```ts
 /* highlight-remove-next-line */
-- import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/core';
 /* highlight-add-next-line */
-+ import { FieldValidation } from '@rjsf/utils;
+import { FieldValidation } from '@rjsf/utils;
 import { KubernetesValidatorFunctions } from '@backstage/catalog-model';
 
 export const entityNamePickerValidation = (
diff --git a/microsite/docusaurus.config.js b/microsite/docusaurus.config.js
index 025c773a9c..8a9fe6fd9b 100644
--- a/microsite/docusaurus.config.js
+++ b/microsite/docusaurus.config.js
@@ -16,6 +16,11 @@
 
 // @ts-check
 
+/** @type{import('prism-react-renderer').PrismTheme} **/
+// @ts-ignore
+const prismTheme = require('prism-react-renderer/themes/vsDark');
+prismTheme.plain.backgroundColor = '#232323';
+
 /** @type {import('@docusaurus/types').Config} */
 module.exports = {
   title: 'Backstage Software Catalog and Developer Platform',
@@ -266,10 +271,11 @@ module.exports = {
         searchParameters: {},
       },
       prism: {
+        theme: prismTheme,
         magicComments: [
           // Extend the default highlight class name
           {
-            className: 'theme-code-block-highlighted-line',
+            className: 'code-block-highlight-line',
             line: 'highlight-next-line',
             block: { start: 'highlight-start', end: 'highlight-end' },
           },
diff --git a/microsite/package.json b/microsite/package.json
index cb71d5a25a..70b1aa86ad 100644
--- a/microsite/package.json
+++ b/microsite/package.json
@@ -35,6 +35,7 @@
     "@swc/core": "^1.3.36",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.3",
+    "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "sass": "^1.57.1",
diff --git a/microsite/src/css/customTheme.css b/microsite/src/css/customTheme.css
index 4ba7f1df86..f216762418 100644
--- a/microsite/src/css/customTheme.css
+++ b/microsite/src/css/customTheme.css
@@ -75,4 +75,12 @@
   border-left: 3px solid rgba(255, 0, 0, 0.5);
 }
 
+.code-block-highlight-line {
+  background-color: rgba(255, 255, 255, 0.08);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid rgb(255, 255, 255, 0.5);
+}
+
 /* #endregion */
diff --git a/microsite/yarn.lock b/microsite/yarn.lock
index a9db81ead4..a6393e7386 100644
--- a/microsite/yarn.lock
+++ b/microsite/yarn.lock
@@ -3738,6 +3738,7 @@ __metadata:
     docusaurus-plugin-sass: ^0.2.3
     js-yaml: ^4.1.0
     prettier: ^2.6.2
+    prism-react-renderer: ^1.3.5
     react: ^17.0.2
     react-dom: ^17.0.2
     replace: ^1.2.2