Skip to main content

Styling the wallet

The wallet and its modal can be styled to fit in well with the integrating websites.

There are 3 options:

  • Setting light or dark mode on initiation with initSilk
  • Toggling dark mode with toggleDarkMode()
  • Styling with CSS

Setting light or dark mode with initSilk​

styles: { darkMode: true } can be set while calling initSilk

import { initSilk } from "@silk-wallet/silk-wallet-sdk";

const initConfig = {
  config: {
    allowedSocials: [
      "google",
      "twitter",
      "discord",
      "coinbase",
      "linkedin",
      "apple",
    ],
    authenticationMethods: ["email", "phone", "social"],
    styles: { darkMode: true },
  },
  useStaging: true,
  // walletConnectProjectId: "<PROJECT_ID>", // Required if 'wallet' in authenticationMethods
};

initSilk(initConfig);

Toggling dark mode with toggleDarkMode()​

After initialization, for certain UI screens and themes, the wallet can be toggled to dark mode specifically as needed.

window.silk.toggleDarkMode();

Styling with CSS​

For advanced customizations, developers can use CSS.

HTML structure is as below. To position and customize the modal styles, #silk-wallet-iframe-container and #silk-wallet-iframe-wrapper can be overriden.

<div id="silk-wallet-iframe-container">
  <div id="silk-wallet-iframe-wrapper">
    <iframe id="silk-wallet-iframe" />
  </div>
</div>

Below is the default stylings but all of them can be overridden with !important.

#silk-wallet-iframe-container {
  position: fixed;
  inset: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}
#silk-wallet-iframe-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    height: 531px;
    width: 380px;
}

Below is how the default styings are overriden with custom styles using !important.

#silk-wallet-iframe-container {
  backdrop-filter: none !important;
  // make background transparent instead of translucent
  background-color: transparent !important;
  width: 380px !important;
  // position to the left instead of default center
  left: 16px !important;
}

#silk-wallet-iframe-wrapper {
  // showing shadow
  filter: drop-shadow(2px 2px 2px #333);
}