diff --git a/apps/demo_web/src/app/layout.tsx b/apps/demo_web/src/app/layout.tsx
index cf9e4e9f1..428e1d973 100644
--- a/apps/demo_web/src/app/layout.tsx
+++ b/apps/demo_web/src/app/layout.tsx
@@ -6,6 +6,8 @@ import "@oko-wallet/oko-common-ui/styles/colors.scss";
import "@oko-wallet/oko-common-ui/styles/typography.scss";
import "@oko-wallet/oko-common-ui/styles/shadow.scss";
+import { themeInitScript } from "@oko-wallet-demo-web/state/theme";
+
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
@@ -47,10 +49,14 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
+ // To prevent flickering in dark mode or light mode in Next.js, an inline script is required.
+ // The reason is that even when using LayoutEffect in React, it executes after hydration.
+
+
+
+
{children}
diff --git a/apps/demo_web/src/components/global_header/global_header.tsx b/apps/demo_web/src/components/global_header/global_header.tsx
index 02e92e1fa..72047d5f8 100644
--- a/apps/demo_web/src/components/global_header/global_header.tsx
+++ b/apps/demo_web/src/components/global_header/global_header.tsx
@@ -7,10 +7,12 @@ import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
import styles from "./global_header.module.scss";
import { useViewState } from "@oko-wallet-demo-web/state/view";
+import { useThemeState } from "@oko-wallet-demo-web/state/theme";
export const GlobalHeader: FC = () => {
const isLeftBarOpen = useViewState((state) => state.isLeftBarOpen);
const toggleLeftBarOpen = useViewState((state) => state.toggleLeftBarOpen);
+ const theme = useThemeState((state) => state.theme);
return (
@@ -21,8 +23,7 @@ export const GlobalHeader: FC = () => {
)}
- {/* NOTE: theme is hardcoded to light for now */}
-
+
);
};
diff --git a/apps/demo_web/src/components/left_bar/left_bar.tsx b/apps/demo_web/src/components/left_bar/left_bar.tsx
index 02c4dd70b..b4013d069 100644
--- a/apps/demo_web/src/components/left_bar/left_bar.tsx
+++ b/apps/demo_web/src/components/left_bar/left_bar.tsx
@@ -4,10 +4,12 @@ import { type FC } from "react";
import cn from "classnames";
import { MenuItem } from "@oko-wallet/oko-common-ui/menu";
import { HomeOutlinedIcon } from "@oko-wallet/oko-common-ui/icons/home_outlined";
+import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
import styles from "./left_bar.module.scss";
import { IntegrationCard } from "./integration_card/integration_card";
import { useViewState } from "@oko-wallet-demo-web/state/view";
+import { ThemeButton } from "@oko-wallet-demo-web/components/theme/theme_button";
export const LeftBar: FC = () => {
const isLeftBarOpen = useViewState((state) => state.isLeftBarOpen);
@@ -34,9 +36,16 @@ export const LeftBar: FC = () => {
}
active={true}
/>
- {showIntegrationCard && (
-
- )}
+
+ {showIntegrationCard && (
+ <>
+
+
+
+ )}
+
+
+
);
diff --git a/apps/demo_web/src/components/oko_provider/oko_provider.tsx b/apps/demo_web/src/components/oko_provider/oko_provider.tsx
index 3bb8305a3..fdd2a4a0c 100644
--- a/apps/demo_web/src/components/oko_provider/oko_provider.tsx
+++ b/apps/demo_web/src/components/oko_provider/oko_provider.tsx
@@ -2,10 +2,12 @@
import { type FC, type PropsWithChildren } from "react";
-import { useInitOko } from "./use_oko";
+import { useInitOko } from "@oko-wallet-demo-web/components/oko_provider/use_oko";
+import { useThemeSync } from "@oko-wallet-demo-web/hooks/use_theme_sync";
export const OkoProvider: FC = ({ children }) => {
useInitOko();
+ useThemeSync();
return <>{children};
};
diff --git a/apps/demo_web/src/components/preview_panel/preview_panel.module.scss b/apps/demo_web/src/components/preview_panel/preview_panel.module.scss
index cae99502e..b865e7e24 100644
--- a/apps/demo_web/src/components/preview_panel/preview_panel.module.scss
+++ b/apps/demo_web/src/components/preview_panel/preview_panel.module.scss
@@ -23,6 +23,10 @@
/* background dot pattern image*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='4' y='4' width='2' height='2' rx='1' fill='%23E9EAEB'/%3E%3C/svg%3E");
+ [data-theme="dark"] & {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='4' y='4' width='2' height='2' rx='1' fill='%2322262F'/%3E%3C/svg%3E");
+ }
+
background-size: 16px 16px;
background-position: 7px -4px;
}
diff --git a/apps/demo_web/src/components/preview_panel/preview_panel.tsx b/apps/demo_web/src/components/preview_panel/preview_panel.tsx
index 4d7994917..ba4207e74 100644
--- a/apps/demo_web/src/components/preview_panel/preview_panel.tsx
+++ b/apps/demo_web/src/components/preview_panel/preview_panel.tsx
@@ -20,10 +20,10 @@ import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
export const PreviewPanel: FC = () => {
const isLazyInitialized = useSDKState(
- (st) =>
- st.isCosmosLazyInitialized &&
- st.isEthLazyInitialized &&
- st.isSolLazyInitialized,
+ (st) => st.isCosmosLazyInitialized && st.isEthLazyInitialized,
+ // TODO: refactor this @chemonoworld @Ryz0nd
+ // &&
+ // st.isSolLazyInitialized,
);
const isSignedIn = useUserInfoState((state) => state.isSignedIn);
diff --git a/apps/demo_web/src/components/theme/theme_button.module.scss b/apps/demo_web/src/components/theme/theme_button.module.scss
new file mode 100644
index 000000000..a7c860eca
--- /dev/null
+++ b/apps/demo_web/src/components/theme/theme_button.module.scss
@@ -0,0 +1,22 @@
+.themeButtonContainer {
+ width: fit-content;
+
+ .themeButton {
+ transition: color 0.15s ease;
+ color: var(--fg-quaternary);
+ &:hover {
+ color: var(--fg-quaternary-hover);
+ }
+
+ padding: 10px;
+
+ border-radius: 8px;
+ border: 1px solid var(--border-primary);
+ background: var(--bg-primary);
+
+ box-shadow:
+ 0 0 0 1px rgba(10, 13, 18, 0.18) inset,
+ 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
+ 0 1px 2px 0 var(--shadow-xs, rgba(10, 13, 18, 0.05));
+ }
+}
diff --git a/apps/demo_web/src/components/theme/theme_button.tsx b/apps/demo_web/src/components/theme/theme_button.tsx
new file mode 100644
index 000000000..c9f716d67
--- /dev/null
+++ b/apps/demo_web/src/components/theme/theme_button.tsx
@@ -0,0 +1,40 @@
+import { Button } from "@oko-wallet/oko-common-ui/button";
+import { SunIcon } from "@oko-wallet/oko-common-ui/icons/sun_icon";
+import { MoonIcon } from "@oko-wallet/oko-common-ui/icons/moon_icon";
+import { Tooltip } from "@oko-wallet/oko-common-ui/tooltip";
+
+import { useThemeState } from "@oko-wallet-demo-web/state/theme";
+import styles from "./theme_button.module.scss";
+
+export const ThemeButton = () => {
+ const theme = useThemeState((state) => state.theme);
+ const setPreference = useThemeState((state) => state.setPreference);
+
+ const handleThemeToggle = () => {
+ setPreference(theme === "light" ? "dark" : "light");
+ };
+
+ return (
+
+
+
+ );
+};
diff --git a/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.module.scss b/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.module.scss
index 9d4365b97..73b1f4ceb 100644
--- a/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.module.scss
+++ b/apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.module.scss
@@ -15,7 +15,7 @@
justify-content: center;
width: 54px;
height: 54px;
- background: #fff;
+ background: var(--bg-background);
position: relative;
}
diff --git a/apps/demo_web/src/components/widgets/account_widget/spinner.tsx b/apps/demo_web/src/components/widgets/account_widget/spinner.tsx
index 2121b8d23..ac828d450 100644
--- a/apps/demo_web/src/components/widgets/account_widget/spinner.tsx
+++ b/apps/demo_web/src/components/widgets/account_widget/spinner.tsx
@@ -1,6 +1,7 @@
import type { FC } from "react";
import styles from "./spinner.module.scss";
+import { useThemeState } from "@oko-wallet-demo-web/state/theme";
interface SpinnerProps {
size?: number;
@@ -13,6 +14,7 @@ export const Spinner: FC = ({
className,
status = "loading",
}) => {
+ const theme = useThemeState((state) => state.theme);
const isFailed = status === "failed";
return (
@@ -27,7 +29,7 @@ export const Spinner: FC = ({
{isFailed ? (
= ({
<>
= ({}) => {
/>
-
+
diff --git a/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx b/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx
index c4f424285..d4130e970 100644
--- a/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx
+++ b/apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx
@@ -6,12 +6,9 @@ import { Button } from "@oko-wallet/oko-common-ui/button";
import styles from "./view_chains_button.module.scss";
-export const ViewChainsButton: FC = ({
- buttonVariant,
- onClick,
-}) => {
+export const ViewChainsButton: FC = ({ onClick }) => {
return (
-