Skip to content

Commit 58df79b

Browse files
wewoorwewoor
committed
fix: update the color theme
1 parent 1faf151 commit 58df79b

14 files changed

+84
-36
lines changed

‎src/components/collapse/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
font-weight: bold;
2929
height: 22px;
3030
outline: none;
31-
padding: 1px 5px;
31+
padding: 1px 2px;
3232

3333
&-collapsable-only {
3434
cursor: default;

‎src/components/menu/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
#{$menu},
44
#{$subMenu} {
55
font-size: 13px;
6+
line-height: 13px;
67
}
78

89
#{$menu} {

‎src/services/theme/colorRegistry.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const defaultVS = {
1010
errorForeground: '#A1260D',
1111
descriptionForeground: '#717171',
1212
'icon.foreground': '#424242',
13-
focusBorder: Color.fromHex('#007ACC').transparent(0.4),
13+
focusBorder: '#3794FF',
1414
'widget.shadow': '#A8A8A8',
1515

1616
'textSeparator.foreground': '#0000002e',
@@ -85,7 +85,7 @@ const defaultDark = {
8585
errorForeground: '#F48771',
8686
descriptionForeground: Color.fromHex('#CCCCCC').transparent(0.7),
8787
'icon.foreground': '#C5C5C5',
88-
focusBorder: Color.fromHex('#0E639C').transparent(0.8),
88+
focusBorder: '#3794FF',
8989

9090
'textSeparator.foreground': '#ffffff2e',
9191
'textLink.foreground': '#3794FF',

‎src/services/theme/colorThemeService.ts

+1
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export class ColorThemeService implements IColorThemeService {
8282

8383
// Update monaco-editor theme
8484
monacoEditor.defineTheme(DEFAULT_THEME_CLASS_NAME, themeData);
85+
console.log('themeData:', themeData);
8586
monacoEditor.setTheme(DEFAULT_THEME_CLASS_NAME);
8687
} else {
8788
logger.error(`Can't get any theme by this id:` + id);

‎src/style/mo.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
}
5353

5454
.mac {
55-
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
55+
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
5656
}
5757

5858
.center {

‎src/style/theme/actionbar.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
color: var(--foreground);
77
outline-color: var(--listFilterWidget-outline);
88

9+
&__item:hover {
10+
background: var(--toolbar-hoverBackground);
11+
outline-color: var(--toolbar-hoverOutline);
12+
}
13+
14+
&__item:hover,
915
&__item--checked {
10-
background-color: var(--actionBar-checkedBackground);
16+
background-color: var(--toolbar-activeBackground);
1117
}
1218
}

‎src/style/theme/activitybar.scss

+7-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
#{$activityBar} {
55
background-color: var(--activityBar-background);
66
border-color: var(--activityBar-border);
7+
color: var(--activityBar-foreground);
78

89
&__indicator {
910
background: var(--activityBar-activeBorder);
@@ -17,12 +18,14 @@
1718
}
1819
}
1920

20-
#{$activityBar}__item {
21-
color: var(--activityBar-foreground);
21+
&__item {
22+
color: var(--activityBar-inactiveForeground);
2223

23-
&:hover {
24+
&:hover,
25+
&__label .codicon {
2426
background-color: var(--activityBar-activeBackground);
25-
color: var(--activityBar-foreground);
27+
border-color: var(--activityBar-activeBorder);
28+
color: var(--activityBar-activeBorder);
2629
}
2730
}
2831
}

‎src/style/theme/editor.scss

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
// =============== Editor =============== //
44
#{$editor} {
5+
background: var(--editorGroup-background);
6+
57
&__group-breadcrumb,
68
&__group-container {
79
background-color: var(--editor-background);

‎src/style/theme/input.scss

-9
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,3 @@
1818
opacity: 1;
1919
}
2020
}
21-
22-
#{$prefix} {
23-
input {
24-
background: var(--input-background);
25-
border-color: var(--input-border);
26-
color: var(--input-foreground);
27-
outline: none;
28-
}
29-
}

