Skip to content

Commit c509c76

Browse files
mvm-sapmvm-sap
committed
Improvement to the existing dark theme
Current dark theme has many issues with the background color and contrasts. As a first step to improve dark theme, we have changed the background color of the editor, making it the darkest when compared to other views. Also, the working of tabs are made simple wrt to the background colors and gradients. These changes were made by referring other IDEs like VS Code and IntelliJ. Now, eclipse dark theme also looks modern.
1 parent 4319f36 commit c509c76

File tree

4 files changed

+153
-11
lines changed

4 files changed

+153
-11
lines changed

‎bundles/org.eclipse.ui.themes/css/dark/e4-dark_ide_colorextensions.css‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -122,25 +122,25 @@ ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_SELECTED_TEXT_COLOR {
122122
}
123123

124124
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_UNSELECTED_TABS_COLOR_START {
125-
color: #494A4D;
125+
color: #48484c;
126126
category: '#org-eclipse-ui-presentation-default';
127127
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_UNSELECTED_TABS_COLOR_START');
128128
}
129129

130130
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_UNSELECTED_TABS_COLOR_END {
131-
color: #404043;
131+
color: #48484c;
132132
category: '#org-eclipse-ui-presentation-default';
133133
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_UNSELECTED_TABS_COLOR_END');
134134
}
135135

136136
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_BG_START {
137-
color: #2B2C2D;
137+
color: #48484c;
138138
category: '#org-eclipse-ui-presentation-default';
139139
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_TAB_BG_START');
140140
}
141141

142142
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_BG_END {
143-
color: #292929;
143+
color: #48484c;
144144
category: '#org-eclipse-ui-presentation-default';
145145
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_TAB_BG_END');
146146
}
@@ -158,25 +158,25 @@ ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_INNER_KEYLINE_COLOR {
158158
}
159159

160160
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_OUTLINE_COLOR {
161-
color: #4B4C4F;
161+
color: #48484c;
162162
category: '#org-eclipse-ui-presentation-default';
163163
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_TAB_OUTLINE_COLOR');
164164
}
165165

166166
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_TEXT_COLOR {
167-
color: #DDDDDD;
167+
color: #bbbbbb;
168168
category: '#org-eclipse-ui-presentation-default';
169169
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_TAB_TEXT_COLOR');
170170
}
171171

172172
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_UNSELECTED_TEXT_COLOR {
173-
color: #DDDDDD;
173+
color: #bbbbbb;
174174
category: '#org-eclipse-ui-presentation-default';
175175
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_TAB_UNSELECTED_TEXT_COLOR');
176176
}
177177

178178
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_SELECTED_TEXT_COLOR {
179-
color: #f7f8f8;
179+
color: #ffffff;
180180
category: '#org-eclipse-ui-presentation-default';
181181
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_TAB_SELECTED_TEXT_COLOR');
182182
}
@@ -194,13 +194,13 @@ ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END {
194194
}
195195

196196
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_TEXT_COLOR {
197-
color: #CCCCCC;
197+
color: #bbbbbb;
198198
category: '#org-eclipse-ui-presentation-default';
199199
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_NOFOCUS_TAB_TEXT_COLOR');
200200
}
201201

202202
ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_SELECTED_TEXT_COLOR {
203-
color: #CCCCCC;
203+
color: #ffffff;
204204
category: '#org-eclipse-ui-presentation-default';
205205
label: url('platform:/plugin/org.eclipse.ui.themes?message=ACTIVE_NOFOCUS_TAB_SELECTED_TEXT_COLOR');
206206
}

‎bundles/org.eclipse.ui.themes/css/dark/e4-dark_preferencestyle.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,26 @@
1616

1717
/* ############################## Eclipse UI properties ############################## */
1818

19+
IEclipsePreferences#org-eclipse-ui-workbench:com-sap-adt-tools-abapsource-ui {
20+
preferences:
21+
'com.sap.adt.tools.abapsource.ui.keyword=86,165,228'
22+
'com.sap.adt.tools.abapsource.ui.literal=30,181,64'
23+
'com.sap.adt.tools.abapsource.ui.literal.number=91,233,254'
24+
'com.sap.adt.tools.abapsource.ui.comment=128,128,128' /* same as in JDT */
25+
'com.sap.adt.tools.abapsource.ui.error=208,0,3'
26+
'com.sap.adt.tools.abapsource.ui.default=204,204,204' /* identifiers: same as normal font color e.g. in project explorer */
27+
'com.sap.adt.tools.abapsource.ui.sqlScriptBackground= 95,98,98' /* just some lighter black */
28+
'com.sap.adt.tools.abapsource.ui.abapMethodBackground=20,20,20' /* same as eclipse default text editor background */
29+
'com.sap.adt.tools.abapsource.ui.enhancementPopupSelectedCodeBackground=41,41,41'
30+
}
31+
1932

2033
IEclipsePreferences#org-eclipse-ui-editors:org-eclipse-ui-themes { /* pseudo attribute added to allow contributions without replacing this node, see Bug 466075 */
2134
preferences:
2235
'AbstractTextEditor.Color.Background.SystemDefault=false'
2336
'AbstractTextEditor.Color.SelectionForeground.SystemDefault=false'
2437
'AbstractTextEditor.Color.SelectionBackground.SystemDefault=false'
25-
'AbstractTextEditor.Color.Background=47,47,47'
38+
'AbstractTextEditor.Color.Background=30,31,34'
2639
'AbstractTextEditor.Color.Foreground.SystemDefault=false'
2740
'AbstractTextEditor.Color.SelectionBackground=33,66,131'
2841
'AbstractTextEditor.Color.SelectionForeground=147,161,161'

