diff --git a/apps/demo/CHANGELOG.md b/apps/demo/CHANGELOG.md
index afb33bf8fa..61d808b492 100644
--- a/apps/demo/CHANGELOG.md
+++ b/apps/demo/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @apps/demo
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/wagmi@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 8578098c87..b6b4026d85 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apps/demo",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "private": true,
   "scripts": {
     "dev:demo": "next dev",
@@ -11,7 +11,7 @@
   "dependencies": {
     "@radix-ui/react-switch": "1.0.3",
     "@tanstack/react-query": "5.24.8",
-    "@web3modal/wagmi": "4.1.11",
+    "@web3modal/wagmi": "4.1.12-910a844.0",
     "clsx": "2.1.0",
     "framer-motion": "11.0.8",
     "next": "14.1.1",
diff --git a/apps/gallery/CHANGELOG.md b/apps/gallery/CHANGELOG.md
index 9cc390a624..4b94d9a613 100644
--- a/apps/gallery/CHANGELOG.md
+++ b/apps/gallery/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @apps/gallery
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/common@4.1.12-910a844.0
+  - @web3modal/ui@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/apps/gallery/package.json b/apps/gallery/package.json
index c729ed736f..594c73a776 100644
--- a/apps/gallery/package.json
+++ b/apps/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apps/gallery",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/common": "4.1.11",
-    "@web3modal/ui": "4.1.11",
+    "@web3modal/common": "4.1.12-910a844.0",
+    "@web3modal/ui": "4.1.12-910a844.0",
     "lit": "3.1.0",
     "storybook": "7.6.7"
   },
diff --git a/apps/laboratory/CHANGELOG.md b/apps/laboratory/CHANGELOG.md
index 78a3a98f98..e904395a5b 100644
--- a/apps/laboratory/CHANGELOG.md
+++ b/apps/laboratory/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @apps/laboratory
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/ethers@4.1.12-910a844.0
+  - @web3modal/siwe@4.1.12-910a844.0
+  - @web3modal/solana@4.1.12-910a844.0
+  - @web3modal/wagmi@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json
index 740193729f..f43bd60ccd 100644
--- a/apps/laboratory/package.json
+++ b/apps/laboratory/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apps/laboratory",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "private": true,
   "scripts": {
     "dev:laboratory": "next dev",
@@ -31,10 +31,10 @@
     "@sentry/react": "7.92.0",
     "@solana/web3.js": "1.87.6",
     "@tanstack/react-query": "5.24.8",
-    "@web3modal/ethers": "4.1.11",
-    "@web3modal/siwe": "4.1.11",
-    "@web3modal/solana": "4.1.11",
-    "@web3modal/wagmi": "4.1.11",
+    "@web3modal/ethers": "4.1.12-910a844.0",
+    "@web3modal/siwe": "4.1.12-910a844.0",
+    "@web3modal/solana": "4.1.12-910a844.0",
+    "@web3modal/wagmi": "4.1.12-910a844.0",
     "ethers": "6.9.0",
     "framer-motion": "10.17.9",
     "next": "14.0.4",
diff --git a/apps/laboratory/src/utils/ConstantsUtil.ts b/apps/laboratory/src/utils/ConstantsUtil.ts
index 8abeef0614..f15d03895f 100644
--- a/apps/laboratory/src/utils/ConstantsUtil.ts
+++ b/apps/laboratory/src/utils/ConstantsUtil.ts
@@ -28,19 +28,19 @@ export const ConstantsUtil = {
       id: 'kotlin-web3wallet',
       name: 'kotlin-web3wallet',
       homepage: 'https://walletconnect.com',
-      mobile_link: 'kotlin-web3wallet://wc'
+      mobile_link: 'kotlin-web3wallet://'
     },
     {
       id: 'swift-web3wallet',
       name: 'swift-web3wallet',
       homepage: 'https://walletconnect.com',
-      mobile_link: 'walletapp://wc'
+      mobile_link: 'walletapp://'
     },
     {
       id: 'flutter-web3wallet',
       name: 'flutter-web3wallet',
       homepage: 'https://walletconnect.com',
-      mobile_link: 'wcflutterwallet://wc'
+      mobile_link: 'wcflutterwallet://'
     }
   ],
   ProjectId: projectId
diff --git a/apps/laboratory/tests/email.spec.ts b/apps/laboratory/tests/email.spec.ts
index 34d15d4280..f8c0ae41b6 100644
--- a/apps/laboratory/tests/email.spec.ts
+++ b/apps/laboratory/tests/email.spec.ts
@@ -46,12 +46,3 @@ testMEmail('it should disconnect correctly', async ({ modalPage, modalValidator
   await modalPage.disconnect()
   await modalValidator.expectDisconnected()
 })
-
-testMEmail('it should update email', async ({ modalPage }) => {
-  const mailsacApiKey = process.env['MAILSAC_API_KEY']
-  if (!mailsacApiKey) {
-    throw new Error('MAILSAC_API_KEY is not set')
-  }
-
-  await modalPage.updateEmail(mailsacApiKey)
-})
diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts
index 2869903031..3a71442397 100644
--- a/apps/laboratory/tests/shared/pages/ModalPage.ts
+++ b/apps/laboratory/tests/shared/pages/ModalPage.ts
@@ -232,9 +232,9 @@ export class ModalPage {
     await this.page.waitForTimeout(300)
   }
 
-  async updateEmail(mailsacApiKey: string) {
+  async updateEmail(mailsacApiKey: string, index: number) {
     const email = new Email(mailsacApiKey)
-    const newEmailAddress = email.getEmailAddressToUse(1)
+    const newEmailAddress = email.getEmailAddressToUse(index)
 
     await this.page.getByTestId('account-button').click()
     await this.page.getByTestId('w3m-account-email-update').click()
diff --git a/apps/laboratory/tests/shared/utils/email.ts b/apps/laboratory/tests/shared/utils/email.ts
index 65a9cfe141..0014bbde5b 100644
--- a/apps/laboratory/tests/shared/utils/email.ts
+++ b/apps/laboratory/tests/shared/utils/email.ts
@@ -1,5 +1,4 @@
 import { Mailsac } from '@mailsac/api'
-import { randomBytes } from 'crypto'
 const EMAIL_CHECK_TIMEOUT = 1000
 const MAX_EMAIL_CHECK = 16
 const EMAIL_APPROVE_BUTTON_TEXT = 'Approve this login'
@@ -78,8 +77,6 @@ export class Email {
   }
 
   getEmailAddressToUse(index: number, domain = EMAIL_DOMAIN): string {
-    const prefix = randomBytes(12).toString('hex')
-
-    return `${prefix}-w${index}@${domain}`
+    return `w3m-w${index}@${domain}`
   }
 }
diff --git a/examples/html-ethers5/CHANGELOG.md b/examples/html-ethers5/CHANGELOG.md
index 12f88af164..534ad45355 100644
--- a/examples/html-ethers5/CHANGELOG.md
+++ b/examples/html-ethers5/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @examples/html-ethers5
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/ethers5@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/examples/html-ethers5/package.json b/examples/html-ethers5/package.json
index 398a7eff60..d3ec8b8c94 100644
--- a/examples/html-ethers5/package.json
+++ b/examples/html-ethers5/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@examples/html-ethers5",
   "private": true,
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "scripts": {
     "dev:example": "vite --port 3011",
     "build:examples": "vite build"
   },
   "dependencies": {
-    "@web3modal/ethers5": "4.1.11",
+    "@web3modal/ethers5": "4.1.12-910a844.0",
     "ethers": "5.7.2"
   },
   "devDependencies": {
diff --git a/examples/html-wagmi/CHANGELOG.md b/examples/html-wagmi/CHANGELOG.md
index 636817b78e..ba517a87ee 100644
--- a/examples/html-wagmi/CHANGELOG.md
+++ b/examples/html-wagmi/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @examples/html-wagmi
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/wagmi@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/examples/html-wagmi/package.json b/examples/html-wagmi/package.json
index b1d9bcfa10..ff6ea8f2e8 100644
--- a/examples/html-wagmi/package.json
+++ b/examples/html-wagmi/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@examples/html-wagmi",
   "private": true,
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "scripts": {
     "dev:example": "vite --port 3001",
     "build:examples": "vite build"
   },
   "dependencies": {
-    "@web3modal/wagmi": "4.1.11",
+    "@web3modal/wagmi": "4.1.12-910a844.0",
     "@wagmi/connectors": "4.1.14",
     "@wagmi/core": "2.6.5",
     "react": "18.2.0",
diff --git a/examples/next-wagmi/CHANGELOG.md b/examples/next-wagmi/CHANGELOG.md
index 99de6dafd1..ad26b6df4b 100644
--- a/examples/next-wagmi/CHANGELOG.md
+++ b/examples/next-wagmi/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @examples/next-wagmi
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/wagmi@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/examples/next-wagmi/package.json b/examples/next-wagmi/package.json
index 2b078eb99c..6789189a96 100644
--- a/examples/next-wagmi/package.json
+++ b/examples/next-wagmi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@examples/next-wagmi",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "5.24.8",
-    "@web3modal/wagmi": "4.1.11",
+    "@web3modal/wagmi": "4.1.12-910a844.0",
     "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/examples/react-ethers5/CHANGELOG.md b/examples/react-ethers5/CHANGELOG.md
index ee3dbf4c08..775915285b 100644
--- a/examples/react-ethers5/CHANGELOG.md
+++ b/examples/react-ethers5/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @examples/react-ethers5
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/ethers5@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/examples/react-ethers5/package.json b/examples/react-ethers5/package.json
index 8dfecd86f3..c50009ae45 100644
--- a/examples/react-ethers5/package.json
+++ b/examples/react-ethers5/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@examples/react-ethers5",
   "private": true,
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "scripts": {
     "dev:example": "vite --port 3012",
     "build:examples": "vite build"
   },
   "dependencies": {
-    "@web3modal/ethers5": "4.1.11",
+    "@web3modal/ethers5": "4.1.12-910a844.0",
     "ethers": "5.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
diff --git a/examples/react-wagmi/CHANGELOG.md b/examples/react-wagmi/CHANGELOG.md
index 42f2418614..8574a0b7db 100644
--- a/examples/react-wagmi/CHANGELOG.md
+++ b/examples/react-wagmi/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @examples/react-wagmi
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/wagmi@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/examples/react-wagmi/package.json b/examples/react-wagmi/package.json
index de6b2db952..df43a0d728 100644
--- a/examples/react-wagmi/package.json
+++ b/examples/react-wagmi/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@examples/react-wagmi",
   "private": true,
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "scripts": {
     "dev:example": "vite --port 3002",
     "build:examples": "vite build"
   },
   "dependencies": {
     "@tanstack/react-query": "5.24.8",
-    "@web3modal/wagmi": "4.1.11",
+    "@web3modal/wagmi": "4.1.12-910a844.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "5.0.12",
diff --git a/examples/vue-ethers5/CHANGELOG.md b/examples/vue-ethers5/CHANGELOG.md
index a07ee784f0..d294dc3f17 100644
--- a/examples/vue-ethers5/CHANGELOG.md
+++ b/examples/vue-ethers5/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @examples/vue-ethers5
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/ethers5@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/examples/vue-ethers5/package.json b/examples/vue-ethers5/package.json
index 6b92f5b9a0..32b9051463 100644
--- a/examples/vue-ethers5/package.json
+++ b/examples/vue-ethers5/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@examples/vue-ethers5",
   "private": true,
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "scripts": {
     "dev:example": "vite --port 3013",
     "build:examples": "vite build"
   },
   "dependencies": {
-    "@web3modal/ethers5": "4.1.11",
+    "@web3modal/ethers5": "4.1.12-910a844.0",
     "ethers": "5.7.2"
   },
   "devDependencies": {
diff --git a/examples/vue-wagmi/CHANGELOG.md b/examples/vue-wagmi/CHANGELOG.md
index 5dbc5b4737..1d8b55c6f1 100644
--- a/examples/vue-wagmi/CHANGELOG.md
+++ b/examples/vue-wagmi/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @examples/vue-wagmi
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/wagmi@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/examples/vue-wagmi/package.json b/examples/vue-wagmi/package.json
index bb7d83f0b0..bdf707bcf6 100644
--- a/examples/vue-wagmi/package.json
+++ b/examples/vue-wagmi/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@examples/vue-wagmi",
   "private": true,
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "scripts": {
     "dev:example": "vite --port 3003",
     "build:examples": "vite build"
   },
   "dependencies": {
-    "@web3modal/wagmi": "4.1.11",
+    "@web3modal/wagmi": "4.1.12-910a844.0",
     "@wagmi/connectors": "4.1.14",
     "@wagmi/core": "2.6.5"
   },
diff --git a/package-lock.json b/package-lock.json
index 5d6d68a02e..6899105425 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,11 +43,11 @@
     },
     "apps/demo": {
       "name": "@apps/demo",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
         "@radix-ui/react-switch": "1.0.3",
         "@tanstack/react-query": "5.24.8",
-        "@web3modal/wagmi": "4.1.11",
+        "@web3modal/wagmi": "4.1.12-910a844.0",
         "clsx": "2.1.0",
         "framer-motion": "11.0.8",
         "next": "14.1.1",
@@ -127,10 +127,10 @@
     },
     "apps/gallery": {
       "name": "@apps/gallery",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
-        "@web3modal/common": "4.1.11",
-        "@web3modal/ui": "4.1.11",
+        "@web3modal/common": "4.1.12-910a844.0",
+        "@web3modal/ui": "4.1.12-910a844.0",
         "lit": "3.1.0",
         "storybook": "7.6.7"
       },
@@ -156,7 +156,7 @@
     },
     "apps/laboratory": {
       "name": "@apps/laboratory",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
         "@chakra-ui/icons": "2.1.1",
         "@chakra-ui/react": "2.8.2",
@@ -166,10 +166,10 @@
         "@sentry/react": "7.92.0",
         "@solana/web3.js": "1.87.6",
         "@tanstack/react-query": "5.24.8",
-        "@web3modal/ethers": "4.1.11",
-        "@web3modal/siwe": "4.1.11",
-        "@web3modal/solana": "4.1.11",
-        "@web3modal/wagmi": "4.1.11",
+        "@web3modal/ethers": "4.1.12-910a844.0",
+        "@web3modal/siwe": "4.1.12-910a844.0",
+        "@web3modal/solana": "4.1.12-910a844.0",
+        "@web3modal/wagmi": "4.1.12-910a844.0",
         "ethers": "6.9.0",
         "framer-motion": "10.17.9",
         "next": "14.0.4",
@@ -314,9 +314,9 @@
     },
     "examples/html-ethers5": {
       "name": "@examples/html-ethers5",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
-        "@web3modal/ethers5": "4.1.11",
+        "@web3modal/ethers5": "4.1.12-910a844.0",
         "ethers": "5.7.2"
       },
       "devDependencies": {
@@ -372,11 +372,11 @@
     },
     "examples/html-wagmi": {
       "name": "@examples/html-wagmi",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
         "@wagmi/connectors": "4.1.14",
         "@wagmi/core": "2.6.5",
-        "@web3modal/wagmi": "4.1.11",
+        "@web3modal/wagmi": "4.1.12-910a844.0",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       },
@@ -386,10 +386,10 @@
     },
     "examples/next-wagmi": {
       "name": "@examples/next-wagmi",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
         "@tanstack/react-query": "5.24.8",
-        "@web3modal/wagmi": "4.1.11",
+        "@web3modal/wagmi": "4.1.12-910a844.0",
         "next": "14.1.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -672,9 +672,9 @@
     },
     "examples/react-ethers5": {
       "name": "@examples/react-ethers5",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
-        "@web3modal/ethers5": "4.1.11",
+        "@web3modal/ethers5": "4.1.12-910a844.0",
         "ethers": "5.7.2",
         "react": "18.2.0",
         "react-dom": "18.2.0"
@@ -733,10 +733,10 @@
     },
     "examples/react-wagmi": {
       "name": "@examples/react-wagmi",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
         "@tanstack/react-query": "5.24.8",
-        "@web3modal/wagmi": "4.1.11",
+        "@web3modal/wagmi": "4.1.12-910a844.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "viem": "2.7.13",
@@ -779,9 +779,9 @@
     },
     "examples/vue-ethers5": {
       "name": "@examples/vue-ethers5",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
-        "@web3modal/ethers5": "4.1.11",
+        "@web3modal/ethers5": "4.1.12-910a844.0",
         "ethers": "5.7.2"
       },
       "devDependencies": {
@@ -837,11 +837,11 @@
     },
     "examples/vue-wagmi": {
       "name": "@examples/vue-wagmi",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "dependencies": {
         "@wagmi/connectors": "4.1.14",
         "@wagmi/core": "2.6.5",
-        "@web3modal/wagmi": "4.1.11"
+        "@web3modal/wagmi": "4.1.12-910a844.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "5.0.2"
@@ -31678,7 +31678,7 @@
     },
     "packages/common": {
       "name": "@web3modal/common",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
         "bignumber.js": "9.1.2",
@@ -31687,11 +31687,11 @@
     },
     "packages/core": {
       "name": "@web3modal/core",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/common": "4.1.11",
-        "@web3modal/wallet": "4.1.11",
+        "@web3modal/common": "4.1.12-910a844.0",
+        "@web3modal/wallet": "4.1.12-910a844.0",
         "valtio": "1.11.2"
       },
       "devDependencies": {
@@ -31700,17 +31700,17 @@
     },
     "packages/ethers": {
       "name": "@web3modal/ethers",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@coinbase/wallet-sdk": "3.9.1",
         "@walletconnect/ethereum-provider": "2.11.1",
-        "@web3modal/polyfills": "4.1.11",
-        "@web3modal/scaffold": "4.1.11",
-        "@web3modal/scaffold-react": "4.1.11",
-        "@web3modal/scaffold-utils": "4.1.11",
-        "@web3modal/scaffold-vue": "4.1.11",
-        "@web3modal/siwe": "4.1.11",
+        "@web3modal/polyfills": "4.1.12-910a844.0",
+        "@web3modal/scaffold": "4.1.12-910a844.0",
+        "@web3modal/scaffold-react": "4.1.12-910a844.0",
+        "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+        "@web3modal/scaffold-vue": "4.1.12-910a844.0",
+        "@web3modal/siwe": "4.1.12-910a844.0",
         "valtio": "1.11.2"
       },
       "devDependencies": {
@@ -31864,17 +31864,17 @@
     },
     "packages/ethers5": {
       "name": "@web3modal/ethers5",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@coinbase/wallet-sdk": "3.9.1",
         "@walletconnect/ethereum-provider": "2.11.1",
-        "@web3modal/polyfills": "4.1.11",
-        "@web3modal/scaffold": "4.1.11",
-        "@web3modal/scaffold-react": "4.1.11",
-        "@web3modal/scaffold-utils": "4.1.11",
-        "@web3modal/scaffold-vue": "4.1.11",
-        "@web3modal/siwe": "4.1.11",
+        "@web3modal/polyfills": "4.1.12-910a844.0",
+        "@web3modal/scaffold": "4.1.12-910a844.0",
+        "@web3modal/scaffold-react": "4.1.12-910a844.0",
+        "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+        "@web3modal/scaffold-vue": "4.1.12-910a844.0",
+        "@web3modal/siwe": "4.1.12-910a844.0",
         "valtio": "1.11.2"
       },
       "devDependencies": {
@@ -32077,7 +32077,7 @@
     },
     "packages/polyfills": {
       "name": "@web3modal/polyfills",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
         "buffer": "6.0.3"
@@ -32085,23 +32085,23 @@
     },
     "packages/scaffold": {
       "name": "@web3modal/scaffold",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/common": "4.1.11",
-        "@web3modal/core": "4.1.11",
-        "@web3modal/siwe": "4.1.11",
-        "@web3modal/ui": "4.1.11",
-        "@web3modal/wallet": "4.1.11",
+        "@web3modal/common": "4.1.12-910a844.0",
+        "@web3modal/core": "4.1.12-910a844.0",
+        "@web3modal/siwe": "4.1.12-910a844.0",
+        "@web3modal/ui": "4.1.12-910a844.0",
+        "@web3modal/wallet": "4.1.12-910a844.0",
         "lit": "3.1.0"
       }
     },
     "packages/scaffold-react": {
       "name": "@web3modal/scaffold-react",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/scaffold": "4.1.11"
+        "@web3modal/scaffold": "4.1.12-910a844.0"
       },
       "devDependencies": {
         "react": "18.2.0",
@@ -32122,20 +32122,20 @@
     },
     "packages/scaffold-utils": {
       "name": "@web3modal/scaffold-utils",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/core": "4.1.11",
-        "@web3modal/polyfills": "4.1.11",
+        "@web3modal/core": "4.1.12-910a844.0",
+        "@web3modal/polyfills": "4.1.12-910a844.0",
         "valtio": "1.11.2"
       }
     },
     "packages/scaffold-vue": {
       "name": "@web3modal/scaffold-vue",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/scaffold": "4.1.11"
+        "@web3modal/scaffold": "4.1.12-910a844.0"
       },
       "devDependencies": {
         "vue": "3.4.3"
@@ -32287,11 +32287,11 @@
     },
     "packages/siwe": {
       "name": "@web3modal/siwe",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/core": "4.1.11",
-        "@web3modal/scaffold-utils": "4.1.11",
+        "@web3modal/core": "4.1.12-910a844.0",
+        "@web3modal/scaffold-utils": "4.1.12-910a844.0",
         "lit": "3.1.0",
         "valtio": "1.11.2"
       }
@@ -32308,7 +32308,7 @@
     },
     "packages/solana": {
       "name": "@web3modal/solana",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@ethersproject/sha2": "5.7.0",
@@ -32320,11 +32320,11 @@
         "@solana/wallet-adapter-walletconnect": "0.1.16",
         "@solana/web3.js": "1.91.1",
         "@walletconnect/universal-provider": "2.11.2",
-        "@web3modal/polyfills": "4.1.11",
-        "@web3modal/scaffold": "4.1.11",
-        "@web3modal/scaffold-react": "4.1.11",
-        "@web3modal/scaffold-utils": "4.1.11",
-        "@web3modal/scaffold-vue": "4.1.11",
+        "@web3modal/polyfills": "4.1.12-910a844.0",
+        "@web3modal/scaffold": "4.1.12-910a844.0",
+        "@web3modal/scaffold-react": "4.1.12-910a844.0",
+        "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+        "@web3modal/scaffold-vue": "4.1.12-910a844.0",
         "bn.js": "5.2.1",
         "bs58": "5.0.0"
       },
@@ -32399,7 +32399,7 @@
     },
     "packages/ui": {
       "name": "@web3modal/ui",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
         "lit": "3.1.0",
@@ -32407,7 +32407,7 @@
       },
       "devDependencies": {
         "@types/qrcode": "1.5.5",
-        "@web3modal/common": "4.1.11",
+        "@web3modal/common": "4.1.12-910a844.0",
         "eslint-plugin-lit": "1.11.0",
         "eslint-plugin-wc": "2.0.4"
       }
@@ -32424,15 +32424,15 @@
     },
     "packages/wagmi": {
       "name": "@web3modal/wagmi",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/polyfills": "4.1.11",
-        "@web3modal/scaffold": "4.1.11",
-        "@web3modal/scaffold-react": "4.1.11",
-        "@web3modal/scaffold-utils": "4.1.11",
-        "@web3modal/scaffold-vue": "4.1.11",
-        "@web3modal/siwe": "4.1.11"
+        "@web3modal/polyfills": "4.1.12-910a844.0",
+        "@web3modal/scaffold": "4.1.12-910a844.0",
+        "@web3modal/scaffold-react": "4.1.12-910a844.0",
+        "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+        "@web3modal/scaffold-vue": "4.1.12-910a844.0",
+        "@web3modal/siwe": "4.1.12-910a844.0"
       },
       "devDependencies": {
         "@wagmi/connectors": "4.1.14",
@@ -32620,10 +32620,10 @@
     },
     "packages/wallet": {
       "name": "@web3modal/wallet",
-      "version": "4.1.11",
+      "version": "4.1.12-910a844.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@web3modal/polyfills": "4.1.11",
+        "@web3modal/polyfills": "4.1.12-910a844.0",
         "zod": "3.22.4"
       }
     }
