From 4c8d2680cccc67c7e2fc3abad1e78f471d033a32 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Wed, 13 Nov 2024 17:35:03 +0100
Subject: [PATCH 1/8] feat(explorer): add theme switcher

---
 .../explorer/src/components/ThemeProvider.tsx | 21 ++++++++
 .../src/components/ThemedIotaLogo.tsx         |  8 +++
 .../explorer/src/components/footer/Footer.tsx | 12 ++---
 .../explorer/src/components/header/Header.tsx | 12 +++--
 .../src/components/header/ThemeSwitcher.tsx   | 53 +++++++++++++++++++
 apps/explorer/src/components/header/index.ts  |  1 +
 apps/explorer/src/components/index.ts         |  2 +
 .../explorer/src/components/layout/Layout.tsx |  9 ++--
 .../src/components/layout/PageLayout.tsx      |  2 +-
 .../components/module/PkgModulesWrapper.tsx   |  2 +-
 .../components/object/ObjectFieldsCard.tsx    |  2 +-
 .../explorer/src/components/search/Search.tsx |  2 +-
 apps/explorer/src/contexts/index.ts           |  1 +
 apps/explorer/src/contexts/themeContext.ts    | 15 ++++++
 apps/explorer/src/hooks/index.ts              |  1 +
 apps/explorer/src/hooks/useTheme.ts           | 13 +++++
 apps/explorer/src/index.css                   |  8 +++
 apps/explorer/src/lib/ui/enums/index.ts       |  4 ++
 apps/explorer/src/lib/ui/enums/theme.enums.ts |  7 +++
 apps/explorer/src/lib/ui/index.ts             |  1 +
 apps/explorer/tailwind.config.ts              |  1 +
 21 files changed, 159 insertions(+), 18 deletions(-)
 create mode 100644 apps/explorer/src/components/ThemeProvider.tsx
 create mode 100644 apps/explorer/src/components/ThemedIotaLogo.tsx
 create mode 100644 apps/explorer/src/components/header/ThemeSwitcher.tsx
 create mode 100644 apps/explorer/src/contexts/themeContext.ts
 create mode 100644 apps/explorer/src/hooks/useTheme.ts
 create mode 100644 apps/explorer/src/lib/ui/enums/index.ts
 create mode 100644 apps/explorer/src/lib/ui/enums/theme.enums.ts

diff --git a/apps/explorer/src/components/ThemeProvider.tsx b/apps/explorer/src/components/ThemeProvider.tsx
new file mode 100644
index 00000000000..16dbb025c11
--- /dev/null
+++ b/apps/explorer/src/components/ThemeProvider.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState, type PropsWithChildren } from 'react';
+import { ThemeContext } from '~/contexts';
+import { Theme } from '~/lib/ui';
+
+export function ThemeProvider({ children }: PropsWithChildren): React.JSX.Element {
+    const [theme, setTheme] = useState<Theme>(Theme.Light);
+
+    return (
+        <ThemeContext.Provider
+            value={{
+                theme,
+                setTheme,
+            }}
+        >
+            {children}
+        </ThemeContext.Provider>
+    );
+}
diff --git a/apps/explorer/src/components/ThemedIotaLogo.tsx b/apps/explorer/src/components/ThemedIotaLogo.tsx
new file mode 100644
index 00000000000..71a42a49a8d
--- /dev/null
+++ b/apps/explorer/src/components/ThemedIotaLogo.tsx
@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IotaLogoWeb } from '@iota/ui-icons';
+
+export function ThemedIotaLogo(): React.JSX.Element {
+    return <IotaLogoWeb className="text-neutral-10 dark:text-neutral-92" width={137} height={36} />;
+}
diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
index e5f17ca794f..b9ec00af211 100644
--- a/apps/explorer/src/components/footer/Footer.tsx
+++ b/apps/explorer/src/components/footer/Footer.tsx
@@ -4,9 +4,9 @@
 
 import { Divider } from '@iota/apps-ui-kit';
 import { LegalLinks, LegalText } from './Legal';
-import { IotaLogoWeb } from '@iota/ui-icons';
 import { Link } from '~/components/ui';
 import { FOOTER_LINKS } from '~/lib/constants';
