feat(explorer): add darkmode theme to SyntaxHighlighter (#4127)

* feat(explorer): add theme switcher * fix: add missing style to the icon * fix: lint * fix: add darkmode theme to SyntaxHighlighter * fix: remove test class * refactor: remove theme context from explorer * fix: update theme import
iotaledger · Nov 26, 2024 · e68220d · e68220d
1 parent 2826800
commit e68220d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/apps/explorer/src/components/module/PkgModulesWrapper.tsx b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
@@ -131,7 +131,7 @@ export function PkgModulesWrapper({
                         )}
                     />
                 </div>
-                <div className="flex-1 overflow-auto pt-sm">
+                <div className="max-h-[560px] flex-1 overflow-auto pt-sm">
                     <VerticalList>
                         <div className="flex flex-col gap-sm">
                             {moduleNames.map((name) => (
@@ -189,13 +189,15 @@ function ExecutePanelContent({
                     ))}
                 </SegmentedButton>
 
-                <ListTabContent id={EXECUTE_TAB.id}>
-                    <ModuleFunctionsInteraction
-                        key={`${packageId}-${moduleName}`}
-                        packageId={packageId}
-                        moduleName={moduleName}
-                    />
-                </ListTabContent>
+                <div className="pr-md--rs">
+                    <ListTabContent id={EXECUTE_TAB.id}>
+                        <ModuleFunctionsInteraction
+                            key={`${packageId}-${moduleName}`}
+                            packageId={packageId}
+                            moduleName={moduleName}
+                        />
+                    </ListTabContent>
+                </div>
             </TabsProvider>
         </TabbedContentWrapper>
     );

diff --git a/apps/explorer/src/components/syntax-highlighter/SyntaxHighlighter.tsx b/apps/explorer/src/components/syntax-highlighter/SyntaxHighlighter.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useOnScreen } from '@iota/core';
+import { Theme, useOnScreen, useTheme } from '@iota/core';
 import { useRef, useEffect, useState } from 'react';
 import { Highlight, themes } from 'prism-react-renderer';
 import type { Language } from 'prism-react-renderer';
@@ -35,19 +35,25 @@ export function SyntaxHighlighter({
     const observerElem = useRef<HTMLDivElement | null>(null);
     const { isIntersecting } = useOnScreen(observerElem);
     const [loadedLines, setLoadedLines] = useState(MAX_LINES);
+    const { theme } = useTheme();
+
     useEffect(() => {
         if (isIntersecting) {
             setLoadedLines((prev) => prev + MAX_LINES);
         }
     }, [isIntersecting]);
+
+    const isDark = theme === Theme.Dark;
+    const codeTheme = isDark ? themes.oneDark : themes.github;
+
     return (
         <div className="overflow-auto whitespace-pre font-mono text-sm">
-            <Highlight code={code} language={language} theme={themes.github}>
+            <Highlight code={code} language={language} theme={codeTheme}>
                 {({ style, tokens, getLineProps, getTokenProps }) => (
                     <pre className="overflow-auto bg-transparent p-xs font-medium" style={style}>
                         {tokens.slice(0, loadedLines).map((line, i) => (
                             <div {...getLineProps({ line, key: i })} key={i} className="table-row">
-                                <div className="table-cell select-none pr-4 text-left text-primary-30 opacity-50">
+                                <div className="table-cell select-none pr-4 text-left text-primary-30 opacity-50 dark:text-primary-80">
                                     {i + 1}
                                 </div>