diff --git a/package.json b/package.json
index bf1243a036..5716275b79 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "prettier:format": "prettier --write .",
     "clean": "rm -rf `find . -type d -name node_modules -o -name dist -o -name .next -o -name out`; rm package-lock.json",
     "changeset:pre": "changeset pre enter",
+    "changeset:pre:exit": "changeset pre exit",
     "changeset": "changeset; changeset version",
     "publish:latest": "npm install; npm run build; changeset publish",
     "publish:alpha": "npm install; npm run build; changeset publish --tag alpha",
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
index 5c4f5a2478..ca1cf20894 100644
--- a/packages/common/CHANGELOG.md
+++ b/packages/common/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @web3modal/common
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/common/index.ts b/packages/common/index.ts
index ea3d5cde2f..2554ebf7e7 100644
--- a/packages/common/index.ts
+++ b/packages/common/index.ts
@@ -2,5 +2,6 @@
 export { DateUtil } from './src/utils/DateUtil.js'
 export { NetworkUtil } from './src/utils/NetworkUtil.js'
 export { NumberUtil } from './src/utils/NumberUtil.js'
+export * from './src/utils/ThemeUtil.js'
 
 export type * from './src/utils/TypeUtil.js'
diff --git a/packages/common/package.json b/packages/common/package.json
index 9e819968ab..7ae07b4341 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/common",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
diff --git a/packages/common/src/utils/ThemeUtil.ts b/packages/common/src/utils/ThemeUtil.ts
new file mode 100644
index 0000000000..ee8ff3ce75
--- /dev/null
+++ b/packages/common/src/utils/ThemeUtil.ts
@@ -0,0 +1,32 @@
+// -- Types ------------------------------------------------------------------
+export type ThemeType = 'dark' | 'light'
+
+export interface ThemeVariables {
+  '--w3m-font-family'?: string
+  '--w3m-accent'?: string
+  '--w3m-color-mix'?: string
+  '--w3m-color-mix-strength'?: number
+  '--w3m-font-size-master'?: string
+  '--w3m-border-radius-master'?: string
+  '--w3m-z-index'?: number
+}
+
+export interface W3mThemeVariables {
+  '--w3m-accent': string
+  '--w3m-background': string
+}
+
+// -- Utilities ---------------------------------------------------------------
+export function getW3mThemeVariables(themeVariables?: ThemeVariables, themeType?: ThemeType) {
+  if (themeType === 'light') {
+    return {
+      '--w3m-accent': themeVariables?.['--w3m-accent'] || '#5773ff',
+      '--w3m-background': '#fff'
+    }
+  }
+
+  return {
+    '--w3m-accent': themeVariables?.['--w3m-accent'] || '#667dff',
+    '--w3m-background': '#121313'
+  }
+}
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 15dd9a9395..725299a864 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @web3modal/core
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/common@4.1.12-910a844.0
+  - @web3modal/wallet@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index dcdc7b3faa..43cf564abf 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/core",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -17,8 +17,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/common": "4.1.11",
-    "@web3modal/wallet": "4.1.11",
+    "@web3modal/common": "4.1.12-910a844.0",
+    "@web3modal/wallet": "4.1.12-910a844.0",
     "valtio": "1.11.2"
   },
   "devDependencies": {
diff --git a/packages/core/src/controllers/ConnectorController.ts b/packages/core/src/controllers/ConnectorController.ts
index 6c615963dc..72a53fa45f 100644
--- a/packages/core/src/controllers/ConnectorController.ts
+++ b/packages/core/src/controllers/ConnectorController.ts
@@ -1,6 +1,7 @@
 import { subscribeKey as subKey } from 'valtio/vanilla/utils'
 import { proxy, ref, snapshot } from 'valtio/vanilla'
 import type { Connector, EmailConnector } from '../utils/TypeUtil.js'
+import { getW3mThemeVariables } from '@web3modal/common'
 import { OptionsController } from './OptionsController.js'
 import { ThemeController } from './ThemeController.js'
 
@@ -34,14 +35,18 @@ export const ConnectorController = {
     if (connector.id === 'w3mEmail') {
       const emailConnector = connector as EmailConnector
       const optionsState = snapshot(OptionsController.state) as typeof OptionsController.state
+      const themeMode = ThemeController.getSnapshot().themeMode
+      const themeVariables = ThemeController.getSnapshot().themeVariables
+
       emailConnector?.provider?.syncDappData?.({
         metadata: optionsState.metadata,
         sdkVersion: optionsState.sdkVersion,
         projectId: optionsState.projectId
       })
       emailConnector.provider.syncTheme({
-        themeMode: ThemeController.getSnapshot().themeMode,
-        themeVariables: ThemeController.getSnapshot().themeVariables
+        themeMode,
+        themeVariables,
+        w3mThemeVariables: getW3mThemeVariables(themeVariables, themeMode)
       })
     }
   },
diff --git a/packages/core/src/controllers/ThemeController.ts b/packages/core/src/controllers/ThemeController.ts
index b8ee87925d..d7d2018689 100644
--- a/packages/core/src/controllers/ThemeController.ts
+++ b/packages/core/src/controllers/ThemeController.ts
@@ -1,17 +1,21 @@
 import { proxy, subscribe as sub, snapshot } from 'valtio/vanilla'
 import type { ThemeMode, ThemeVariables } from '../utils/TypeUtil.js'
 import { ConnectorController } from './ConnectorController.js'
+import { getW3mThemeVariables } from '@web3modal/common'
+import type { W3mThemeVariables } from '@web3modal/common'
 
 // -- Types --------------------------------------------- //
 export interface ThemeControllerState {
   themeMode: ThemeMode
   themeVariables: ThemeVariables
+  w3mThemeVariables: W3mThemeVariables | undefined
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<ThemeControllerState>({
   themeMode: 'dark',
-  themeVariables: {}
+  themeVariables: {},
+  w3mThemeVariables: undefined
 })
 
 // -- Controller ---------------------------------------- //
@@ -24,12 +28,17 @@ export const ThemeController = {
 
   setThemeMode(themeMode: ThemeControllerState['themeMode']) {
     state.themeMode = themeMode
+
     try {
       const emailConnector = ConnectorController.getEmailConnector()
 
       if (emailConnector) {
+        const themeVariables = ThemeController.getSnapshot().themeVariables
+
         emailConnector.provider.syncTheme({
-          themeMode: ThemeController.getSnapshot().themeMode
+          themeMode,
+          themeVariables,
+          w3mThemeVariables: getW3mThemeVariables(themeVariables, themeMode)
         })
       }
     } catch {
@@ -40,11 +49,16 @@ export const ThemeController = {
 
   setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
     state.themeVariables = { ...state.themeVariables, ...themeVariables }
+
     try {
       const emailConnector = ConnectorController.getEmailConnector()
+
       if (emailConnector) {
+        const themeVariablesSnapshot = ThemeController.getSnapshot().themeVariables
+
         emailConnector.provider.syncTheme({
-          themeVariables: ThemeController.getSnapshot().themeVariables
+          themeVariables: themeVariablesSnapshot,
+          w3mThemeVariables: getW3mThemeVariables(state.themeVariables, state.themeMode)
         })
       }
     } catch {
diff --git a/packages/core/tests/controllers/ConnectorController.test.ts b/packages/core/tests/controllers/ConnectorController.test.ts
index 468d22a1f9..c4e96b305e 100644
--- a/packages/core/tests/controllers/ConnectorController.test.ts
+++ b/packages/core/tests/controllers/ConnectorController.test.ts
@@ -7,6 +7,7 @@ import {
   type ThemeMode,
   type ThemeVariables
 } from '../../index.js'
+import { getW3mThemeVariables } from '@web3modal/common'
 
 // -- Setup --------------------------------------------------------------------
 const emailProvider = {
@@ -103,7 +104,11 @@ describe('ConnectorController', () => {
     ])
 
     expect(syncDappDataSpy).toHaveBeenCalledWith(mockDappData)
-    expect(syncThemeSpy).toHaveBeenCalledWith({ themeMode: 'dark', themeVariables: {} })
+    expect(syncThemeSpy).toHaveBeenCalledWith({
+      themeMode: 'dark',
+      themeVariables: {},
+      w3mThemeVariables: getW3mThemeVariables({}, 'dark')
+    })
   })
 
   it('getEmailConnector() should return emailconnector when already added', () => {
diff --git a/packages/ethers/CHANGELOG.md b/packages/ethers/CHANGELOG.md
index 9ecb7a8b1f..6b12719e86 100644
--- a/packages/ethers/CHANGELOG.md
+++ b/packages/ethers/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @web3modal/ethers
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/scaffold@4.1.12-910a844.0
+  - @web3modal/polyfills@4.1.12-910a844.0
+  - @web3modal/scaffold-react@4.1.12-910a844.0
+  - @web3modal/scaffold-utils@4.1.12-910a844.0
+  - @web3modal/scaffold-vue@4.1.12-910a844.0
+  - @web3modal/siwe@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/ethers/package.json b/packages/ethers/package.json
index ba3e729b48..65b9a8c486 100644
--- a/packages/ethers/package.json
+++ b/packages/ethers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/ethers",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/exports/index.js",
   "types": "./dist/types/exports/index.d.ts",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@coinbase/wallet-sdk": "3.9.1",
     "@walletconnect/ethereum-provider": "2.11.1",
-    "@web3modal/polyfills": "4.1.11",
-    "@web3modal/scaffold": "4.1.11",
-    "@web3modal/scaffold-react": "4.1.11",
-    "@web3modal/scaffold-utils": "4.1.11",
-    "@web3modal/scaffold-vue": "4.1.11",
-    "@web3modal/siwe": "4.1.11",
+    "@web3modal/polyfills": "4.1.12-910a844.0",
+    "@web3modal/scaffold": "4.1.12-910a844.0",
+    "@web3modal/scaffold-react": "4.1.12-910a844.0",
+    "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+    "@web3modal/scaffold-vue": "4.1.12-910a844.0",
+    "@web3modal/siwe": "4.1.12-910a844.0",
     "valtio": "1.11.2"
   },
   "peerDependencies": {
diff --git a/packages/ethers5/CHANGELOG.md b/packages/ethers5/CHANGELOG.md
index f6c8b0241e..954023bfb4 100644
--- a/packages/ethers5/CHANGELOG.md
+++ b/packages/ethers5/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @web3modal/ethers5
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/scaffold@4.1.12-910a844.0
+  - @web3modal/polyfills@4.1.12-910a844.0
+  - @web3modal/scaffold-react@4.1.12-910a844.0
+  - @web3modal/scaffold-utils@4.1.12-910a844.0
+  - @web3modal/scaffold-vue@4.1.12-910a844.0
+  - @web3modal/siwe@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/ethers5/package.json b/packages/ethers5/package.json
index f5aadc1f42..8e8b114228 100644
--- a/packages/ethers5/package.json
+++ b/packages/ethers5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/ethers5",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/exports/index.js",
   "types": "./dist/types/exports/index.d.ts",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@coinbase/wallet-sdk": "3.9.1",
     "@walletconnect/ethereum-provider": "2.11.1",
-    "@web3modal/polyfills": "4.1.11",
-    "@web3modal/scaffold": "4.1.11",
-    "@web3modal/scaffold-react": "4.1.11",
-    "@web3modal/scaffold-utils": "4.1.11",
-    "@web3modal/scaffold-vue": "4.1.11",
-    "@web3modal/siwe": "4.1.11",
+    "@web3modal/polyfills": "4.1.12-910a844.0",
+    "@web3modal/scaffold": "4.1.12-910a844.0",
+    "@web3modal/scaffold-react": "4.1.12-910a844.0",
+    "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+    "@web3modal/scaffold-vue": "4.1.12-910a844.0",
+    "@web3modal/siwe": "4.1.12-910a844.0",
     "valtio": "1.11.2"
   },
   "devDependencies": {
diff --git a/packages/polyfills/CHANGELOG.md b/packages/polyfills/CHANGELOG.md
index bc263ce4e3..15b85fb718 100644
--- a/packages/polyfills/CHANGELOG.md
+++ b/packages/polyfills/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @web3modal/polyfills
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/polyfills/package.json b/packages/polyfills/package.json
index a03e839bca..4cfbbe43a1 100644
--- a/packages/polyfills/package.json
+++ b/packages/polyfills/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/polyfills",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
diff --git a/packages/scaffold-react/CHANGELOG.md b/packages/scaffold-react/CHANGELOG.md
index 8c1e3cec5e..aca8208343 100644
--- a/packages/scaffold-react/CHANGELOG.md
+++ b/packages/scaffold-react/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @web3modal/scaffold-react
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/scaffold@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/scaffold-react/package.json b/packages/scaffold-react/package.json
index 02a10a4d4e..cc9e2e7045 100644
--- a/packages/scaffold-react/package.json
+++ b/packages/scaffold-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/scaffold-react",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -16,7 +16,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/scaffold": "4.1.11"
+    "@web3modal/scaffold": "4.1.12-910a844.0"
   },
   "peerDependencies": {
     "react": ">=17",
diff --git a/packages/scaffold-utils/CHANGELOG.md b/packages/scaffold-utils/CHANGELOG.md
index ea03f1412a..77a3103aeb 100644
--- a/packages/scaffold-utils/CHANGELOG.md
+++ b/packages/scaffold-utils/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @web3modal/scaffold-utils
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/core@4.1.12-910a844.0
+  - @web3modal/polyfills@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/scaffold-utils/package.json b/packages/scaffold-utils/package.json
index 9587c1566d..67d069da65 100644
--- a/packages/scaffold-utils/package.json
+++ b/packages/scaffold-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/scaffold-utils",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/exports/index.js",
   "types": "./dist/types/exports/index.d.ts",
@@ -40,8 +40,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/core": "4.1.11",
-    "@web3modal/polyfills": "4.1.11",
+    "@web3modal/core": "4.1.12-910a844.0",
+    "@web3modal/polyfills": "4.1.12-910a844.0",
     "valtio": "1.11.2"
   },
   "keywords": [
diff --git a/packages/scaffold-utils/src/ConstantsUtil.ts b/packages/scaffold-utils/src/ConstantsUtil.ts
index 0c781c26da..24fc3f3727 100644
--- a/packages/scaffold-utils/src/ConstantsUtil.ts
+++ b/packages/scaffold-utils/src/ConstantsUtil.ts
@@ -14,5 +14,5 @@ export const ConstantsUtil = {
   CONNECTOR_RDNS_MAP: {
     coinbaseWallet: 'com.coinbase.wallet'
   } as Record<string, string>,
-  VERSION: '4.1.11'
+  VERSION: '4.1.12-910a844.0'
 }
diff --git a/packages/scaffold-vue/CHANGELOG.md b/packages/scaffold-vue/CHANGELOG.md
index c7375d624a..395ddfd978 100644
--- a/packages/scaffold-vue/CHANGELOG.md
+++ b/packages/scaffold-vue/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @web3modal/scaffold-vue
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/scaffold@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/scaffold-vue/package.json b/packages/scaffold-vue/package.json
index db76be714a..ab85a0319a 100644
--- a/packages/scaffold-vue/package.json
+++ b/packages/scaffold-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/scaffold-vue",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -16,7 +16,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/scaffold": "4.1.11"
+    "@web3modal/scaffold": "4.1.12-910a844.0"
   },
   "peerDependencies": {
     "vue": ">=3"
diff --git a/packages/scaffold/CHANGELOG.md b/packages/scaffold/CHANGELOG.md
index 5600978fb2..22e5e6fcb5 100644
--- a/packages/scaffold/CHANGELOG.md
+++ b/packages/scaffold/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @web3modal/scaffold
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/common@4.1.12-910a844.0
+  - @web3modal/wallet@4.1.12-910a844.0
+  - @web3modal/core@4.1.12-910a844.0
+  - @web3modal/ui@4.1.12-910a844.0
+  - @web3modal/siwe@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/scaffold/package.json b/packages/scaffold/package.json
index 81889b0aa9..42d4e517f9 100644
--- a/packages/scaffold/package.json
+++ b/packages/scaffold/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/scaffold",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -16,12 +16,12 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/common": "4.1.11",
-    "@web3modal/core": "4.1.11",
-    "@web3modal/ui": "4.1.11",
+    "@web3modal/common": "4.1.12-910a844.0",
+    "@web3modal/core": "4.1.12-910a844.0",
+    "@web3modal/ui": "4.1.12-910a844.0",
     "lit": "3.1.0",
-    "@web3modal/siwe": "4.1.11",
-    "@web3modal/wallet": "4.1.11"
+    "@web3modal/siwe": "4.1.12-910a844.0",
+    "@web3modal/wallet": "4.1.12-910a844.0"
   },
   "keywords": [
     "web3",
diff --git a/packages/scaffold/src/views/w3m-approve-transaction-view/index.ts b/packages/scaffold/src/views/w3m-approve-transaction-view/index.ts
index 5d96399bc2..c78121dd2b 100644
--- a/packages/scaffold/src/views/w3m-approve-transaction-view/index.ts
+++ b/packages/scaffold/src/views/w3m-approve-transaction-view/index.ts
@@ -8,6 +8,7 @@ import {
   ThemeController,
   RouterController
 } from '@web3modal/core'
+import { getW3mThemeVariables } from '@web3modal/common'
 
 // -- Variables ------------------------------------------- //
 const PAGE_HEIGHT = 400
@@ -95,9 +96,14 @@ export class W3mApproveTransactionView extends LitElement {
 
   private async syncTheme() {
     const emailConnector = ConnectorController.getEmailConnector()
+
     if (emailConnector) {
+      const themeMode = ThemeController.getSnapshot().themeMode
+      const themeVariables = ThemeController.getSnapshot().themeVariables
+
       await emailConnector.provider.syncTheme({
-        themeVariables: ThemeController.getSnapshot().themeVariables
+        themeVariables,
+        w3mThemeVariables: getW3mThemeVariables(themeVariables, themeMode)
       })
     }
   }
diff --git a/packages/siwe/CHANGELOG.md b/packages/siwe/CHANGELOG.md
index a37ce2c7cf..3752351eb3 100644
--- a/packages/siwe/CHANGELOG.md
+++ b/packages/siwe/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @web3modal/siwe
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/core@4.1.12-910a844.0
+  - @web3modal/scaffold-utils@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/siwe/package.json b/packages/siwe/package.json
index e945e4ee90..0ee73de324 100644
--- a/packages/siwe/package.json
+++ b/packages/siwe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/siwe",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/exports/index.js",
   "types": "./dist/types/exports/index.d.ts",
@@ -16,8 +16,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/core": "4.1.11",
-    "@web3modal/scaffold-utils": "4.1.11",
+    "@web3modal/core": "4.1.12-910a844.0",
+    "@web3modal/scaffold-utils": "4.1.12-910a844.0",
     "valtio": "1.11.2",
     "lit": "3.1.0"
   },
diff --git a/packages/solana/CHANGELOG.md b/packages/solana/CHANGELOG.md
index fd16f218e7..6abca775e2 100644
--- a/packages/solana/CHANGELOG.md
+++ b/packages/solana/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @web3modal/solana
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/scaffold@4.1.12-910a844.0
+  - @web3modal/polyfills@4.1.12-910a844.0
+  - @web3modal/scaffold-react@4.1.12-910a844.0
+  - @web3modal/scaffold-utils@4.1.12-910a844.0
+  - @web3modal/scaffold-vue@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/solana/package.json b/packages/solana/package.json
index a2efb983c6..28020499a4 100644
--- a/packages/solana/package.json
+++ b/packages/solana/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/solana",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/exports/index.js",
   "types": "./dist/types/exports/index.d.ts",
@@ -52,11 +52,11 @@
     "@solana/wallet-adapter-trust": "0.1.13",
     "@solana/wallet-adapter-walletconnect": "0.1.16",
     "@walletconnect/universal-provider": "2.11.2",
-    "@web3modal/polyfills": "4.1.11",
-    "@web3modal/scaffold": "4.1.11",
-    "@web3modal/scaffold-react": "4.1.11",
-    "@web3modal/scaffold-utils": "4.1.11",
-    "@web3modal/scaffold-vue": "4.1.11",
+    "@web3modal/polyfills": "4.1.12-910a844.0",
+    "@web3modal/scaffold": "4.1.12-910a844.0",
+    "@web3modal/scaffold-react": "4.1.12-910a844.0",
+    "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+    "@web3modal/scaffold-vue": "4.1.12-910a844.0",
     "bn.js": "5.2.1",
     "bs58": "5.0.0"
   },
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 08704d6deb..de3e557501 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @web3modal/ui
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1bdab8f484..fba4ae0e17 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/ui",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",
-    "@web3modal/common": "4.1.11",
+    "@web3modal/common": "4.1.12-910a844.0",
     "eslint-plugin-lit": "1.11.0",
     "eslint-plugin-wc": "2.0.4"
   },
diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
index 0cb6332a48..cca68be8d4 100644
--- a/packages/ui/src/utils/ThemeUtil.ts
+++ b/packages/ui/src/utils/ThemeUtil.ts
@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit'
-import type { ThemeType, ThemeVariables } from './TypeUtil.js'
+import { getW3mThemeVariables } from '@web3modal/common'
+import type { ThemeVariables, ThemeType } from '@web3modal/common'
 
 // -- Utilities ---------------------------------------------------------------
-
 let themeTag: HTMLStyleElement | undefined = undefined
 let darkModeTag: HTMLStyleElement | undefined = undefined
 let lightModeTag: HTMLStyleElement | undefined = undefined
@@ -190,8 +190,6 @@ function createRootStyles(themeVariables?: ThemeVariables) {
 
         --wui-color-modal-bg: var(--wui-color-modal-bg-base);
 
-        --wui-color-blue-100: var(--wui-color-blue-base-100);
-
         --wui-color-accent-100: var(--wui-color-accent-base-100);
         --wui-color-accent-090: var(--wui-color-accent-base-090);
         --wui-color-accent-080: var(--wui-color-accent-base-080);
@@ -456,16 +454,13 @@ function createRootStyles(themeVariables?: ThemeVariables) {
     light: css`
       :root {
         --w3m-color-mix: ${unsafeCSS(themeVariables?.['--w3m-color-mix'] || '#fff')};
-        --w3m-accent: ${unsafeCSS(themeVariables?.['--w3m-accent'] || '#47a1ff')};
+        --w3m-accent: ${unsafeCSS(getW3mThemeVariables(themeVariables, 'dark')['--w3m-accent'])};
         --w3m-default: #fff;
 
-        --wui-color-modal-bg-base: #191a1a;
-
-        --wui-color-blue-base-100: #47a1ff;
-
+        --wui-color-modal-bg-base: ${unsafeCSS(
+          getW3mThemeVariables(themeVariables, 'dark')['--w3m-background']
+        )};
         --wui-color-accent-base-100: var(--w3m-accent);
-        --wui-color-accent-base-090: #59aaff;
-        --wui-color-accent-base-080: #6cb4ff;
 
         --wui-accent-glass-base-090: rgba(71, 161, 255, 0.9);
         --wui-accent-glass-base-080: rgba(71, 161, 255, 0.8);
@@ -547,16 +542,13 @@ function createRootStyles(themeVariables?: ThemeVariables) {
     dark: css`
       :root {
         --w3m-color-mix: ${unsafeCSS(themeVariables?.['--w3m-color-mix'] || '#000')};
-        --w3m-accent: ${unsafeCSS(themeVariables?.['--w3m-accent'] || '#3396ff')};
+        --w3m-accent: ${unsafeCSS(getW3mThemeVariables(themeVariables, 'light')['--w3m-accent'])};
         --w3m-default: #000;
 
-        --wui-color-modal-bg-base: #fff;
-
-        --wui-color-blue-base-100: #3396ff;
-
+        --wui-color-modal-bg-base: ${unsafeCSS(
+          getW3mThemeVariables(themeVariables, 'light')['--w3m-background']
+        )};
         --wui-color-accent-base-100: var(--w3m-accent);
-        --wui-color-accent-base-090: #2d7dd2;
-        --wui-color-accent-base-080: #2978cc;
 
         --wui-accent-glass-base-090: rgba(51, 150, 255, 0.9);
         --wui-accent-glass-base-080: rgba(51, 150, 255, 0.8);
diff --git a/packages/wagmi/CHANGELOG.md b/packages/wagmi/CHANGELOG.md
index 9100bb718a..42fc85260d 100644
--- a/packages/wagmi/CHANGELOG.md
+++ b/packages/wagmi/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @web3modal/wagmi
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/scaffold@4.1.12-910a844.0
+  - @web3modal/polyfills@4.1.12-910a844.0
+  - @web3modal/scaffold-react@4.1.12-910a844.0
+  - @web3modal/scaffold-utils@4.1.12-910a844.0
+  - @web3modal/scaffold-vue@4.1.12-910a844.0
+  - @web3modal/siwe@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/wagmi/package.json b/packages/wagmi/package.json
index ef2290e878..57e4e37336 100644
--- a/packages/wagmi/package.json
+++ b/packages/wagmi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/wagmi",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/exports/index.js",
   "types": "./dist/types/exports/index.d.ts",
@@ -51,12 +51,12 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/polyfills": "4.1.11",
-    "@web3modal/scaffold": "4.1.11",
-    "@web3modal/scaffold-react": "4.1.11",
-    "@web3modal/scaffold-utils": "4.1.11",
-    "@web3modal/scaffold-vue": "4.1.11",
-    "@web3modal/siwe": "4.1.11"
+    "@web3modal/polyfills": "4.1.12-910a844.0",
+    "@web3modal/scaffold": "4.1.12-910a844.0",
+    "@web3modal/scaffold-react": "4.1.12-910a844.0",
+    "@web3modal/scaffold-utils": "4.1.12-910a844.0",
+    "@web3modal/scaffold-vue": "4.1.12-910a844.0",
+    "@web3modal/siwe": "4.1.12-910a844.0"
   },
   "devDependencies": {
     "@wagmi/connectors": "4.1.14",
diff --git a/packages/wallet/CHANGELOG.md b/packages/wallet/CHANGELOG.md
index 3a14db0109..a06492eb2f 100644
--- a/packages/wallet/CHANGELOG.md
+++ b/packages/wallet/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @web3modal/wallet
 
+## 4.1.12-910a844.0
+
+### Patch Changes
+
+- refactor: sync theme with secure site
+
+- Updated dependencies []:
+  - @web3modal/polyfills@4.1.12-910a844.0
+
 ## 4.1.11
 
 ### Patch Changes
diff --git a/packages/wallet/package.json b/packages/wallet/package.json
index 0cfaf3ff41..f9e68d92b1 100644
--- a/packages/wallet/package.json
+++ b/packages/wallet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3modal/wallet",
-  "version": "4.1.11",
+  "version": "4.1.12-910a844.0",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "zod": "3.22.4",
-    "@web3modal/polyfills": "4.1.11"
+    "@web3modal/polyfills": "4.1.12-910a844.0"
   },
   "keywords": [
     "web3",
diff --git a/packages/wallet/src/W3mFrameSchema.ts b/packages/wallet/src/W3mFrameSchema.ts
index bb50391ae3..227cb612d3 100644
--- a/packages/wallet/src/W3mFrameSchema.ts
+++ b/packages/wallet/src/W3mFrameSchema.ts
@@ -41,7 +41,8 @@ export const AppUpdateEmailPrimaryOtpRequest = z.object({ otp: z.string() })
 export const AppUpdateEmailSecondaryOtpRequest = z.object({ otp: z.string() })
 export const AppSyncThemeRequest = z.object({
   themeMode: z.optional(z.enum(['light', 'dark'])),
-  themeVariables: z.optional(z.record(z.string(), z.string().or(z.number())))
+  themeVariables: z.optional(z.record(z.string(), z.string().or(z.number()))),
+  w3mThemeVariables: z.record(z.string(), z.string())
 })
 export const AppSyncDappDataRequest = z.object({
   metadata: z