From 9df7b43e1ac2d7a9b2ab62956b58f747cbf20bdf Mon Sep 17 00:00:00 2001
From: irma12 <irma@roadie.io>
Date: Fri, 11 Feb 2022 13:16:29 +0100
Subject: [PATCH] Change colors for highlighted code

Signed-off-by: irma12 <irma@roadie.io>
---
 .changeset/silly-ghosts-dance.md              |  5 +++
 .../techdocs/src/reader/components/Reader.tsx | 43 ++++++++++++++-----
 2 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/silly-ghosts-dance.md

diff --git a/.changeset/silly-ghosts-dance.md b/.changeset/silly-ghosts-dance.md
new file mode 100644
index 0000000000..4ee6fa482c
--- /dev/null
+++ b/.changeset/silly-ghosts-dance.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Improve overall appearance of higlighted code in docs.
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 7869fc1b9b..61617ba9ec 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -142,6 +142,7 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
   const techdocsSanitizer = useApi(configApiRef);
   const { namespace = '', kind = '', name = '' } = entityRef;
   const { state, path, content: rawPage } = useTechDocsReader();
+  const isDarkTheme = theme.palette.type === 'dark';
 
   const [sidebars, setSidebars] = useState<HTMLElement[]>();
   const [dom, setDom] = useState<HTMLElement | null>(null);
@@ -219,6 +220,27 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
             --md-accent-fg-color: ${theme.palette.primary.main};
             --md-default-fg-color--lightest: ${theme.palette.textVerySubtle};
           }
+          .codehilite .gd, .highlight .gd { 
+            background-color: ${isDarkTheme ? 'rgba(248,81,73,0.65)' : '#fdd'};
+          }
+          .codehilite .gi, .highlight .gi {
+            background-color: ${isDarkTheme ? 'rgba(46,160,67,0.65)' : '#dfd'};
+          }
+          .highlight .kd {
+            color: ${isDarkTheme ? '#4aaaf7' : '#3b78e7'};
+          }
+           .highlight .k {
+            color: ${isDarkTheme ? '#4aaaf7' : '#3b78e7'};
+          }
+          .highlight .nx {
+            color: ${isDarkTheme ? '#ff53a3' : '#ec407a'};
+          }
+          .highlight .s1 {
+            color: ${isDarkTheme ? '#1cad46' : 'rgb(13, 144, 79)'};
+          }
+          .highlight .kt {
+            color: ${isDarkTheme ? '#4aaaf7' : '#3e61a2'};
+          }
           .md-main__inner { margin-top: 0; }
           .md-sidebar {  position: fixed; bottom: 100px; width: 20rem; }
           .md-sidebar--secondary { right: 2rem; }
@@ -351,21 +373,22 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
         }),
       ]),
     [
+      techdocsSanitizer,
+      techdocsStorageApi,
       kind,
       name,
       namespace,
       scmIntegrationsApi,
-      techdocsStorageApi,
-      techdocsSanitizer,
-      theme.palette.action.disabledBackground,
-      theme.palette.background.default,
-      theme.palette.background.paper,
-      theme.palette.primary.main,
-      theme.palette.success.main,
-      theme.palette.text.primary,
-      theme.palette.textSubtle,
-      theme.palette.textVerySubtle,
       theme.typography.fontFamily,
+      theme.palette.text.primary,
+      theme.palette.primary.main,
+      theme.palette.background.paper,
+      theme.palette.background.default,
+      theme.palette.textVerySubtle,
+      theme.palette.textSubtle,
+      theme.palette.action.disabledBackground,
+      theme.palette.success.main,
+      isDarkTheme,
       isPinned,
     ],
   );