d415f1a0b8
Some checks failed
Build Release and Upload to TestFlight (iOS) / build (push) Has been cancelled
BuildReleaseApk / buildReleaseApk (push) Has been cancelled
Build Release and Upload to TestFlight (iOS) / testflight-upload (push) Has been cancelled
BuildReleaseApk / browserstack (push) Has been cancelled
195 lines
7.1 KiB
TypeScript
195 lines
7.1 KiB
TypeScript
import { DarkTheme, DefaultTheme, useTheme as useThemeBase } from '@react-navigation/native';
|
|
import { Appearance } from 'react-native';
|
|
|
|
export const BlueDefaultTheme = {
|
|
...DefaultTheme,
|
|
closeImage: require('../img/close.png'),
|
|
barStyle: 'dark-content',
|
|
scanImage: require('../img/scan.png'),
|
|
colors: {
|
|
...DefaultTheme.colors,
|
|
borderWidth: 0.5,
|
|
brandingColor: '#ffffff',
|
|
customHeader: '#ffffff',
|
|
foregroundColor: '#0c2550',
|
|
borderTopColor: 'rgba(0, 0, 0, 0.1)',
|
|
buttonBackgroundColor: '#ccddf9',
|
|
/** Softer fill for native iOS 26+ prominent header bar buttons (derived from `buttonBackgroundColor`). */
|
|
headerProminentButtonBackgroundColor: 'rgba(204, 221, 249, 0.9)',
|
|
buttonTextColor: '#0c2550',
|
|
secondButtonTextColor: '#50555C',
|
|
buttonAlternativeTextColor: '#2f5fb3',
|
|
buttonDisabledBackgroundColor: '#eef0f4',
|
|
buttonDisabledTextColor: '#9aa0aa',
|
|
inputBorderColor: '#d2d2d2',
|
|
inputBackgroundColor: '#f5f5f5',
|
|
alternativeTextColor: '#9aa0aa',
|
|
alternativeTextColor2: '#0f5cc0',
|
|
buttonBlueBackgroundColor: '#ccddf9',
|
|
buttonGrayBackgroundColor: '#EEEEEE',
|
|
incomingBackgroundColor: '#d2f8d6',
|
|
incomingForegroundColor: '#37c0a1',
|
|
outgoingBackgroundColor: '#f8d2d2',
|
|
outgoingForegroundColor: '#d0021b',
|
|
successColor: '#37c0a1',
|
|
failedColor: '#ff0000',
|
|
placeholderTextColor: '#81868e',
|
|
shadowColor: '#000000',
|
|
inverseForegroundColor: '#ffffff',
|
|
hdborderColor: '#68BBE1',
|
|
hdbackgroundColor: '#ECF9FF',
|
|
lnborderColor: '#FFB600',
|
|
lnbackgroundColor: '#FFFAEF',
|
|
background: '#FFFFFF',
|
|
lightButton: 'rgba(0, 0, 0, 0.05)',
|
|
ballReceive: 'rgba(31, 221, 26, 0.2)',
|
|
ballOutgoing: 'rgba(234, 51, 47, 0.2)',
|
|
lightBorder: '#ededed',
|
|
ballOutgoingExpired: '#EEF0F4',
|
|
modal: '#ffffff',
|
|
formBorder: '#d2d2d2',
|
|
modalButton: '#ccddf9',
|
|
darkGray: '#9AA0AA',
|
|
scanLabel: '#9AA0AA',
|
|
feeText: '#81868e',
|
|
feeLabel: '#d2f8d6',
|
|
feeValue: '#37c0a1',
|
|
feeActive: '#d2f8d6',
|
|
labelText: '#81868e',
|
|
cta2: '#062453',
|
|
outputValue: '#13244D',
|
|
elevated: '#ffffff',
|
|
mainColor: '#CFDCF6',
|
|
success: '#ccddf9',
|
|
successCheck: '#0f5cc0',
|
|
msSuccessBG: '#37c0a1',
|
|
msSuccessCheck: '#ffffff',
|
|
newBlue: '#007AFF',
|
|
redBG: '#F8D2D2',
|
|
redText: '#D0021B',
|
|
changeBackground: '#FDF2DA',
|
|
changeText: '#F38C47',
|
|
receiveBackground: '#D1F9D6',
|
|
receiveText: '#37C0A1',
|
|
androidRippleColor: '#CCCCCC',
|
|
transactionPendingColor: '#2757C6',
|
|
transactionPendingBackgroundColor: '#DBEFFD',
|
|
transactionPendingIconBackground: 'rgba(0, 60, 240, 0.1)',
|
|
transactionPendingAnimationColor: '#2757C6',
|
|
transactionStateBumpButtonBackground: 'rgba(255, 255, 255, 0.4)',
|
|
transactionStateCancelButtonBackground: 'rgba(0, 0, 0, 0.05)',
|
|
transactionSentColor: '#BF2828',
|
|
transactionReceivedColor: '#63BDA2',
|
|
cardSectionBackground: '#F9F9F9',
|
|
cardSectionHeaderBackground: '#F2F2F2',
|
|
cardBorderColor: 'rgba(0, 0, 0, 0.05)',
|
|
},
|
|
};
|
|
|
|
export type Theme = typeof BlueDefaultTheme;
|
|
|
|
export const BlueDarkTheme: Theme = {
|
|
...DarkTheme,
|
|
closeImage: require('../img/close-white.png'),
|
|
scanImage: require('../img/scan-white.png'),
|
|
barStyle: 'light-content',
|
|
colors: {
|
|
...BlueDefaultTheme.colors,
|
|
...DarkTheme.colors,
|
|
customHeader: '#000000',
|
|
brandingColor: '#000000',
|
|
borderTopColor: '#9aa0aa',
|
|
background: '#000000',
|
|
foregroundColor: '#ffffff',
|
|
buttonDisabledBackgroundColor: '#3A3A3C',
|
|
buttonBackgroundColor: '#3A3A3C',
|
|
headerProminentButtonBackgroundColor: 'rgba(58, 58, 60, 0.6)',
|
|
buttonTextColor: '#ffffff',
|
|
lightButton: 'rgba(255,255,255,.1)',
|
|
buttonAlternativeTextColor: '#ffffff',
|
|
alternativeTextColor: '#9aa0aa',
|
|
alternativeTextColor2: '#0A84FF',
|
|
ballReceive: 'rgba(31, 221, 26, 0.2)',
|
|
ballOutgoing: 'rgba(234, 51, 47, 0.2)',
|
|
lightBorder: '#313030',
|
|
ballOutgoingExpired: '#202020',
|
|
modal: '#202020',
|
|
formBorder: '#202020',
|
|
inputBackgroundColor: '#262626',
|
|
modalButton: '#000000',
|
|
darkGray: '#3A3A3C',
|
|
feeText: '#81868e',
|
|
feeLabel: '#8EFFE5',
|
|
feeValue: '#000000',
|
|
feeActive: 'rgba(210,248,214,.2)',
|
|
cta2: '#ffffff',
|
|
outputValue: '#ffffff',
|
|
elevated: '#121212',
|
|
mainColor: '#0A84FF',
|
|
success: '#202020',
|
|
successCheck: '#0A84FF',
|
|
buttonBlueBackgroundColor: '#202020',
|
|
scanLabel: 'rgba(255,255,255,.2)',
|
|
labelText: '#ffffff',
|
|
msSuccessBG: '#8EFFE5',
|
|
msSuccessCheck: '#000000',
|
|
newBlue: '#007AFF',
|
|
redBG: '#5A4E4E',
|
|
redText: '#FC6D6D',
|
|
changeBackground: '#5A4E4E',
|
|
changeText: '#F38C47',
|
|
receiveBackground: 'rgba(210,248,214,.2)',
|
|
receiveText: '#37C0A1',
|
|
outgoingBackgroundColor: 'rgba(187, 6, 6, 0.2)',
|
|
outgoingForegroundColor: '#FC6D6D',
|
|
incomingBackgroundColor: 'rgba(5, 159, 54, 0.3)',
|
|
incomingForegroundColor: '#37C0A1',
|
|
transactionPendingIconBackground: 'rgba(90, 158, 255, 0.3)',
|
|
transactionPendingAnimationColor: '#5A9EFF',
|
|
androidRippleColor: '#444444',
|
|
transactionPendingColor: '#5A9EFF',
|
|
transactionPendingBackgroundColor: 'rgba(10, 132, 255, 0.15)',
|
|
transactionStateBumpButtonBackground: 'rgba(255, 255, 255, 0.15)',
|
|
transactionStateCancelButtonBackground: 'rgba(255, 255, 255, 0.08)',
|
|
transactionSentColor: '#FC6D6D',
|
|
transactionReceivedColor: '#37C0A1',
|
|
cardSectionBackground: '#1C1C1E',
|
|
cardSectionHeaderBackground: '#2C2C2E',
|
|
cardBorderColor: 'rgba(255, 255, 255, 0.08)',
|
|
},
|
|
};
|
|
|
|
// Casting theme value to get autocompletion
|
|
export const useTheme = (): Theme => useThemeBase() as Theme;
|
|
|
|
export const platformColors = {
|
|
background: BlueDefaultTheme.colors.background,
|
|
card: BlueDefaultTheme.colors.modal ?? BlueDefaultTheme.colors.elevated ?? BlueDefaultTheme.colors.background,
|
|
text: BlueDefaultTheme.colors.foregroundColor,
|
|
secondaryText: BlueDefaultTheme.colors.alternativeTextColor ?? BlueDefaultTheme.colors.darkGray,
|
|
separator: BlueDefaultTheme.colors.lightBorder ?? BlueDefaultTheme.colors.borderTopColor,
|
|
chevron: BlueDefaultTheme.colors.alternativeTextColor ?? BlueDefaultTheme.colors.darkGray,
|
|
};
|
|
|
|
export class BlueCurrentTheme {
|
|
static colors: Theme['colors'];
|
|
static closeImage: Theme['closeImage'];
|
|
static scanImage: Theme['scanImage'];
|
|
|
|
static updateColorScheme(): void {
|
|
const isColorSchemeDark = Appearance.getColorScheme() === 'dark';
|
|
BlueCurrentTheme.colors = isColorSchemeDark ? BlueDarkTheme.colors : BlueDefaultTheme.colors;
|
|
BlueCurrentTheme.closeImage = isColorSchemeDark ? BlueDarkTheme.closeImage : BlueDefaultTheme.closeImage;
|
|
BlueCurrentTheme.scanImage = isColorSchemeDark ? BlueDarkTheme.scanImage : BlueDefaultTheme.scanImage;
|
|
const colors = BlueCurrentTheme.colors;
|
|
platformColors.background = colors.background;
|
|
platformColors.card = colors.modal ?? colors.elevated ?? colors.background;
|
|
platformColors.text = colors.foregroundColor;
|
|
platformColors.secondaryText = colors.alternativeTextColor ?? colors.darkGray;
|
|
platformColors.separator = colors.lightBorder ?? colors.borderTopColor;
|
|
platformColors.chevron = colors.alternativeTextColor ?? colors.darkGray;
|
|
}
|
|
}
|
|
|
|
BlueCurrentTheme.updateColorScheme();
|