diff --git a/assets/images/icon-white.png b/assets/images/icon-white.png
new file mode 100755
index 000000000..9fc016d6e
Binary files /dev/null and b/assets/images/icon-white.png differ
diff --git a/assets/images/lightning-white.png b/assets/images/lightning-white.png
new file mode 100755
index 000000000..41384e02b
Binary files /dev/null and b/assets/images/lightning-white.png differ
diff --git a/assets/images/onchain-white.png b/assets/images/onchain-white.png
new file mode 100644
index 000000000..8fb6dc423
Binary files /dev/null and b/assets/images/onchain-white.png differ
diff --git a/assets/images/pay-z-white.png b/assets/images/pay-z-white.png
new file mode 100755
index 000000000..e30352efa
Binary files /dev/null and b/assets/images/pay-z-white.png differ
diff --git a/components/CollapsedQR.tsx b/components/CollapsedQR.tsx
index 67903511a..e41e87a44 100644
--- a/components/CollapsedQR.tsx
+++ b/components/CollapsedQR.tsx
@@ -20,6 +20,7 @@ import { themeColor } from './../utils/ThemeUtils';
import Touchable from './Touchable';
const defaultLogo = require('../assets/images/icon-black.png');
+const defaultLogoWhite = require('../assets/images/icon-white.png');
let simulation: any;
@@ -186,9 +187,21 @@ export default class CollapsedQR extends React.Component<
@@ -200,9 +213,20 @@ export default class CollapsedQR extends React.Component<
width ? width * 0.75 : height * 0.6}
- logo={logo || defaultLogo}
- backgroundColor={themeColor('qr') || 'white'}
- logoBackgroundColor={themeColor('qr') || 'white'}
+ logo={
+ logo
+ ? logo
+ : themeColor('invertQrIcons')
+ ? defaultLogoWhite
+ : defaultLogo
+ }
+ color={themeColor('qr') || 'black'}
+ backgroundColor={
+ themeColor('qrBackground') || 'white'
+ }
+ logoBackgroundColor={
+ themeColor('qrLogoBackground') || 'white'
+ }
logoMargin={10}
quietZone={width / 40}
/>
diff --git a/utils/ThemeUtils.ts b/utils/ThemeUtils.ts
index 5864a45ae..25d9d86f0 100644
--- a/utils/ThemeUtils.ts
+++ b/utils/ThemeUtils.ts
@@ -26,7 +26,8 @@ export function themeColor(themeString: string): any {
buttonBackground: '#FFA900',
buttonGradient: ['#FF9000', '#FFA900'],
buttonText: '#000000',
- qr: '#FFA900',
+ qrBackground: '#FFA900',
+ qrLogoBackground: '#FFA900',
action: '#FFF'
};
@@ -71,7 +72,8 @@ export function themeColor(themeString: string): any {
qrFrame: '#FFD93F',
bolt: '#FFD93F',
chain: '#FFD93F',
- disabled: '#767577'
+ disabled: '#767577',
+ invertQrIcons: false
};
const Junkie: { [key: string]: any } = {
@@ -218,13 +220,16 @@ export function themeColor(themeString: string): any {
warning: '#E14C4C',
bitcoin: '#FFB040',
delete: '#992600',
+ qr: '#4C09F4',
+ qrBackground: '#FFF',
+ qrLogoBackground: '#4C09F4',
+ invertQrIcons: true,
qrFrame: '#FFD93F',
bolt: '#FFF',
chain: '#FFF',
disabled: '#767577',
buttonBackground: '#4C09F4',
- buttonText: '#000000',
- qr: '#dccfff',
+ buttonText: '#FFF',
action: '#FFF'
};
diff --git a/views/Receive.tsx b/views/Receive.tsx
index ac102139b..a1661b3cc 100644
--- a/views/Receive.tsx
+++ b/views/Receive.tsx
@@ -29,6 +29,11 @@ import LightningIcon from '../assets/images/lightning-black.png';
import OnChainIcon from '../assets/images/onchain-black.png';
import ZPayIcon from '../assets/images/pay-z-black.png';
+import ZIconWhite from '../assets/images/icon-white.png';
+import LightningIconWhite from '../assets/images/lightning-white.png';
+import OnChainIconWhite from '../assets/images/onchain-white.png';
+import ZPayIconWhite from '../assets/images/pay-z-white.png';
+
import Amount from '../components/Amount';
import AmountInput, { getSatAmount } from '../components/AmountInput';
import Button from '../components/Button';
@@ -1543,7 +1548,13 @@ export default class Receive extends React.Component<
expanded
textBottom
truncateLongValue
- logo={ZIcon}
+ logo={
+ themeColor(
+ 'invertQrIcons'
+ )
+ ? ZIconWhite
+ : ZIcon
+ }
/>
)}
{selectedIndex == 1 &&
@@ -1560,7 +1571,13 @@ export default class Receive extends React.Component<
expanded
textBottom
truncateLongValue
- logo={LightningIcon}
+ logo={
+ themeColor(
+ 'invertQrIcons'
+ )
+ ? LightningIconWhite
+ : LightningIcon
+ }
/>
)}
{selectedIndex == 2 &&
@@ -1577,7 +1594,13 @@ export default class Receive extends React.Component<
expanded
textBottom
truncateLongValue
- logo={OnChainIcon}
+ logo={
+ themeColor(
+ 'invertQrIcons'
+ )
+ ? OnChainIconWhite
+ : OnChainIcon
+ }
/>
)}
@@ -1639,7 +1662,13 @@ export default class Receive extends React.Component<
expanded
textBottom
hideText
- logo={ZPayIcon}
+ logo={
+ themeColor(
+ 'invertQrIcons'
+ )
+ ? ZPayIconWhite
+ : ZPayIcon
+ }
/>
)}