From db4539db4d1feab2b3d77c040658248e702d7cc8 Mon Sep 17 00:00:00 2001
From: Itai Gilo <itai.gilo@treeverse.io>
Date: Thu, 14 Nov 2024 14:55:54 +0000
Subject: [PATCH] Support Dark Mode for Text Viewer

---
 .../repositories/repository/fileRenderers/simple.tsx      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/webui/src/pages/repositories/repository/fileRenderers/simple.tsx b/webui/src/pages/repositories/repository/fileRenderers/simple.tsx
index 7c77fbcf285..345c8a0a927 100644
--- a/webui/src/pages/repositories/repository/fileRenderers/simple.tsx
+++ b/webui/src/pages/repositories/repository/fileRenderers/simple.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import Alert from "react-bootstrap/Alert";
 import { humanSize } from "../../../../lib/components/repository/tree";
 import { useAPI } from "../../../../lib/hooks/api";
@@ -16,6 +16,8 @@ import {
 
 import "react-ipynb-renderer/dist/styles/default.css";
 import { useMarkdownProcessor } from "./useMarkdownProcessor";
+import { AppContext } from "../../../../lib/hooks/appContext";
+import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 export const ObjectTooLarge: FC<RendererComponent> = ({ path, sizeBytes }) => {
   return (
@@ -81,10 +83,12 @@ export const TextRenderer: FC<RendererComponentWithText> = ({
   fileExtension,
   text,
 }) => {
+  const {state} = useContext(AppContext);
   const language = guessLanguage(fileExtension, contentType) ?? "plaintext";
+
   return (
     <SyntaxHighlighter
-      style={syntaxHighlightStyle}
+      style={state.settings.darkMode ? dark : syntaxHighlightStyle}
       language={language}
       showInlineLineNumbers={true}
       showLineNumbers={true}