89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
// Copyright 2019-2020 @polkadot/extension-ui authors & contributors
|
|
// This software may be modified and distributed under the terms
|
|
// of the Apache-2.0 license. See the LICENSE file for details.
|
|
|
|
const darkTheme = {
|
|
accountBackground: '#1A1B20',
|
|
accountDotsIconColor: '#8E8E8E',
|
|
addAccountImageBackground: '#1A1B20',
|
|
background: '#26272C',
|
|
bodyColor: '#20222A',
|
|
borderRadius: '4px',
|
|
boxBorderColor: '#43444B',
|
|
boxMargin: '0.75rem 0',
|
|
boxPadding: '0 0.25rem',
|
|
boxShadow: 'rgba(0, 0, 0, 0.86)',
|
|
buttonBackground: '#E86F00',
|
|
buttonBackgroundDanger: '#AF1111',
|
|
buttonBackgroundDangerHover: '#D93B3B',
|
|
buttonBackgroundHover: '#ED9329',
|
|
buttonTextColor: '#FFFFFF',
|
|
errorBorderColor: '#7E3530',
|
|
errorColor: '#E42F2F',
|
|
fontFamily: 'Nunito, sans-serif',
|
|
fontSize: '16px',
|
|
highlightedAreaBackground: '#212226',
|
|
iconDangerColor: '#AF1111',
|
|
iconNeutralColor: '#8E8E8E',
|
|
iconWarningColor: '#FF7D01',
|
|
id: 'dark',
|
|
identiconBackground: '#F4F5F8',
|
|
inputBackground: '#111218',
|
|
inputBorderColor: '#43444B',
|
|
labelColor: '#9F9E99',
|
|
labelFontSize: '13px',
|
|
labelLineHeight: '18px',
|
|
lineHeight: '26px',
|
|
popupBackground: '#38393F',
|
|
primaryColor: '#FF7D01',
|
|
readonlyInputBackground: '#1A1B20',
|
|
subTextColor: '#DDD',
|
|
textColor: '#FFFFFF',
|
|
textColorDanger: '#FF8686'
|
|
};
|
|
|
|
const lightTheme: Theme = {
|
|
...darkTheme,
|
|
accountBackground: '#FFFFFF',
|
|
addAccountImageBackground: '#FFF',
|
|
background: '#FAFAFA',
|
|
bodyColor: '#FFFFFF',
|
|
boxBorderColor: '#DADFEA',
|
|
boxShadow: 'rgba(0, 0, 0, 0.06)',
|
|
buttonBackgroundDanger: '#DC2222',
|
|
errorBorderColor: '#E42F2F',
|
|
highlightedAreaBackground: '#EFEFEF',
|
|
iconDangerColor: '#DC2222',
|
|
iconNeutralColor: '#939CB1',
|
|
id: 'light',
|
|
inputBackground: '#FFFFFF',
|
|
inputBorderColor: '#DDE1EB',
|
|
labelColor: '#333333',
|
|
popupBackground: '#FFFFFF',
|
|
readonlyInputBackground: '#FFF',
|
|
subTextColor: '#454545',
|
|
textColor: '#242529',
|
|
textColorDanger: '#F24A4A'
|
|
};
|
|
|
|
export function chooseTheme (): AvailableThemes {
|
|
const preferredTheme = localStorage.getItem('theme');
|
|
|
|
if (preferredTheme) {
|
|
return preferredTheme === 'dark' ? 'dark' : 'light';
|
|
}
|
|
|
|
const isLightColorSchemePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
|
|
|
|
return isLightColorSchemePreferred ? 'light' : 'dark';
|
|
}
|
|
|
|
export declare type Theme = typeof darkTheme;
|
|
|
|
export const themes = {
|
|
dark: darkTheme,
|
|
light: lightTheme
|
|
};
|
|
|
|
export declare type AvailableThemes = keyof typeof themes;
|