‎src/style/theme/menu.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
}
1010

1111
&-active {
12-
background-color: var(--button-background);
13-
color: var(--button-foreground);
12+
background-color: var(--menu-selectionBackground);
13+
color: var(--menu-selectionForeground);
1414
}
1515
}
1616

‎src/style/theme/panel.scss

+21
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,25 @@
44
#{$panel} {
55
background-color: var(--panel-background);
66
border-color: var(--panel-border);
7+
8+
&__header {
9+
#{$tab}__item {
10+
color: var(--panelTitle-inactiveForeground);
11+
12+
&--active {
13+
border-color: var(--panelTitle-activeBorder);
14+
color: var(--panelTitle-activeForeground);
15+
16+
&::after {
17+
background-color: var(--panelTitle-activeBorder);
18+
bottom: 2px;
19+
content: ' ';
20+
height: 1px;
21+
left: 10px;
22+
position: absolute;
23+
right: 10px;
24+
}
25+
}
26+
}
27+
}
728
}

‎src/style/theme/tabs.scss

+9-13
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,30 @@
44
#{$tabs} {
55
background-color: var(--editorGroupHeader-tabsBackground);
66

7-
&__content {
8-
color: var(--tabItem-foreground);
9-
}
10-
117
&--line {
12-
border-bottom: 1px solid var(--tabHeader-border);
8+
border-bottom: 1px solid var(--tab-border);
139
}
1410

1511
#{$tab} {
1612
&__item {
17-
background: var(--tabItem-background);
18-
border-right: 1px solid var(--tabItem-border);
19-
color: var(--tabItem-foreground);
13+
background: var(--tab-inactiveBackground);
14+
border-right: 1px solid var(--tab-border);
15+
color: var(--tab-inactiveForeground);
2016

2117
&__op {
2218
&__dot::after {
23-
background: var(--tabItem-activeForeground);
19+
background: var(--tab-activeForeground);
2420
}
2521
}
2622

2723
&--active {
28-
background: var(--tabItem-activeBackground);
29-
border-bottom-color: var(--tabItem-activeForeground);
30-
color: var(--tabItem-activeForeground);
24+
background: var(--tab-activeBackground);
25+
border-bottom-color: var(--tab-activeBorder);
26+
color: var(--tab-activeForeground);
3127
}
3228

3329
&--close {
34-
color: var(--tabItem-activeForeground);
30+
color: var(--tab-activeForeground);
3531
}
3632
}
3733
}

‎src/style/theme/workbench.scss

+25-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
11
@import 'mo/style/common';
22

33
// =============== Workbench not customizable =============== //
4-
#{$workbench} {
4+
.#{$prefix} {
55
background-color: var(--workbenchBackground);
66
color: var(--foreground);
77

88
*::selection {
9-
background-color: var(--editorSelectionBackground);
9+
background-color: var(--editor-selectionBackground);
10+
}
11+
12+
input,
13+
select {
14+
background: var(--input-background);
15+
border-color: var(--input-border);
16+
color: var(--input-foreground);
17+
18+
&::placeholder {
19+
color: var(--input-placeholderForeground);
20+
}
21+
}
22+
23+
input:focus,
24+
input:active {
25+
border-color: var(--focusBorder);
26+
outline-color: var(--focusBorder);
27+
outline-offset: -1;
28+
outline-style: solid;
29+
}
30+
31+
code {
32+
background: var(--textCodeBlock-background);
1033
}
1134

1235
&.codicon {

‎src/workbench/panel/panel.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ export function Panel(props: IPanel & IPanelController) {
2727
return (
2828
<div className={defaultClassName}>
2929
<div className={panelHeaderClassName}>
30-
<Tabs data={data} onSelectTab={onTabChange} />
30+
<Tabs
31+
activeTab={current?.id}
32+
data={data}
33+
onSelectTab={onTabChange}
34+
/>
3135
<ActionBar
3236
className={panelToolbarClassName}
3337
data={toolboxData || []}

0 commit comments

Comments
 (0)