diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index 6dba39e891984..c84a4df670002 100644 --- a/extensions/theme-abyss/themes/abyss-color-theme.json +++ b/extensions/theme-abyss/themes/abyss-color-theme.json @@ -359,9 +359,7 @@ // "tab.activeBackground": "", "tab.inactiveBackground": "#10192c", // "tab.activeForeground": "", - // "tab.activeWithInactiveEditorGroupForeground": "", // "tab.inactiveForeground": "", - // "tab.inactiveWithInactiveEditorGroupForeground": "", // Workbench: Activity Bar "activityBar.background": "#051336", diff --git a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json index 4c9c23c4ba6bb..c1792c047ce14 100644 --- a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json +++ b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json @@ -398,8 +398,6 @@ "tab.inactiveBackground": "#004052", "editorGroupHeader.tabsBackground": "#004052", "tab.border": "#003847", - "tab.activeWithInactiveEditorGroupForeground": "#93A1A1", - "tab.inactiveWithInactiveEditorGroupForeground": "#93A1A1", // Workbench: Activity Bar "activityBar.background": "#003847", diff --git a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json index f15a87fc378c1..ebdc00f303e6b 100644 --- a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json +++ b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json @@ -321,8 +321,6 @@ "tab.inactiveBackground": "#CCC4B0", "editorGroupHeader.tabsBackground": "#CCC4B0", "tab.border": "#DDD6C1", - // "tab.activeWithInactiveEditorGroupForeground": "#586E75", - // "tab.inactiveWithInactiveEditorGroupForeground": "#586E75", "debugToolBar.background": "#EEE8D5", "dropdown.background": "#EEE8D5", "dropdown.border": "#2AA19899", diff --git a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts index c27e28629ef33..fa83f95df080d 100644 --- a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts @@ -12,7 +12,7 @@ import DOM = require('vs/base/browser/dom'); import { TitleControl } from 'vs/workbench/browser/parts/editor/titleControl'; import { EditorLabel } from 'vs/workbench/browser/labels'; import { Verbosity } from 'vs/platform/editor/common/editor'; -import { TAB_ACTIVE_GROUP_INACTIVE_FOREGROUND, TAB_ACTIVE_GROUP_ACTIVE_FOREGROUND } from 'vs/workbench/common/theme'; +import { TAB_ACTIVE_FOREGROUND } from 'vs/workbench/common/theme'; export class NoTabsTitleControl extends TitleControl { private titleContainer: HTMLElement; @@ -126,11 +126,19 @@ export class NoTabsTitleControl extends TitleControl { } this.editorLabel.setLabel({ name, description, resource }, { title, italic: !isPinned, extraClasses: ['title-label'] }); - if (isActive) { - this.editorLabel.element.style.color = this.getColor(TAB_ACTIVE_GROUP_ACTIVE_FOREGROUND); - } else { - this.editorLabel.element.style.color = this.getColor(TAB_ACTIVE_GROUP_INACTIVE_FOREGROUND); - } + this.editorLabel.element.style.color = this.getColor(TAB_ACTIVE_FOREGROUND, (color, theme) => { + if (!isActive) { + if (theme.type === 'dark') { + return color.transparent(0.5); + } + + if (theme.type === 'light') { + return color.transparent(0.7); + } + } + + return color; + }); // Update Editor Actions Toolbar this.updateEditorActionsToolbar(); diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index b708c5a6383fd..723495d1b7f69 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -40,7 +40,7 @@ import { LinkedMap } from 'vs/base/common/map'; import { DelegatingWorkbenchEditorService } from 'vs/workbench/services/editor/browser/editorService'; import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection'; import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_GROUP_ACTIVE_FOREGROUND, TAB_ACTIVE_GROUP_INACTIVE_FOREGROUND, TAB_INACTIVE_GROUP_ACTIVE_FOREGROUND, TAB_INACTIVE_GROUP_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; +import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; import { activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; interface IEditorInputLabel { @@ -291,14 +291,38 @@ export class TabsTitleControl extends TitleControl { DOM.addClass(tabContainer, 'active'); tabContainer.setAttribute('aria-selected', 'true'); tabContainer.style.backgroundColor = this.getColor(TAB_ACTIVE_BACKGROUND); - tabLabel.element.style.color = this.getColor(isGroupActive ? TAB_ACTIVE_GROUP_ACTIVE_FOREGROUND : TAB_ACTIVE_GROUP_INACTIVE_FOREGROUND); + tabLabel.element.style.color = this.getColor(TAB_ACTIVE_FOREGROUND, (color, theme) => { + if (!isGroupActive) { + if (theme.type === 'dark') { + return color.transparent(0.5); + } + + if (theme.type === 'light') { + return color.transparent(0.7); + } + } + + return color; + }); this.activeTab = tabContainer; } else { DOM.removeClass(tabContainer, 'active'); tabContainer.setAttribute('aria-selected', 'false'); tabContainer.style.backgroundColor = this.getColor(TAB_INACTIVE_BACKGROUND); - tabLabel.element.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_GROUP_ACTIVE_FOREGROUND : TAB_INACTIVE_GROUP_INACTIVE_FOREGROUND); + tabLabel.element.style.color = this.getColor(TAB_INACTIVE_FOREGROUND, (color, theme) => { + if (!isGroupActive) { + if (theme.type === 'dark') { + return color.transparent(0.5).transparent(0.5); + } + + if (theme.type === 'light') { + return color.transparent(0.7).transparent(0.5); + } + } + + return color; + }); } // Dirty State diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index f4bbe73032f3e..7f82968b4b2bf 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -35,31 +35,18 @@ export const TAB_BORDER = registerColor('tab.border', { hc: contrastBorder }, nls.localize('tabBorder', "Border to separate tabs from each other. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); -export const TAB_ACTIVE_GROUP_ACTIVE_FOREGROUND = registerColor('tab.activeForeground', { +export const TAB_ACTIVE_FOREGROUND = registerColor('tab.activeForeground', { dark: Color.white, light: Color.fromRGBA(new RGBA(51, 51, 51)), hc: Color.white }, nls.localize('tabActiveEditorGroupActiveForeground', "Active tab foreground color in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); -export const TAB_ACTIVE_GROUP_INACTIVE_FOREGROUND = registerColor('tab.activeWithInactiveEditorGroupForeground', { - dark: Color.white.transparent(0.5), - light: Color.fromRGBA(new RGBA(51, 51, 51)).transparent(0.7), - hc: Color.white -}, nls.localize('tabActiveEditorGroupInactiveForeground', "Active tab foreground color in an inactive group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); - -export const TAB_INACTIVE_GROUP_ACTIVE_FOREGROUND = registerColor('tab.inactiveForeground', { +export const TAB_INACTIVE_FOREGROUND = registerColor('tab.inactiveForeground', { dark: Color.white.transparent(0.5), light: Color.fromRGBA(new RGBA(51, 51, 51)).transparent(0.5), hc: Color.white }, nls.localize('tabInactiveEditorGroupActiveForeground', "Inactive tab foreground color in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); -export const TAB_INACTIVE_GROUP_INACTIVE_FOREGROUND = registerColor('tab.inactiveWithInactiveEditorGroupForeground', { - dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.5).transparent(0.5), - light: Color.fromRGBA(new RGBA(51, 51, 51)).transparent(0.5).transparent(0.7), - hc: Color.white -}, nls.localize('tabInactiveEditorGroupInactiveForeground', "Inactive tab foreground color in an inactive group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); - - // < --- Editors --- > @@ -298,8 +285,12 @@ export class Themable extends Disposable { // Subclasses to override } - protected getColor(id: string): string { - const color = this.theme.getColor(id); + protected getColor(id: string, modify?: (color: Color, theme: ITheme) => Color): string { + let color = this.theme.getColor(id); + + if (color && modify) { + color = modify(color, this.theme); + } return color ? color.toString() : null; }