diff --git a/src/app/pages/account-transaction-list/account-transaction-list.scss b/src/app/pages/account-transaction-list/account-transaction-list.scss
index 7211f0fe0..0a074f435 100644
--- a/src/app/pages/account-transaction-list/account-transaction-list.scss
+++ b/src/app/pages/account-transaction-list/account-transaction-list.scss
@@ -27,6 +27,3 @@ ion-fab {
svg {
stroke: none;
}
-.action--container {
- background: #fff;
-}
diff --git a/src/app/pages/beacon-request/beacon-request.page.html b/src/app/pages/beacon-request/beacon-request.page.html
index bcd0dab8d..79e6cb3d6 100644
--- a/src/app/pages/beacon-request/beacon-request.page.html
+++ b/src/app/pages/beacon-request/beacon-request.page.html
@@ -22,7 +22,7 @@
{{ 'beacon-request.request-by-dapp_label' | translate }}
{{requesterName}}
- 
+
diff --git a/src/app/pages/beacon-request/beacon-request.page.scss b/src/app/pages/beacon-request/beacon-request.page.scss
index 24475eb2e..e69de29bb 100644
--- a/src/app/pages/beacon-request/beacon-request.page.scss
+++ b/src/app/pages/beacon-request/beacon-request.page.scss
@@ -1,3 +0,0 @@
-.by-beacon__img {
- width: 32px;
-}
diff --git a/src/app/pages/delegation-detail/delegation-detail.scss b/src/app/pages/delegation-detail/delegation-detail.scss
index d095a3c06..6079254a9 100644
--- a/src/app/pages/delegation-detail/delegation-detail.scss
+++ b/src/app/pages/delegation-detail/delegation-detail.scss
@@ -29,7 +29,3 @@ ion-segment {
min-width: fit-content;
}
}
-
-.action--container {
- background: #fff;
-}
diff --git a/src/app/pages/scan/scan.ts b/src/app/pages/scan/scan.ts
index ab753b70a..4a788efe9 100644
--- a/src/app/pages/scan/scan.ts
+++ b/src/app/pages/scan/scan.ts
@@ -36,6 +36,8 @@ export class ScanPage extends ScanBasePage {
}
public async ionViewWillEnter(): Promise {
+ // We need this for the background to be transparent when using dark mode
+ document.body.style.backgroundColor = 'transparent'
await super.ionViewWillEnter()
this.resetScannerPage()
this.iacService.resetHandlers()
diff --git a/src/app/pages/settings/settings.html b/src/app/pages/settings/settings.html
index 5f9695725..8797f447e 100644
--- a/src/app/pages/settings/settings.html
+++ b/src/app/pages/settings/settings.html
@@ -11,6 +11,22 @@
+
+
+ {{ 'settings.appearance_label' | translate }}
+
+
+
+ {{ 'settings.theme_label' | translate }}
+
+
+ {{ 'settings.select-theme.system' | translate }}
+
+ {{ 'settings.select-theme.light' | translate }}
+ {{ 'settings.select-theme.dark' | translate }}
+
+
+
{{ 'settings.help_label' | translate }}
@@ -55,11 +71,11 @@
{{ 'settings.dapp.label' | translate }}
-
+
{{ 'settings.dapp.permission-list_label' | translate }}
-
+
{{ 'settings.dapp.settings_label' | translate }}
diff --git a/src/app/pages/settings/settings.ts b/src/app/pages/settings/settings.ts
index 4fa51d27f..bb6b1327a 100644
--- a/src/app/pages/settings/settings.ts
+++ b/src/app/pages/settings/settings.ts
@@ -4,6 +4,7 @@ import { Router } from '@angular/router'
import { Capacitor } from '@capacitor/core'
import { SharePlugin } from '@capacitor/share'
import { AlertController, ModalController } from '@ionic/angular'
+import { ThemeService } from 'src/app/services/appearance/theme.service'
import { SHARE_PLUGIN } from 'src/app/capacitor-plugins/injection-tokens'
import { BrowserService } from 'src/app/services/browser/browser.service'
import { IACService } from 'src/app/services/iac/iac.service'
@@ -17,10 +18,12 @@ import { IntroductionPage } from '../introduction/introduction'
})
export class SettingsPage {
public readonly platform: string = Capacitor.getPlatform()
+ public readonly getTheme = this.themeService.getTheme()
constructor(
public readonly alertCtrl: AlertController,
public readonly serializerService: SerializerService,
+ public readonly themeService: ThemeService,
private readonly router: Router,
private readonly modalController: ModalController,
private readonly clipboardProvider: ClipboardService,
@@ -29,6 +32,12 @@ export class SettingsPage {
@Inject(SHARE_PLUGIN) private readonly sharePlugin: SharePlugin
) {}
+ public async onThemeSelection(event) {
+ this.themeService.themeSubject.next(event.detail.value)
+
+ await this.themeService.setStorageItem(event.detail.value)
+ }
+
public about(): void {
this.navigate('/about')
}
diff --git a/src/app/pages/transaction-prepare/transaction-prepare.html b/src/app/pages/transaction-prepare/transaction-prepare.html
index b34fc3b6f..352036787 100644
--- a/src/app/pages/transaction-prepare/transaction-prepare.html
+++ b/src/app/pages/transaction-prepare/transaction-prepare.html
@@ -33,8 +33,19 @@
-
+
{
- this.transactionForm.patchValue(updated, { onlySelf: true, emitEvent: false })
+ this.transactionForm.patchValue(updated, {
+ onlySelf: true,
+ emitEvent: false
+ })
Object.keys(updated).forEach((key: string) => {
this.transactionForm.get(key).markAsDirty({ onlySelf: true })
this.transactionForm.get(key).updateValueAndValidity({ onlySelf: true, emitEvent: false })
@@ -413,7 +416,7 @@ export class TransactionPreparePage {
if (
wallet.protocol.identifier === MainProtocolSymbols.COSMOS ||
wallet.protocol.identifier === MainProtocolSymbols.KUSAMA ||
- wallet.protocol.identifier === MainProtocolSymbols.POLKADOT ||
+ wallet.protocol.identifier === MainProtocolSymbols.POLKADOT ||
wallet.protocol.identifier === MainProtocolSymbols.ASTAR
) {
return new BigNumber(await wallet.protocol.getAvailableBalanceOfAddresses([wallet.addresses[0]]))
@@ -596,7 +599,7 @@ export class TransactionPreparePage {
disablePrepareButton:
this.transactionForm.invalid || receiverAddress === undefined || new BigNumber(this._state.amount.value).lte(0)
})
- this.updateFeeEstimate()
+ this.transactionForm.controls.receiver.setValue(receiverAddress, { onlySelf: false, emitEvent: true })
},
(err: string) => {
console.error('Error: ' + err)
diff --git a/src/app/pages/walletconnect/walletconnect.page.ts b/src/app/pages/walletconnect/walletconnect.page.ts
index c23784355..259b61159 100644
--- a/src/app/pages/walletconnect/walletconnect.page.ts
+++ b/src/app/pages/walletconnect/walletconnect.page.ts
@@ -217,6 +217,9 @@ export class WalletconnectPage implements OnInit {
}
private async operationRequest(request: JSONRPC): Promise {
+ const wallet = this.selectableWallets.find((wallet) => wallet.addresses[0] === request.params[0].from)
+ this.setWallet(wallet)
+
const ethereumProtocol: EthereumProtocol = new EthereumProtocol()
if (!this.selectedWallet) {
diff --git a/src/app/services/appearance/theme.service.ts b/src/app/services/appearance/theme.service.ts
new file mode 100644
index 000000000..28785099e
--- /dev/null
+++ b/src/app/services/appearance/theme.service.ts
@@ -0,0 +1,93 @@
+import { Platform } from '@ionic/angular'
+import { WalletStorageService, themeOptions, WalletStorageKey } from './../storage/storage'
+import { STATUS_BAR_PLUGIN } from '@airgap/angular-core'
+import { Inject, Injectable } from '@angular/core'
+import { StatusBarPlugin, Style } from '@capacitor/status-bar'
+import { Subject } from 'rxjs'
+@Injectable({
+ providedIn: 'root'
+})
+export class ThemeService {
+ public themeSubject: Subject = new Subject()
+
+ public readonly supportsSystemPref = CSS.supports('color-scheme', 'dark')
+
+ constructor(
+ private readonly platform: Platform,
+ private readonly storage: WalletStorageService,
+ @Inject(STATUS_BAR_PLUGIN) private readonly statusBar: StatusBarPlugin
+ ) {}
+
+ public async register() {
+ this.systemThemeQuery().addEventListener('change', async () => {
+ const theme = await this.getTheme()
+
+ if (theme === 'system' || theme == null) {
+ this.themeSubject.next(theme)
+ }
+ })
+
+ this.themeSubject.subscribe(async (theme) => {
+ if (await this.isDarkMode(theme)) {
+ this.toggleDarkMode(true)
+ this.statusBarStyleDark(true)
+
+ return
+ }
+
+ this.statusBarStyleDark(false)
+ this.toggleDarkMode(false)
+ })
+
+ this.themeSubject.next(await this.getTheme())
+ }
+
+ public async statusBarStyleDark(isDarkMode: boolean) {
+ if (this.platform.is('hybrid')) {
+ Promise.all([
+ this.statusBar.setStyle({ style: isDarkMode ? Style.Dark : Style.Light }),
+ this.statusBar.setBackgroundColor({ color: isDarkMode ? '#1f1f1f' : '#FFFFFF' })
+ ])
+ }
+ }
+
+ public async isDarkMode(theme?: any): Promise {
+ theme = theme ?? (await this.getTheme())
+
+ if (theme === 'dark' || this.systemPrefersDark(theme)) {
+ return true
+ }
+
+ return false
+ }
+
+ public toggleDarkMode(enabled: boolean): void {
+ document.body.classList.toggle('dark', enabled)
+ }
+
+ public async setStorageItem(theme: themeOptions): Promise {
+ return this.storage.set(WalletStorageKey.THEME, theme)
+ }
+
+ public async getTheme(): Promise {
+ const storageItem = await this.storage.get(WalletStorageKey.THEME)
+
+ if (storageItem == null) {
+ return this.fallBackTheme()
+ }
+
+ return storageItem
+ }
+
+ public systemThemeQuery(): MediaQueryList {
+ return window.matchMedia('(prefers-color-scheme: dark)')
+ }
+
+ private fallBackTheme(): themeOptions {
+ return this.supportsSystemPref ? 'system' : 'light'
+ }
+
+ private systemPrefersDark(theme: themeOptions): boolean {
+ return theme === 'system' && this.systemThemeQuery().matches
+ }
+}
diff --git a/src/app/services/storage/storage.ts b/src/app/services/storage/storage.ts
index 80c138b6d..47a4ce4dc 100644
--- a/src/app/services/storage/storage.ts
+++ b/src/app/services/storage/storage.ts
@@ -9,6 +9,8 @@ import { SerializedAirGapMarketWalletGroup } from '../../models/AirGapMarketWall
import { ExchangeTransactionDetails } from '../exchange/exchange'
export type BeaconRequest = [string, any, ICoinProtocol]
+export type themeOptions = 'light' | 'dark' | 'system'
+
export interface SerializedBeaconRequest {
messageId: string
payload: any
@@ -30,7 +32,8 @@ export enum WalletStorageKey {
PENDING_EXCHANGE_TRANSACTIONS = 'PENDING_EXCHANGE_TRANSACTIONS',
BEACON_REQUESTS = 'BEACON_REQUESTS',
PENDING_REQUEST = 'PENDING_REQUEST',
- GENERIC_SUBPROTOCOLS = 'GENERIC_SUBPROTOCOLS'
+ GENERIC_SUBPROTOCOLS = 'GENERIC_SUBPROTOCOLS',
+ THEME = 'theme'
}
interface IBroadcastTransaction {
@@ -54,6 +57,7 @@ interface WalletStorageKeyReturnType {
[WalletStorageKey.BEACON_REQUESTS]: SerializedBeaconRequest[]
[WalletStorageKey.PENDING_REQUEST]: SerializedBeaconRequest[]
[WalletStorageKey.GENERIC_SUBPROTOCOLS]: Record
+ [WalletStorageKey.THEME]: themeOptions
}
type WalletStorageKeyReturnDefaults = { [key in WalletStorageKey]: WalletStorageKeyReturnType[key] }
@@ -72,7 +76,8 @@ const defaultValues: WalletStorageKeyReturnDefaults = {
[WalletStorageKey.PENDING_EXCHANGE_TRANSACTIONS]: [],
[WalletStorageKey.BEACON_REQUESTS]: [],
[WalletStorageKey.PENDING_REQUEST]: [],
- [WalletStorageKey.GENERIC_SUBPROTOCOLS]: {}
+ [WalletStorageKey.GENERIC_SUBPROTOCOLS]: {},
+ [WalletStorageKey.THEME]: undefined
}
@Injectable({
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 3279bdd03..63cbd0bc3 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -128,6 +128,13 @@
},
"settings": {
"title": "Settings",
+ "appearance_label": "Appearance",
+ "theme_label": "Theme",
+ "select-theme": {
+ "system": "Device Theme",
+ "light": "Light Theme",
+ "dark": "Dark Theme"
+ },
"help_label": "Help & Support",
"introduction_label": "Introduction",
"faq_label": "FAQ",
@@ -259,23 +266,21 @@
"offline-device_label": "Offline Device",
"offline-device_info": "AirGap Vault is installed on an offline device, scan the QR code with AirGap Wallet."
},
-
- "interaction-selection-settings":{
- "title":"Wallet Interaction",
- "same-device_heading":"Looks like you're using AirGap Vault and AirGap Wallet on the same device.",
- "offline-device_heading":"Looks like you’re using AirGap Vault on an offline device.",
- "text":"You can define where you have AirGap Wallet installed to make the interaction with the Vault a bit simpler.",
+ "interaction-selection-settings": {
+ "title": "Wallet Interaction",
+ "same-device_heading": "Looks like you're using AirGap Vault and AirGap Wallet on the same device.",
+ "offline-device_heading": "Looks like you're using AirGap Vault on an offline device.",
+ "text": "You can define where you have AirGap Wallet installed to make the interaction with the Vault a bit simpler.",
"selector": {
- "always":"Always ask",
- "same-device":"Vault and Wallet on the same device",
- "offline-device":"Vault is an offline device",
- "ledger":"Wallet pairs with Ledger"
+ "always": "Always ask",
+ "same-device": "Vault and Wallet on the same device",
+ "offline-device": "Vault is an offline device",
+ "ledger": "Wallet pairs with Ledger"
},
- "confirm_label":"Confirm",
- "description":"You can always change your preference in the Settings Tab",
+ "confirm_label": "Confirm",
+ "description": "You can always change your preference in the Settings Tab",
"button_text": "Edit"
},
-
"interaction-selection-desktop": {
"title": "Select Signer Option",
"heading": "Select the device to sign this transaction",
@@ -376,7 +381,7 @@
},
"slide-4": {
"text": "The account can now be imported to AirGap Wallet.",
- "description": "You’re now ready to create {{protocolName}} transactions with AirGap Vault and AirGap Wallet."
+ "description": "You're now ready to create {{protocolName}} transactions with AirGap Vault and AirGap Wallet."
}
},
"back": "Back",
@@ -475,7 +480,7 @@
},
"sygnum": {
"title": "Sygnum",
- "text": "Sygnum is the world’s first digital asset bank, and a digital asset specialist with global reach. Sygnum offers a portfolio of regulated banking services which seamlessly integrates traditional and digital assets into one account, including major national currencies, Bitcoin, Ethereum, a Digital CHF and asset tokens. Founded on Swiss and Singapore heritage, Sygnum empowers institutional clients to invest in the digital asset economy with complete trust."
+ "text": "Sygnum is the world's first digital asset bank, and a digital asset specialist with global reach. Sygnum offers a portfolio of regulated banking services which seamlessly integrates traditional and digital assets into one account, including major national currencies, Bitcoin, Ethereum, a Digital CHF and asset tokens. Founded on Swiss and Singapore heritage, Sygnum empowers institutional clients to invest in the digital asset economy with complete trust."
},
"taurus": {
"title": "Taurus",
@@ -830,15 +835,14 @@
"remove-all_label": "Remove All",
"delete_label": "Delete",
"no-peers": "Not connected to any peers",
- "reset": "Reset",
+ "reset": "Reset",
"alert": {
"heading": "Remove All",
"message": "Are you sure you want to remove all peers?",
- "cancel" : "Cancel",
+ "cancel": "Cancel",
"confirm": "Confirm"
}
},
-
"walletconnect": {
"connection_request": "WalletConnect - Connection Request",
"new_transaction": "WalletConnect - New Transaction",
@@ -856,7 +860,7 @@
"connection_error": "There was an issue connecting to WalletConnect"
},
"health-check": {
- "title": "Health Check",
+ "title": "Health Check",
"message": "Checking API Health"
},
"group-label": {
diff --git a/src/assets/i18n/zh-cn.json b/src/assets/i18n/zh.json
similarity index 100%
rename from src/assets/i18n/zh-cn.json
rename to src/assets/i18n/zh.json
diff --git a/src/assets/img/beacon_logo.svg b/src/assets/img/beacon_logo.svg
index adc3c39f2..b52231c11 100644
--- a/src/assets/img/beacon_logo.svg
+++ b/src/assets/img/beacon_logo.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/beacon_logo_black.svg b/src/assets/img/beacon_logo_black.svg
deleted file mode 100644
index c565c7175..000000000
--- a/src/assets/img/beacon_logo_black.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index fb58870f3..711ea89e7 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -138,27 +138,6 @@ page-account-transaction-list {
}
}
-/* Card Styling */
-page-portfolio,
-page-delegation-baker-detail,
-page-delegation-polkadot-validator-detail,
-page-account-address,
-page-transaction-qr,
-page-beacon-request,
-page-exchange-custom,
-page-transaction-qr,
-page-collectibles-list,
-page-collectibles-item {
- .sc-ion-card-md-h,
- .sc-ion-card-ios-h,
- ion-card,
- airgap-qr {
- box-shadow: 0 10px 20px 0 rgba(49, 27, 88, 0.12);
- border: 1px solid rgba(0, 232, 204, 0.08);
- border-radius: 0;
- }
-}
-
permission-request,
app-walletconnect {
.request--container {
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index d2f030e50..b83e190a8 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -139,6 +139,26 @@
ion-split-pane {
--side-max-width: 10vw;
}
+ --ion-toolbar-background: #fff;
+
+ page-portfolio,
+ page-delegation-baker-detail,
+ page-delegation-polkadot-validator-detail,
+ page-account-address,
+ page-transaction-qr,
+ page-beacon-request,
+ page-exchange-custom,
+ page-transaction-qr,
+ page-collectibles-list,
+ page-collectibles-item {
+ .sc-ion-card-md-h,
+ .sc-ion-card-ios-h,
+ ion-card,
+ airgap-qr {
+ box-shadow: 0 10px 20px 0 rgba(49, 27, 88, 0.12);
+ border: 1px solid rgba(0, 232, 204, 0.08);
+ }
+ }
}
.ion-color-white {
@@ -186,6 +206,225 @@
--ion-color-tint: #78c288;
}
+.action--container {
+ background-color: var(--ion-toolbar-background);
+}
+
+/*
+ * Dark Colors
+ * Refer to https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme
+ * -------------------------------------------
+ */
+
+body.dark {
+ --ion-color-primary: #00e8cc;
+ --ion-color-primary-rgb: 0, 232, 204;
+ --ion-color-primary-contrast: #311b58;
+ --ion-color-primary-contrast-rgb: 49, 27, 88;
+ --ion-color-primary-shade: #00ccb4;
+ --ion-color-primary-tint: #1aead1;
+
+ --ion-color-secondary: #7044ff;
+ --ion-color-secondary-rgb: 112, 68, 255;
+ --ion-color-secondary-contrast: #00e8cc;
+ --ion-color-secondary-contrast-rgb: 0, 232, 204;
+ --ion-color-secondary-shade: #633ce0;
+ --ion-color-secondary-tint: #7e57ff;
+
+ --ion-color-tertiary: #6a64ff;
+ --ion-color-tertiary-rgb: 106, 100, 255;
+ --ion-color-tertiary-contrast: #ffffff;
+ --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+ --ion-color-tertiary-shade: #5d58e0;
+ --ion-color-tertiary-tint: #7974ff;
+
+ --ion-color-success: #2fdf75;
+ --ion-color-success-rgb: 47, 223, 117;
+ --ion-color-success-contrast: #000000;
+ --ion-color-success-contrast-rgb: 0, 0, 0;
+ --ion-color-success-shade: #29c467;
+ --ion-color-success-tint: #44e283;
+
+ --ion-color-warning: #ffd534;
+ --ion-color-warning-rgb: 255, 213, 52;
+ --ion-color-warning-contrast: #000000;
+ --ion-color-warning-contrast-rgb: 0, 0, 0;
+ --ion-color-warning-shade: #e0bb2e;
+ --ion-color-warning-tint: #ffd948;
+
+ --ion-color-danger: #ff4961;
+ --ion-color-danger-rgb: 255, 73, 97;
+ --ion-color-danger-contrast: #ffffff;
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
+ --ion-color-danger-shade: #e04055;
+ --ion-color-danger-tint: #ff5b71;
+
+ --ion-color-dark: #f4f5f8;
+ --ion-color-dark-rgb: 244, 245, 248;
+ --ion-color-dark-contrast: #000000;
+ --ion-color-dark-contrast-rgb: 0, 0, 0;
+ --ion-color-dark-shade: #d7d8da;
+ --ion-color-dark-tint: #f5f6f9;
+
+ --ion-color-medium: #989aa2;
+ --ion-color-medium-rgb: 152, 154, 162;
+ --ion-color-medium-contrast: #000000;
+ --ion-color-medium-contrast-rgb: 0, 0, 0;
+ --ion-color-medium-shade: #86888f;
+ --ion-color-medium-tint: #a2a4ab;
+
+ --ion-color-light: #222428;
+ --ion-color-light-rgb: 34, 36, 40;
+ --ion-color-light-contrast: #ffffff;
+ --ion-color-light-contrast-rgb: 255, 255, 255;
+ --ion-color-light-shade: #1e2023;
+ --ion-color-light-tint: #383a3e;
+
+ .ion-color-blackLight {
+ --ion-color-base: #989aa2;
+ --ion-color-base-rgb: 152, 154, 162;
+ --ion-color-base-contrast: #000000;
+ --ion-color-base-contrast-rgb: 0, 0, 0;
+ --ion-color-base-shade: #d7d8da;
+ --ion-color-base-tint: #f5f6f9;
+ }
+
+ .ion-color-black {
+ --ion-color-base: #fff;
+ --ion-color-base-rgb: 255, 255, 255;
+ --ion-color-contrast: #000;
+ --ion-color-contrast-rgb: 0, 0, 0;
+ --ion-color-shade: #e0e0e0;
+ --ion-color-tint: #ffffff;
+ }
+
+ --ion-toolbar-background: #1e1e1e;
+ --ion-item-background: #1e1e1e;
+
+ --ion-background-color: #1e1e1e;
+ --ion-background-color-rgb: 30, 30, 30;
+
+ --ion-text-color: #fafafa;
+ --ion-text-color-rgb: 255, 255, 255;
+
+ ion-tab-button {
+ --color-selected: var(--ion-color-primary);
+ }
+
+ ion-toolbar {
+ .button {
+ --color: var(--ion-color-primary) !important;
+ }
+ }
+ ion-title {
+ --color: var(--ion-color-primary);
+ }
+
+ ion-card {
+ --ion-card-background: var(--ion-color-step-100);
+ ion-item {
+ --ion-item-background: var(--ion-color-step-100);
+ }
+ }
+
+ airgap-iac-qr {
+ ion-select {
+ color: #000;
+ }
+ }
+
+ page-portfolio,
+ page-delegation-baker-detail,
+ page-delegation-polkadot-validator-detail,
+ page-account-address,
+ page-transaction-qr,
+ page-beacon-request,
+ page-exchange-custom,
+ page-transaction-qr,
+ page-collectibles-list,
+ page-collectibles-item {
+ .sc-ion-card-md-h,
+ .sc-ion-card-ios-h,
+ ion-card,
+ airgap-qr {
+ box-shadow: 0 10px 20px 0 rgba(var(--ion-color-primary-rgb), 0.04);
+ border: 1px solid rgba(var(--ion-color-primary-rgb), 0.04);
+ }
+ }
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body.dark {
+ --ion-border-color: #222222;
+
+ --ion-color-step-50: #1e1e1e;
+ --ion-color-step-100: #222222;
+ --ion-color-step-150: #363636;
+ --ion-color-step-200: #414141;
+ --ion-color-step-250: #4d4d4d;
+ --ion-color-step-300: #595959;
+ --ion-color-step-350: #656565;
+ --ion-color-step-400: #717171;
+ --ion-color-step-450: #7d7d7d;
+ --ion-color-step-500: #898989;
+ --ion-color-step-550: #949494;
+ --ion-color-step-600: #a0a0a0;
+ --ion-color-step-650: #acacac;
+ --ion-color-step-700: #b8b8b8;
+ --ion-color-step-750: #c4c4c4;
+ --ion-color-step-800: #d0d0d0;
+ --ion-color-step-850: #dbdbdb;
+ --ion-color-step-900: #e7e7e7;
+ --ion-color-step-950: #f3f3f3;
+
+ --ion-tab-bar-background: #1f1f1f;
+
+ --ion-card-background: #1e1e1e;
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body.dark {
+ --ion-border-color: #222222;
+
+ --ion-color-step-50: #1e1e1e;
+ --ion-color-step-100: #222222;
+ --ion-color-step-150: #363636;
+ --ion-color-step-200: #414141;
+ --ion-color-step-250: #4d4d4d;
+ --ion-color-step-300: #595959;
+ --ion-color-step-350: #656565;
+ --ion-color-step-400: #717171;
+ --ion-color-step-450: #7d7d7d;
+ --ion-color-step-500: #898989;
+ --ion-color-step-550: #949494;
+ --ion-color-step-600: #a0a0a0;
+ --ion-color-step-650: #acacac;
+ --ion-color-step-700: #b8b8b8;
+ --ion-color-step-750: #c4c4c4;
+ --ion-color-step-800: #d0d0d0;
+ --ion-color-step-850: #dbdbdb;
+ --ion-color-step-900: #e7e7e7;
+ --ion-color-step-950: #f3f3f3;
+
+ --ion-tab-bar-background: #1f1f1f;
+
+ --ion-card-background: #1e1e1e;
+}
+
+body.dark {
+ .rawdata--container {
+ color: #222222;
+ }
+}
+
ion-avatar {
min-width: 48px;
min-height: 48px;