From 31973cbbe30acafaa39169bc53dc660830ebd1b0 Mon Sep 17 00:00:00 2001
From: Ryuji Eguchi <jp.ryuji@gmail.com>
Date: Wed, 20 Dec 2023 13:39:16 +1100
Subject: [PATCH 1/4] toggle color themes

---
 app/components/LiquidityPoolTable.tsx   |   1 -
 app/components/layout/Header.tsx        |  12 +-
 app/components/layout/ThemeSwitcher.tsx |  25 +++
 app/context/theme.provider.tsx          |  43 ++++
 app/root.tsx                            |  76 ++++---
 app/styles/styles.css                   |  11 +-
 app/styles/styles.light.css             | 269 ++++++++++++++++++++++++
 public/img/moon.svg                     |   3 +
 public/img/sun.svg                      |   3 +
 9 files changed, 409 insertions(+), 34 deletions(-)
 create mode 100644 app/components/layout/ThemeSwitcher.tsx
 create mode 100644 app/context/theme.provider.tsx
 create mode 100644 app/styles/styles.light.css
 create mode 100644 public/img/moon.svg
 create mode 100644 public/img/sun.svg

diff --git a/app/components/LiquidityPoolTable.tsx b/app/components/LiquidityPoolTable.tsx
index baa525034..c76483973 100644
--- a/app/components/LiquidityPoolTable.tsx
+++ b/app/components/LiquidityPoolTable.tsx
@@ -111,7 +111,6 @@ export default function LiquidityPoolTable({
             <th>
               <FormattedMessage id="liquidity-pool.trustlines" />
             </th>
-            <th />
           </tr>
         </thead>
         <tbody>
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index ccba2acd4..c8bcc62fc 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -10,6 +10,8 @@ import logoImg from '../../img/logo.png'
 import LanguageSelector from './LanguageSelector'
 import NetworkSelector from './NetworkSelector'
 import type { NetworkKey } from '~/lib/stellar/networks'
+import { Theme, useTheme } from '~/context/theme.provider'
+import ThemeSwitcher from './ThemeSwitcher'
 
 interface HeaderProps {
   languageSwitcher: MouseEventHandler
@@ -23,6 +25,12 @@ export default function Header({
   networkIsLocal,
 }: HeaderProps) {
   const { formatMessage } = useIntl()
+  const [theme, setTheme] = useTheme()
+  const toggleTheme = () => {
+    setTheme((prevTheme) =>
+      prevTheme === Theme.Light ? Theme.Dark : Theme.Light,
+    )
+  }
   return (
     <Navbar collapseOnSelect expand="xxl" fixed="top">
       <Navbar.Brand href="/">
@@ -59,7 +67,6 @@ export default function Header({
           <Nav.Link href="/exchanges">
             <FormattedMessage id="exchanges" />
           </Nav.Link>
-
           <div className="divider-vertical" />
 
           <NavDropdown
@@ -95,6 +102,9 @@ export default function Header({
               networkIsLocal={networkIsLocal}
             />
           </NavItem>
+          <NavItem onClick={toggleTheme}>
+            <ThemeSwitcher theme={theme} />
+          </NavItem>
           <NavItem>
             <LanguageSelector switcher={languageSwitcher} />
           </NavItem>
diff --git a/app/components/layout/ThemeSwitcher.tsx b/app/components/layout/ThemeSwitcher.tsx
new file mode 100644
index 000000000..a32a932ac
--- /dev/null
+++ b/app/components/layout/ThemeSwitcher.tsx
@@ -0,0 +1,25 @@
+import { Theme } from '~/context/theme.provider'
+import lightIcon from 'public/img/sun.svg'
+import darkIcon from 'public/img/moon.svg'
+
+const ThemeSwitcher = ({
+  theme = Theme.Dark,
+}: {
+  theme: Theme | undefined
+}) => {
+  return (
+    <div className="theme-selector">
+      {theme === Theme.Light ? <LightIcon /> : <DarkIcon />}
+    </div>
+  )
+}
+
+const DarkIcon = () => {
+  return <img src={darkIcon} alt="moon" width={32} height={32} />
+}
+
+const LightIcon = () => {
+  return <img src={lightIcon} alt="sun" width={32} height={32} />
+}
+
+export default ThemeSwitcher
diff --git a/app/context/theme.provider.tsx b/app/context/theme.provider.tsx
new file mode 100644
index 000000000..909b25c98
--- /dev/null
+++ b/app/context/theme.provider.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode, Dispatch, SetStateAction } from 'react'
+import { createContext, useContext, useState, useEffect } from 'react'
+
+enum Theme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+type ThemeContextType = [
+  Theme | undefined,
+  Dispatch<SetStateAction<Theme | undefined>>,
+]
+
+const ThemeContext = createContext<ThemeContextType>([undefined, () => {}])
+
+function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme | undefined>(undefined)
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme')
+    if (savedTheme) {
+      setTheme(savedTheme as Theme)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (theme) {
+      localStorage.setItem('theme', theme)
+    }
+  }, [theme])
+
+  return (
+    <ThemeContext.Provider value={[theme, setTheme]}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+function useTheme(): ThemeContextType {
+  return useContext(ThemeContext)
+}
+
+export { Theme, ThemeProvider, useTheme }
diff --git a/app/root.tsx b/app/root.tsx
index d0fcaf604..7347c3377 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { IntlProvider } from 'react-intl'
 import { cssBundleHref } from '@remix-run/css-bundle'
 import { json } from '@remix-run/node'
@@ -20,6 +20,7 @@ import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix'
 import bootstrapStyles from 'bootstrap/dist/css/bootstrap.css'
 import jsonPrettyStyles from 'react-json-pretty/themes/1337.css'
 import siteStyles from '~/styles/styles.css'
+import lightSiteStyles from '~/styles/styles.light.css'
 
 import Footer from './components/layout/Footer'
 import Header from './components/layout/Header'
@@ -39,11 +40,13 @@ import { storageInit } from './lib/utils'
 import SearchBox from './SearchBox'
 import type { V2_ErrorBoundaryComponent } from '@remix-run/react/dist/routeModules'
 import { NotFoundError } from 'stellar-sdk'
+import { ThemeProvider, useTheme } from '~/context/theme.provider'
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: bootstrapStyles },
   { rel: 'stylesheet', href: jsonPrettyStyles },
   { rel: 'stylesheet', href: siteStyles },
+  { rel: 'stylesheet', href: lightSiteStyles },
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ]
 
@@ -84,8 +87,15 @@ function HtmlDocument({
   children,
   title,
 }: PropsWithChildren<{ title?: string }>) {
+  const [theme] = useTheme()
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    setIsLoading(false)
+  }, [])
+
   return (
-    <html lang="en">
+    <html lang="en" data-bs-theme={theme}>
       <head>
         <meta charSet="utf-8" />
         <meta
@@ -105,7 +115,7 @@ function HtmlDocument({
         <Links />
       </head>
       <body>
-        {children}
+        {!isLoading && children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -128,29 +138,31 @@ function App() {
   const { networkType, isLocal } = useLoaderData<typeof loader>()
 
   return (
-    <HtmlDocument>
-      <div className="App">
-        <IntlProvider
-          key={language}
-          locale={language}
-          messages={getMessages(language)}
-        >
-          <Header
-            languageSwitcher={languageSwitcherFn(setLanguage)}
-            networkType={networkType}
-            networkIsLocal={isLocal}
-          />
-          <SearchBox />
-          <div
-            id="main-content"
-            className={navigation.state === 'loading' ? 'loading' : ''}
+    <ThemeProvider>
+      <HtmlDocument>
+        <div className="App">
+          <IntlProvider
+            key={language}
+            locale={language}
+            messages={getMessages(language)}
           >
-            <Outlet />
-          </div>
-        </IntlProvider>
-        <Footer />
-      </div>
-    </HtmlDocument>
+            <Header
+              languageSwitcher={languageSwitcherFn(setLanguage)}
+              networkType={networkType}
+              networkIsLocal={isLocal}
+            />
+            <SearchBox />
+            <div
+              id="main-content"
+              className={navigation.state === 'loading' ? 'loading' : ''}
+            >
+              <Outlet />
+            </div>
+          </IntlProvider>
+          <Footer />
+        </div>
+      </HtmlDocument>
+    </ThemeProvider>
   )
 }
 
@@ -173,12 +185,14 @@ export const ErrorBoundary: V2_ErrorBoundaryComponent = () => {
   }
 
   return (
-    <HtmlDocument title="Stellar Explorer - Error">
-      <div className="error-container">
-        <h1>Error</h1>
-        <pre>{errorMessage}</pre>
-      </div>
-    </HtmlDocument>
+    <ThemeProvider>
+      <HtmlDocument title="Stellar Explorer - Error">
+        <div className="error-container">
+          <h1>Error</h1>
+          <pre>{errorMessage}</pre>
+        </div>
+      </HtmlDocument>
+    </ThemeProvider>
   )
 }
 
diff --git a/app/styles/styles.css b/app/styles/styles.css
index 8c24708b0..e8195aac4 100644
--- a/app/styles/styles.css
+++ b/app/styles/styles.css
@@ -1,4 +1,7 @@
-body,
+body {
+  background-color: #3c4452;
+}
+
 .navbar {
   color: #96a2b4;
   background-color: #3c4452 !important;
@@ -7,6 +10,7 @@ body,
   sans-serif;
 }
 
+
 .navbar {
   padding: 0 15px 0 0;
   border-bottom: 1px solid #96A2B4;
@@ -259,6 +263,7 @@ pre#plain-text {
   }
 
   #language-selector,
+  .theme-selector,
   .network-selector {
     margin-top: 10px;
     margin-left: 15px !important;
@@ -293,6 +298,10 @@ pre#plain-text {
 /*************************************************************/
 
 #language-selector {
+  margin-left: 10px;
+}
+
+.theme-selector {
   margin-left: 30px;
 }
 
diff --git a/app/styles/styles.light.css b/app/styles/styles.light.css
new file mode 100644
index 000000000..5e58680be
--- /dev/null
+++ b/app/styles/styles.light.css
@@ -0,0 +1,269 @@
+[data-bs-theme="light"] {
+  --light-color: #000000;
+  --light-background-color: #ffffff;
+  --light-text-color: #535454 ;  /* #96a2b4 */
+  --light-table-bg: #efefef; /* #383f4b */
+  --light-body-bg: #e7e7e7;
+}
+
+[data-bs-theme="light"] body {
+  background-color: var(--light-body-bg)
+}
+
+[data-bs-theme="light"] .navbar {
+  color: var(--light-color);
+  background-color: var(--light-background-color) !important;
+  font-family: "Noto Sans",
+  "Noto Sans CJK {SC, TC}",
+  sans-serif;
+}
+
+[data-bs-theme="light"] .navbar-toggler {
+  color: transparent;
+}
+
+[data-bs-theme="light"] hr {
+  border-top: 1px solid #4c5667;
+}
+
+
+[data-bs-theme="light"] #footer {
+  border-top: 1px solid #4c5667;
+}
+
+[data-bs-theme="light"] .modal-header, .modal-body {
+  background-color: var(--light-table-bg);
+}
+
+[data-bs-theme="light"] .__json-pretty__ {
+  border: 1px black solid;
+  font-size: 13px;
+  background-color: var(--light-body-bg);
+  color: black;
+}
+
+[data-bs-theme="light"] .__json-string__ {
+  color: blue;
+}
+
+/* server.toml: */
+[data-bs-theme="light"] pre#plain-text {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+[data-bs-theme="light"] .brand-text {
+  color: gray;
+}
+
+[data-bs-theme="light"] .card {
+  background-color: var(--light-background-color);
+  color: #96a2b4;
+}
+
+[data-bs-theme="light"] .card-default>.card-header {
+  background-color: var(--light-background-color);
+  color: #dce2ec;
+}
+
+[data-bs-theme="light"] .card-header .pull-right {
+  float: right;
+  color: #fb9678 !important;
+}
+
+[data-bs-theme="light"] .card-header .pull-right:hover {
+  color: #fa6f46 !important;
+}
+
+[data-bs-theme="light"] .secondary-heading {
+  color: #96a2b4;
+}
+
+[data-bs-theme="light"] [id*="-table"] thead th {
+  color: #242424 !important;
+}
+
+[data-bs-theme="light"] [id*="-table"] tbody td {
+  color: #96a2b4 !important;
+}
+
+[data-bs-theme="light"] [id*="-table"]>tbody>tr>td {
+  border-top: 1px solid #4c5667;
+}
+
+[data-bs-theme="light"] .filter .disclaimer {
+  color: rgb(3, 169, 243);
+}
+
+[data-bs-theme="light"] .card-body td {
+  color: var(--light-text-color) !important;
+}
+
+[data-bs-theme="light"]
+.table>thead>tr>th,
+.table>tbody>tr:nth-of-type(odd)>td,
+.table>tbody>tr:nth-of-type(even)>td {
+  background-color: var(--light-table-bg);
+}
+
+/* For language dropdown */
+
+[data-bs-theme="light"] .nav-link {
+  color: gray;
+}
+
+[data-bs-theme="light"]
+.nav-link:hover,
+.nav-link:focus {
+  background-color: var(--light-background-color) !important;
+  color: #08b5e5 !important;
+}
+
+[data-bs-theme="light"] .divider-vertical {
+  border-right: 1px solid #96a2b4;
+}
+
+@media (max-width: 1300px) {
+  [data-bs-theme="light"] #language-selector,
+  .network-selector {
+    border-top: hsla(210, 8%, 51%, .28) solid 1px;
+  }
+
+  [data-bs-theme="light"] .dropdown-menu {
+    background-color: var(--light-background-color);
+  }
+
+  [data-bs-theme="light"] .dropdown-menu a {
+    color: #00c292 !important;
+  }
+}
+
+/*************************************************************/
+
+[data-bs-theme="light"] #language-selector>span.caret {
+  color: #dce2ec !important;
+}
+
+[data-bs-theme="light"] .network-selector button {
+  background: #08b5e5;
+  border: 1px solid #08b5e5;
+  color: white;
+}
+
+[data-bs-theme="light"] .network-selector .is-inactive {
+  background: transparent;
+  color: #08b5e5;
+}
+
+[data-bs-theme="light"] .network-selector .is-inactive:hover {
+  background: #08b5e5;
+  color: white;
+}
+
+[data-bs-theme="light"] .stellarToml a {
+  background-color: #fec107 !important;
+  color: white !important;
+}
+
+[data-bs-theme="light"] .directoryRow {
+  border-bottom: 1px solid #4c5667;
+}
+
+[data-bs-theme="light"] .directoryRow .anchorLinkCol span a:hover {
+  background-color: #fece3a !important;
+}
+
+[data-bs-theme="light"] #account-id {
+  color: white;
+}
+
+[data-bs-theme="light"]
+#account-nav,
+#contract-nav {
+  background-color: var(--light-table-bg);
+}
+
+[data-bs-theme="light"]
+#account-nav>a,
+#contract-nav>a {
+  color: #96a2b4;
+}
+
+[data-bs-theme="light"]
+#account-nav>a:hover,
+#contract-nav>a:hover {
+  background-color: var(--light-background-color) !important;
+  color: #01c0c8;
+}
+
+[data-bs-theme="light"]
+#account-tab-content,
+#contract-tab-content {
+  background-color: var(--light-table-bg);
+}
+
+[data-bs-theme="light"]
+.account-tab-active,
+.contract-tab-active {
+  color: #01c0c8 !important;
+  background-color: white;
+}
+
+[data-bs-theme="light"] .account-badge a {
+  background-color: #03a9f3;
+  color: white;
+}
+
+[data-bs-theme="light"] .account-badge span a:hover {
+  color: white;
+}
+
+[data-bs-theme="light"] #paging-controls button {
+  background-color: #08b5e5 !important;
+  color: #ffffff;
+}
+
+[data-bs-theme="light"] #paging-controls button:hover {
+  background-color: #3c4452 !important;
+}
+
+[data-bs-theme="light"] a {
+  color: #00c292;
+}
+
+[data-bs-theme="light"] a:hover {
+  color: #008f6c;
+}
+
+[data-bs-theme="light"] .col-md-1 a span {
+  color: white !important;
+  background-color: #01c0c8 !important;
+}
+
+[data-bs-theme="light"] .col-md-1 a span:hover {
+  background-color: #01a8af !important;
+}
+
+[data-bs-theme="light"] .green-blue-button {
+  color: white !important;
+  background-color: #01c0c8 !important;
+}
+
+[data-bs-theme="light"] .green-blue-button:hover {
+  background-color: #01a8af !important;
+}
+
+[data-bs-theme="light"] .backend-resource-badge-button {
+  color: white;
+  background-color: #01c0c8;
+}
+
+/*
+Mobile Rules
+*/
+
+@media only screen and (max-width: 600px) {
+  [data-bs-theme="light"] #search-container .input-group-text {
+    background-color: #01c0c8;
+  }
+}
diff --git a/public/img/moon.svg b/public/img/moon.svg
new file mode 100644
index 000000000..f1a84ab6f
--- /dev/null
+++ b/public/img/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-moon" viewBox="0 0 16 16">
+  <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278M4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
+</svg>
diff --git a/public/img/sun.svg b/public/img/sun.svg
new file mode 100644
index 000000000..e870c1e89
--- /dev/null
+++ b/public/img/sun.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high" viewBox="0 0 16 16">
+  <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+</svg>

