Customizations

We provide a nice, themed button for quick integration, however, if you want to customize the looks and behaviour, you can opt for any of the alternatives mentioned below:

zero-account properties

<zero-account
  app-id="{YOUR_APP_ID}" <!--required-->
  theme-preset="light" <!--dark|light-->
  update-interval="180000" <!--time interval in ms to update the QR Code-->
  callback-url="/zero/auth" <!--this must be the same as your backend endpoint and Callback URL-->
  level="M" <!--L|M|Q|H the QR Code level-->
  enable-with-credentials="false" <!--this enables credentials for requests to your backend-->
  auto-start-app="true" <!--this controls whether the desktop app is opened on modal toggle-->
>
</zero-account>

CSS variables

--primary-color
--primary-background-color
--theme-based-radius
--theme-based-padding

/* buttons */
--button-animation-duration
--text-color
--button-border-color
--button-border-radius
--button-background-color

/* modal */
--modal-logo-border-color
--modal-animation-duration
--easing
--disabled-background-color
--disabled-color

/*
The same variables can be used to customize dark theme.
Just make sure you define them under `dark` class name, for example:
*/
body {
    --primary-color: cyan;
}

.dark {
    --primary-color: #008B8B;
}

Custom element

<!--
Alternatively, you can completely replace the elements
by passing a child element to the <zero-account> element:
-->
  <zero-account app-id="{YOUR_APP_ID}">
    <button id="zero" class="nice__button">
      <img class='zero__logo' alt="0account logo" src="zero-logo.png"/>
      <p>use 0account</p>
    </button>
  </zero-account>

  <script>
    // remember to emit the toggle modal event
    const zeroButton = document.getElementById("zero");
    zeroButton.addEventListener("click", (e) {
      const toggleZeroEvent = new CustomEvent("0account-toggle-modal")
      document.dispatchEvent(toggleZeroEvent);
    })
  </script>