‎bundles/org.eclipse.ui.themes/css/e4-dark_mac.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,68 @@ Button {
5353
color: unset;
5454
}
5555

56+
/* Below changes include enhancement to the existing dark theme with ref to other IDEs like IntelliJ, VS Code etc. */
57+
58+
/* Inactive view tabs */
59+
.MPartStack {
60+
swt-draw-custom-tab-content-background: true;
61+
swt-unselected-hot-tab-color-background: #48484c;
62+
}
63+
64+
CTabFolder{
65+
swt-selected-tab-highlight: #2b79d7;
66+
swt-selected-highlight-top: false;
67+
}
68+
69+
CTabFolder.active {
70+
swt-selected-tab-highlight: #2b79d7;
71+
swt-selected-highlight-top: false;
72+
}
73+
74+
/*text color of selected tab in editor */
75+
#org-eclipse-ui-editorss CTabItem:selected{
76+
color: '#FFFFFF';
77+
}
78+
79+
#org-eclipse-ui-editorss CTabFolder{
80+
swt-selected-tab-fill : '#1E1F22';
81+
swt-selected-tab-highlight: '#2b79d7';
82+
swt-selected-highlight-top: true;
83+
}
84+
85+
#org-eclipse-ui-editorss CTabFolder.active {
86+
swt-selected-tab-highlight: '#2b79d7';
87+
swt-selected-highlight-top: true;
88+
}
89+
90+
CTabFolder[style~='SWT.DOWN'][style~='SWT.BOTTOM'] {
91+
/* Set the styles for the bottom inner tabs (Bug 430051): */
92+
swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
93+
swt-selected-tab-fill: #1E1F22;
94+
swt-unselected-tabs-color: #48484c;
95+
swt-unselected-hot-tab-color-background: #2f2f2f;
96+
swt-selected-tab-highlight: #2b79d7;
97+
swt-selected-highlight-top: false;
98+
}
99+
100+
#DebugBreadcrumbItemComposite,
101+
#DebugBreadcrumbItemDropDownToolBar,
102+
#DebugBreadcrumbItemDetailComposite,
103+
#DebugBreadcrumbItemDetailImageComposite,
104+
#DebugBreadcrumbItemDetailImageLabel,
105+
#DebugBreadcrumbItemDetailTextComposite,
106+
#DebugBreadcrumbItemDetailTextLabel {
107+
background-color: '#1E1F22';
108+
}
109+
110+
.MPart Form Composite,
111+
.MPart Form Composite Tree,
112+
.MPartStack.active .MPart Form Composite Tree
113+
{
114+
background-color: #1E1F22;
115+
}
116+
117+
.MPart Form AdtFormToolkit-AdtHyperLink{
118+
background-color: inherit;
119+
}
120+

‎bundles/org.eclipse.ui.themes/css/e4-dark_win.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,67 @@ ImageBasedFrame,
135135
color: #DDDDDD;
136136
}
137137

138+
/* Below changes include enhancement to the existing dark theme with ref to other IDEs like IntelliJ, VS Code etc. */
139+
140+
/* Inactive view tabs */
141+
.MPartStack {
142+
swt-draw-custom-tab-content-background: true;
143+
swt-unselected-hot-tab-color-background: #48484c;
144+
}
145+
146+
CTabFolder{
147+
swt-selected-tab-highlight: #2b79d7;
148+
swt-selected-highlight-top: false;
149+
}
150+
151+
CTabFolder.active {
152+
swt-selected-tab-highlight: #2b79d7;
153+
swt-selected-highlight-top: false;
154+
}
155+
156+
/*text color of selected tab in editor */
157+
#org-eclipse-ui-editorss CTabItem:selected{
158+
color: '#FFFFFF';
159+
}
160+
161+
#org-eclipse-ui-editorss CTabFolder{
162+
swt-selected-tab-fill : '#1E1F22';
163+
swt-selected-tab-highlight: '#2b79d7';
164+
swt-selected-highlight-top: true;
165+
}
166+
167+
#org-eclipse-ui-editorss CTabFolder.active {
168+
swt-selected-tab-highlight: '#2b79d7';
169+
swt-selected-highlight-top: true;
170+
}
171+
172+
CTabFolder[style~='SWT.DOWN'][style~='SWT.BOTTOM'] {
173+
/* Set the styles for the bottom inner tabs (Bug 430051): */
174+
swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
175+
swt-selected-tab-fill: #1E1F22;
176+
swt-unselected-tabs-color: #48484c;
177+
swt-unselected-hot-tab-color-background: #2f2f2f;
178+
swt-selected-tab-highlight: #2b79d7;
179+
swt-selected-highlight-top: false;
180+
}
181+
182+
#DebugBreadcrumbItemComposite,
183+
#DebugBreadcrumbItemDropDownToolBar,
184+
#DebugBreadcrumbItemDetailComposite,
185+
#DebugBreadcrumbItemDetailImageComposite,
186+
#DebugBreadcrumbItemDetailImageLabel,
187+
#DebugBreadcrumbItemDetailTextComposite,
188+
#DebugBreadcrumbItemDetailTextLabel {
189+
background-color: '#1E1F22';
190+
}
191+
192+
.MPart Form Composite,
193+
.MPart Form Composite Tree,
194+
.MPartStack.active .MPart Form Composite Tree
195+
{
196+
background-color: #1E1F22;
197+
}
198+
199+
.MPart Form AdtFormToolkit-AdtHyperLink{
200+
background-color: inherit;
201+
}

0 commit comments

Comments
 (0)