@lukso/up-connector 0.6.0-dev.5ea12c5 → 0.6.0-dev.c21633f

package/dist/connect-modal/index.cjs

@@ -7,7 +7,7 @@
 
 
 
-var _chunkGCYDV7FBcjs = require('../chunk-GCYDV7FB.cjs');
+var _chunk2CKXEZQFcjs = require('../chunk-2CKXEZQF.cjs');
 require('../chunk-ZBDE64SD.cjs');
 
 
@@ -18,5 +18,5 @@ require('../chunk-ZBDE64SD.cjs');
 
 
 
-exports.ConnectModal = _chunkGCYDV7FBcjs.ConnectModal; exports.ConnectModalBase = _chunkGCYDV7FBcjs.ConnectModalBase; exports.disconnect = _chunkGCYDV7FBcjs.disconnect; exports.getConnection = _chunkGCYDV7FBcjs.getConnection; exports.getWagmiSetup = _chunkGCYDV7FBcjs.getWagmiSetup; exports.setupConnectModal = _chunkGCYDV7FBcjs.setupWagmi; exports.wagmi = _chunkGCYDV7FBcjs.wagmiService; exports.watchConnection = _chunkGCYDV7FBcjs.watchConnection;
+exports.ConnectModal = _chunk2CKXEZQFcjs.ConnectModal; exports.ConnectModalBase = _chunk2CKXEZQFcjs.ConnectModalBase; exports.disconnect = _chunk2CKXEZQFcjs.disconnect; exports.getConnection = _chunk2CKXEZQFcjs.getConnection; exports.getWagmiSetup = _chunk2CKXEZQFcjs.getWagmiSetup; exports.setupConnectModal = _chunk2CKXEZQFcjs.setupWagmi; exports.wagmi = _chunk2CKXEZQFcjs.wagmiService; exports.watchConnection = _chunk2CKXEZQFcjs.watchConnection;
 //# sourceMappingURL=index.cjs.map

package/dist/connect-modal/index.d.cts

