Skip to content

Commit

Permalink
themes - get rid of tab.activeWithInactiveEditorGroupForeground and i…
Browse files Browse the repository at this point in the history
…nactiveWithInactiveEditorGroupForeground
  • Loading branch information
bpasero committed Apr 28, 2017
1 parent 6ee1fb1 commit 830b94b
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 32 deletions.
2 changes: 0 additions & 2 deletions extensions/theme-abyss/themes/abyss-color-theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -359,9 +359,7 @@
// "tab.activeBackground": "",
"tab.inactiveBackground": "#10192c",
// "tab.activeForeground": "",
// "tab.activeWithInactiveEditorGroupForeground": "",
// "tab.inactiveForeground": "",
// "tab.inactiveWithInactiveEditorGroupForeground": "",

// Workbench: Activity Bar
"activityBar.background": "#051336",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 14 additions & 6 deletions src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand Down
30 changes: 27 additions & 3 deletions src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down
25 changes: 8 additions & 17 deletions src/vs/workbench/common/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 --- >

Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit 830b94b

Please sign in to comment.