diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index ede552c409a..1e942a3f25a 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -18,7 +18,8 @@ const globalStyles = { color: { linkColor: '#0099CC', highlightBlue: '#37A9FD', - privateTabBackground: '#392e54', + privateTabBackground: '#665296', + privateTabBackgroundActive: '#4b3c6e', bitcoinOrange: '#f7931a', chromePrimary: '#F3F3F3', chromeSecondary: '#d3d3d3', diff --git a/app/renderer/components/styles/tab.js b/app/renderer/components/styles/tab.js index 6622d1ecbe0..6594fb0ecbb 100644 --- a/app/renderer/components/styles/tab.js +++ b/app/renderer/components/styles/tab.js @@ -99,16 +99,16 @@ const styles = StyleSheet.create({ }, activePrivateTab: { - background: 'rgb(247, 247, 247)', - color: 'black' + background: globalStyles.color.privateTabBackgroundActive, + color: '#fff' }, private: { - background: '#9c8dc1', // (globalStyles.color.privateTabBackground, 40%) + background: globalStyles.color.privateTabBackground, color: '#fff', ':hover': { - background: '#665296', // (globalStyles.color.privateTabBackground, 20%) + background: globalStyles.color.privateTabBackgroundActive, color: '#fff' } }, diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js index a3eac1c0b29..410bc2cf35d 100644 --- a/app/renderer/components/tabContent.js +++ b/app/renderer/components/tabContent.js @@ -205,7 +205,9 @@ class TabTitle extends ImmutableComponent { get themeColor () { const themeColor = this.props.tabProps.get('themeColor') || this.props.tabProps.get('computedThemeColor') const defaultColor = this.props.tabProps.get('isPrivate') ? globalStyles.color.white100 : globalStyles.color.black100 - return this.props.isActive && this.props.paintTabs && themeColor + const activeNonPrivateTab = !this.props.tabProps.get('isPrivate') && this.props.isActive + + return activeNonPrivateTab && this.props.paintTabs && !!themeColor ? getTextColorForBackground(themeColor) : defaultColor } diff --git a/js/components/tab.js b/js/components/tab.js index 2cf1fd5139b..ebf9e7476d6 100644 --- a/js/components/tab.js +++ b/js/components/tab.js @@ -262,6 +262,9 @@ class Tab extends ImmutableComponent { this.props.isActive && this.props.tab.get('isPrivate') && styles.activePrivateTab, playIndicatorBreakpoint && this.canPlayAudio && styles.narrowViewPlayIndicator, this.props.isActive && this.themeColor && perPageStyles.themeColor, + // Private color should override themeColor + this.props.tab.get('isPrivate') && styles.private, + this.props.isActive && this.props.tab.get('isPrivate') && styles.activePrivateTab, !this.isPinned && this.narrowView && styles.tabNarrowView, !this.isPinned && this.narrowestView && styles.tabNarrowestView, !this.isPinned && this.props.tab.get('breakpoint') === 'smallest' && styles.tabMinAllowedSize