@@ -1,6 +1,6 @@
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-export { C as ConnectModal, c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, l as Wallet, W as WalletConnector, f as disconnect, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from '../wagmi-DgjkdmGk.cjs';
+export { C as ConnectModal, c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, l as Wallet, W as WalletConnector, f as disconnect, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from '../wagmi-84MPgN9w.cjs';
 
 declare class ConnectModalBase extends LitElement {
     static styles: lit.CSSResult[];

package/dist/connect-modal/index.d.ts

@@ -1,6 +1,6 @@
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-export { C as ConnectModal, c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, l as Wallet, W as WalletConnector, f as disconnect, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from '../wagmi-DgjkdmGk.js';
+export { C as ConnectModal, c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, l as Wallet, W as WalletConnector, f as disconnect, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from '../wagmi-84MPgN9w.js';
 
 declare class ConnectModalBase extends LitElement {
     static styles: lit.CSSResult[];

package/dist/connect-modal/index.js

@@ -7,7 +7,7 @@ import {
   setupWagmi,
   wagmiService,
   watchConnection
-} from "../chunk-SAQWNAQ6.js";
+} from "../chunk-RO5M7PBL.js";
 import "../chunk-EUXUH3YW.js";
 export {
   ConnectModal,

package/dist/index.cjs

@@ -1,24 +1,24 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkGFVUWAG4cjs = require('./chunk-GFVUWAG4.cjs');
+var _chunkMEEN5QJZcjs = require('./chunk-MEEN5QJZ.cjs');
 
 
 
 
 
 
-var _chunk3IJAXTQIcjs = require('./chunk-3IJAXTQI.cjs');
+var _chunkU53KATZWcjs = require('./chunk-U53KATZW.cjs');
 
 
 
 var _chunk7LQ5EB2Xcjs = require('./chunk-7LQ5EB2X.cjs');
 
 
-var _chunkZRA7ZVHJcjs = require('./chunk-ZRA7ZVHJ.cjs');
+var _chunkUQZN2AKNcjs = require('./chunk-UQZN2AKN.cjs');
 
 
-var _chunkCKVXLOXKcjs = require('./chunk-CKVXLOXK.cjs');
-require('./chunk-XOKG3KIL.cjs');
+var _chunkE34NRQRAcjs = require('./chunk-E34NRQRA.cjs');
+require('./chunk-ZWXGWUXQ.cjs');
 
 
 
@@ -29,7 +29,7 @@ require('./chunk-XOKG3KIL.cjs');
 
 
 
-var _chunkGCYDV7FBcjs = require('./chunk-GCYDV7FB.cjs');
+var _chunk2CKXEZQFcjs = require('./chunk-2CKXEZQF.cjs');
 require('./chunk-ZBDE64SD.cjs');
 
 // src/connector.ts
@@ -87,7 +87,7 @@ var UPConnector = class {
   }
   async startWagmiSync() {
     try {
-      const connection = await _chunkGCYDV7FBcjs.getConnection.call(void 0, );
+      const connection = await _chunk2CKXEZQFcjs.getConnection.call(void 0, );
       if (!connection) {
         return;
       }
@@ -98,7 +98,7 @@ var UPConnector = class {
           connection.chainId
         );
       }
-      this.wagmiUnsubscribe = await _chunkGCYDV7FBcjs.watchConnection.call(void 0, (connection2) => {
+      this.wagmiUnsubscribe = await _chunk2CKXEZQFcjs.watchConnection.call(void 0, (connection2) => {
         const account = {
           isConnected: connection2.status === "connected",
           address: connection2.address,
@@ -211,7 +211,7 @@ var UPConnector = class {
     }
   }
   async handleDisconnection() {
-    await _chunkGCYDV7FBcjs.disconnect.call(void 0, );
+    await _chunk2CKXEZQFcjs.disconnect.call(void 0, );
     this.connectedAddress = void 0;
     this.connectedProvider = void 0;
     this.connectedChainId = void 0;
@@ -796,5 +796,5 @@ var WindowPopupInstance = class extends BasePopupInstance {
 
 
 
-exports.AccountModal = _chunkGFVUWAG4cjs.AccountModal; exports.BackupModal = _chunkZRA7ZVHJcjs.BackupModal; exports.ConnectModal = _chunkGCYDV7FBcjs.ConnectModal; exports.DraggableAvatar = _chunk7LQ5EB2Xcjs.DraggableAvatar; exports.EMBEDDED_WALLET_ID = _chunk3IJAXTQIcjs.EMBEDDED_WALLET_ID; exports.EMBEDDED_WALLET_URL_DEV = _chunk3IJAXTQIcjs.EMBEDDED_WALLET_URL_DEV; exports.EMBEDDED_WALLET_URL_PROD = _chunk3IJAXTQIcjs.EMBEDDED_WALLET_URL_PROD; exports.ModalPopupInstance = ModalPopupInstance; exports.RestoreModal = _chunkCKVXLOXKcjs.RestoreModal; exports.UPConnector = UPConnector; exports.UP_EXTENSION_ID = _chunk3IJAXTQIcjs.UP_EXTENSION_ID; exports.WindowPopupInstance = WindowPopupInstance; exports.createAvatar = _chunk7LQ5EB2Xcjs.createAvatar; exports.createConnector = createConnector; exports.default = createConnector; exports.disconnect = _chunkGCYDV7FBcjs.disconnect; exports.fromWagmiConnector = _chunkGCYDV7FBcjs.fromWagmiConnector; exports.fromWagmiConnectors = _chunkGCYDV7FBcjs.fromWagmiConnectors; exports.getConnection = _chunkGCYDV7FBcjs.getConnection; exports.getWagmiSetup = _chunkGCYDV7FBcjs.getWagmiSetup; exports.setupConnectModal = _chunkGCYDV7FBcjs.setupWagmi; exports.setupLuksoConnector = _chunk3IJAXTQIcjs.setupLuksoConnector; exports.wagmi = _chunkGCYDV7FBcjs.wagmiService; exports.watchConnection = _chunkGCYDV7FBcjs.watchConnection;
+exports.AccountModal = _chunkMEEN5QJZcjs.AccountModal; exports.BackupModal = _chunkUQZN2AKNcjs.BackupModal; exports.ConnectModal = _chunk2CKXEZQFcjs.ConnectModal; exports.DraggableAvatar = _chunk7LQ5EB2Xcjs.DraggableAvatar; exports.EMBEDDED_WALLET_ID = _chunkU53KATZWcjs.EMBEDDED_WALLET_ID; exports.EMBEDDED_WALLET_URL_DEV = _chunkU53KATZWcjs.EMBEDDED_WALLET_URL_DEV; exports.EMBEDDED_WALLET_URL_PROD = _chunkU53KATZWcjs.EMBEDDED_WALLET_URL_PROD; exports.ModalPopupInstance = ModalPopupInstance; exports.RestoreModal = _chunkE34NRQRAcjs.RestoreModal; exports.UPConnector = UPConnector; exports.UP_EXTENSION_ID = _chunkU53KATZWcjs.UP_EXTENSION_ID; exports.WindowPopupInstance = WindowPopupInstance; exports.createAvatar = _chunk7LQ5EB2Xcjs.createAvatar; exports.createConnector = createConnector; exports.default = createConnector; exports.disconnect = _chunk2CKXEZQFcjs.disconnect; exports.fromWagmiConnector = _chunk2CKXEZQFcjs.fromWagmiConnector; exports.fromWagmiConnectors = _chunk2CKXEZQFcjs.fromWagmiConnectors; exports.getConnection = _chunk2CKXEZQFcjs.getConnection; exports.getWagmiSetup = _chunk2CKXEZQFcjs.getWagmiSetup; exports.setupConnectModal = _chunk2CKXEZQFcjs.setupWagmi; exports.setupLuksoConnector = _chunkU53KATZWcjs.setupLuksoConnector; exports.wagmi = _chunk2CKXEZQFcjs.wagmiService; exports.watchConnection = _chunk2CKXEZQFcjs.watchConnection;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -3,8 +3,8 @@ export { EMBEDDED_WALLET_ID, EMBEDDED_WALLET_URL_DEV, EMBEDDED_WALLET_URL_PROD,
 import { C as ConnectorConfig, D as DraggableAvatar, a as ConnectionState } from './avatar-CQkubMTK.cjs';
 export { A as AddressData, b as AvatarOptions, W as WalletProvider, c as createAvatar } from './avatar-CQkubMTK.cjs';
 export { BackupModal } from './backup-modal.cjs';
-import { W as WalletConnector, C as ConnectModal } from './wagmi-DgjkdmGk.cjs';
-export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './wagmi-DgjkdmGk.cjs';
+import { W as WalletConnector, C as ConnectModal } from './wagmi-84MPgN9w.cjs';
+export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './wagmi-84MPgN9w.cjs';
 export { RestoreModal } from './restore-modal.cjs';
 import 'lit';
 import './index-D2orHGFi.cjs';

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export { EMBEDDED_WALLET_ID, EMBEDDED_WALLET_URL_DEV, EMBEDDED_WALLET_URL_PROD,
 import { C as ConnectorConfig, D as DraggableAvatar, a as ConnectionState } from './avatar-CQkubMTK.js';
 export { A as AddressData, b as AvatarOptions, W as WalletProvider, c as createAvatar } from './avatar-CQkubMTK.js';
 export { BackupModal } from './backup-modal.js';
-import { W as WalletConnector, C as ConnectModal } from './wagmi-DgjkdmGk.js';
-export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './wagmi-DgjkdmGk.js';
+import { W as WalletConnector, C as ConnectModal } from './wagmi-84MPgN9w.js';
+export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './wagmi-84MPgN9w.js';
 export { RestoreModal } from './restore-modal.js';
 import 'lit';
 import './index-D2orHGFi.js';

package/dist/index.js

@@ -1,24 +1,24 @@
 import {
   AccountModal
-} from "./chunk-YIWSPI4I.js";
+} from "./chunk-LIHQISFN.js";
 import {
   EMBEDDED_WALLET_ID,
   EMBEDDED_WALLET_URL_DEV,
   EMBEDDED_WALLET_URL_PROD,
   UP_EXTENSION_ID,
   setupLuksoConnector
-} from "./chunk-QZ55O6GN.js";
+} from "./chunk-QOAWX2VD.js";
 import {
   DraggableAvatar,
   createAvatar
 } from "./chunk-GKAVIDXP.js";
 import {
   BackupModal
-} from "./chunk-DQ663HKR.js";
+} from "./chunk-I5I6SZZ5.js";
 import {
   RestoreModal
-} from "./chunk-A5RRWZ7W.js";
-import "./chunk-XGIT7YUY.js";
+} from "./chunk-RCCGJ3DC.js";
+import "./chunk-UPWE4L5Z.js";
 import {
   ConnectModal,
   disconnect,
@@ -29,7 +29,7 @@ import {
   setupWagmi,
   wagmiService,
   watchConnection
-} from "./chunk-SAQWNAQ6.js";
+} from "./chunk-RO5M7PBL.js";
 import "./chunk-EUXUH3YW.js";
 
 // src/connector.ts

package/dist/restore-modal.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkCKVXLOXKcjs = require('./chunk-CKVXLOXK.cjs');
-require('./chunk-XOKG3KIL.cjs');
+var _chunkE34NRQRAcjs = require('./chunk-E34NRQRA.cjs');
+require('./chunk-ZWXGWUXQ.cjs');
 require('./chunk-ZBDE64SD.cjs');
 
 
-exports.RestoreModal = _chunkCKVXLOXKcjs.RestoreModal;
+exports.RestoreModal = _chunkE34NRQRAcjs.RestoreModal;
 //# sourceMappingURL=restore-modal.cjs.map

package/dist/restore-modal.js

@@ -1,7 +1,7 @@
 import {
   RestoreModal
-} from "./chunk-A5RRWZ7W.js";
-import "./chunk-XGIT7YUY.js";
+} from "./chunk-RCCGJ3DC.js";
+import "./chunk-UPWE4L5Z.js";
 import "./chunk-EUXUH3YW.js";
 export {
   RestoreModal

package/dist/{wagmi-DgjkdmGk.d.ts → wagmi-84MPgN9w.d.cts}

@@ -264,29 +264,14 @@ declare global {
 declare const ConnectModal_base: any;
 declare class ConnectModal extends ConnectModal_base {
     open: boolean;
-    theme: ConnectModalTheme;
     private connectors;
-    private isDark;
     private modalView;
     private qrCodeData;
-    private mediaQueryList;
     updated(changedProperties: Map<string, any>): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Handle system theme changes
-     *
-     * @param event
-     */
-    private handleMediaQueryChange;
     /**
      * Close modal
      */
     handleClose(): void;
-    /**
-     * Update isDark state based on theme property
-     */
-    private updateTheme;
     private loadConnectors;
     /**
      * Successful connection handler

package/dist/{wagmi-DgjkdmGk.d.cts → wagmi-84MPgN9w.d.ts}

@@ -264,29 +264,14 @@ declare global {
 declare const ConnectModal_base: any;
 declare class ConnectModal extends ConnectModal_base {
     open: boolean;
-    theme: ConnectModalTheme;
     private connectors;
-    private isDark;
     private modalView;
     private qrCodeData;
-    private mediaQueryList;
     updated(changedProperties: Map<string, any>): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Handle system theme changes
-     *
-     * @param event
-     */
-    private handleMediaQueryChange;
     /**
      * Close modal
      */
     handleClose(): void;
-    /**
-     * Update isDark state based on theme property
-     */
-    private updateTheme;
     private loadConnectors;
     /**
      * Successful connection handler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/up-connector",
-  "version": "0.6.0-dev.5ea12c5",
+  "version": "0.6.0-dev.c21633f",
   "description": "Universal Profile connector with draggable avatar and connection modal",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -82,10 +82,10 @@
     "lit": "^3.3.1",
     "ws": "^8.18.3",
     "zxcvbn": "^4.4.2",
-    "@lukso/core": "1.1.0-dev.5ea12c5",
-    "@lukso/passkey-auth": "1.2.0-dev.5ea12c5",
-    "@lukso/transaction-view-core": "0.5.0-dev.5ea12c5",
-    "@lukso/transaction-view-headless": "0.4.0-dev.5ea12c5"
+    "@lukso/core": "1.1.0-dev.c21633f",
+    "@lukso/passkey-auth": "1.2.0-dev.c21633f",
+    "@lukso/transaction-view-core": "0.5.0-dev.c21633f",
+    "@lukso/transaction-view-headless": "0.4.0-dev.c21633f"
   },
   "peerDependencies": {
     "@wagmi/connectors": "^7.0.0",

package/src/connect-modal/components/connection-view.ts

@@ -4,7 +4,11 @@
  * Main connection view displaying primary Lukso connectors and option to show EOA connectors.
  */
 
-import { withDeviceService, withIntlService } from '@lukso/core/mixins'
+import {
+  withDeviceService,
+  withIntlService,
+  withTheme,
+} from '@lukso/core/mixins'
 import { html, type TemplateResult } from 'lit'
 import { property } from 'lit/decorators.js'
 
@@ -25,8 +29,8 @@ import { walletConnectDeepLinkUrl } from '../utils/walletConnectDeepLinkUrl'
 
 const logInfo = debug('connect-modal:info')
 
-export class ConnectionView extends withIntlService(
-  withDeviceService(ConnectModalBase)
+export class ConnectionView extends withTheme(
+  withIntlService(withDeviceService(ConnectModalBase))
 ) {
   @property({ type: Boolean }) isConnecting = false
   @property({ type: String }) connectingRdns: string | undefined = undefined
@@ -272,6 +276,7 @@ export class ConnectionView extends withIntlService(
     return html`
       <lukso-button
         variant="secondary"
+        .theme=${this.theme}
         size=${this.device?.isMobile ? 'medium' : 'large'}
         is-full-width
         ?disabled=${isDisabled}
@@ -283,7 +288,7 @@ export class ConnectionView extends withIntlService(
           name=${iconName}
           size=${this.device?.isMobile ? 'small' : 'medium'}
           class="mr-2"
-          secondary-color="neutral-100"
+          secondary-color="${this.theme === 'dark' ? 'neutral-20' : 'neutral-100'}"
         ></lukso-icon>
         ${label}
       </lukso-button>
@@ -344,12 +349,12 @@ export class ConnectionView extends withIntlService(
   private renderDivider(): TemplateResult<1> {
     return html`
       <div class="relative w-full my-2">
-        <div class="paragraph-inter-12-regular relative z-[1] bg-neutral-98 dark:bg-neutral-15 px-4 text-neutral-40 inline-block">
+        <div class="paragraph-inter-12-regular relative z-[1] bg-neutral-98 dark:bg-neutral-10 px-4 text-neutral-40 dark:text-neutral-95 inline-block">
           ${this.formatMessage('connect_modal_or')}
         </div>
-        <div class="absolute top-[13px] left-0 right-0 h-px bg-neutral-80 dark:bg-neutral-70" />
+        <div class="absolute top-[13px] left-0 right-0 h-px bg-neutral-80 dark:bg-neutral-80" />
       </div>
-      <div class="paragraph-inter-16-regular py-4">
+      <div class="paragraph-inter-16-regular py-4 text-neutral-20 dark:text-neutral-100">
         ${this.formatMessage('connect_modal_or_info')}
       </div>
     `
@@ -361,13 +366,13 @@ export class ConnectionView extends withIntlService(
         <button
           @click=${this.handleClose}
         >
-          ${renderCloseButton()}
+          ${renderCloseButton(this.theme)}
         </button>
       </div>
       <div class="flex flex-col items-center text-center">
         ${renderLogo()}
         ${renderTitle(this.formatMessage('connect_modal_title'))}
-        <p class="mb-6 paragraph-inter-16-regular">
+        <p class="mb-6 paragraph-inter-16-regular text-neutral-20 dark:text-neutral-100">
           ${this.formatMessage('connect_modal_description')}
         </p>
         <div class="${cn('flex w-full gap-2 mb-4', this.device?.isMobile ? 'flex-col-reverse' : 'flex-col')}">
@@ -378,6 +383,7 @@ export class ConnectionView extends withIntlService(
           variant="secondary"
           size=${this.device?.isMobile ? 'medium' : 'large'}
           is-full-width
+          .theme=${this.theme}
           ?disabled=${this.isConnecting}
           @click=${this.handleShowEoaConnections}
         >
@@ -385,6 +391,7 @@ export class ConnectionView extends withIntlService(
             name="wallet-outline"
             size=${this.device?.isMobile ? 'small' : 'medium'}
             class="mr-2"
+            color="${this.theme === 'dark' ? 'neutral-100' : 'neutral-20'}"
           ></lukso-icon>
           ${this.formatMessage('connect_modal_other_connectors')}
         </lukso-button>

package/src/connect-modal/components/eoa-connection-view.ts

@@ -5,7 +5,11 @@
  */
 
 import { Task } from '@lit/task'
-import { withDeviceService, withIntlService } from '@lukso/core/mixins'
+import {
+  withDeviceService,
+  withIntlService,
+  withTheme,
+} from '@lukso/core/mixins'
 import debug from 'debug'
 import { html, nothing, type TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
@@ -40,8 +44,8 @@ import { getWagmiSetup } from '../services/wagmi'
 
 const logInfo = debug('connect-modal:info')
 
-export class EoaConnectionView extends withIntlService(
-  withDeviceService(ConnectModalBase)
+export class EoaConnectionView extends withTheme(
+  withIntlService(withDeviceService(ConnectModalBase))
 ) {
   @property({ type: Array }) connectors: WalletConnector[] = []
 
@@ -382,13 +386,13 @@ export class EoaConnectionView extends withIntlService(
         <button
           @click=${this.handleBack}
         >
-          ${renderBackButton()}
+          ${renderBackButton(this.theme)}
         </button>
 
         <button
           @click=${this.handleClose}
         >
-          ${renderCloseButton()}
+          ${renderCloseButton(this.theme)}
         </button>
       </div>
       <div class="flex flex-col items-center text-center">

package/src/connect-modal/components/qr-code-view.ts

@@ -10,12 +10,12 @@ import { ConnectModalBase } from '../connect-modal.base'
 
 // Import lukso web components
 import '@lukso/web-components/dist/components/lukso-qr-code'
-import { withIntlService } from '@lukso/core/mixins'
+import { withIntlService, withTheme } from '@lukso/core/mixins'
 import { property } from 'lit/decorators.js'
 import { renderBackButton, renderCloseButton } from '../connect-modal.templates'
 import cubeGlassImage from '../images/up-cube-glass.png'
 
-export class QrCodeView extends withIntlService(ConnectModalBase) {
+export class QrCodeView extends withTheme(withIntlService(ConnectModalBase)) {
   @property({ type: String }) data: string | undefined = undefined
 
   /**
@@ -41,13 +41,13 @@ export class QrCodeView extends withIntlService(ConnectModalBase) {
         <button
           @click=${this.handleBack}
         >
-          ${renderBackButton()}
+          ${renderBackButton(this.theme)}
         </button>
 
         <button
           @click=${this.handleClose}
         >
-          ${renderCloseButton()}
+          ${renderCloseButton(this.theme)}
         </button>
       </div>
       <div class="flex flex-col items-center text-center">

package/src/connect-modal/connect-modal.templates.ts

@@ -1,21 +1,22 @@
+import type { Theme } from '@lukso/core'
 import { cn } from '@lukso/web-components/tools'
 import { html } from 'lit'
 import cubeGlassImage from './images/up-cube-glass.png'
 
-export const renderCloseButton = () =>
+export const renderCloseButton = (theme: Theme) =>
   html`<lukso-icon name="close-lg"
-    class="cursor-pointer transition-opacity hover:opacity-60"></lukso-icon>`
+    class="cursor-pointer transition-opacity hover:opacity-60" color="${theme === 'dark' ? 'neutral-100' : 'neutral-20'}"></lukso-icon>`
 
-export const renderBackButton = () =>
-  html`<lukso-icon name="arrow-left-lg" class="cursor-pointer transition-opacity hover:opacity-60"></lukso-icon>`
+export const renderBackButton = (theme: Theme) =>
+  html`<lukso-icon name="arrow-left-lg" class="cursor-pointer transition-opacity hover:opacity-60" color="${theme === 'dark' ? 'neutral-100' : 'neutral-20'}"></lukso-icon>`
 
 export const renderLogo = () =>
   html`<img src="${cubeGlassImage}" alt="" class="mb-5 w-14 animate-bounce2" />`
 
 export const renderTitle = (title: string) =>
-  html`<h2 class="m-0 mb-4 text-neutral-20 dark:text-white heading-inter-21-semi-bold">
+  html`<h2 class="m-0 mb-4 text-neutral-20 dark:text-neutral-100 heading-inter-21-semi-bold">
     ${title}
   </h2>`
 
 export const renderPlaceholder = (style: string) =>
-  html`<div class="${cn('bg-neutral-90 dark:bg-neutral-80 rounded-4 animate-pulse', style)}"></div>`
+  html`<div class="${cn('bg-neutral-90 dark:bg-neutral-20 rounded-4 animate-pulse', style)}"></div>`

package/src/connect-modal/connect-modal.ts

@@ -4,7 +4,7 @@
  * Framework-agnostic connection modal for wallet/profile connections.
  */
 
-import { withDeviceService } from '@lukso/core/mixins'
+import { withDeviceService, withTheme } from '@lukso/core/mixins'
 import debug from 'debug'
 import { html, type TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
@@ -12,7 +12,6 @@ import { property, state } from 'lit/decorators.js'
 import { ConnectModalBase } from './connect-modal.base.js'
 import type {
   ConnectionModalView,
-  ConnectModalTheme,
   WalletConnector,
 } from './connect-modal.types'
 import { fromWagmiConnectors, getWagmiSetup } from './services/wagmi'
@@ -24,64 +23,26 @@ import './components/qr-code-view'
 
 const logInfo = debug('connect-modal:info')
 
-export class ConnectModal extends withDeviceService(ConnectModalBase) {
+export class ConnectModal extends withTheme(
+  withDeviceService(ConnectModalBase)
+) {
   // Public properties
   @property({ type: Boolean, reflect: true }) open = false
-  @property({ type: String, reflect: true }) theme: ConnectModalTheme = 'light'
 
   // Private state
   @state() private connectors: WalletConnector[] = []
-  @state() private isDark = false
+  // isDark state is provided by withTheme mixin
   @state() private modalView: ConnectionModalView = 'up_connection'
   @state() private qrCodeData: string | undefined = undefined
 
-  private mediaQueryList: MediaQueryList | null = null
-
   updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties)
+
     // Reset view and load connectors when modal opens
     if (changedProperties.has('open') && this.open) {
       this.modalView = 'up_connection' // Reset to main view when modal opens
       this.loadConnectors()
     }
-
-    // Handle theme changes
-    if (changedProperties.has('theme')) {
-      this.updateTheme()
-    }
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.updateTheme()
-
-    // Listen for system theme changes when in 'auto' mode
-    if (this.theme === 'auto') {
-      this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
-      this.mediaQueryList.addEventListener(
-        'change',
-        this.handleMediaQueryChange
-      )
-    }
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    if (this.mediaQueryList) {
-      this.mediaQueryList.removeEventListener(
-        'change',
-        this.handleMediaQueryChange
-      )
-    }
-  }
-
-  /**
-   * Handle system theme changes
-   *
-   * @param event
-   */
-  private handleMediaQueryChange = (event: MediaQueryListEvent): void => {
-    this.isDark = event.matches
   }
 
   /**
@@ -95,17 +56,6 @@ export class ConnectModal extends withDeviceService(ConnectModalBase) {
     )
   }
 
-  /**
-   * Update isDark state based on theme property
-   */
-  private updateTheme(): void {
-    if (this.theme === 'auto') {
-      this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-    } else {
-      this.isDark = this.theme === 'dark'
-    }
-  }
-
   private async loadConnectors(): Promise<void> {
     const globalWagmiSetup = getWagmiSetup()
     logInfo('Global wagmi setup:', globalWagmiSetup)
@@ -217,12 +167,17 @@ export class ConnectModal extends withDeviceService(ConnectModalBase) {
   private renderModalContent(): TemplateResult<1> {
     switch (this.modalView) {
       case 'qr_code':
-        return html`<qr-code-view .data=${this.qrCodeData} @on-back=${this.handleBackToConnectionView}
-            @on-close=${this.handleClose}></qr-code-view>`
+        return html`<qr-code-view
+          .data=${this.qrCodeData}
+          .theme=${this.theme}
+          @on-back=${this.handleBackToConnectionView}
+          @on-close=${this.handleClose}
+        ></qr-code-view>`
       case 'eoa_connection':
         return html`
           <eoa-connection-view
             .connectors=${this.connectors}
+            .theme=${this.theme}
             @on-back=${this.handleBackToConnectionView}
             @on-close=${this.handleClose}
             @on-connect=${this.handleOnConnectSuccess}
@@ -233,6 +188,7 @@ export class ConnectModal extends withDeviceService(ConnectModalBase) {
         return html`
           <connection-view
             .connectors=${this.connectors}
+            .theme=${this.theme}
             @on-back=${this.handleBackToConnectionView}
             @on-close=${this.handleClose}
             @on-connect=${this.handleOnConnectSuccess}
@@ -252,7 +208,7 @@ export class ConnectModal extends withDeviceService(ConnectModalBase) {
         size="auto"
         @on-backdrop-click=${this.handleClose}
       >
-        <div class="p-6 ${this.isDark ? 'dark' : ''} w-full sm:w-[372px] text-neutral-20">
+        <div class="p-6 w-full sm:w-[372px]">
           ${this.renderModalContent()}
         </div>
       </lukso-modal>