Skip to content

Commit

Permalink
[theming] fix activity bar icon colors
Browse files Browse the repository at this point in the history 
Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>
  • Loading branch information
@akosyakov
akosyakov committed Dec 27, 2019
1 parent 7b42a8e commit 872e810
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 30 deletions.
61 changes: 56 additions & 5 deletions packages/core/src/browser/common-frontend-contribution.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -888,11 +888,62 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
{ id: 'button.hoverBackground', defaults: { dark: Color.lighten('button.background', 0.2), light: Color.darken('button.background', 0.2) }, description: 'Button background color when hovering.' },

// Activity Bar colors should be aligned with https://code.visualstudio.com/api/references/theme-color#activity-bar
{ id: 'activityBar.background', defaults: { dark: '#333333', light: '#2C2C2C', hc: '#000000' }, description: 'Activity bar background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
{ id: 'activityBar.border', defaults: { hc: '#6FC3DF' }, description: 'Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
{ id: 'activityBar.activeBorder', defaults: { dark: '#FFFFFF', light: '#FFFFFF', hc: '#FFFFFF' }, description: 'Activity bar border color for the active item. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
{ id: 'activityBar.foreground', defaults: { dark: '#FFFFFF', light: '#FFFFFF', hc: '#FFFFFF' }, description: 'Activity bar item foreground color when it is active. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
{ id: 'activityBar.inactiveForeground', defaults: { dark: '#FFFFFF', light: '#FFFFFF', hc: '#FFFFFF' }, description: 'Activity bar item foreground color when it is active. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
{
id: 'activityBar.background', defaults: {
dark: '#333333',
light: '#2C2C2C',
hc: '#000000'
}, description: 'Activity bar background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
}, {
id: 'activityBar.foreground', defaults: {
dark: Color.white,
light: Color.white,
hc: Color.white
}, description: 'Activity bar item foreground color when it is active. The activity bar is showing on the far left or right and allows to switch between views of the side bar.',
}, {
id: 'activityBar.inactiveForeground', defaults: {
dark: Color.transparent('activityBar.foreground', 0.4),
light: Color.transparent('activityBar.foreground', 0.4),
hc: Color.white
}, description: 'Activity bar item foreground color when it is inactive. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
},
{
id: 'activityBar.border', defaults: {
hc: 'contrastBorder'
}, description: 'Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
},
{
id: 'activityBar.activeBorder', defaults: {
dark: 'activityBar.foreground',
light: 'activityBar.foreground',
}, description: 'Activity bar border color for the active item. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
},
{
id: 'activityBar.activeFocusBorder',
description: 'Activity bar focus border color for the active item. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
},
{ id: 'activityBar.activeBackground', description: 'Activity bar background color for the active item. The activity bar is showing on the far left or right and allows to switch between views of the side bar.' },
{
id: 'activityBar.dropBackground', defaults: {
dark: Color.transparent('#ffffff', 0.12),
light: Color.transparent('#ffffff', 0.12),
hc: Color.transparent('#ffffff', 0.12),
}, description: 'Drag and drop feedback color for the activity bar items. The color should have transparency so that the activity bar entries can still shine through. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
},
{
id: 'activityBarBadge.background', defaults: {
dark: '#007ACC',
light: '#007ACC',
hc: '#000000'
}, description: 'Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
},
{
id: 'activityBarBadge.foreground', defaults: {
dark: Color.white,
light: Color.white,
hc: Color.white
}, description: 'Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.'
},

// Input control colors should be aligned with https://code.visualstudio.com/api/references/theme-color#input-control
// if not yet contributed by Monaco, check runtime css variables to learn
Expand Down
51 changes: 26 additions & 25 deletions packages/core/src/browser/style/sidepanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

.p-TabBar.theia-app-sides {
display: block;
color: var(--theia-activityBar-foreground);
color: var(--theia-activityBar-inactiveForeground);
background: var(--theia-activityBar-background);
font-size: var(--theia-ui-font-size1);
min-width: var(--theia-private-sidebar-tab-width);
Expand All @@ -53,6 +53,7 @@
align-items: center;
min-height: var(--theia-private-sidebar-tab-height);
cursor: pointer;
opacity: 0.6;
}

.p-TabBar.theia-app-left .p-TabBar-tab {
Expand All @@ -71,10 +72,11 @@
border-left: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
}

.p-TabBar.theia-app-sides .p-TabBar-tab.p-mod-current {
.p-TabBar.theia-app-sides .p-TabBar-tab.p-mod-current,
.p-TabBar.theia-app-sides .p-TabBar-tab:hover {
color: var(--theia-activityBar-foreground);
opacity: 1.0;
background: none;
background-color: var(--theia-activityBar-activeBackground);
min-height: var(--theia-private-sidebar-tab-height);
height: var(--theia-private-sidebar-tab-height);
border-top: none;
Expand Down Expand Up @@ -103,41 +105,40 @@
display: none;
}

/* inactive common icons */
.p-TabBar.theia-app-sides .p-TabBar-tabIcon {
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
text-align: center;
color: inherit;
background-color: var(--theia-activityBar-inactiveForeground);

/* svg */
width: var(--theia-private-sidebar-icon-size);
height: var(--theia-private-sidebar-icon-size);
background-color: var(--theia-activityBar-inactiveForeground);
opacity: 0.6;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: var(--theia-private-sidebar-icon-size);
-webkit-mask-size: var(--theia-private-sidebar-icon-size);
}

.p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon,
.p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon:hover,
.p-TabBar.theia-app-sides .p-mod-current .file-icon.p-TabBar-tabIcon,
.p-TabBar.theia-app-sides .fa.p-TabBar-tabIcon:hover,
.p-TabBar.theia-app-sides .p-mod-current .fa.p-TabBar-tabIcon {
background-color: var(--theia-activityBar-foreground);
opacity: 1.0;
background: none;
/* inactive file icons */
.p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon {
background: inherit !important;
}

.p-TabBar.theia-app-sides .p-TabBar-tabIcon:hover,
.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon {
opacity: 1.0;
/* inactive font-awesome icons */
.p-TabBar.theia-app-sides .fa.p-TabBar-tabIcon {
background: none !important;
}

.p-TabBar.theia-app-sides .fa.p-TabBar-tabIcon {
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
opacity: 0.6;
text-align: center;
background: none;
color: var(--theia-activityBar-inactiveForeground);
/* active icons */
.p-TabBar.theia-app-sides .p-TabBar-tabIcon:hover,
.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon {
color: var(--theia-activityBar-foreground);
background-color: var(--theia-activityBar-foreground);
}

.p-TabBar.theia-app-left .p-TabBar-tabLabel {
Expand Down

0 comments on commit 872e810

Please sign in to comment.