From 4319f3657dc6af8f7297f55bda495191023044f8 Mon Sep 17 00:00:00 2001 From: Madhumitha M V Date: Thu, 18 Jul 2024 15:42:50 +0530 Subject: [PATCH 1/2] Improvement to the existing Light Theme As part of Eclipse modernization project, we have enhanced the look and feel of Eclipse IDE. This change includes improvements to the background color of Views and working of tabs. This has been done with reference to the other IDEs like VS Code, Intellij etc. --- .../css/e4_default_mac.css | 201 ++++++++++++++---- .../css/e4_default_win.css | 197 +++++++++++++++-- 2 files changed, 345 insertions(+), 53 deletions(-) diff --git a/bundles/org.eclipse.ui.themes/css/e4_default_mac.css b/bundles/org.eclipse.ui.themes/css/e4_default_mac.css index 90871c176a5..0fbc3fdd69b 100644 --- a/bundles/org.eclipse.ui.themes/css/e4_default_mac.css +++ b/bundles/org.eclipse.ui.themes/css/e4_default_mac.css @@ -18,88 +18,217 @@ @import url("platform:/plugin/org.eclipse.ui.themes/css/e4_basestyle.css"); ColorDefinition#org-eclipse-ui-workbench-ACTIVE_UNSELECTED_TABS_COLOR_START { - color: rgb(255, 255, 255); + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-ACTIVE_UNSELECTED_TABS_COLOR_END { - color: rgb(255, 255, 255); + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_UNSELECTED_TABS_COLOR_START { - color: rgb(255, 255, 255); + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_UNSELECTED_TABS_COLOR_END { - color: rgb(255, 255, 255); + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_OUTER_KEYLINE_COLOR { - color: rgb(230, 230, 230); + color: #EAEAEA; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_OUTLINE_COLOR { + color: #f8f8f8; } ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_BG_START { - color: rgb(230, 230, 230); + color: #f8f8f8; } ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_BG_END { - color: rgb(255, 255, 255); + color: #f8f8f8; +} + +ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_OUTER_KEYLINE_COLOR { + color: #EAEAEA; +} + +ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_OUTLINE_COLOR { + color: #f8f8f8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_BG_START { - color: rgb(240, 240, 240); + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_BG_END { - color: rgb(255, 255, 255); + color: #F8F8F8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START { + color: #F8F8F8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END { + color: #F8F8F8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_TEXT_COLOR { + color: #404040; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_TEXT_COLOR { + color: #404040; +} + +ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_TEXT_COLOR { + color: #404040; } .MTrimmedWindow { - background-color: rgb(255, 255, 255); + background-color: '#f8f8f8'; } .MTrimBar { - background-color: rgb(255, 255, 255); + background-color: '#f8f8f8'; } .MTrimBar#org-eclipse-ui-main-toolbar { - background-color: rgb(255, 255, 255); + background-color: '#f8f8f8'; +} + +CTabFolder Canvas { + background-color: rgb(255, 255, 255); +} + +/* Below changes were added to enhance the appearance of Light theme with ref to other IDEs like VS Code,IntelliJ etc. */ + +.MTrimBar#org-eclipse-ui-trim-status { + background-color: '#f8f8f8'; + } -.MPartStack { - swt-simple: false; - swt-unselected-tabs-color: rgb(255, 255, 255); - swt-outer-keyline-color: rgb(230, 230, 230); - swt-inner-keyline-color: rgb(200, 200, 200); - swt-tab-outline: rgb(230, 230, 230); +.View Composite, +.View Composite Tree, +.View Composite Label, +.View ToolBar, +.View Group, +.View Group Label, +.View Section, +.View Text[style~='SWT.READ_ONLY'], +.View SashForm, +.View OleFrame, +.View Browser, +.View WebSite, +.View StyledText[style~='SWT.READ_ONLY'], +.View Link, +.View FormText, +.View Hyperlink, +.View AtcProblemsViewWelcomePage StyledText +{ + background-color: #f8f8f8; } -.MPartStack.active > Composite { - swt-selected-tab-fill: '#org-eclipse-ui-workbench-ACTIVE_TAB_BG_START' '#org-eclipse-ui-workbench-ACTIVE_TAB_BG_END' 100% 5%; - background-color: rgb(255, 255, 255); +.View ToolItem, +.View Button{ + background-color: inherit; +} + +.View Section ToolItem{ + background-color: #EAEAEA; +} + +.View Composite PrependingAsteriskFilteredTree, +.View PrependingAsteriskFilteredTree Text, +.View LoggingViewFilteredTree, +.View LoggingViewFilteredTree Text, +.View Group Text, +.View Group Combo, +.View Composite Text, +.View OSLPackageSetTableComposite Label, +.View Button[style~='SWT.PUSH']{ + background-color: #ffffff; +} + +.MPartStack{ + swt-selected-tab-highlight: #5983c5; + swt-selected-highlight-top: false; } .MPartStack.active { - swt-tab-outline: rgb(180, 180, 180); - swt-outer-keyline-color: rgb(180, 180, 180); + swt-selected-tab-highlight: #5983c5; + swt-selected-highlight-top: false; } -CTabFolder.MArea { - background-color: rgb(255, 255, 255); - swt-selected-tab-fill: rgb(255, 255, 255); - swt-unselected-tabs-color: rgb(255, 255, 255); - swt-outer-keyline-color: rgb(230, 230, 230); - swt-inner-keyline-color: rgb(230, 230, 230); - swt-tab-outline: rgb(230, 230, 230); +/* text color of unselected tabs in editor*/ +#org-eclipse-ui-editorss CTabItem{ + color: '#6A6A6A'; + background-color: '#f8f8f8'; } -CTabFolder { - swt-selected-tabs-background: rgb(255, 255, 255); +/*text color and background color of selected tab in editor */ +#org-eclipse-ui-editorss CTabItem:selected{ + color: '#3b3b3b'; + background-color: '#FFFFFF'; } -CTabFolder CTabItem:selected { - background-color: rgb(230, 230, 230); +#org-eclipse-ui-editorss CTabFolder{ + swt-selected-tab-fill : '#ffffff'; + swt-selected-tab-highlight: '#5983c5'; + swt-selected-highlight-top: true; + swt-tab-outline:#eaeaea; + swt-tab-outer-keyline: #eaeaea; } -CTabFolder Canvas { - background-color: rgb(255, 255, 255); +#org-eclipse-ui-editorss CTabFolder.active { + swt-selected-tab-highlight: '#5983c5'; + swt-selected-highlight-top: true; +} + +#org-eclipse-e4-ui-compatibility-editor Composite{ + background-color: #ffffff; +} + +#DebugBreadcrumbItemComposite, +#DebugBreadcrumbItemDropDownToolBar, +#DebugBreadcrumbItemDetailComposite, +#DebugBreadcrumbItemDetailImageComposite, +#DebugBreadcrumbItemDetailImageLabel, +#DebugBreadcrumbItemDetailTextComposite, +#DebugBreadcrumbItemDetailTextLabel { + background-color: '#FFFFFF'; +} + +Composite.MPartSashContainer{ + background-color: #f8f8f8; +} + +Composite.MArea{ + background-color: #ffffff; +} + +.MPart CTabFolder{ + swt-outer-keyline-color: #ffffff; +} + +.MPart Form Composite, +.MPart Form Section, +.MPart Form Label, +.MPart Form Text, +.MPart Form Button, +.MPart Form Sash, +.MPart Form AdtFormToolkit-AdtHyperLink +{ + background-color: '#FFFFFF'; +} + +.MPartStack.active .MPart Form Composite, +.MPartStack.active .MPart Form Section, +.MPartStack.active .MPart Form Label, +.MPartStack.active .MPart Form Text, +.MPartStack.active .MPart Form Button, +.MPartStack.active .MPart Form Sash, +.MPartStack.active .MPart Form AdtFormToolkit-AdtHyperLink +{ + background-color: '#FFFFFF'; } diff --git a/bundles/org.eclipse.ui.themes/css/e4_default_win.css b/bundles/org.eclipse.ui.themes/css/e4_default_win.css index 6e66f99f665..e41ac0d3dcc 100644 --- a/bundles/org.eclipse.ui.themes/css/e4_default_win.css +++ b/bundles/org.eclipse.ui.themes/css/e4_default_win.css @@ -19,43 +19,71 @@ @import url("platform:/plugin/org.eclipse.ui.themes/css/e4_basestyle.css"); ColorDefinition#org-eclipse-ui-workbench-ACTIVE_UNSELECTED_TABS_COLOR_START { - color: #F2F2F2; + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-ACTIVE_UNSELECTED_TABS_COLOR_END { - color: #F0F0F0; + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_OUTER_KEYLINE_COLOR { - color: #DADADA; + color: #E5E5E5; } ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_OUTLINE_COLOR { - color: #DADADA; + color: #f8f8f8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_UNSELECTED_TABS_COLOR_START { - color: #E8E8E8; + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_UNSELECTED_TABS_COLOR_END { - color: #E4E4E4; + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_OUTER_KEYLINE_COLOR { - color: #DADADA; + color: #E5E5E5; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_OUTLINE_COLOR { - color: #DADADA; + color: #f8f8f8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_BG_START { - color: #F2F2F2; + color: #F8F8F8; } ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_BG_END { - color: #F0F0F0; + color: #F8F8F8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_BG_START{ + color: #f8f8f8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_BG_END { + color: #f8f8f8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START { + color: #F8F8F8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END { + color: #F8F8F8; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_TEXT_COLOR { + color: #3b3b3b; +} + +ColorDefinition#org-eclipse-ui-workbench-ACTIVE_TAB_TEXT_COLOR { + color: #3b3b3b; +} + +ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_TEXT_COLOR { + color: #3b3b3b; } .MPartStack { @@ -63,14 +91,149 @@ ColorDefinition#org-eclipse-ui-workbench-INACTIVE_TAB_BG_END { } CTabFolder.MArea { - background-color: #F0F0F0; - swt-selected-tab-fill: #F0F0F0; - swt-unselected-tabs-color: #F0F0F0; - swt-outer-keyline-color: #F0F0F0; - swt-inner-keyline-color: #F0F0F0; - swt-tab-outline: #F0F0F0; + background-color: #f8f8f8; + swt-selected-tab-fill: #f8f8f8; + swt-unselected-tabs-color: #f8f8f8; + swt-outer-keyline-color: #f8f8f8; + swt-inner-keyline-color: #f8f8f8; + swt-tab-outline: #ffffff; } CTabFolder Canvas { - background-color: #F8F8F8; + background-color: #ffffff; +} + +/* Below changes were added to enhance the appearance of Light theme with ref to other IDEs like VS Code,IntelliJ etc. */ + +.MTrimBar#org-eclipse-ui-main-toolbar { + background-color: '#f8f8f8'; +} + +.MTrimBar#org-eclipse-ui-trim-status { + background-color: '#f8f8f8'; +} + +.View Composite, +.View Composite Tree, +.View Composite Label, +.View ToolBar, +.View Group, +.View Group Label, +.View Section, +.View Text[style~='SWT.READ_ONLY'], +.View SashForm, +.View OleFrame, +.View Browser, +.View WebSite, +.View StyledText[style~='SWT.READ_ONLY'], +.View Link, +.View FormText, +.View Hyperlink, +.View AtcProblemsViewWelcomePage StyledText +{ + background-color: #f8f8f8; +} + +.View ToolItem, +.View Button{ + background-color: inherit; +} + +.View Section ToolItem{ + background-color: #EAEAEA; +} + +.View Composite PrependingAsteriskFilteredTree, +.View PrependingAsteriskFilteredTree Text, +.View LoggingViewFilteredTree, +.View LoggingViewFilteredTree Text, +.View Group Text, +.View Group Combo, +.View Composite Text, +.View OSLPackageSetTableComposite Label, +.View Button[style~='SWT.PUSH']{ + background-color: #ffffff; +} + +.MPartStack{ + swt-selected-tab-highlight: #2160bb; + swt-selected-highlight-top: false; +} + +.MPartStack.active { + swt-selected-tab-highlight: #2160bb; + swt-selected-highlight-top: false; +} + +/* text color and background color of unselected tabs in editor*/ +#org-eclipse-ui-editorss CTabItem{ + color: '#6A6A6A'; + background-color: '#f8f8f8'; +} + +/*text color and background color of selected tab in editor */ +#org-eclipse-ui-editorss CTabItem:selected{ + color: '#3b3b3b'; + background-color: '#FFFFFF'; +} + +#org-eclipse-ui-editorss CTabFolder{ + swt-selected-tab-fill : '#ffffff'; + swt-selected-tab-highlight: '#2160bb'; + swt-selected-highlight-top: true; + swt-tab-outline:#e5e5e5; + swt-tab-outer-keyline: #e5e5e5; +} + +#org-eclipse-ui-editorss CTabFolder.active { + swt-selected-tab-highlight: '#2160bb'; + swt-selected-highlight-top: true; +} + +#org-eclipse-e4-ui-compatibility-editor Composite{ + background-color: #ffffff; +} + +#DebugBreadcrumbItemComposite, +#DebugBreadcrumbItemDropDownToolBar, +#DebugBreadcrumbItemDetailComposite, +#DebugBreadcrumbItemDetailImageComposite, +#DebugBreadcrumbItemDetailImageLabel, +#DebugBreadcrumbItemDetailTextComposite, +#DebugBreadcrumbItemDetailTextLabel { + background-color: '#FFFFFF'; +} + +Composite.MPartSashContainer{ + background-color: #f8f8f8; +} + +Composite.MArea{ + background-color: #ffffff; +} + +.MPart CTabFolder{ + swt-outer-keyline-color: #ffffff; +} + +.MPart Form Composite, +.MPart Form Section, +.MPart Form Label, +.MPart Form Text, +.MPart Form Button, +.MPart Form Sash, +.MPart Form AdtFormToolkit-AdtHyperLink +{ + background-color: '#FFFFFF'; +} + +.MPartStack.active .MPart Form Composite, +.MPartStack.active .MPart Form Section, +.MPartStack.active .MPart Form Label, +.MPartStack.active .MPart Form Text, +.MPartStack.active .MPart Form Button, +.MPartStack.active .MPart Form Sash, +.MPartStack.active .MPart Form AdtFormToolkit-AdtHyperLink +{ + background-color: '#FFFFFF'; } From 791722e503c1e189b67728a76781be58fab2b484 Mon Sep 17 00:00:00 2001 From: Madhumitha M V Date: Fri, 19 Jul 2024 11:25:23 +0530 Subject: [PATCH 2/2] Removing ADT specific changes --- bundles/org.eclipse.ui.themes/css/e4_default_win.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/bundles/org.eclipse.ui.themes/css/e4_default_win.css b/bundles/org.eclipse.ui.themes/css/e4_default_win.css index e41ac0d3dcc..f0d9701615e 100644 --- a/bundles/org.eclipse.ui.themes/css/e4_default_win.css +++ b/bundles/org.eclipse.ui.themes/css/e4_default_win.css @@ -128,8 +128,7 @@ CTabFolder Canvas { .View StyledText[style~='SWT.READ_ONLY'], .View Link, .View FormText, -.View Hyperlink, -.View AtcProblemsViewWelcomePage StyledText +.View Hyperlink { background-color: #f8f8f8; } @@ -145,12 +144,9 @@ CTabFolder Canvas { .View Composite PrependingAsteriskFilteredTree, .View PrependingAsteriskFilteredTree Text, -.View LoggingViewFilteredTree, -.View LoggingViewFilteredTree Text, .View Group Text, .View Group Combo, .View Composite Text, -.View OSLPackageSetTableComposite Label, .View Button[style~='SWT.PUSH']{ background-color: #ffffff; } @@ -221,8 +217,7 @@ Composite.MArea{ .MPart Form Label, .MPart Form Text, .MPart Form Button, -.MPart Form Sash, -.MPart Form AdtFormToolkit-AdtHyperLink +.MPart Form Sash { background-color: '#FFFFFF'; } @@ -232,8 +227,7 @@ Composite.MArea{ .MPartStack.active .MPart Form Label, .MPartStack.active .MPart Form Text, .MPartStack.active .MPart Form Button, -.MPartStack.active .MPart Form Sash, -.MPartStack.active .MPart Form AdtFormToolkit-AdtHyperLink +.MPartStack.active .MPart Form Sash { background-color: '#FFFFFF'; }