Support colorMode via Controller constructor

examples/starknet-react-next/src/components/StarknetProvider.tsx

@@ -51,6 +51,7 @@ const connectors = [
     {
       url,
       // theme: "rollyourown",
+      // colorMode: "light"
     },
   ) as never as Connector,
 ];

packages/controller/src/index.ts

@@ -24,6 +24,7 @@ import {
   Modal,
   ControllerOptions,
   ControllerThemePresets,
+  ColorMode,
 } from "./types";
 import { createModal } from "./modal";
 import { defaultPresets } from "./presets";
@@ -69,6 +70,9 @@ class Controller {
     }
 
     this.setTheme(options?.theme, options?.config?.presets);
+    if (options?.colorMode) {
+      this.setColorMode(options.colorMode);
+    }
 
     if (typeof document === "undefined") {
       return;
@@ -107,14 +111,19 @@ class Controller {
   }
 
   private setTheme(
-    theme: string = "cartridge",
+    id: string = "cartridge",
     presets: ControllerThemePresets = defaultPresets,
   ) {
-    const t = presets[theme] ?? defaultPresets.cartridge;
+    const theme = presets[id] ?? defaultPresets.cartridge;
 
     const url = new URL(this.url);
-    url.searchParams.set("theme", encodeURIComponent(JSON.stringify(t)));
+    url.searchParams.set("theme", encodeURIComponent(JSON.stringify(theme)));
+    this.url = url.toString();
+  }
 
+  private setColorMode(colorMode: ColorMode) {
+    const url = new URL(this.url);
+    url.searchParams.set("colorMode", colorMode);
     this.url = url.toString();
   }
 

packages/controller/src/presets.ts

@@ -1,11 +1,14 @@
-import { ControllerThemePreset } from "./types";
+import { ControllerThemePresets } from "./types";
 
-export const defaultPresets: { [key: string]: ControllerThemePreset } = {
+export const defaultPresets: ControllerThemePresets = {
   cartridge: {
     id: "cartridge",
     name: "Cartridge",
     icon: "/whitelabel/cartridge/icon.svg",
-    cover: "/whitelabel/cartridge/cover-dark.png",
+    cover: {
+      light: "/whitelabel/cartridge/cover-light.png",
+      dark: "/whitelabel/cartridge/cover-dark.png",
+    },
   },
   "force-prime": {
     id: "force-prime",
@@ -34,4 +37,4 @@ export const defaultPresets: { [key: string]: ControllerThemePreset } = {
       primary: "#11ED83",
     },
   },
-} as const;
+};

packages/controller/src/types.ts

@@ -153,21 +153,25 @@ export type ControllerOptions = {
   starterPackId?: string;
   chainId?: constants.StarknetChainId;
   theme?: string;
+  colorMode?: ColorMode;
   config?: {
     presets?: ControllerThemePresets;
   };
 };
 
+export type ColorMode = "light" | "dark";
+
 export type ControllerTheme = {
   id: string;
   name: string;
   icon: string;
-  cover: string;
+  cover: ThemeValue<string>;
+  colorMode: ColorMode;
 };
 
 export type ControllerThemePresets = Record<string, ControllerThemePreset>;
 
-export type ControllerThemePreset = ControllerTheme & {
+export type ControllerThemePreset = Omit<ControllerTheme, "colorMode"> & {
   colors?: ControllerColors;
 };
 

packages/keychain/src/components/Container/Header/index.tsx

@@ -9,6 +9,7 @@ import {
   VStack,
   Image,
   Center,
+  useColorMode,
 } from "@chakra-ui/react";
 import { constants } from "starknet";
 import { ArrowLeftIcon, CartridgeColorIcon } from "@cartridge/ui";
@@ -34,20 +35,25 @@ export function Header({
   const [controller] = useController();
   const address = useMemo(() => controller?.address, [controller]);
   const theme = useControllerTheme();
+  const { colorMode } = useColorMode();
+
+  const cover = useMemo(() =>
+    typeof theme.cover === "string" ? theme.cover : theme.cover[colorMode]
+    , [theme, colorMode])
 
   if (!address || hideAccount) {
     return (
       <Container h={BANNER_HEIGHT} position="relative">
         <VStack
           h="full"
           w="full"
-          bg={`linear-gradient(to top, black, transparent), url('${theme.cover}')`}
+          bg={`url('${cover}')`}
           bgSize="cover"
           bgPos="center"
           position="relative"
         >
           <Center position="absolute" bottom={-ICON_OFFSET / 4} left={0} right={0}>
-            <Flex bg="solid.primary" borderRadius="lg" h={`${ICON_SIZE}px`} w={`${ICON_SIZE}px`} justify="center" alignItems="center">
+            <Flex bg="darkGray.800" borderRadius="lg" h={`${ICON_SIZE}px`} w={`${ICON_SIZE}px`} justify="center" alignItems="center" borderWidth={4} borderColor={colorMode === "dark" ? "solid.bg" : "blueGray.100"}>
               <Image src={theme.icon} boxSize={ICON_IMAGE_SIZE / 4} alt="Controller Icon" />
             </Flex>
           </Center>
@@ -115,6 +121,6 @@ function Container({
 }
 
 export const BANNER_HEIGHT = 150
-export const ICON_IMAGE_SIZE = 56
-export const ICON_SIZE = 72
+export const ICON_IMAGE_SIZE = 64
+export const ICON_SIZE = 80
 export const ICON_OFFSET = 16

packages/keychain/src/components/Provider/index.tsx

@@ -1,20 +1,23 @@
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, ColorMode } from "@chakra-ui/react";
 import { PropsWithChildren, useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ControllerThemeProvider, useChakraTheme, useControllerThemePreset } from "hooks/theme";
+import { useRouter } from "next/router";
 
 export function Provider({ children }: PropsWithChildren) {
   const preset = useControllerThemePreset();
   const chakraTheme = useChakraTheme(preset);
+  const router = useRouter();
 
   const controllerTheme = useMemo(
     () => ({
       id: preset.id,
       name: preset.name,
       icon: preset.icon,
       cover: preset.cover,
+      colorMode: (router.query.colorMode as ColorMode) ?? "dark"
     }),
-    [preset],
+    [preset, router.query],
   );
 
   return (

packages/keychain/src/hooks/theme.ts → packages/keychain/src/hooks/theme.tsx

@@ -5,14 +5,23 @@ import {
   defaultPresets,
 } from "@cartridge/controller";
 import { CartridgeTheme } from "@cartridge/ui";
+import { useColorMode } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useContext, createContext, useMemo } from "react";
+import { useContext, createContext, useMemo, PropsWithChildren, useEffect } from "react";
 
 const ControllerThemeContext = createContext<ControllerThemeContext>(undefined);
 
 type ControllerThemeContext = ControllerTheme;
 
-export const ControllerThemeProvider = ControllerThemeContext.Provider;
+export function ControllerThemeProvider({ value, children }: { value: ControllerThemeContext } & PropsWithChildren) {
+  const { setColorMode } = useColorMode();
+
+  useEffect(() => {
+    setColorMode(value.colorMode)
+  }, [setColorMode, value.colorMode]);
+
+  return <ControllerThemeContext.Provider value={value}>{children}</ControllerThemeContext.Provider>;
+}
 
 export function useControllerTheme() {
   const ctx = useContext<ControllerThemeContext>(ControllerThemeContext);
@@ -44,7 +53,8 @@ export function useControllerThemePreset() {
 
 export function useChakraTheme(preset: ControllerThemePreset) {
   return useMemo(
-    () => ({
+    () =>
+    ({
       ...CartridgeTheme,
       semanticTokens: {
         ...CartridgeTheme.semanticTokens,

packages/keychain/src/pages/_document.tsx

@@ -0,0 +1,15 @@
+import { ColorModeScript } from '@chakra-ui/react'
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <ColorModeScript />
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}