From 6ee3958ffe9c92acda39fa48fcbf8c91bb82c130 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 13:11:54 -0700
Subject: [PATCH 01/11] Add theming docs, still needs refinement

---
 .../[...2]getting-started/[...2]theming.md    | 116 ++++++++++++++++++
 ...stomization.md => [...3]custom-styling.md} |   6 -
 docs/src/routes/docs/[...3]modules/core.md    |  18 ++-
 packages/core/README.md                       |  60 +++++++++
 4 files changed, 184 insertions(+), 16 deletions(-)
 create mode 100644 docs/src/routes/docs/[...2]getting-started/[...2]theming.md
 rename docs/src/routes/docs/[...2]getting-started/{[...2]customization.md => [...3]custom-styling.md} (96%)

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
new file mode 100644
index 000000000..61924c766
--- /dev/null
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -0,0 +1,116 @@
+#  Theming
+## Using web3-onboard 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.
+
+### Theming Tool
+
+You can preview how web3-onboard will look on your site by using our theming tool. Simply go to /theming-tool and 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.
+
+### Native Theming
+
+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 option.
+
+Available native themes include:
+- **'default'**: a mix of light and dark elements found throughout the web3-onboard components
+- **'dark'**: dark background with lighter text and elements with a modern look - easy on the eyes in low-light settings
+- **'light'**: light colors for background and dark text and elements and a bright and clean look - easier to read in bright environments
+- **'system'**: reactive theme that will automatically switch between the native 'dark' & 'light' theme based on the users system settings
+
+Example:
+
+```typescript
+
+import Onboard from '@web3-onboard/core'
+
+const onboard = Onboard({
+  theme: 'dark', 
+  // other options like wallets, chains, appMetaData, etc.
+})
+```
+
+### Custom Theming
+
+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
+
+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
+
+**`updateTheme`** is an exposed API method for actively updating the theme of web3-onboard. The function accepts `Theme` types (see below) 
+
+Available native themes include:
+- **'default'**: a mix of light and dark elements found throughout the web3-onboard components
+- **'dark'**: dark background with lighter text and elements with a modern look - easy on the eyes in low-light settings
+- **'light'**: light colors for background and dark text and elements and a bright and clean look - easier to read in bright environments
+- **'system'**: reactive theme that will automatically switch between the native 'dark' & 'light' theme based on the users system settings
+
+The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables
+
+Example:
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import injectedModule from '@web3-onboard/injected-wallets'
+
+const injected = injectedModule()
+
+const onboard = Onboard({
+  theme: 'dark',
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}`
+    }
+  ]
+})
+
+// after initialization you may want to change the theme based on a theme switch within the dapp
+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
+}
+```
+
diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]customization.md b/docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md
similarity index 96%
rename from docs/src/routes/docs/[...2]getting-started/[...2]customization.md
rename to docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md
index f2536f09d..1e366a8cb 100644
--- a/docs/src/routes/docs/[...2]getting-started/[...2]customization.md
+++ b/docs/src/routes/docs/[...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.
-:::
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
index 188b4b70f..c26cac1eb 100644
--- a/docs/src/routes/docs/[...3]modules/core.md
+++ b/docs/src/routes/docs/[...3]modules/core.md
@@ -229,13 +229,11 @@ export type ThemingMap = {
 }
 ```
 
-:::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.
-:::
 
 #### **accountCenter**
 
@@ -659,7 +657,7 @@ unsubscribe()
 
 A limited subset of internal actions are exposed to update the Onboard state.
 
-**`setWalletModules`**
+#### **setWalletModules**
 For updating the wallets that are displayed in the wallet selection modal. This can be used if the wallets you want to support is conditional on another user action within your app. The `setWalletModules` action is called with an updated array of wallets (the same wallets that are passed in on initialization)
 
 ```typescript
@@ -695,7 +693,7 @@ const onboard = Onboard({
 onboard.state.actions.setWalletModules([ledger, trezor])
 ```
 
-**`updateBalances`**
+#### **updateBalances**
 You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses:
 
 ```javascript
@@ -704,14 +702,14 @@ onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa']) // update bala
 onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa', '0xfdsafdsfdsfdsfds']) // update balance for two addresses
 ```
 
-**`setLocale`**
+#### **setLocale**
 Onboard will automatically detect the browser locale at runtime, but if you would like to update it manually you can call the `setLocale` function:
 
 ```javascript
 onboard.state.actions.setLocal('fr_FR')
 ```
 
-**`updateNotify`**
+#### **updateNotify**
 If you need to update your notify configuration after initialization, you can do that by calling the `updateNotify` function:
 
 ```javascript
@@ -745,7 +743,7 @@ onboard.state.actions.updateNotify({
 })
 ```
 
-**`customNotification`**
+#### **customNotification**
 Notify can be used to deliver custom DApp notifications by passing a `CustomNotification` object to the `customNotification` action. This will return an `UpdateNotification` type.
 This `UpdateNotification` will return an `update` function that can be passed a new `CustomNotification` to update the existing notification.
 The `customNotification` method also returns a `dismiss` method that is called without any parameters to dismiss the notification.
@@ -768,7 +766,7 @@ setTimeout(
 )
 ```
 
-**`preflightNotifications`**
+#### **preflightNotifications**
 Notify can be used to deliver standard notifications along with preflight information by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` action. This will return a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string.
 
 Preflight event types include
@@ -825,7 +823,7 @@ const transactionHash = await onboard.state.actions.preflightNotifications({
 console.log(transactionHash)
 ```
 
-**`updateAccountCenter`**
+#### **updateAccountCenter**
 If you need to update your Account Center configuration after initialization, you can call the `updateAccountCenter` function with the new configuration
 
 ```typescript
@@ -836,7 +834,7 @@ onboard.state.actions.updateAccountCenter({
 })
 ```
 
-**`setPrimaryWallet`**
+#### **setPrimaryWallet**
 The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
 
 ```typescript
diff --git a/packages/core/README.md b/packages/core/README.md
index d3e779df8..0d553cab3 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -667,6 +667,66 @@ const onboard = Onboard({
 onboard.state.actions.setWalletModules([ledger, trezor])
 ```
 
+**`updateTheme`**
+An exposed method for updating the theme of web3-onboard. The function accepts `Theme` types (see below) 
+
+Available native themes include:
+- **'default'**: a mix of light and dark elements found throughout the web3-onboard components
+- **'dark'**: dark background with lighter text and elements with a modern look - easy on the eyes in low-light settings
+- **'light'**: light colors for background and dark text and elements and a bright and clean look - easier to read in bright environments
+- **'system'**: reactive theme that will automatically switch between the native 'dark' & 'light' theme based on the users system settings
+
+The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables
+
+Example:
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import injectedModule from '@web3-onboard/injected-wallets'
+
+const injected = injectedModule()
+
+const onboard = Onboard({
+  theme: 'dark',
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}`
+    }
+  ]
+})
+
+// after initialization you may want to change the theme based on a theme switch within the dapp
+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)
+```
+
+```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
+}
+```
+
 **`updateBalances`**
 You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses:
 

From cf2e8e9b70fb25cf3824a4bf81dfefd5de5765aa Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 13:42:02 -0700
Subject: [PATCH 02/11] More docs

---
 .../[...2]getting-started/[...2]theming.md     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
index 61924c766..35b28f255 100644
--- a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -5,7 +5,14 @@ To customize the color theme of web3-onboard and match it with your dapp, you ca
 
 ### Theming Tool
 
-You can preview how web3-onboard will look on your site by using our theming tool. Simply go to /theming-tool and 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.
+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 *note: not all sites allow iframe injection, if this is the case for your site use a screenshot*
+- 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
+- *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*
+- Copy the output theme and use as the value to the `theme` prop within the onboard config **or** within the `updateTheme` API action (see below)
 
 ### Native Theming
 
@@ -54,13 +61,8 @@ const onboard = Onboard({
 
 ### Dynamically Update Theme
 
-**`updateTheme`** is an exposed API method for actively updating the theme of web3-onboard. The function accepts `Theme` types (see below) 
-
-Available native themes include:
-- **'default'**: a mix of light and dark elements found throughout the web3-onboard components
-- **'dark'**: dark background with lighter text and elements with a modern look - easy on the eyes in low-light settings
-- **'light'**: light colors for background and dark text and elements and a bright and clean look - easier to read in bright environments
-- **'system'**: reactive theme that will automatically switch between the native 'dark' & 'light' theme based on the users system settings
+**`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
 

From c027fdc45f36321b39bc86faccd3b0f2ab1145ef Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 14:17:51 -0700
Subject: [PATCH 03/11] Add theming video

---
 .../[...2]getting-started/[...2]theming.md    | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
index 35b28f255..0f4312160 100644
--- a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -6,6 +6,7 @@ To customize the color theme of web3-onboard and match it with your dapp, you ca
 ### 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 *note: not all sites allow iframe injection, if this is the case for your site use a screenshot*
@@ -14,6 +15,10 @@ To do this:
 - *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*
 - Copy the output theme and use as the value to the `theme` prop within the onboard config **or** within the `updateTheme` API action (see below)
 
+Follow along with the video below:
+
+<iframe width="560" height="315" 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>
+
 ### Native Theming
 
 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 option.
@@ -70,26 +75,17 @@ Example:
 
 ```typescript
 import Onboard from '@web3-onboard/core'
-import injectedModule from '@web3-onboard/injected-wallets'
-
-const injected = injectedModule()
 
 const onboard = Onboard({
   theme: 'dark',
-  wallets: [injected],
-  chains: [
-    {
-      id: '0x1',
-      token: 'ETH',
-      label: 'Ethereum Mainnet',
-      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}`
-    }
-  ]
+  // other options like wallets, chains, appMetaData, etc.
 })
 
-// after initialization you may want to change the theme based on a theme switch within the dapp
+// 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',

From b5a70c00c47c8100693c91968edff31bbd6f38c6 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 15:29:28 -0700
Subject: [PATCH 04/11] More docs

---
 .../[...2]getting-started/[...2]theming.md    | 34 ++++++----
 docs/src/routes/docs/[...3]modules/core.md    | 65 ++++++++++++++++---
 packages/core/README.md                       | 12 ++--
 3 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
index 0f4312160..993ebdcda 100644
--- a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -9,25 +9,35 @@ You can preview how web3-onboard will look on your site by using our [theming to
 
 To do this:
 - Head over to our [theming tool](/theming-tool)
-- Drop a screen shot or enter the URL of your site *note: not all sites allow iframe injection, if this is the case for your site use a screenshot*
+- 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
-- *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*
-- Copy the output theme and use as the value to the `theme` prop within the onboard config **or** within the `updateTheme` API action (see below)
+- 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="560" height="315" 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*
+:::
+
 ### Native Theming
 
-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 option.
+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.
 
 Available native themes include:
-- **'default'**: a mix of light and dark elements found throughout the web3-onboard components
-- **'dark'**: dark background with lighter text and elements with a modern look - easy on the eyes in low-light settings
-- **'light'**: light colors for background and dark text and elements and a bright and clean look - easier to read in bright environments
-- **'system'**: reactive theme that will automatically switch between the native 'dark' & 'light' theme based on the users system settings
+|  |  |
+| --- | ----------- |
+| 'default'      | a mix of light and dark elements found throughout the web3-onboard components |
+| 'dark'      | modern look - easy on the eyes in low-light settings |
+| 'light'      | bright and clean look - easier to read in bright environments |
+| 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
+
+
 
 Example:
 
@@ -43,9 +53,9 @@ const onboard = Onboard({
 
 ### Custom Theming
 
-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.
+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
+```typescript copy
 
 import Onboard, { ThemingMap } from '@web3-onboard/core'
 
@@ -64,7 +74,7 @@ const onboard = Onboard({
 })
 ```
 
-### Dynamically Update Theme
+### 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`*
@@ -73,7 +83,7 @@ The function also accepts a custom built `ThemingMap` object that contains all o
 
 Example:
 
-```typescript
+```typescript copy
 import Onboard from '@web3-onboard/core'
 
 const onboard = Onboard({
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
index c26cac1eb..b74ad29d7 100644
--- a/docs/src/routes/docs/[...3]modules/core.md
+++ b/docs/src/routes/docs/[...3]modules/core.md
@@ -124,7 +124,7 @@ type Chain = {
 
 An object that defines your app:
 
-```ts
+```ts copy
 type AppMetadata = {
   // app name
   name: string
@@ -169,7 +169,7 @@ An object that allows for customizing the connect modal layout and behavior
 
 <img src="{walletModal}" alt="Web3-Onboard connect wallet modal"/>
 
-```typescript
+```typescript copy
 type ConnectModalOptions = {
   showSidebar?: boolean
   /**
@@ -207,6 +207,7 @@ Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syn
 #### **theme**
 
 A string or an object that defines the color theme web3-onboard will render the components.
+
 Define a custom or predefined theme for Web3Onboard using either:
 
 - Native themes available: 'default', 'dark', 'light', 'system'
@@ -231,7 +232,7 @@ export type ThemingMap = {
 
 Interested in seeing how web3-onboard will look on your site?
 
-[Try out our theming tool](/theming-tool)
+[Try out our theming tool](/theming-tool) or our in depth theming walkthrough [here](/docs/getting-started/theming)
 
 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.
 
@@ -693,6 +694,54 @@ const onboard = Onboard({
 onboard.state.actions.setWalletModules([ledger, trezor])
 ```
 
+#### **updateTheme**
+An exposed method for updating the theme of web3-onboard. The function accepts `Theme` types (see below) 
+
+Available native themes include:
+|  |  |
+| --- | ----------- |
+| 'default'      | a mix of light and dark elements found throughout the web3-onboard components |
+| 'dark'      | modern look - easy on the eyes in low-light settings |
+| 'light'      | bright and clean look - easier to read in bright environments |
+| 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
+
+
+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'
+import injectedModule from '@web3-onboard/injected-wallets'
+
+const injected = injectedModule()
+
+const onboard = Onboard({
+  theme: 'dark',
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}`
+    }
+  ]
+})
+
+// after initialization you may want to change the theme based on a theme switch within the dapp
+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)
+```
+
 #### **updateBalances**
 You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses:
 
@@ -1084,7 +1133,7 @@ Node built-ins are automatically bundled in v4 so that portion is handled automa
 
 **babel.config.js**
 
-```javascript
+```javascript copy
 module.exports = (api) => {
   api.cache(true)
   const plugins = [
@@ -1117,7 +1166,7 @@ You'll need to add some dev dependencies with the following command:
 
 Then add the following to your `webpack.config.js` file:
 
-```javascript
+```javascript copy
 const webpack = require('webpack')
 
 module.exports = {
@@ -1164,7 +1213,7 @@ Add the following dev dependencies:
 
 `yarn add rollup-plugin-polyfill-node webpack-bundle-analyzer assert buffer crypto-browserify stream-http https-browserify os-browserify process stream-browserify util path-browserify -D`
 
-```javascript
+```javascript copy
 const webpack = require('webpack')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const path = require('path')
@@ -1225,7 +1274,7 @@ Add the following dev dependencies:
 
 Then add the following to your `svelte.config.js` file:
 
-```javascript
+```javascript copy
 import adapter from '@sveltejs/adapter-auto'
 import preprocess from 'svelte-preprocess'
 import nodePolyfills from 'rollup-plugin-polyfill-node'
@@ -1288,7 +1337,7 @@ Add the following dev dependencies:
 
 Then add the following to your `vite.config.js` file:
 
-```javascript
+```javascript copy
 import nodePolyfills from 'rollup-plugin-polyfill-node'
 
 const MODE = process.env.NODE_ENV
diff --git a/packages/core/README.md b/packages/core/README.md
index 0d553cab3..cd9bb4ca4 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -671,10 +671,14 @@ onboard.state.actions.setWalletModules([ledger, trezor])
 An exposed method for updating the theme of web3-onboard. The function accepts `Theme` types (see below) 
 
 Available native themes include:
-- **'default'**: a mix of light and dark elements found throughout the web3-onboard components
-- **'dark'**: dark background with lighter text and elements with a modern look - easy on the eyes in low-light settings
-- **'light'**: light colors for background and dark text and elements and a bright and clean look - easier to read in bright environments
-- **'system'**: reactive theme that will automatically switch between the native 'dark' & 'light' theme based on the users system settings
+|  |  |
+| --- | ----------- |
+| 'default'      | a mix of light and dark elements found throughout the web3-onboard components |
+| 'dark'      | modern look - easy on the eyes in low-light settings |
+| 'light'      | bright and clean look - easier to read in bright environments |
+| 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
+
+
 
 The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables
 

From 1bad64321eb65abf9f71f3a8487b56a7f436ef20 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 15:34:43 -0700
Subject: [PATCH 05/11] Update layout and add copy to some code chunks

---
 docs/src/routes/docs/[...3]modules/core.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
index b74ad29d7..75ff68e6a 100644
--- a/docs/src/routes/docs/[...3]modules/core.md
+++ b/docs/src/routes/docs/[...3]modules/core.md
@@ -380,7 +380,7 @@ export interface UpdateNotification {
 
 Putting it all together, here is an example initialization with the injected wallet modules:
 
-```ts
+```ts copy
 import Onboard from '@web3-onboard/core'
 import injectedModule from '@web3-onboard/injected-wallets'
 
@@ -1274,7 +1274,7 @@ Add the following dev dependencies:
 
 Then add the following to your `svelte.config.js` file:
 
-```javascript copy
+```javascript
 import adapter from '@sveltejs/adapter-auto'
 import preprocess from 'svelte-preprocess'
 import nodePolyfills from 'rollup-plugin-polyfill-node'
@@ -1337,7 +1337,7 @@ Add the following dev dependencies:
 
 Then add the following to your `vite.config.js` file:
 
-```javascript copy
+```javascript
 import nodePolyfills from 'rollup-plugin-polyfill-node'
 
 const MODE = process.env.NODE_ENV

From 437477a3d84fa9bebdf13449c0501e1397ad5965 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 15:51:22 -0700
Subject: [PATCH 06/11] Add dividers for better visibility between options and
 copy to code blocks where useful

---
 docs/src/routes/docs/[...3]modules/core.md | 77 +++++++++++++++-------
 1 file changed, 55 insertions(+), 22 deletions(-)

diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
index 75ff68e6a..08c9c0624 100644
--- a/docs/src/routes/docs/[...3]modules/core.md
+++ b/docs/src/routes/docs/[...3]modules/core.md
@@ -102,6 +102,8 @@ type InitOptions {
 
 An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included.
 
+---
+
 #### **chains**
 
 An array of Chains that your app supports:
@@ -120,6 +122,8 @@ type Chain = {
 }
 ```
 
+---
+
 #### **appMetadata**
 
 An object that defines your app:
@@ -163,6 +167,8 @@ type RecommendedInjectedWallets = {
 }
 ```
 
+---
+
 #### **connectModal**
 
 An object that allows for customizing the connect modal layout and behavior
@@ -192,6 +198,8 @@ type ConnectModalOptions = {
 }
 ```
 
+---
+
 #### **i18n**
 
 An object that defines the display text for different locales. Can also be used to override the default text. To override the default text, pass in an object for the `en` locale.
@@ -204,16 +212,25 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](https://github.com/blocknative/web3-onboard/blob/develop/packages/core/src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
+---
+
 #### **theme**
 
 A string or an object that defines the color theme web3-onboard will render the components.
 
 Define a custom or predefined theme for Web3Onboard using either:
 
-- Native themes available: 'default', 'dark', 'light', 'system'
-- `ThemingMap` object to create a totally custom theme - see below for the typing
+###### **Native themes available**
+|  |  |
+| --- | ----------- |
+| 'default'      | a mix of light and dark elements found throughout the web3-onboard components |
+| 'dark'      | modern look - easy on the eyes in low-light settings |
+| 'light'      | bright and clean look - easier to read in bright environments |
+| 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
+
 
-Note: `system` will default to the theme set by the users system.
+###### **ThemingMap object** - Create a totally custom theme see below for the typing.
+For a complete walkthrough on customizing your theme checkout our [theming documentation](/docs/getting-started/theming)
 
 ```typescript
 export type Theme = ThemingMap | BuiltInThemes | 'system'
@@ -229,12 +246,15 @@ export type ThemingMap = {
   '--w3o-border-radius'?: string
 }
 ```
-
+:::admonition type=tip
 Interested in seeing how web3-onboard will look on your site?
 
 [Try out our theming tool](/theming-tool) or our in depth theming walkthrough [here](/docs/getting-started/theming)
 
 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.
+:::
+
+---
 
 #### **accountCenter**
 
@@ -262,6 +282,8 @@ export type AccountCenterOptions = {
 type AccountCenterPosition = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft'
 ```
 
+---
+
 #### **containerElements**
 
 An object mapping for W3O components with the key being the DOM element to mount the specified component to.
@@ -287,6 +309,8 @@ type ContainerElements = {
 }
 ```
 
+---
+
 #### **`notify`**
 
 Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of remaining transactions that may be in flight.
@@ -536,7 +560,7 @@ const onboard = Onboard({
 
 A wallet can be disconnected, which will cleanup any background operations the wallet may be doing and will also remove it from the Onboard `wallets` array:
 
-```javascript
+```javascript copy
 // disconnect the first wallet in the wallets array
 const [primaryWallet] = onboard.state.get().wallets
 await onboard.disconnectWallet({ label: primaryWallet.label })
@@ -626,7 +650,7 @@ type WalletModule {
 
 The current state of Onboard can be accessed at any time using the `state.get()` method:
 
-```javascript
+```javascript copy
 const currentState = onboard.state.get()
 ```
 
@@ -636,7 +660,7 @@ State can also be subscribed to using the `state.select()` method. The `select`
 
 To subscribe to all state updates, call the `select` method with no arguments:
 
-```javascript
+```javascript copy
 const state = onboard.state.select()
 const { unsubscribe } = state.subscribe((update) => console.log('state update: ', update))
 
@@ -646,7 +670,7 @@ const { unsubscribe } = state.subscribe((update) => console.log('state update: '
 
 Specific top level slices of state can be subscribed to. For example you may want to just subscribe to receive updates to the `wallets` array only:
 
-```javascript
+```javascript copy
 const wallets = onboard.state.select('wallets')
 const { unsubscribe } = wallets.subscribe((update) => console.log('wallets update: ', update))
 
@@ -658,6 +682,8 @@ unsubscribe()
 
 A limited subset of internal actions are exposed to update the Onboard state.
 
+---
+
 #### **setWalletModules**
 For updating the wallets that are displayed in the wallet selection modal. This can be used if the wallets you want to support is conditional on another user action within your app. The `setWalletModules` action is called with an updated array of wallets (the same wallets that are passed in on initialization)
 
@@ -694,17 +720,10 @@ const onboard = Onboard({
 onboard.state.actions.setWalletModules([ledger, trezor])
 ```
 
-#### **updateTheme**
-An exposed method for updating the theme of web3-onboard. The function accepts `Theme` types (see below) 
-
-Available native themes include:
-|  |  |
-| --- | ----------- |
-| 'default'      | a mix of light and dark elements found throughout the web3-onboard components |
-| 'dark'      | modern look - easy on the eyes in low-light settings |
-| 'light'      | bright and clean look - easier to read in bright environments |
-| 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
+---
 
+#### **updateTheme**
+An exposed method for updating the [theme](#theme) of web3-onboard. The function accepts `Theme` types (see below) 
 
 The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables
 
@@ -742,6 +761,8 @@ const customTheme: ThemingMap = {
 onboard.state.actions.updateTheme(customTheme)
 ```
 
+---
+
 #### **updateBalances**
 You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses:
 
@@ -751,6 +772,8 @@ onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa']) // update bala
 onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa', '0xfdsafdsfdsfdsfds']) // update balance for two addresses
 ```
 
+---
+
 #### **setLocale**
 Onboard will automatically detect the browser locale at runtime, but if you would like to update it manually you can call the `setLocale` function:
 
@@ -758,10 +781,12 @@ Onboard will automatically detect the browser locale at runtime, but if you woul
 onboard.state.actions.setLocal('fr_FR')
 ```
 
+---
+
 #### **updateNotify**
 If you need to update your notify configuration after initialization, you can do that by calling the `updateNotify` function:
 
-```javascript
+```javascript copy
 onboard.state.actions.updateNotify({
   desktop: {
     enabled: true,
@@ -792,12 +817,14 @@ onboard.state.actions.updateNotify({
 })
 ```
 
+---
+
 #### **customNotification**
 Notify can be used to deliver custom DApp notifications by passing a `CustomNotification` object to the `customNotification` action. This will return an `UpdateNotification` type.
 This `UpdateNotification` will return an `update` function that can be passed a new `CustomNotification` to update the existing notification.
 The `customNotification` method also returns a `dismiss` method that is called without any parameters to dismiss the notification.
 
-```typescript
+```typescript copy
 const { update, dismiss } = onboard.state.actions.customNotification({
   type: 'pending',
   message: 'This is a custom DApp pending notification to use however you want',
@@ -815,6 +842,8 @@ setTimeout(
 )
 ```
 
+---
+
 #### **preflightNotifications**
 Notify can be used to deliver standard notifications along with preflight information by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` action. This will return a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string.
 
@@ -843,7 +872,7 @@ interface PreflightNotificationsOptions {
 }
 ```
 
-```typescript
+```typescript copy
 const balanceValue = Object.values(balance)[0]
 const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
@@ -872,6 +901,8 @@ const transactionHash = await onboard.state.actions.preflightNotifications({
 console.log(transactionHash)
 ```
 
+---
+
 #### **updateAccountCenter**
 If you need to update your Account Center configuration after initialization, you can call the `updateAccountCenter` function with the new configuration
 
@@ -883,6 +914,8 @@ onboard.state.actions.updateAccountCenter({
 })
 ```
 
+---
+
 #### **setPrimaryWallet**
 The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
 
@@ -899,7 +932,7 @@ onboard.state.actions.setPrimaryWallet(wallets[1], wallets[1].accounts[2].addres
 
 When initializing Onboard you define a list of chains/networks that your app supports. If you would like to prompt the user to switch to one of those chains, you can use the `setChain` method on an initialized instance of Onboard:
 
-```typescript
+```typescript copy
 type SetChain = (options: SetChainOptions) => Promise<boolean>
 type SetChainOptions = {
   chainId: string // hex encoded string

From f155facd168329c84e282e90febf1d38ae034342 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 15:55:58 -0700
Subject: [PATCH 07/11] Reorder Theming docs layout

---
 .../[...2]getting-started/[...2]theming.md    | 54 ++++++++++---------
 .../docs/[...3]modules/transaction-preview.md |  4 +-
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
index 993ebdcda..205146415 100644
--- a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -1,30 +1,7 @@
 #  Theming
 ## Using web3-onboard 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.
-
-### 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="560" height="315" 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*
-:::
-
+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).
 ### Native Theming
 
 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.
@@ -38,7 +15,6 @@ Available native themes include:
 | 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
 
 
-
 Example:
 
 ```typescript
@@ -51,6 +27,8 @@ const onboard = Onboard({
 })
 ```
 
+---
+
 ### Custom Theming
 
 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.
@@ -74,6 +52,8 @@ const onboard = Onboard({
 })
 ```
 
+---
+
 ### 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).
@@ -122,3 +102,27 @@ export type ThemingMap = {
 }
 ```
 
+---
+
+### 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/docs/src/routes/docs/[...3]modules/transaction-preview.md b/docs/src/routes/docs/[...3]modules/transaction-preview.md
index 80562f98d..17f1dd3f3 100644
--- a/docs/src/routes/docs/[...3]modules/transaction-preview.md
+++ b/docs/src/routes/docs/[...3]modules/transaction-preview.md
@@ -41,7 +41,7 @@ npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-previe
 
 To use the Transaction Preview package with web3-onboard all a developer needs to do is initialize web3-onboard with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas) and pass in the module as shown below.
 
-```typescript
+```typescript copy
 import Onboard from '@web3-onboard/core'
 import injectedModule from '@web3-onboard/injected'
 import transactionPreviewModule from '@web3-onboard/transaction-preview'
@@ -87,7 +87,7 @@ To use the Transaction Preview package without web3-onboard all a developer need
 
 With the above steps a UI will be rendered with the balance changes and gas used.
 
-```typescript
+```typescript copy
 import transactionPreviewModule from '@web3-onboard/transaction-preview'
 
 const {init, previewTransaction} = transactionPreviewModule({

From d7ce6225b52603630bc82e9d79419f570683e9fb Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Thu, 23 Feb 2023 16:03:23 -0700
Subject: [PATCH 08/11] Add note about ethers v6 usage

---
 .../connect-wallet/ReactConnectWallet.md      |  4 +++
 .../lib/components/getting-started-guide.md   |  2 ++
 .../docs/[...1]overview/[...1]introduction.md | 16 ++++++-----
 docs/src/routes/docs/[...3]modules/core.md    | 27 ++++++++++++++-----
 docs/src/routes/docs/[...3]modules/gas.md     | 16 ++++++-----
 docs/src/routes/docs/[...3]modules/react.md   |  2 ++
 .../docs/[...3]modules/transaction-preview.md |  2 ++
 docs/src/routes/docs/[...3]modules/vue.md     |  2 ++
 docs/src/routes/examples/uniswap-widget.md    |  4 +++
 packages/core/README.md                       |  2 ++
 packages/demo/src/App.svelte                  |  8 ++++++
 packages/transaction-preview/README.md        |  2 ++
 packages/vue/README.md                        |  2 ++
 13 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
index 679388e18..ebccfdb67 100644
--- 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
index 3c5bc558c..cae1b3d7d 100644
--- 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/routes/docs/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction.md
index 139379c5b..e36fda56d 100644
--- 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/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
index 08c9c0624..cf59af2d7 100644
--- a/docs/src/routes/docs/[...3]modules/core.md
+++ b/docs/src/routes/docs/[...3]modules/core.md
@@ -221,15 +221,16 @@ A string or an object that defines the color theme web3-onboard will render the
 Define a custom or predefined theme for Web3Onboard using either:
 
 ###### **Native themes available**
-|  |  |
-| --- | ----------- |
-| 'default'      | a mix of light and dark elements found throughout the web3-onboard components |
-| 'dark'      | modern look - easy on the eyes in low-light settings |
-| 'light'      | bright and clean look - easier to read in bright environments |
-| 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
 
+|           |                                                                                   |
+| --------- | --------------------------------------------------------------------------------- |
+| 'default' | a mix of light and dark elements found throughout the web3-onboard components     |
+| 'dark'    | modern look - easy on the eyes in low-light settings                              |
+| 'light'   | bright and clean look - easier to read in bright environments                     |
+| 'system'  | automatically switch between 'dark' & 'light' based on the user's system settings |
 
 ###### **ThemingMap object** - Create a totally custom theme see below for the typing.
+
 For a complete walkthrough on customizing your theme checkout our [theming documentation](/docs/getting-started/theming)
 
 ```typescript
@@ -246,6 +247,7 @@ export type ThemingMap = {
   '--w3o-border-radius'?: string
 }
 ```
+
 :::admonition type=tip
 Interested in seeing how web3-onboard will look on your site?
 
@@ -685,6 +687,7 @@ A limited subset of internal actions are exposed to update the Onboard state.
 ---
 
 #### **setWalletModules**
+
 For updating the wallets that are displayed in the wallet selection modal. This can be used if the wallets you want to support is conditional on another user action within your app. The `setWalletModules` action is called with an updated array of wallets (the same wallets that are passed in on initialization)
 
 ```typescript
@@ -723,7 +726,8 @@ onboard.state.actions.setWalletModules([ledger, trezor])
 ---
 
 #### **updateTheme**
-An exposed method for updating the [theme](#theme) of web3-onboard. The function accepts `Theme` types (see below) 
+
+An exposed method for updating the [theme](#theme) of web3-onboard. The function accepts `Theme` types (see below)
 
 The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables
 
@@ -764,6 +768,7 @@ onboard.state.actions.updateTheme(customTheme)
 ---
 
 #### **updateBalances**
+
 You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses:
 
 ```javascript
@@ -775,6 +780,7 @@ onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa', '0xfdsafdsfdsfd
 ---
 
 #### **setLocale**
+
 Onboard will automatically detect the browser locale at runtime, but if you would like to update it manually you can call the `setLocale` function:
 
 ```javascript
@@ -784,6 +790,7 @@ onboard.state.actions.setLocal('fr_FR')
 ---
 
 #### **updateNotify**
+
 If you need to update your notify configuration after initialization, you can do that by calling the `updateNotify` function:
 
 ```javascript copy
@@ -820,6 +827,7 @@ onboard.state.actions.updateNotify({
 ---
 
 #### **customNotification**
+
 Notify can be used to deliver custom DApp notifications by passing a `CustomNotification` object to the `customNotification` action. This will return an `UpdateNotification` type.
 This `UpdateNotification` will return an `update` function that can be passed a new `CustomNotification` to update the existing notification.
 The `customNotification` method also returns a `dismiss` method that is called without any parameters to dismiss the notification.
@@ -845,6 +853,7 @@ setTimeout(
 ---
 
 #### **preflightNotifications**
+
 Notify can be used to deliver standard notifications along with preflight information by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` action. This will return a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string.
 
 Preflight event types include
@@ -874,6 +883,8 @@ interface PreflightNotificationsOptions {
 
 ```typescript copy
 const balanceValue = Object.values(balance)[0]
+// if using ethers v6 this is:
+// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
 const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
 const signer = ethersProvider.getSigner()
@@ -904,6 +915,7 @@ console.log(transactionHash)
 ---
 
 #### **updateAccountCenter**
+
 If you need to update your Account Center configuration after initialization, you can call the `updateAccountCenter` function with the new configuration
 
 ```typescript
@@ -917,6 +929,7 @@ onboard.state.actions.updateAccountCenter({
 ---
 
 #### **setPrimaryWallet**
+
 The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
 
 ```typescript
diff --git a/docs/src/routes/docs/[...3]modules/gas.md b/docs/src/routes/docs/[...3]modules/gas.md
index 618049c5a..1c02d7911 100644
--- a/docs/src/routes/docs/[...3]modules/gas.md
+++ b/docs/src/routes/docs/[...3]modules/gas.md
@@ -1,6 +1,7 @@
 <script>
     import {Gas} from '$lib/components'
 </script>
+
 # Gas
 
 A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://docs.blocknative.com/gas-platform).
@@ -75,21 +76,23 @@ const gasBlockPrices = await gas.get({
 })
 ```
 
-
 ## Usage with Web3-Onboard wallet Connect and Ethers.js
 
-This example assumes you have already setup web3-onboard to connect wallets to your dapp. 
+This example assumes you have already setup web3-onboard to connect wallets to your dapp.
 For more information see [web3-onboard docs](/docs/modules/core#install).
-```ts
+
+```ts copy
 import gas from '@web3-onboard/gas'
 import { ethers } from 'ethers'
 
 // Set provider using the Web3-Onboard wallet.provider instance from the connected wallet
+// if using ethers v6 this is:
+// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
 let provider = new ethers.providers.Web3Provider(wallet.provider, 'any')
 let bnGasPrices
 
 const ethMainnetGasBlockPrices = gas.stream({
-  chains: ['0x1'], // '0x89' can also be added/replaced here for Polygon gas data 
+  chains: ['0x1'], // '0x89' can also be added/replaced here for Polygon gas data
   apiKey: '<OPTIONAL_API_KEY>', // for faster refresh rates
   endpoint: 'blockPrices'
 })
@@ -111,7 +114,7 @@ const sendTransaction = async () => {
   }
 
   const signer = provider.getUncheckedSigner()
-  
+
   // define desired confidence for transaction inclusion in block and set in transaction
   // block inclusion confidence options: 70, 80, 90, 95, 99
   const bnGasForTransaction = bnGasPrices.find(gas => gas.confidence === 90)
@@ -131,4 +134,5 @@ const sendTransaction = async () => {
 ```
 
 ## Build Environments
-For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
\ No newline at end of file
+
+For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
diff --git a/docs/src/routes/docs/[...3]modules/react.md b/docs/src/routes/docs/[...3]modules/react.md
index dc4e78d7a..e115804ca 100644
--- a/docs/src/routes/docs/[...3]modules/react.md
+++ b/docs/src/routes/docs/[...3]modules/react.md
@@ -59,6 +59,8 @@ function App() {
   let ethersProvider
 
   if (wallet) {
+    // if using ethers v6 this is:
+    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
   }
 
diff --git a/docs/src/routes/docs/[...3]modules/transaction-preview.md b/docs/src/routes/docs/[...3]modules/transaction-preview.md
index 17f1dd3f3..72bfb2b86 100644
--- a/docs/src/routes/docs/[...3]modules/transaction-preview.md
+++ b/docs/src/routes/docs/[...3]modules/transaction-preview.md
@@ -113,6 +113,8 @@ containerElement: string})
 
 // Transaction code here using Ether.js or Web3.js or construct your own transactions
 const simulate = async provider => {
+  // if using ethers v6 this is:
+  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
   const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
   const signer = ethersProvider.getSigner()
diff --git a/docs/src/routes/docs/[...3]modules/vue.md b/docs/src/routes/docs/[...3]modules/vue.md
index b7cee7eda..231ead9bf 100644
--- a/docs/src/routes/docs/[...3]modules/vue.md
+++ b/docs/src/routes/docs/[...3]modules/vue.md
@@ -46,6 +46,8 @@ const web3Onboard = init({
 const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = useOnboard()
 
 if (connectedWallet) {
+  // if using ethers v6 this is:
+  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
   const ethersProvider = new ethers.providers.Web3Provider(connectedWallet.provider, 'any')
   // ..... do stuff with the provider
 }
diff --git a/docs/src/routes/examples/uniswap-widget.md b/docs/src/routes/examples/uniswap-widget.md
index 907211eec..53f72d2c3 100644
--- a/docs/src/routes/examples/uniswap-widget.md
+++ b/docs/src/routes/examples/uniswap-widget.md
@@ -100,6 +100,8 @@ export default function App() {
   // This provider will then be passed to the Uniswap component in the next step.
   useEffect(() => {
     if (wallet?.provider) {
+     // if using ethers v6 this is:
+     // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
       setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any'))
     } else {
       // Reset the provider back to 'undefined' such that the 
@@ -158,6 +160,8 @@ export default function App() {
   // This provider will then be passed to the Uniswap component below.
   useEffect(() => {
     if (wallet?.provider) {
+      // if using ethers v6 this is:
+      // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
       setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any'))
     } else {
       // Reset the provider back to 'undefined' such that the 
diff --git a/packages/core/README.md b/packages/core/README.md
index cd9bb4ca4..ed2db93a9 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -838,6 +838,8 @@ interface PreflightNotificationsOptions {
 ```typescript
 const balanceValue = Object.values(balance)[0]
 const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
+// if using ethers v6 this is:
+// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
 
 const signer = ethersProvider.getSigner()
 const txDetails = {
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index adb30f729..69ce11240 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -326,6 +326,8 @@
   })
 
   const signTransactionMessage = async provider => {
+    // if using ethers v6 this is:
+    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
     const signer = ethersProvider.getSigner()
@@ -340,6 +342,8 @@
 
   let toAddress
   const sendTransaction = async provider => {
+    // if using ethers v6 this is:
+    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
     const signer = ethersProvider.getSigner()
@@ -359,6 +363,8 @@
     await onboard.setChain({ chainId: '0x5' })
 
     const balanceValue = Object.values(balance)[0]
+    // if using ethers v6 this is:
+    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
     const signer = ethersProvider.getSigner()
@@ -390,6 +396,8 @@
   }
 
   const signMessage = async (provider, address) => {
+    // if using ethers v6 this is:
+    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
     const signer = ethersProvider?.getSigner()
diff --git a/packages/transaction-preview/README.md b/packages/transaction-preview/README.md
index 87bc23a3b..b7ec836c9 100644
--- a/packages/transaction-preview/README.md
+++ b/packages/transaction-preview/README.md
@@ -90,6 +90,8 @@ containerElement: string})
 
 // Transaction code here using Ether.js or Web3.js or construct your own transactions
 const simulate = async provider => {
+  // if using ethers v6 this is:
+  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
   const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
   const signer = ethersProvider.getSigner()
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 9d1b16f7c..5d7528698 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -42,6 +42,8 @@ const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
   useOnboard()
 
 if (connectedWallet) {
+  // if using ethers v6 this is:
+  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
   const ethersProvider = new ethers.providers.Web3Provider(
     connectedWallet.provider,
     'any'

From b29a35cdbc4b6c579333419d40f4657e02ad9970 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Thu, 23 Feb 2023 19:13:14 -0500
Subject: [PATCH 09/11] edit theming page

- add css variables table
- edit theme descriptions
- re-org existing content
---
 .../[...2]getting-started/[...2]theming.md    | 66 +++++++++++--------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
index 205146415..cb004c02c 100644
--- a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md
@@ -1,40 +1,51 @@
-#  Theming
-## Using web3-onboard theming
+# 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).
-### Native Theming
 
-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.
+## Available Themes
 
-Available native themes include:
-|  |  |
-| --- | ----------- |
-| 'default'      | a mix of light and dark elements found throughout the web3-onboard components |
-| 'dark'      | modern look - easy on the eyes in low-light settings |
-| 'light'      | bright and clean look - easier to read in bright environments |
-| 'system'      | automatically switch between 'dark' & 'light' based on the user's system settings |
+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', 
+  theme: 'dark'
   // other options like wallets, chains, appMetaData, etc.
 })
 ```
 
 ---
 
-### Custom Theming
+## 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 = {
@@ -43,21 +54,21 @@ const customTheme: ThemingMap = {
   '--w3o-text-color': '#fff',
   '--w3o-border-color': '#ccc',
   '--w3o-action-color': '#007bff',
-  '--w3o-border-radius': '5px',
+  '--w3o-border-radius': '5px'
 }
 
 const onboard = Onboard({
-  theme: customTheme, 
+  theme: customTheme
   // other options like wallets, chains, appMetaData, etc.
 })
 ```
 
 ---
 
-### Dynamically Update Theme with API
+## 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`*
+_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
 
@@ -67,7 +78,7 @@ Example:
 import Onboard from '@web3-onboard/core'
 
 const onboard = Onboard({
-  theme: 'dark',
+  theme: 'dark'
   // other options like wallets, chains, appMetaData, etc.
 })
 
@@ -87,6 +98,7 @@ onboard.state.actions.updateTheme(customTheme)
 ```
 
 #### Theme Types
+
 ```typescript
 export type Theme = ThemingMap | BuiltInThemes | 'system'
 
@@ -104,25 +116,25 @@ export type ThemingMap = {
 
 ---
 
-### Theming Tool
+## 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 
+- 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*
-:::
+  :::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*
+_note: not all sites allow iframe injection, if this is the case for your site use a screenshot_
 :::
-

From 31a06254a97a6d3a4593f950259d8ed3df617f1a Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Fri, 24 Feb 2023 08:57:01 -0700
Subject: [PATCH 10/11] Update
 docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md

---
 .../components/examples/connect-wallet/ReactConnectWallet.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
index ebccfdb67..6ea14fd18 100644
--- a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
+++ b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
@@ -166,7 +166,7 @@ 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:
+    // if using ethers v6 this is:
     // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     }
   }, [wallet])

From c69020eb39e6ab99364815d2bf4b4ca2068300bb Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Fri, 24 Feb 2023 09:32:24 -0700
Subject: [PATCH 11/11] Update theming tool to default to custom

---
 docs/src/lib/components/ConnectWalletButton.svelte |  2 +-
 docs/src/lib/components/ThemeCustomizer.svelte     |  2 +-
 docs/src/lib/services/onboard.js                   | 14 +++++---------
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/docs/src/lib/components/ConnectWalletButton.svelte b/docs/src/lib/components/ConnectWalletButton.svelte
index 06f1ccec1..9f5bb3589 100644
--- 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
index c7a3139a3..025c960e0 100644
--- 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/services/onboard.js b/docs/src/lib/services/onboard.js
index 181bf986d..1c1b238e6 100644
--- 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
 }