chainapsis · eldenpark · Jan 8, 2026 · Dec 29, 2025 · Dec 29, 2025 · Dec 29, 2025
diff --git 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 (
-    <html lang="en">
+    // 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.
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} ${inter.variable}`}
-        suppressHydrationWarning
       >
         {children}
       </body>

diff --git 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 (
     <div className={styles.wrapper}>
@@ -21,8 +23,7 @@ export const GlobalHeader: FC = () => {
           <MenuIcon color="var(--fg-primary)" size={24} />
         )}
       </span>
-      {/* NOTE: theme is hardcoded to light for now */}
-      <Logo className={styles.logoResponsive} theme={"light"} />
+      <Logo className={styles.logoResponsive} theme={theme} />
     </div>
   );
 };
diff --git 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 && (
-          <IntegrationCard onClose={hideIntegrationCard} />
-        )}
+        <div>
+          {showIntegrationCard && (
+            <>
+              <IntegrationCard onClose={hideIntegrationCard} />
+              <Spacing height={16} />
+            </>
+          )}
+
+          <ThemeButton />
+        </div>
       </ul>
     </>
   );

diff --git 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<PropsWithChildren> = ({ 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
@@ -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
@@ -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
@@ -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
@@ -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 (
+    <Tooltip
+      title={theme === "light" ? "Light Mode" : "Dark Mode"}
+      placement="right"
+      className={styles.themeButtonContainer}
+      backgroundColor="brand-solid"
+      titleColor={theme === "light" ? "primary-on-brand" : undefined}
+      titleCustomColor={theme === "dark" ? "gray-800" : undefined}
+    >
+      <Button
+        size="md"
+        variant="secondary"
+        className={styles.themeButton}
+        onClick={handleThemeToggle}
+      >
+        {theme === "light" ? (
+          <SunIcon className={styles.themeButtonIcon} size={20} />
+        ) : (
+          <MoonIcon className={styles.themeButtonIcon} size={20} />
+        )}
+      </Button>
+    </Tooltip>
+  );
+};
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
@@ -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
@@ -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<SpinnerProps> = ({
   className,
   status = "loading",
 }) => {
+  const theme = useThemeState((state) => state.theme);
   const isFailed = status === "failed";
 
   return (
@@ -27,7 +29,7 @@ export const Spinner: FC<SpinnerProps> = ({
       {isFailed ? (
         <path
           d="M58.125 31C58.125 34.5621 57.4234 38.0893 56.0602 41.3803C54.6971 44.6712 52.6991 47.6615 50.1803 50.1803C47.6615 52.6991 44.6712 54.6971 41.3803 56.0602C38.0893 57.4234 34.5621 58.125 31 58.125C27.4379 58.125 23.9107 57.4234 20.6197 56.0602C17.3288 54.6971 14.3385 52.6991 11.8197 50.1803C9.30094 47.6615 7.30292 44.6712 5.93977 41.3803C4.57661 38.0893 3.875 34.5621 3.875 31C3.875 27.4379 4.57661 23.9107 5.93977 20.6197C7.30293 17.3287 9.30095 14.3385 11.8197 11.8197C14.3385 9.30093 17.3288 7.30292 20.6197 5.93976C23.9107 4.57661 27.4379 3.875 31 3.875C34.5621 3.875 38.0893 4.57661 41.3803 5.93977C44.6713 7.30293 47.6615 9.30095 50.1803 11.8197C52.6991 14.3385 54.6971 17.3288 56.0602 20.6197C57.4234 23.9107 58.125 27.4379 58.125 31L58.125 31Z"
-          stroke="#FDA29B"
+          stroke="var(--border-error-subtle)"
           strokeWidth="3"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -36,14 +38,14 @@ export const Spinner: FC<SpinnerProps> = ({
         <>
           <path
             d="M58.125 31C58.125 34.5621 57.4234 38.0893 56.0602 41.3803C54.6971 44.6712 52.6991 47.6615 50.1803 50.1803C47.6615 52.6991 44.6712 54.6971 41.3803 56.0602C38.0893 57.4234 34.5621 58.125 31 58.125C27.4379 58.125 23.9107 57.4234 20.6197 56.0602C17.3288 54.6971 14.3385 52.6991 11.8197 50.1803C9.30094 47.6615 7.30292 44.6712 5.93977 41.3803C4.57661 38.0893 3.875 34.5621 3.875 31C3.875 27.4379 4.57661 23.9107 5.93977 20.6197C7.30293 17.3287 9.30095 14.3385 11.8197 11.8197C14.3385 9.30093 17.3288 7.30292 20.6197 5.93976C23.9107 4.57661 27.4379 3.875 31 3.875C34.5621 3.875 38.0893 4.57661 41.3803 5.93977C44.6713 7.30293 47.6615 9.30095 50.1803 11.8197C52.6991 14.3385 54.6971 17.3288 56.0602 20.6197C57.4234 23.9107 58.125 27.4379 58.125 31L58.125 31Z"
-            stroke="#F5F5F5"
+            stroke="var(--bg-tertiary)"
             strokeWidth="3"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
             d="M31 3.875C34.5621 3.875 38.0893 4.57661 41.3803 5.93977C44.6713 7.30293 47.6615 9.30094 50.1803 11.8197C52.6991 14.3385 54.6971 17.3288 56.0602 20.6197C57.4234 23.9107 58.125 27.4379 58.125 31"
-            stroke="#7F56D9"
+            stroke="var(--fg-brand-primary)"
             strokeWidth="3"
             strokeLinecap="round"
             strokeLinejoin="round"

diff --git a/apps/demo_web/src/components/widgets/address_widget/address_widget.tsx b/apps/demo_web/src/components/widgets/address_widget/address_widget.tsx
@@ -57,12 +57,7 @@ export const AddressWidget: FC<AddressWidgetProps> = ({}) => {
           />
           <Spacing height={12} />
 
-          <ViewChainsButton
-            onClick={handleViewChains}
-            buttonVariant={
-              cosmosAddress && ethAddress ? "secondary" : "primary"
-            }
-          />
+          <ViewChainsButton onClick={handleViewChains} />
         </div>
       </Widget>
 

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
@@ -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<ViewChainsButtonProps> = ({
-  buttonVariant,
-  onClick,
-}) => {
+export const ViewChainsButton: FC<ViewChainsButtonProps> = ({ onClick }) => {
   return (
-    <Button onClick={onClick} variant={buttonVariant} fullWidth>
+    <Button onClick={onClick} variant="secondary" fullWidth>
       <div className={styles.icons}>
         <EthereumBlueIcon />
         <CosmosIcon />
@@ -23,6 +20,5 @@ export const ViewChainsButton: FC<ViewChainsButtonProps> = ({
 };
 
 export interface ViewChainsButtonProps {
-  buttonVariant: "primary" | "secondary";
   onClick?: () => void;
 }
diff --git a/apps/demo_web/src/components/widgets/docs_widget/docs_widget.tsx b/apps/demo_web/src/components/widgets/docs_widget/docs_widget.tsx
@@ -39,7 +39,7 @@ export const DocsWidget: FC = () => {
           Explore the SDK, APIs, and integration guides to start building.
         </Typography>
         <Button
-          variant={isSignedIn ? "secondary" : "primary"}
+          variant="secondary"
           size="md"
           fullWidth
           onClick={handleOpenDocs}

diff --git a/apps/demo_web/src/components/widgets/login_widget/login_default_view.tsx b/apps/demo_web/src/components/widgets/login_widget/login_default_view.tsx
@@ -14,6 +14,7 @@ import { OkoLogoWithNameIcon } from "@oko-wallet/oko-common-ui/icons/oko_logo_wi
 
 import styles from "./login_widget.module.scss";
 import type { LoginMethod } from "@oko-wallet-demo-web/types/login";
+import { useThemeState } from "@oko-wallet-demo-web/state/theme";
 
 export interface LoginDefaultViewProps {
   onSignIn: (method: LoginMethod) => void;
@@ -24,10 +25,12 @@ export const LoginDefaultView: FC<LoginDefaultViewProps> = ({
   onSignIn,
   onShowSocials,
 }) => {
+  const theme = useThemeState((state) => state.theme);
+
   return (
     <Fragment>
       <div className={styles.logoWrapper}>
-        <Logo theme={"light"} width={84} height={32} />
+        <Logo theme={theme} width={84} height={32} />
       </div>
 
       <div className={styles.loginMethodsWrapper}>
@@ -73,7 +76,7 @@ export const LoginDefaultView: FC<LoginDefaultViewProps> = ({
       <Spacing height={28} />
 
       <div className={styles.getSupportRow}>
-        <OkoLogoWithNameIcon width={52} height={20} theme={"light"} />
+        <OkoLogoWithNameIcon width={52} height={20} theme={theme} />
         <a
           href="https://oko-wallet.canny.io/bug-reports"
           target="_blank"

diff --git a/apps/demo_web/src/components/widgets/widget_components.module.scss b/apps/demo_web/src/components/widgets/widget_components.module.scss
@@ -21,9 +21,9 @@
       bottom: -4px;
       background: linear-gradient(
         135deg,
-        #fff2ec 0%,
-        #e08c62 50%,
-        #f2641d 100%
+        rgba(255, 242, 236, 0.7) 0%,
+        rgba(255, 159, 111, 0.7) 50%,
+        rgba(242, 100, 29, 0.7) 100%
       );
       border-radius: inherit;
     }

diff --git a/apps/demo_web/src/hooks/use_theme_sync.ts b/apps/demo_web/src/hooks/use_theme_sync.ts
@@ -0,0 +1,22 @@
+import { useEffect, useLayoutEffect } from "react";
+import { useThemeState } from "@oko-wallet-demo-web/state/theme";
+
+export const useThemeSync = () => {
+  const { preference, initialize, setTheme } = useThemeState();
+
+  useLayoutEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  useEffect(() => {
+    if (preference !== "system") return;
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e: MediaQueryListEvent) => {
+      setTheme(e.matches ? "dark" : "light");
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [preference, setTheme]);
+};