thirdweb-dev · Adamj1232 · Feb 24, 2023 · Feb 23, 2023 · Feb 23, 2023 · Feb 23, 2023
diff --git a/docs/src/lib/components/ConnectWalletButton.svelte b/docs/src/lib/components/ConnectWalletButton.svelte
@@ -22,7 +22,7 @@
       if (document.location.href.includes('theming-tool')) {
         onboard = await getOnboard('default')
       } else {
-        onboard = await getOnboard('system')
+        onboard = await getOnboard()
       }
     }
     onboard.state.select('wallets').subscribe((wallets) => {

diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -8,7 +8,7 @@
   let wallets$
 
   const themes = ['system', 'default', 'light', 'dark', 'custom']
-  let selectedTheme = 'system'
+  let selectedTheme = 'custom'
 
   let webURL = ''
   let iframeUsed = false

diff --git a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
@@ -166,6 +166,8 @@ export default function ConnectWallet() {
     // If the wallet has a provider than the wallet is connected
     if (wallet?.provider) {
       setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any'))
+    // if using ethers v6 this is:
+    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     }
   }, [wallet])
 
@@ -210,6 +212,8 @@ export default function ConnectWallet() {
     // If the wallet has a provider than the wallet is connected
     if (wallet?.provider) {
       setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any'))
+      // if using ethers v6 this is:
+      // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     }
   }, [wallet])
 

diff --git a/docs/src/lib/components/getting-started-guide.md b/docs/src/lib/components/getting-started-guide.md
@@ -40,6 +40,8 @@ console.log(wallets)
 if (wallets[0]) {
   // create an ethers provider with the last connected wallet provider
   const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any')
+    // if using ethers v6 this is:
+    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
 
   const signer = ethersProvider.getSigner()
 

diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js
@@ -1,14 +1,10 @@
 let onboard
 const getOnboard = async (passedTheme) => {
-  if (!onboard) {
-    const key = 'svelteness::color-scheme'
-    const scheme = localStorage[key]
-    let theme = passedTheme || scheme || 'system'
-    onboard = await intiOnboard(theme)
-    classMutationListener()
-  } else {
-    await onboard.state.actions.updateTheme(passedTheme)
-  }
+  const key = 'svelteness::color-scheme'
+  const scheme = localStorage[key]
+  let theme = passedTheme || scheme
+  classMutationListener()
+  onboard = await intiOnboard(theme)
   return onboard
 }
 

diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction.md
@@ -23,7 +23,7 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain
 - **Unified Provider Interface:** All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications. Whether your user is using Ledger or Metamask the provider will operate identically.
 
 - **Dynamic Imports:** Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet
-and its dependencies only when the user selects it, so that minimal bandwidth is used.
+  and its dependencies only when the user selects it, so that minimal bandwidth is used.
 
 - **Framework Agnostic:** Avoid framework lock in -- Web3-Onboard works with any framework and includes helper packages for vue & react.
 
@@ -34,6 +34,7 @@ and its dependencies only when the user selects it, so that minimal bandwidth is
 ### Supported Networks
 
 web3-onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](https://onboard.blocknative.com/docs/modules/core#options).
+
 - Arbitrum
 - Avalanche
 - BNB Chain
@@ -48,6 +49,7 @@ web3-onboard supports all EVM networks. Supporting a new network is simply a mat
 - Any other EVM network
 
 ### [Optional] Use an API key to fetch real time transaction data, balances & gas
+
 Using a Blocknative API key with web3-onboard on the free plan will allow you to gain the benefits of Blocknative balance & transaction services. Blocknative has a free forever plan you can always use.
 
 This step is not required to use web3-onboard. You can skip to the **Quickstart** step below if you want to use web3-onboard without API services or if you already have a Blocknative account & API key.
@@ -82,7 +84,8 @@ npm i @web3-onboard/core @web3-onboard/injected-wallets ethers
 You can find a link to web3-onboard's official NPM Documentation here: [@web3-onboard/core Official NPM Documentation](https://www.npmjs.com/package/@web3-onboard/core)
 
 Then initialize in your app:
-```ts
+
+```ts copy
 import Onboard from '@web3-onboard/core'
 import injectedModule from '@web3-onboard/injected-wallets'
 import { ethers } from 'ethers'
@@ -109,10 +112,9 @@ console.log(wallets)
 
 if (wallets[0]) {
   // create an ethers provider with the last connected wallet provider
-  const ethersProvider = new ethers.providers.Web3Provider(
-    wallets[0].provider,
-    'any'
-  )
+  // if using ethers v6 this is:
+  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
+  const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any')
 
   const signer = ethersProvider.getSigner()
 
@@ -126,11 +128,13 @@ if (wallets[0]) {
   console.log(receipt)
 }
 ```
+
 **and you are live!**
 
 ---
 
 ## Wallet Modules
+
 Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your web3-onboard implementation. All modules are listed below and can be accessed through the subpages of web3-onboard docs on the left.
 
 We recommend you add the [Core Repo](https://onboard.blocknative.com/docs/modules/core#install) and consider adding the [Injected Wallets](https://onboard.blocknative.com/docs/packages/injected#install) module to get connected with wallets like Metamask, Tally, Coinbase Wallet & more right away.

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -0,0 +1,140 @@
+# Theming
+
+To customize the color theme of web3-onboard and match it with your dapp, you can choose from the available native themes ('default', 'dark', 'light', 'system') or create a custom theme using a `ThemingMap` object and our [Theming Tool walkthrough](#theming-tool).
+
+## Available Themes
+
+To set the color theme of web3-onboard to one of the available native themes, import Onboard from `@web3-onboard/core` and pass the theme as a string to the `theme` init option.
+
+| theme     | description                                                                       |
+| --------- | --------------------------------------------------------------------------------- |
+| 'default' | default theme                                                                     |
+| 'dark'    | dark mode                                                                         |
+| 'light'   | light mode                                                                        |
+| 'system'  | automatically switch between 'dark' & 'light' based on the user's system settings |
+
+Example:
+
+```typescript
+import Onboard from '@web3-onboard/core'
+
+const onboard = Onboard({
+  theme: 'dark'
+  // other options like wallets, chains, appMetaData, etc.
+})
+```
+
+---
+
+## Variables
+
+In the table below, you'll find a list of css variables that you can use to theme web3-onboard.
+
+| variable               | description       |
+| ---------------------- | ----------------- |
+| --w3o-background-color | background color  |
+| --w3o-foreground-color | foreground color  |
+| --w3o-text-color       | text color        |
+| --w3o-border-color     | border color      |
+| --w3o-action-color     | buttons and links |
+| --w3o-border-radius    | border radius     |
+
+---
+
+## Custom Theme
+
+To create a custom theme, you can define a `ThemingMap` object with CSS variables for different components of web3-onboard. Pass this object as the theme option.
+
+```typescript copy
+import Onboard, { ThemingMap } from '@web3-onboard/core'
+
+const customTheme: ThemingMap = {
+  '--w3o-background-color': '#f0f0f0',
+  '--w3o-foreground-color': '#333',
+  '--w3o-text-color': '#fff',
+  '--w3o-border-color': '#ccc',
+  '--w3o-action-color': '#007bff',
+  '--w3o-border-radius': '5px'
+}
+
+const onboard = Onboard({
+  theme: customTheme
+  // other options like wallets, chains, appMetaData, etc.
+})
+```
+
+---
+
+## Dynamically Update Theme with API
+
+**`updateTheme`** is an exposed API method for actively updating the theme of web3-onboard. The function accepts `Theme` types (see below).
+_If using the `@web3-onboard/react` package there is a hook exposed called `updateTheme`_
+
+The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables
+
+Example:
+
+```typescript copy
+import Onboard from '@web3-onboard/core'
+
+const onboard = Onboard({
+  theme: 'dark'
+  // other options like wallets, chains, appMetaData, etc.
+})
+
+// after initialization you may want to change the theme based on UI state
+onboard.state.actions.updateTheme('light')
+
+// or
+
+const customTheme: ThemingMap = {
+  '--w3o-background-color': '#f0f0f0',
+  '--w3o-foreground-color': '#333',
+  '--w3o-text-color': '#fff',
+  '--w3o-border-color': '#ccc',
+  '--w3o-action-color': '#007bff'
+}
+onboard.state.actions.updateTheme(customTheme)
+```
+
+#### Theme Types
+
+```typescript
+export type Theme = ThemingMap | BuiltInThemes | 'system'
+
+export type BuiltInThemes = 'default' | 'dark' | 'light'
+
+export type ThemingMap = {
+  '--w3o-background-color'?: string
+  '--w3o-foreground-color'?: string
+  '--w3o-text-color'?: string
+  '--w3o-border-color'?: string
+  '--w3o-action-color'?: string
+  '--w3o-border-radius'?: string
+}
+```
+
+---
+
+## Theming Tool
+
+You can preview how web3-onboard will look on your site by using our [theming tool](/theming-tool) to customize the look and feel of web3-onboard. You can try different themes or create your own and preview the result by entering a URL or adding a screenshot.
+
+To do this:
+
+- Head over to our [theming tool](/theming-tool)
+- Drop a screen shot or enter the URL of your site
+- Switch between the built in themes using the control panel in the lower left corner
+- To customize, select 'custom' and click the different circles to change the color
+- Copy the output theme and use as the value to the `theme` prop within the onboard config **or** within the `updateTheme` API action ([see API action](#dynamically-update-theme-with-api))
+  :::admonition type="tip"
+  _Pro tip: use the toggle to disable the backdrop and select the eye dropper after clicking a color circle to match the color of your site perfectly_
+  :::
+
+#### Follow along with the video below:
+
+<iframe width="620" height="420" src="https://www.youtube.com/embed/UsBdlQpb_kA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+:::admonition type="warning"
+_note: not all sites allow iframe injection, if this is the case for your site use a screenshot_
+:::
diff --git a/....2]getting-started/[...2]customization.md → ...2]getting-started/[...3]custom-styling.md b/....2]getting-started/[...2]customization.md → ...2]getting-started/[...3]custom-styling.md
@@ -2,13 +2,11 @@
 
 You can customize web3-onboard to match the look and feel of your dapp. web3-onboard exposes css variables for each of its UI components.
 
-:::admonition type="experimental"
 Interested in seeing how web3-onboard will look on your site?
 
 [Try out our theming tool](/theming-tool)
 
 It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot.
-:::
 
 ## CSS custom properties (variables)
 
@@ -238,7 +236,3 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
   --notify-onboard-anchor-color
 }
 ```
-
-:::admonition type="note"
-**Stay Tuned:** We're dedicated to providing a seamless customization experience and will soon be providing more tools and examples to help our community get the most out of their web3-onboard implementation.
-:::