+import { ThemedIotaLogo } from '../ThemedIotaLogo';
 
 function FooterLinks(): JSX.Element {
     return (
@@ -26,11 +26,11 @@ function FooterLinks(): JSX.Element {
 
 function Footer(): JSX.Element {
     return (
-        <footer className="sticky top-[100%] bg-neutral-96 px-5 py-10 md:px-10 md:py-14">
+        <footer className="sticky top-[100%] px-5 py-10 md:px-10 md:py-14">
             <nav className="container flex flex-col justify-center gap-md md:gap-lg">
                 <div className="flex flex-col-reverse items-center gap-7.5 md:flex-row md:justify-between ">
-                    <div className="hidden self-center text-neutral-10 md:flex md:self-start">
-                        <IotaLogoWeb width={137} height={36} />
+                    <div className="hidden self-center md:flex md:self-start">
+                        <ThemedIotaLogo />
                     </div>
                     <div>
                         <FooterLinks />
@@ -42,8 +42,8 @@ function Footer(): JSX.Element {
                     <LegalLinks />
                 </div>
             </nav>
-            <div className="mt-4 flex justify-center pt-5 text-neutral-10 md:hidden md:self-start">
-                <IotaLogoWeb width={137} height={36} />
+            <div className="mt-4 flex justify-center pt-5 md:hidden md:self-start">
+                <ThemedIotaLogo />
             </div>
             <p className="mt-8 w-full text-center text-body-sm text-neutral-40">{EXPLORER_REV}</p>
         </footer>
diff --git a/apps/explorer/src/components/header/Header.tsx b/apps/explorer/src/components/header/Header.tsx
index b37dd80bbbd..a3b0cbcb00b 100644
--- a/apps/explorer/src/components/header/Header.tsx
+++ b/apps/explorer/src/components/header/Header.tsx
@@ -2,27 +2,29 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { IotaLogoWeb } from '@iota/ui-icons';
-
 import { NetworkSelector } from '../network';
 import Search from '../search/Search';
 import { LinkWithQuery } from '~/components/ui';
+import { ThemeSwitcher, ThemedIotaLogo } from '~/components';
 
 function Header(): JSX.Element {
     return (
-        <header className="flex h-header justify-center overflow-visible bg-neutral-98">
+        <header className="flex h-header justify-center overflow-visible backdrop-blur-lg">
             <div className="container flex h-full flex-1 items-center justify-between gap-5">
                 <LinkWithQuery
                     data-testid="nav-logo-button"
                     to="/"
                     className="flex flex-nowrap items-center gap-1 text-neutral-10"
                 >
-                    <IotaLogoWeb width={137} height={36} />
+                    <ThemedIotaLogo />
                 </LinkWithQuery>
                 <div className="flex w-[360px] justify-center">
                     <Search />
                 </div>
-                <NetworkSelector />
+                <div className="flex flex-row gap-xs">
+                    <ThemeSwitcher />
+                    <NetworkSelector />
+                </div>
             </div>
         </header>
     );
diff --git a/apps/explorer/src/components/header/ThemeSwitcher.tsx b/apps/explorer/src/components/header/ThemeSwitcher.tsx
new file mode 100644
index 00000000000..5572769027d
--- /dev/null
+++ b/apps/explorer/src/components/header/ThemeSwitcher.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, ButtonType } from '@iota/apps-ui-kit';
+import { DarkMode, LightMode } from '@iota/ui-icons';
+import { useEffect, useLayoutEffect } from 'react';
+import { useTheme } from '~/hooks';
+import { Theme } from '~/lib/ui';
+
+const ICON_MAP: Record<Theme, (props: React.SVGProps<SVGSVGElement>) => JSX.Element> = {
+    [Theme.Light]: LightMode,
+    [Theme.Dark]: DarkMode,
+};
+
+export function ThemeSwitcher(): React.JSX.Element {
+    const { theme, setTheme } = useTheme();
+
+    const ThemeIcon = ICON_MAP[theme];
+
+    function handleOnClick(): void {
+        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+        setTheme(newTheme);
+        saveThemeToLocalStorage(newTheme);
+    }
+
+    function saveThemeToLocalStorage(newTheme: Theme): void {
+        localStorage.setItem('theme', newTheme);
+    }
+
+    function updateDocumentClass(theme: Theme): void {
+        document.documentElement.classList.toggle('dark', theme === Theme.Dark);
+    }
+
+    useLayoutEffect(() => {
+        const storedTheme = localStorage.getItem('theme') as Theme | null;
+        if (storedTheme) {
+            setTheme(storedTheme);
+            updateDocumentClass(storedTheme);
+        } else {
+            const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const preferredTheme = prefersDarkTheme ? Theme.Dark : Theme.Light;
+
+            setTheme(preferredTheme);
+            updateDocumentClass(preferredTheme);
+        }
+    }, []);
+
+    useEffect(() => {
+        updateDocumentClass(theme);
+    }, [theme]);
+
+    return <Button type={ButtonType.Ghost} onClick={handleOnClick} icon={<ThemeIcon />} />;
+}
diff --git a/apps/explorer/src/components/header/index.ts b/apps/explorer/src/components/header/index.ts
index 8a717a10a0b..b23c1fae65a 100644
--- a/apps/explorer/src/components/header/index.ts
+++ b/apps/explorer/src/components/header/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './Header';
+export * from './ThemeSwitcher';
diff --git a/apps/explorer/src/components/index.ts b/apps/explorer/src/components/index.ts
index 2aaba9c112f..3d5b44c71af 100644
--- a/apps/explorer/src/components/index.ts
+++ b/apps/explorer/src/components/index.ts
@@ -29,3 +29,5 @@ export * from './AreaGraph';
 export * from './GraphTooltipContent';
 export * from './IotaTokenCard';
 export * from './TransactionsCardGraph';
+export * from './ThemedIotaLogo';
+export * from './ThemeProvider';
diff --git a/apps/explorer/src/components/layout/Layout.tsx b/apps/explorer/src/components/layout/Layout.tsx
index 3148f469ab8..2b80b7e2171 100644
--- a/apps/explorer/src/components/layout/Layout.tsx
+++ b/apps/explorer/src/components/layout/Layout.tsx
@@ -12,6 +12,7 @@ import { NetworkContext } from '~/contexts';
 import { useInitialPageView, useNetwork } from '~/hooks';
 import { createIotaClient, persistableStorage, SupportedNetworks } from '~/lib/utils';
 import { Toaster } from '../toaster';
+import { ThemeProvider } from '../ThemeProvider';
 
 export function Layout(): JSX.Element {
     const [network, setNetwork] = useNetwork();
@@ -39,9 +40,11 @@ export function Layout(): JSX.Element {
                 <WalletProvider autoConnect enableUnsafeBurner={import.meta.env.DEV}>
                     <KioskClientProvider>
                         <NetworkContext.Provider value={[network, setNetwork]}>
-                            <Outlet />
-                            <Toaster />
-                            <ReactQueryDevtools />
+                            <ThemeProvider>
+                                <Outlet />
+                                <Toaster />
+                                <ReactQueryDevtools />
+                            </ThemeProvider>
                         </NetworkContext.Provider>
                     </KioskClientProvider>
                 </WalletProvider>
diff --git a/apps/explorer/src/components/layout/PageLayout.tsx b/apps/explorer/src/components/layout/PageLayout.tsx
index 9602bad3c85..8b8192d799e 100644
--- a/apps/explorer/src/components/layout/PageLayout.tsx
+++ b/apps/explorer/src/components/layout/PageLayout.tsx
@@ -44,7 +44,7 @@ export function PageLayout({ content, loading }: PageLayoutProps): JSX.Element {
             : "The explorer is running slower than usual. We're working to fix the issue and appreciate your patience.";
 
     return (
-        <div className="relative min-h-screen w-full bg-neutral-98">
+        <div className="relative min-h-screen w-full">
             <section ref={headerRef} className="fixed top-0 z-20 flex w-full flex-col">
                 {renderNetworkDegradeBanner && (
                     <InfoBox
diff --git a/apps/explorer/src/components/module/PkgModulesWrapper.tsx b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
index 7ab2bf326f9..f395ed43a16 100644
--- a/apps/explorer/src/components/module/PkgModulesWrapper.tsx
+++ b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
@@ -115,7 +115,7 @@ export function PkgModulesWrapper({
                         isLoading={false}
                         suggestions={searchSuggestions}
                         renderSuggestion={(suggestion) => (
-                            <div className="z-10 flex cursor-pointer justify-between bg-neutral-98">
+                            <div className="z-10 flex cursor-pointer justify-between">
                                 <ListItem
                                     hideBottomBorder
                                     onClick={() => onChangeModule(suggestion.label)}
diff --git a/apps/explorer/src/components/object/ObjectFieldsCard.tsx b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
index c6e2e8213bf..1f84395a840 100644
--- a/apps/explorer/src/components/object/ObjectFieldsCard.tsx
+++ b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
@@ -151,7 +151,7 @@ export function ObjectFieldsCard({
                                     }}
                                     isLoading={false}
                                     renderSuggestion={(suggestion) => (
-                                        <div className="flex cursor-pointer justify-between bg-neutral-98">
+                                        <div className="flex cursor-pointer justify-between">
                                             <ListItem hideBottomBorder>
                                                 <div className="overflow-hidden text-ellipsis">
                                                     {suggestion.label}
diff --git a/apps/explorer/src/components/search/Search.tsx b/apps/explorer/src/components/search/Search.tsx
index 36a9bedadaf..989f602b49f 100644
--- a/apps/explorer/src/components/search/Search.tsx
+++ b/apps/explorer/src/components/search/Search.tsx
@@ -46,7 +46,7 @@ function Search(): JSX.Element {
             isLoading={isPending || debouncedQuery !== query}
             suggestions={results}
             renderSuggestion={(suggestion) => (
-                <div className="flex cursor-pointer justify-between bg-neutral-98">
+                <div className="flex cursor-pointer justify-between">
                     <ListItem hideBottomBorder>
                         <div className="overflow-hidden text-ellipsis">{suggestion.label}</div>
                         <div className="break-words pl-xs text-caption font-medium uppercase text-steel">
diff --git a/apps/explorer/src/contexts/index.ts b/apps/explorer/src/contexts/index.ts
index ecbff639b22..83f927cac44 100644
--- a/apps/explorer/src/contexts/index.ts
+++ b/apps/explorer/src/contexts/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './networkContext';
+export * from './themeContext';
diff --git a/apps/explorer/src/contexts/themeContext.ts b/apps/explorer/src/contexts/themeContext.ts
new file mode 100644
index 00000000000..7eb62c669f6
--- /dev/null
+++ b/apps/explorer/src/contexts/themeContext.ts
@@ -0,0 +1,15 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { createContext } from 'react';
+import { Theme } from '~/lib/ui/enums';
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+    theme: Theme.Light,
+    setTheme: () => {},
+});
diff --git a/apps/explorer/src/hooks/index.ts b/apps/explorer/src/hooks/index.ts
index 9fbe82e3302..58d6f94ff47 100644
--- a/apps/explorer/src/hooks/index.ts
+++ b/apps/explorer/src/hooks/index.ts
@@ -21,3 +21,4 @@ export * from './useRecognizedPackages';
 export * from './useResolveVideo';
 export * from './useSearch';
 export * from './useVerifiedSourceCode';
+export * from './useTheme';
diff --git a/apps/explorer/src/hooks/useTheme.ts b/apps/explorer/src/hooks/useTheme.ts
new file mode 100644
index 00000000000..062e2c739fd
--- /dev/null
+++ b/apps/explorer/src/hooks/useTheme.ts
@@ -0,0 +1,13 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useContext } from 'react';
+import { ThemeContext } from '~/contexts';
+
+export function useTheme() {
+    if (!ThemeContext) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+
+    return useContext(ThemeContext);
+}
diff --git a/apps/explorer/src/index.css b/apps/explorer/src/index.css
index 0bb5ab54af4..ddc5cdaa069 100644
--- a/apps/explorer/src/index.css
+++ b/apps/explorer/src/index.css
@@ -24,6 +24,14 @@ body,
     --steel-dark: theme('colors.steel.dark');
 }
 
+:root {
+    @apply bg-neutral-98;
+}
+
+:root.dark {
+    @apply bg-neutral-4;
+}
+
 @layer base {
     body {
         @apply antialiased;
diff --git a/apps/explorer/src/lib/ui/enums/index.ts b/apps/explorer/src/lib/ui/enums/index.ts
new file mode 100644
index 00000000000..6e446b406da
--- /dev/null
+++ b/apps/explorer/src/lib/ui/enums/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './theme.enums';
diff --git a/apps/explorer/src/lib/ui/enums/theme.enums.ts b/apps/explorer/src/lib/ui/enums/theme.enums.ts
new file mode 100644
index 00000000000..ab9083c4725
--- /dev/null
+++ b/apps/explorer/src/lib/ui/enums/theme.enums.ts
@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum Theme {
+    Light = 'light',
+    Dark = 'dark',
+}
diff --git a/apps/explorer/src/lib/ui/index.ts b/apps/explorer/src/lib/ui/index.ts
index 2a8ffea5c8d..e0c955bd23b 100644
--- a/apps/explorer/src/lib/ui/index.ts
+++ b/apps/explorer/src/lib/ui/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './utils';
+export * from './enums';
diff --git a/apps/explorer/tailwind.config.ts b/apps/explorer/tailwind.config.ts
index 5532fa8c156..44372a0e8fe 100644
--- a/apps/explorer/tailwind.config.ts
+++ b/apps/explorer/tailwind.config.ts
@@ -11,6 +11,7 @@ import uiKitResponsivePreset from '../../apps/ui-kit/src/lib/tailwind/responsive
 export default {
     presets: [preset, uiKitResponsivePreset],
     content: ['./src/**/*.{js,jsx,ts,tsx}', './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}'],
+    darkMode: 'selector',
     theme: {
         // This COLOR are duplicated from @iota/core tailwind.config.ts!!!
         // They are repeated here cause uiKitResponsivePreset overwrites the colors, and they are still used throughout Explorer

From 4dd2d3412a242bee6ef0a95ca238dab21337943b Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Wed, 13 Nov 2024 17:39:01 +0100
Subject: [PATCH 2/8] fix: add missing style to the icon

---
 apps/explorer/src/components/header/ThemeSwitcher.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/explorer/src/components/header/ThemeSwitcher.tsx b/apps/explorer/src/components/header/ThemeSwitcher.tsx
index 5572769027d..23e786df888 100644
--- a/apps/explorer/src/components/header/ThemeSwitcher.tsx
+++ b/apps/explorer/src/components/header/ThemeSwitcher.tsx
@@ -49,5 +49,11 @@ export function ThemeSwitcher(): React.JSX.Element {
         updateDocumentClass(theme);
     }, [theme]);
 
-    return <Button type={ButtonType.Ghost} onClick={handleOnClick} icon={<ThemeIcon />} />;
+    return (
+        <Button
+            type={ButtonType.Ghost}
+            onClick={handleOnClick}
+            icon={<ThemeIcon className="h-5 w-5" />}
+        />
+    );
 }

From 0ad0e6ce4a7ca3d5a650fec4cc47d694fe4dc550 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Thu, 14 Nov 2024 17:22:39 +0100
Subject: [PATCH 3/8] fix: lint

---
 apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx   | 4 ++--
 .../transaction-result/transaction-summary/BalanceChanges.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
index c10f8ddb00b..d59f991df7d 100644
--- a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
+++ b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
@@ -57,13 +57,13 @@ function GasPaymentLinks({ objectIds }: { objectIds: string[] }): JSX.Element {
 function GasInfo({ label, info }: { label: string; info?: React.ReactNode }) {
     return (
         <div className="flex flex-col gap-2 md:flex-row md:gap-10">
-            <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 dark:text-neutral-60 md:w-40">
+            <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 md:w-40 dark:text-neutral-60">
                 {label}
             </span>
             {info ? (
                 info
             ) : (
-                <span className="text-label-lg text-neutral-40 dark:text-neutral-60 md:w-40">
+                <span className="text-label-lg text-neutral-40 md:w-40 dark:text-neutral-60">
                     --
                 </span>
             )}
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
index f532c0bcecc..0ba131507d0 100644
--- a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
+++ b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
@@ -66,7 +66,7 @@ function BalanceChangeEntry({ change }: { change: BalanceChange }): JSX.Element
             </Card>
             {recipient && (
                 <div className="flex flex-wrap items-center justify-between px-sm py-xs">
-                    <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 dark:text-neutral-60 md:w-40">
+                    <span className="w-full flex-shrink-0 text-label-lg text-neutral-40 md:w-40 dark:text-neutral-60">
                         Recipient
                     </span>
                     <AddressLink address={recipient} />

From 2d4369e4cb4d945c23da65b78610514b942a7fd9 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Fri, 22 Nov 2024 10:46:38 +0100
Subject: [PATCH 4/8] refactor: remove theme context from explorer

---
 .../explorer/src/components/ThemeProvider.tsx | 21 -------------------
 .../src/components/header/ThemeSwitcher.tsx   |  3 +--
 apps/explorer/src/components/index.ts         |  1 -
 .../explorer/src/components/layout/Layout.tsx |  5 ++---
 apps/explorer/src/contexts/index.ts           |  1 -
 apps/explorer/src/contexts/themeContext.ts    | 15 -------------
 apps/explorer/src/hooks/index.ts              |  1 -
 apps/explorer/src/hooks/useTheme.ts           | 13 ------------
 apps/explorer/src/lib/ui/enums/index.ts       |  4 ----
 apps/explorer/src/lib/ui/enums/theme.enums.ts |  7 -------
 apps/explorer/src/lib/ui/index.ts             |  1 -
 11 files changed, 3 insertions(+), 69 deletions(-)
 delete mode 100644 apps/explorer/src/components/ThemeProvider.tsx
 delete mode 100644 apps/explorer/src/contexts/themeContext.ts
 delete mode 100644 apps/explorer/src/hooks/useTheme.ts
 delete mode 100644 apps/explorer/src/lib/ui/enums/index.ts
 delete mode 100644 apps/explorer/src/lib/ui/enums/theme.enums.ts

diff --git a/apps/explorer/src/components/ThemeProvider.tsx b/apps/explorer/src/components/ThemeProvider.tsx
deleted file mode 100644
index 16dbb025c11..00000000000
--- a/apps/explorer/src/components/ThemeProvider.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useState, type PropsWithChildren } from 'react';
-import { ThemeContext } from '~/contexts';
-import { Theme } from '~/lib/ui';
-
-export function ThemeProvider({ children }: PropsWithChildren): React.JSX.Element {
-    const [theme, setTheme] = useState<Theme>(Theme.Light);
-
-    return (
-        <ThemeContext.Provider
-            value={{
-                theme,
-                setTheme,
-            }}
-        >
-            {children}
-        </ThemeContext.Provider>
-    );
-}
diff --git a/apps/explorer/src/components/header/ThemeSwitcher.tsx b/apps/explorer/src/components/header/ThemeSwitcher.tsx
index 23e786df888..3591cb4327b 100644
--- a/apps/explorer/src/components/header/ThemeSwitcher.tsx
+++ b/apps/explorer/src/components/header/ThemeSwitcher.tsx
@@ -4,8 +4,7 @@
 import { Button, ButtonType } from '@iota/apps-ui-kit';
 import { DarkMode, LightMode } from '@iota/ui-icons';
 import { useEffect, useLayoutEffect } from 'react';
-import { useTheme } from '~/hooks';
-import { Theme } from '~/lib/ui';
+import { useTheme, Theme } from '@iota/core';
 
 const ICON_MAP: Record<Theme, (props: React.SVGProps<SVGSVGElement>) => JSX.Element> = {
     [Theme.Light]: LightMode,
diff --git a/apps/explorer/src/components/index.ts b/apps/explorer/src/components/index.ts
index 3d5b44c71af..772dce10e38 100644
--- a/apps/explorer/src/components/index.ts
+++ b/apps/explorer/src/components/index.ts
@@ -30,4 +30,3 @@ export * from './GraphTooltipContent';
 export * from './IotaTokenCard';
 export * from './TransactionsCardGraph';
 export * from './ThemedIotaLogo';
-export * from './ThemeProvider';
diff --git a/apps/explorer/src/components/layout/Layout.tsx b/apps/explorer/src/components/layout/Layout.tsx
index 2b80b7e2171..e812b62240d 100644
--- a/apps/explorer/src/components/layout/Layout.tsx
+++ b/apps/explorer/src/components/layout/Layout.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { KioskClientProvider, useCookieConsentBanner } from '@iota/core';
+import { KioskClientProvider, useCookieConsentBanner, ThemeProvider } from '@iota/core';
 import { IotaClientProvider, WalletProvider } from '@iota/dapp-kit';
 import type { Network } from '@iota/iota-sdk/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -12,7 +12,6 @@ import { NetworkContext } from '~/contexts';
 import { useInitialPageView, useNetwork } from '~/hooks';
 import { createIotaClient, persistableStorage, SupportedNetworks } from '~/lib/utils';
 import { Toaster } from '../toaster';
-import { ThemeProvider } from '../ThemeProvider';
 
 export function Layout(): JSX.Element {
     const [network, setNetwork] = useNetwork();
@@ -40,7 +39,7 @@ export function Layout(): JSX.Element {
                 <WalletProvider autoConnect enableUnsafeBurner={import.meta.env.DEV}>
                     <KioskClientProvider>
                         <NetworkContext.Provider value={[network, setNetwork]}>
-                            <ThemeProvider>
+                            <ThemeProvider appId="iota-explorer">
                                 <Outlet />
                                 <Toaster />
                                 <ReactQueryDevtools />
diff --git a/apps/explorer/src/contexts/index.ts b/apps/explorer/src/contexts/index.ts
index 83f927cac44..ecbff639b22 100644
--- a/apps/explorer/src/contexts/index.ts
+++ b/apps/explorer/src/contexts/index.ts
@@ -2,4 +2,3 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './networkContext';
-export * from './themeContext';
diff --git a/apps/explorer/src/contexts/themeContext.ts b/apps/explorer/src/contexts/themeContext.ts
deleted file mode 100644
index 7eb62c669f6..00000000000
--- a/apps/explorer/src/contexts/themeContext.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { createContext } from 'react';
-import { Theme } from '~/lib/ui/enums';
-
-interface ThemeContextType {
-    theme: Theme;
-    setTheme: (theme: Theme) => void;
-}
-
-export const ThemeContext = createContext<ThemeContextType>({
-    theme: Theme.Light,
-    setTheme: () => {},
-});
diff --git a/apps/explorer/src/hooks/index.ts b/apps/explorer/src/hooks/index.ts
index 58d6f94ff47..9fbe82e3302 100644
--- a/apps/explorer/src/hooks/index.ts
+++ b/apps/explorer/src/hooks/index.ts
@@ -21,4 +21,3 @@ export * from './useRecognizedPackages';
 export * from './useResolveVideo';
 export * from './useSearch';
 export * from './useVerifiedSourceCode';
-export * from './useTheme';
diff --git a/apps/explorer/src/hooks/useTheme.ts b/apps/explorer/src/hooks/useTheme.ts
deleted file mode 100644
index 062e2c739fd..00000000000
--- a/apps/explorer/src/hooks/useTheme.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useContext } from 'react';
-import { ThemeContext } from '~/contexts';
-
-export function useTheme() {
-    if (!ThemeContext) {
-        throw new Error('useTheme must be used within a ThemeProvider');
-    }
-
-    return useContext(ThemeContext);
-}
diff --git a/apps/explorer/src/lib/ui/enums/index.ts b/apps/explorer/src/lib/ui/enums/index.ts
deleted file mode 100644
index 6e446b406da..00000000000
--- a/apps/explorer/src/lib/ui/enums/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export * from './theme.enums';
diff --git a/apps/explorer/src/lib/ui/enums/theme.enums.ts b/apps/explorer/src/lib/ui/enums/theme.enums.ts
deleted file mode 100644
index ab9083c4725..00000000000
--- a/apps/explorer/src/lib/ui/enums/theme.enums.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export enum Theme {
-    Light = 'light',
-    Dark = 'dark',
-}
diff --git a/apps/explorer/src/lib/ui/index.ts b/apps/explorer/src/lib/ui/index.ts
index e0c955bd23b..2a8ffea5c8d 100644
--- a/apps/explorer/src/lib/ui/index.ts
+++ b/apps/explorer/src/lib/ui/index.ts
@@ -2,4 +2,3 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './utils';
-export * from './enums';

From 70f02cfe4cfde2ebcd8e376238b7a7002565cdee Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:25:52 +0100
Subject: [PATCH 5/8] feat(explorer): add background to search suggestions
 (#4162)

* feat(explorer): add backgrounds to the search suggestions

* refactor: add styles to search ui kit

* revert changes

* fix: remove unnecessary backdrop-blur
---
 apps/ui-kit/src/lib/components/molecules/search/Search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui-kit/src/lib/components/molecules/search/Search.tsx b/apps/ui-kit/src/lib/components/molecules/search/Search.tsx
index 467d89c6581..35565d8f6af 100644
--- a/apps/ui-kit/src/lib/components/molecules/search/Search.tsx
+++ b/apps/ui-kit/src/lib/components/molecules/search/Search.tsx
@@ -162,7 +162,7 @@ export function Search({
                 <div
                     ref={suggestionsListRef}
                     className={cx(
-                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden',
+                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden bg-neutral-100 dark:bg-neutral-10',
                         suggestionsStyle,
                     )}
                 >

From 21d12524e8a0832cd15bbccbaef8599de06b99e1 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:53:13 +0100
Subject: [PATCH 6/8] fix: remove map

---
 apps/explorer/src/components/header/ThemeSwitcher.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/explorer/src/components/header/ThemeSwitcher.tsx b/apps/explorer/src/components/header/ThemeSwitcher.tsx
index 3591cb4327b..d8dc4c2fb24 100644
--- a/apps/explorer/src/components/header/ThemeSwitcher.tsx
+++ b/apps/explorer/src/components/header/ThemeSwitcher.tsx
@@ -6,15 +6,10 @@ import { DarkMode, LightMode } from '@iota/ui-icons';
 import { useEffect, useLayoutEffect } from 'react';
 import { useTheme, Theme } from '@iota/core';
 
-const ICON_MAP: Record<Theme, (props: React.SVGProps<SVGSVGElement>) => JSX.Element> = {
-    [Theme.Light]: LightMode,
-    [Theme.Dark]: DarkMode,
-};
-
 export function ThemeSwitcher(): React.JSX.Element {
     const { theme, setTheme } = useTheme();
 
-    const ThemeIcon = ICON_MAP[theme];
+    const ThemeIcon = theme === Theme.Dark ? DarkMode : LightMode;
 
     function handleOnClick(): void {
         const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;

From a335b67c1cadb52453ea7ac63b507edbe1d90f45 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 25 Nov 2024 19:35:53 +0100
Subject: [PATCH 7/8] feat(explorer): add darkmode support to epoch page
 (#4160)

* feat: polish darkmode

* fix format

* feat: update imports
---
 .../src/components/ui/ProgressBar.tsx         |  4 ++--
 apps/explorer/src/components/ui/RingChart.tsx |  6 ++++--
 .../explorer/src/pages/epochs/EpochDetail.tsx |  8 ++++----
 .../pages/epochs/stats/ValidatorStatus.tsx    | 19 ++++++++++++++-----
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/apps/explorer/src/components/ui/ProgressBar.tsx b/apps/explorer/src/components/ui/ProgressBar.tsx
index c6e2e8ae7e3..ef0d8b9e99a 100644
--- a/apps/explorer/src/components/ui/ProgressBar.tsx
+++ b/apps/explorer/src/components/ui/ProgressBar.tsx
@@ -26,10 +26,10 @@ export interface ProgressBarProps {
 
 export function ProgressBar({ progress }: ProgressBarProps): JSX.Element {
     return (
-        <div className="relative w-full rounded-full bg-primary-90">
+        <div className="relative w-full rounded-full bg-primary-90 dark:bg-primary-10">
             <motion.div
                 variants={getProgressBarVariant(progress)}
-                className="h-1 rounded-full bg-primary-30"
+                className="h-1 rounded-full bg-primary-30 dark:bg-primary-80"
                 initial="initial"
                 animate="animate"
             />
diff --git a/apps/explorer/src/components/ui/RingChart.tsx b/apps/explorer/src/components/ui/RingChart.tsx
index 7f320e307b6..5ead57032ec 100644
--- a/apps/explorer/src/components/ui/RingChart.tsx
+++ b/apps/explorer/src/components/ui/RingChart.tsx
@@ -50,7 +50,7 @@ export function RingChartLegend({ data }: RingChartLegendProps): JSX.Element {
                             style={{ background: colorDisplay }}
                             className="h-1.5 w-1.5 rounded-full"
                         />
-                        <div className="text-label-md text-neutral-10">
+                        <div className="text-label-md text-neutral-10 dark:text-neutral-92">
                             {value} {label}
                         </div>
                     </div>
@@ -123,7 +123,9 @@ export function RingChart({
             </svg>
             <div className="absolute inset-0 mx-auto flex items-center justify-center">
                 <div className="flex flex-col items-center gap-1.5">
-                    <span className="text-title-md text-neutral-10">{total}</span>
+                    <span className="text-title-md text-neutral-10 dark:text-neutral-92">
+                        {total}
+                    </span>
                 </div>
             </div>
         </div>
diff --git a/apps/explorer/src/pages/epochs/EpochDetail.tsx b/apps/explorer/src/pages/epochs/EpochDetail.tsx
index be17ede1df1..cf6b074838d 100644
--- a/apps/explorer/src/pages/epochs/EpochDetail.tsx
+++ b/apps/explorer/src/pages/epochs/EpochDetail.tsx
@@ -13,6 +13,7 @@ import {
     InfoBoxStyle,
     InfoBoxType,
     LoadingIndicator,
+    Panel,
     SegmentedButton,
     SegmentedButtonType,
 } from '@iota/apps-ui-kit';
@@ -165,9 +166,8 @@ export default function EpochDetail() {
                         {isCurrentEpoch && <ValidatorStatus />}
                     </div>
 
-                    <div className="rounded-xl bg-white">
+                    <Panel>
                         <div className="relative">
-                            <div className="border-shader-inverte-dark-8 absolute bottom-0 left-0 z-0 h-[1px] w-full border-b" />
                             <SegmentedButton
                                 type={SegmentedButtonType.Transparent}
                                 shape={ButtonSegmentType.Underlined}
@@ -186,7 +186,7 @@ export default function EpochDetail() {
                                 />
                             </SegmentedButton>
                         </div>
-                        <div className="px-lg py-md">
+                        <div className="p-md">
                             {activeTabId === EpochTabs.Checkpoints ? (
                                 <CheckpointsTable
                                     initialCursor={initialCursorPlusOne}
@@ -198,7 +198,7 @@ export default function EpochDetail() {
                                 <TableCard data={tableData} columns={tableColumns} />
                             ) : null}
                         </div>
-                    </div>
+                    </Panel>
                 </div>
             }
         />
diff --git a/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx b/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx
index 449029b3217..0fdf6b62d48 100644
--- a/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx
+++ b/apps/explorer/src/pages/epochs/stats/ValidatorStatus.tsx
@@ -3,14 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { DisplayStats, IOTA_PRIMITIVES_COLOR_PALETTE, Panel, Title } from '@iota/apps-ui-kit';
-import { getRefGasPrice } from '@iota/core';
+import { getRefGasPrice, useTheme, Theme } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { useMemo } from 'react';
-
 import { RingChart, RingChartLegend } from '~/components/ui';
 
 export function ValidatorStatus(): JSX.Element | null {
     const { data } = useIotaClientQuery('getLatestIotaSystemState');
+    const { theme } = useTheme();
 
     const nextRefGasPrice = useMemo(
         () => getRefGasPrice(data?.activeValidators),
@@ -31,8 +31,14 @@ export function ValidatorStatus(): JSX.Element | null {
             gradient: {
                 deg: 315,
                 values: [
-                    { percent: 0, color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30] },
-                    { percent: 100, color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30] },
+                    {
+                        percent: 0,
+                        color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30],
+                    },
+                    {
+                        percent: 100,
+                        color: IOTA_PRIMITIVES_COLOR_PALETTE.primary[30],
+                    },
                 ],
             },
         },
@@ -44,7 +50,10 @@ export function ValidatorStatus(): JSX.Element | null {
         {
             value: data.atRiskValidators.length,
             label: 'At Risk',
-            color: IOTA_PRIMITIVES_COLOR_PALETTE.neutral[90],
+            color:
+                theme === Theme.Dark
+                    ? IOTA_PRIMITIVES_COLOR_PALETTE.neutral[20]
+                    : IOTA_PRIMITIVES_COLOR_PALETTE.neutral[90],
         },
     ];
 

From 0861206d68bde91dacbdc7862cba64699895a02f Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:37:21 +0100
Subject: [PATCH 8/8] feat(explorer): improve darkmode colors for transaction
 page (#4158)

* feat(explorer): improve darkmode colors for transaction page

* feat: add button to the split panes
---
 .../components/gas-breakdown/GasBreakdown.tsx |  6 +++-
 .../transactions/ProgTxnBlockCard.tsx         |  2 +-
 .../explorer/src/components/ui/SplitPanes.tsx | 34 +++++++------------
 .../ui/collapsible/CollapsibleCard.tsx        |  4 ++-
 .../Transaction.tsx                           |  2 +-
 .../transaction-summary/BalanceChanges.tsx    |  1 +
 6 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
index d59f991df7d..ae04b54ddf8 100644
--- a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
+++ b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
@@ -91,7 +91,11 @@ export function GasBreakdown({ summary }: GasBreakdownProps): JSX.Element | null
     const isSponsored = gasData.isSponsored;
 
     return (
-        <CollapsibleCard collapsible render={({ isOpen }) => <Title title="Gas & Storage Fee" />}>
+        <CollapsibleCard
+            collapsible
+            render={({ isOpen }) => <Title title="Gas & Storage Fee" />}
+            hideBorder
+        >
             <div className="px-md--rs pb-lg pt-xs">
                 <Accordion hideBorder>
                     <AccordionContent isExpanded>
diff --git a/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx b/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
index 6d52b6e1212..a2610bf9471 100644
--- a/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
+++ b/apps/explorer/src/components/transactions/ProgTxnBlockCard.tsx
@@ -35,7 +35,7 @@ export function ProgrammableTxnBlockCard({
     const itemsToShow = defaultItemsToShow || items.length;
 
     return (
-        <CollapsibleCard collapsible initialClose={initialClose} title={cardTitle}>
+        <CollapsibleCard collapsible initialClose={initialClose} title={cardTitle} hideBorder>
             <ExpandableList items={items} defaultItemsToShow={itemsToShow} itemsLabel={itemsLabel}>
                 <div className="flex flex-col gap-xs overflow-y-auto p-md--rs pt-xs--rs">
                     {noExpandableList ? <>{items}</> : <ExpandableListItems />}
diff --git a/apps/explorer/src/components/ui/SplitPanes.tsx b/apps/explorer/src/components/ui/SplitPanes.tsx
index 9b146b6f399..be26b5d04f8 100644
--- a/apps/explorer/src/components/ui/SplitPanes.tsx
+++ b/apps/explorer/src/components/ui/SplitPanes.tsx
@@ -2,6 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';
 import { ArrowRight, ArrowUp } from '@iota/ui-icons';
 import { cva, type VariantProps } from 'class-variance-authority';
 import clsx from 'clsx';
@@ -93,35 +94,26 @@ function ResizeHandle({
             onDragging={setIsDragging}
         >
             <div
+                data-is-dragging={isDragging}
                 className={clsx(
-                    'relative bg-shader-neutral-light-8 group-hover/container:bg-primary-30 dark:bg-shader-neutral-dark-8',
+                    'relative bg-shader-neutral-light-8 group-hover/container:bg-neutral-70 dark:bg-shader-neutral-dark-8 dark:group-hover/container:bg-primary-80/40',
                     isHorizontal ? 'h-full w-px' : 'h-px',
-                    noHoverHidden && !isCollapsed && 'bg-transparent',
                 )}
             >
                 {collapsibleButton && (
-                    <button
-                        type="button"
-                        onClick={togglePanelCollapse}
-                        data-is-dragging={isDragging}
-                        className={clsx([
-                            'group/button',
-                            'flex h-6 w-6 cursor-pointer items-center justify-center rounded-full',
-                            'border border-neutral-70 bg-white text-neutral-60 group-hover/container:border-primary-30',
-                            'hover:bg-primary-30 hover:text-white',
-                            isHorizontal
-                                ? 'absolute left-1/2 top-10 -translate-x-2/4'
-                                : 'absolute left-10 top-1/2 -translate-y-2/4',
+                    <div
+                        className={clsx(
+                            'absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 transform [&_button]:p-xxs',
                             noHoverHidden && !isCollapsed && 'hidden group-hover/container:flex',
-                        ])}
+                        )}
                     >
-                        <ChevronButton
-                            className={clsx(
-                                'h-4 w-4 text-neutral-70 group-hover/button:!text-white group-hover/container:text-primary-30',
-                                isCollapsed && 'rotate-180',
-                            )}
+                        <Button
+                            size={ButtonSize.Small}
+                            onClick={togglePanelCollapse}
+                            type={ButtonType.Secondary}
+                            icon={<ChevronButton className={clsx(!isCollapsed && 'rotate-180')} />}
                         />
-                    </button>
+                    </div>
                 )}
             </div>
         </PanelResizeHandle>
diff --git a/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx b/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx
index 9a3c27c6be8..9c2fe974472 100644
--- a/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx
+++ b/apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx
@@ -25,6 +25,7 @@ export interface CollapsibleCardProps {
     hideBorder?: boolean;
     render?: ({ isOpen }: { isOpen: boolean }) => ReactNode;
     supportingTitleElement?: ReactNode;
+    isTransparentPanel?: boolean;
 }
 
 export function CollapsibleCard({
@@ -38,6 +39,7 @@ export function CollapsibleCard({
     hideBorder,
     render,
     supportingTitleElement,
+    isTransparentPanel,
 }: CollapsibleCardProps) {
     const [open, setOpen] = useState(!initialClose);
     return collapsible ? (
@@ -69,7 +71,7 @@ export function CollapsibleCard({
             </Accordion>
         </div>
     ) : (
-        <Panel hasBorder={!hideBorder}>
+        <Panel hasBorder={!hideBorder} bgColor={isTransparentPanel ? 'bg-transparent' : undefined}>
             <Title size={titleSize} title={title ?? ''} />
             <div>{children}</div>
             {footer && (
diff --git a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
index c6525f746c9..dc2156467fd 100644
--- a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
+++ b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
@@ -43,7 +43,7 @@ function MoveCall({ data }: TransactionProps<MoveCallIotaTransaction>): JSX.Elem
         <span className="text-body-md text-neutral-40 dark:text-neutral-60">
             package: <ObjectLink objectId={movePackage} />, module:{' '}
             <ObjectLink objectId={`${movePackage}?module=${module}`} label={`'${module}'`} />,
-            function: <span className="break-all text-primary-30">{func}</span>
+            function: <span className="break-all text-primary-30 dark:text-primary-80">{func}</span>
             {args && (
                 <span className="break-all">, arguments: [{flattenIotaArguments(args!)}]</span>
             )}
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
index 0ba131507d0..3aae316b78e 100644
--- a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
+++ b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
@@ -85,6 +85,7 @@ function BalanceChangeCard({ changes, owner }: { changes: BalanceChange[]; owner
     return (
         <CollapsibleCard
             title="Balance Changes"
+            isTransparentPanel
             footer={
                 owner ? (
                     <div className="flex flex-wrap justify-between px-md--rs py-sm--rs">