From 9d613d1871f29bd65c2ada1fd5b87d07586e22f9 Mon Sep 17 00:00:00 2001
From: Ryuji Eguchi <jp.ryuji@gmail.com>
Date: Fri, 22 Dec 2023 16:41:11 +1100
Subject: [PATCH 2/4] default to light theme and fix invisible parts

---
 app/SearchBox.tsx                       |  3 ++-
 app/components/layout/Header.tsx        | 12 +++------
 app/components/layout/ThemeSwitcher.tsx | 21 ++++++++-------
 app/components/shared/ClipboardCopy.tsx |  4 +--
 app/context/theme.provider.tsx          |  8 +-----
 app/styles/styles.css                   | 34 ++++++++++++++++++++++++-
 app/styles/styles.light.css             | 33 ++++++++++++++++--------
 public/clipboard.svg                    |  2 +-
 public/info-circle.svg                  |  2 +-
 9 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/app/SearchBox.tsx b/app/SearchBox.tsx
index 3e3362dde..5ddee2cd5 100644
--- a/app/SearchBox.tsx
+++ b/app/SearchBox.tsx
@@ -195,7 +195,8 @@ export default function SearchBox() {
               >
                 <img
                   src={infoCircleSvg}
-                  style={{ color: 'white', height: 24, width: 24 }}
+                  alt="search info"
+                  className="info-icon"
                   onClick={handleClickFn}
                 />
               </InputGroup.Text>
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index c8bcc62fc..02b0d572e 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -10,7 +10,6 @@ import logoImg from '../../img/logo.png'
 import LanguageSelector from './LanguageSelector'
 import NetworkSelector from './NetworkSelector'
 import type { NetworkKey } from '~/lib/stellar/networks'
-import { Theme, useTheme } from '~/context/theme.provider'
 import ThemeSwitcher from './ThemeSwitcher'
 
 interface HeaderProps {
@@ -25,12 +24,7 @@ export default function Header({
   networkIsLocal,
 }: HeaderProps) {
   const { formatMessage } = useIntl()
-  const [theme, setTheme] = useTheme()
-  const toggleTheme = () => {
-    setTheme((prevTheme) =>
-      prevTheme === Theme.Light ? Theme.Dark : Theme.Light,
-    )
-  }
+
   return (
     <Navbar collapseOnSelect expand="xxl" fixed="top">
       <Navbar.Brand href="/">
@@ -102,8 +96,8 @@ export default function Header({
               networkIsLocal={networkIsLocal}
             />
           </NavItem>
-          <NavItem onClick={toggleTheme}>
-            <ThemeSwitcher theme={theme} />
+          <NavItem className="theme-selector-wrapper">
+            <ThemeSwitcher />
           </NavItem>
           <NavItem>
             <LanguageSelector switcher={languageSwitcher} />
diff --git a/app/components/layout/ThemeSwitcher.tsx b/app/components/layout/ThemeSwitcher.tsx
index a32a932ac..96bf16ad3 100644
--- a/app/components/layout/ThemeSwitcher.tsx
+++ b/app/components/layout/ThemeSwitcher.tsx
@@ -1,25 +1,28 @@
-import { Theme } from '~/context/theme.provider'
+import { Theme, useTheme } from '~/context/theme.provider'
 import lightIcon from 'public/img/sun.svg'
 import darkIcon from 'public/img/moon.svg'
 
-const ThemeSwitcher = ({
-  theme = Theme.Dark,
-}: {
-  theme: Theme | undefined
-}) => {
+const ThemeSwitcher = () => {
+  const [theme, setTheme] = useTheme()
+  const toggleTheme = () => {
+    const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light
+    localStorage.setItem('theme', newTheme)
+    setTheme(newTheme)
+  }
+
   return (
-    <div className="theme-selector">
+    <div onClick={toggleTheme} className="theme-selector">
       {theme === Theme.Light ? <LightIcon /> : <DarkIcon />}
     </div>
   )
 }
 
 const DarkIcon = () => {
-  return <img src={darkIcon} alt="moon" width={32} height={32} />
+  return <img src={darkIcon} alt="moon" width={28} height={28} />
 }
 
 const LightIcon = () => {
-  return <img src={lightIcon} alt="sun" width={32} height={32} />
+  return <img src={lightIcon} alt="sun" width={28} height={28} />
 }
 
 export default ThemeSwitcher
diff --git a/app/components/shared/ClipboardCopy.tsx b/app/components/shared/ClipboardCopy.tsx
index 77386cd47..a243cfddc 100644
--- a/app/components/shared/ClipboardCopy.tsx
+++ b/app/components/shared/ClipboardCopy.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 import Tooltip from 'react-bootstrap/Tooltip'
 import clipSvg from '../../../public/clipboard.svg'
-
 const TooltipCopy = <Tooltip id="tooltip-copy">Copy to Clipboard</Tooltip>
 const TooltipCopied = (
   <Tooltip id="tooltip-copied" className="in">
@@ -18,14 +17,13 @@ function ClipboardCopy({ text }: { text: string }) {
     setCopied(true)
     setTimeout(() => setCopied(false), 10000)
   }
-
   return (
     <OverlayTrigger delay={300} overlay={copied ? TooltipCopied : TooltipCopy}>
       <img
         src={clipSvg}
         alt="clipboard"
         onClick={handleCopyFn}
-        style={{ color: 'white', height: 14, width: 14, marginLeft: 10 }}
+        className="clipboard-icon"
       />
     </OverlayTrigger>
   )
diff --git a/app/context/theme.provider.tsx b/app/context/theme.provider.tsx
index 909b25c98..560400251 100644
--- a/app/context/theme.provider.tsx
+++ b/app/context/theme.provider.tsx
@@ -14,7 +14,7 @@ type ThemeContextType = [
 const ThemeContext = createContext<ThemeContextType>([undefined, () => {}])
 
 function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState<Theme | undefined>(undefined)
+  const [theme, setTheme] = useState<Theme | undefined>(Theme.Light)
 
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme')
@@ -23,12 +23,6 @@ function ThemeProvider({ children }: { children: ReactNode }) {
     }
   }, [])
 
-  useEffect(() => {
-    if (theme) {
-      localStorage.setItem('theme', theme)
-    }
-  }, [theme])
-
   return (
     <ThemeContext.Provider value={[theme, setTheme]}>
       {children}
diff --git a/app/styles/styles.css b/app/styles/styles.css
index a7edb090c..e4793a32f 100644
--- a/app/styles/styles.css
+++ b/app/styles/styles.css
@@ -257,13 +257,41 @@ pre#plain-text {
   overflow-wrap: break-word;
 }
 
+.theme-selector {
+  display: flex;
+  width: 38px;
+  height: 38px;
+  border-radius: 100%;
+  transition: background-color 0.3s ease;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-selector:hover {
+  background-color: lightgray;
+  cursor: pointer;
+}
+
+.clipboard-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%);
+  height: 14px;
+  width: 14px;
+  margin-left: 10px;
+}
+
+.info-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%);
+  height: 24px;
+  width: 24px;
+}
+
 @media (max-width: 1300px) {
   .divider-vertical {
     display: none !important;
   }
 
   #language-selector,
-  .theme-selector,
+  .theme-selector-wrapper,
   .network-selector {
     margin-top: 10px;
     margin-left: 15px !important;
@@ -271,6 +299,10 @@ pre#plain-text {
     border-top: hsla(210, 8%, 51%, .28) solid 1px;
   }
 
+  .theme-selector {
+    margin-left: 0px !important;
+  }
+
   #language-selector {
     margin-bottom: 20px;
   }
diff --git a/app/styles/styles.light.css b/app/styles/styles.light.css
index 5e58680be..24b2eac6f 100644
--- a/app/styles/styles.light.css
+++ b/app/styles/styles.light.css
@@ -1,8 +1,8 @@
 [data-bs-theme="light"] {
   --light-color: #000000;
   --light-background-color: #ffffff;
-  --light-text-color: #535454 ;  /* #96a2b4 */
-  --light-table-bg: #efefef; /* #383f4b */
+  --light-text-color: #000000 ;
+  --light-table-bg: #efefef;
   --light-body-bg: #e7e7e7;
 }
 
@@ -49,21 +49,21 @@
 /* server.toml: */
 [data-bs-theme="light"] pre#plain-text {
   background-color: #f5f5f5;
-  color: #333;
+  color: var(--light-color);
 }
 
 [data-bs-theme="light"] .brand-text {
-  color: gray;
+  color: var(--light-text-color);
 }
 
 [data-bs-theme="light"] .card {
   background-color: var(--light-background-color);
-  color: #96a2b4;
+  color: var(--light-text-color);
 }
 
 [data-bs-theme="light"] .card-default>.card-header {
   background-color: var(--light-background-color);
-  color: #dce2ec;
+  color: var(--light-text-color);
 }
 
 [data-bs-theme="light"] .card-header .pull-right {
@@ -76,7 +76,7 @@
 }
 
 [data-bs-theme="light"] .secondary-heading {
-  color: #96a2b4;
+  color: var(--light-text-color);
 }
 
 [data-bs-theme="light"] [id*="-table"] thead th {
@@ -84,7 +84,7 @@
 }
 
 [data-bs-theme="light"] [id*="-table"] tbody td {
-  color: #96a2b4 !important;
+  color: var(--light-text-color) !important;
 }
 
 [data-bs-theme="light"] [id*="-table"]>tbody>tr>td {
@@ -109,7 +109,7 @@
 /* For language dropdown */
 
 [data-bs-theme="light"] .nav-link {
-  color: gray;
+  color: var(--light-text-color);
 }
 
 [data-bs-theme="light"]
@@ -123,6 +123,14 @@
   border-right: 1px solid #96a2b4;
 }
 
+[data-bs-theme="light"] .clipboard-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
+}
+
+[data-bs-theme="light"] .info-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
+}
+
 @media (max-width: 1300px) {
   [data-bs-theme="light"] #language-selector,
   .network-selector {
@@ -186,7 +194,12 @@
 [data-bs-theme="light"]
 #account-nav>a,
 #contract-nav>a {
-  color: #96a2b4;
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"]
+.break {
+  color: var(--light-text-color) !important;
 }
 
 [data-bs-theme="light"]
diff --git a/public/clipboard.svg b/public/clipboard.svg
index 1785ebd38..dcf784856 100644
--- a/public/clipboard.svg
+++ b/public/clipboard.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="white" d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>
diff --git a/public/info-circle.svg b/public/info-circle.svg
index aa455aadc..8aa81232f 100644
--- a/public/info-circle.svg
+++ b/public/info-circle.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="white" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

From 089e9d58328c082afdd369efa9a7926b2f381e0c Mon Sep 17 00:00:00 2001
From: Ryuji Eguchi <jp.ryuji@gmail.com>
Date: Thu, 4 Jan 2024 17:58:44 +1100
Subject: [PATCH 3/4] fix open new window icon on light theme

---
 app/components/layout/Header.tsx              |  1 +
 app/components/layout/LanguageSelector.tsx    |  2 +-
 app/components/shared/CustomNetworkButton.tsx |  2 +-
 app/components/shared/NewWindowIcon.tsx       |  4 +-
 app/styles/styles.css                         | 14 ++++-
 app/styles/styles.light.css                   | 57 +++++++++++++------
 6 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index 684920302..4e90ea4c6 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -67,6 +67,7 @@ export default function Header({
           <NavDropdown
             title={formatMessage({ id: 'more' })}
             id="basic-nav-dropdown"
+            className="nav-dropdown"
           >
             <LinkContainer to="/effects">
               <NavDropdown.Item>
diff --git a/app/components/layout/LanguageSelector.tsx b/app/components/layout/LanguageSelector.tsx
index 17bd688b4..f05cc4d0f 100644
--- a/app/components/layout/LanguageSelector.tsx
+++ b/app/components/layout/LanguageSelector.tsx
@@ -21,7 +21,7 @@ export default function LanguageSelector({
 }) {
   const { formatMessage } = useIntl()
   return (
-    <Dropdown id="language-selector">
+    <Dropdown id="language-selector" className="nav-dropdown">
       <Dropdown.Toggle style={styleLanguageSelector}>
         <img
           src={langSelectImg}
diff --git a/app/components/shared/CustomNetworkButton.tsx b/app/components/shared/CustomNetworkButton.tsx
index 21b5a5e5b..c4acaa865 100644
--- a/app/components/shared/CustomNetworkButton.tsx
+++ b/app/components/shared/CustomNetworkButton.tsx
@@ -85,7 +85,7 @@ const ResourceModal = (props: ResourceModalProps) => (
     onHide={props.handleCloseFn as () => void}
   >
     <Modal.Header closeButton>
-      <Modal.Title id="contained-modal-title-lg" style={{ color: '#dce2ec' }}>
+      <Modal.Title id="contained-modal-title-lg">
         <FormattedMessage id="network.set-custom" />
       </Modal.Title>
     </Modal.Header>
diff --git a/app/components/shared/NewWindowIcon.tsx b/app/components/shared/NewWindowIcon.tsx
index 48628ec39..f56b8054f 100644
--- a/app/components/shared/NewWindowIcon.tsx
+++ b/app/components/shared/NewWindowIcon.tsx
@@ -3,8 +3,8 @@ import externalLinkSvg from '../../../public/external-link.svg'
 const NewWindowIcon = () => (
   <img
     src={externalLinkSvg}
-    alt="clipboard"
-    style={{ color: 'white', height: 14, width: 14, marginLeft: 10 }}
+    alt="open new window"
+    className="new-window-icon"
   />
 )
 
diff --git a/app/styles/styles.css b/app/styles/styles.css
index e4793a32f..abad9dbc6 100644
--- a/app/styles/styles.css
+++ b/app/styles/styles.css
@@ -10,7 +10,6 @@ body {
   sans-serif;
 }
 
-
 .navbar {
   padding: 0 15px 0 0;
   border-bottom: 1px solid #96A2B4;
@@ -285,6 +284,17 @@ pre#plain-text {
   width: 24px;
 }
 
+.new-window-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%);
+  height: 14px;
+  width: 14px;
+  margin-left: 10px;
+}
+
+[id="contained-modal-title-lg"] {
+  color: #dce2ec;
+}
+
 @media (max-width: 1300px) {
   .divider-vertical {
     display: none !important;
@@ -653,4 +663,4 @@ Mobile Rules
     font-size: 12px;
     padding: 4px 7px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/styles/styles.light.css b/app/styles/styles.light.css
index 24b2eac6f..c87efa43f 100644
--- a/app/styles/styles.light.css
+++ b/app/styles/styles.light.css
@@ -1,7 +1,7 @@
 [data-bs-theme="light"] {
   --light-color: #000000;
   --light-background-color: #ffffff;
-  --light-text-color: #000000 ;
+  --light-text-color: #000000;
   --light-table-bg: #efefef;
   --light-body-bg: #e7e7e7;
 }
@@ -31,7 +31,8 @@
   border-top: 1px solid #4c5667;
 }
 
-[data-bs-theme="light"] .modal-header, .modal-body {
+[data-bs-theme="light"] .modal-header,
+.modal-body {
   background-color: var(--light-table-bg);
 }
 
@@ -99,8 +100,7 @@
   color: var(--light-text-color) !important;
 }
 
-[data-bs-theme="light"]
-.table>thead>tr>th,
+[data-bs-theme="light"] .table>thead>tr>th,
 .table>tbody>tr:nth-of-type(odd)>td,
 .table>tbody>tr:nth-of-type(even)>td {
   background-color: var(--light-table-bg);
@@ -112,8 +112,7 @@
   color: var(--light-text-color);
 }
 
-[data-bs-theme="light"]
-.nav-link:hover,
+[data-bs-theme="light"] .nav-link:hover,
 .nav-link:focus {
   background-color: var(--light-background-color) !important;
   color: #08b5e5 !important;
@@ -127,10 +126,38 @@
   filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
 }
 
+[data-bs-theme="light"] .new-window-icon {
+  filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
+}
+
 [data-bs-theme="light"] .info-icon {
   filter: brightness(0) saturate(100%) hue-rotate(0deg) invert(100%) brightness(0) contrast(100%) grayscale(100%) sepia(0%);
 }
 
+[data-bs-theme="light"] [id="contained-modal-title-lg"] {
+  color: var(--light-text-color);
+}
+
+/* Custom dropdown in lighttheme only */
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu {
+  background-color: var(--light-table-bg);
+  color: var(--light-color);
+}
+
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu a {
+  color: var(--light-text-color);
+}
+
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu a:hover {
+  background-color: var(--light-table-bg);
+  color: #08b5e5;
+}
+
+[data-bs-theme="light"] .nav-dropdown .dropdown-menu .active {
+  background-color: var(--light-table-bg);
+  color: #08b5e5;
+}
+
 @media (max-width: 1300px) {
   [data-bs-theme="light"] #language-selector,
   .network-selector {
@@ -185,38 +212,32 @@
   color: white;
 }
 
-[data-bs-theme="light"]
-#account-nav,
+[data-bs-theme="light"] #account-nav,
 #contract-nav {
   background-color: var(--light-table-bg);
 }
 
-[data-bs-theme="light"]
-#account-nav>a,
+[data-bs-theme="light"] #account-nav>a,
 #contract-nav>a {
   color: var(--light-text-color);
 }
 
-[data-bs-theme="light"]
-.break {
+[data-bs-theme="light"] .break {
   color: var(--light-text-color) !important;
 }
 
-[data-bs-theme="light"]
-#account-nav>a:hover,
+[data-bs-theme="light"] #account-nav>a:hover,
 #contract-nav>a:hover {
   background-color: var(--light-background-color) !important;
   color: #01c0c8;
 }
 
-[data-bs-theme="light"]
-#account-tab-content,
+[data-bs-theme="light"] #account-tab-content,
 #contract-tab-content {
   background-color: var(--light-table-bg);
 }
 
-[data-bs-theme="light"]
-.account-tab-active,
+[data-bs-theme="light"] .account-tab-active,
 .contract-tab-active {
   color: #01c0c8 !important;
   background-color: white;

From ba53e8da3f82123c4d7fd4acc7d3e431a2788808 Mon Sep 17 00:00:00 2001
From: Ryuji Eguchi <jp.ryuji@gmail.com>
Date: Thu, 4 Jan 2024 18:09:37 +1100
Subject: [PATCH 4/4] fix spec for BackendResourceBadgeButtonWithResourceModal

---
 .../shared/__tests__/BackendResourceBadgeButton.test.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx b/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx
index b3a04ecba..1c8e68c7e 100644
--- a/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx
+++ b/app/components/shared/__tests__/BackendResourceBadgeButton.test.tsx
@@ -45,9 +45,11 @@ describe('BackendResourceBadgeButtonWithResourceModal', () => {
     expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
     expect(
-      screen.getByRole('link', { name: `${url} clipboard` }),
+      screen.getByRole('link', { name: `${url} open new window` }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('img', { name: 'open new window' }),
     ).toBeInTheDocument()
-    expect(screen.getByRole('img', { name: 'clipboard' })).toBeInTheDocument()
   })
 
   it('closes the modal when close button is clicked', async () => {