Adding light contrast theme (#22028)

* Adding light contrast theme * fixing oe icons * Fixing more files * Converting ep files to support hc light * Revert "Copy Headers for Selected Columns (#21622)" This reverts commit f74d6f6d9b. * Adding more css rules * Fixing modal * Fixing azure icons
2026-01-31 01:25:38 -05:00 · 2023-03-06 17:31:27 -08:00
parent 29c1f5edd0
commit d3f4f0daa4
61 changed files with 912 additions and 267 deletions
--- a/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css
+++ b/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css
@@ -4,7 +4,8 @@
 *--------------------------------------------------------------------------------------------*/


-.vs .chevron-right.codicon {
+.vs .chevron-right.codicon,
+.hc-light .chevron-right.codicon {
 	background-image: url("chevron_right.svg");
 }

--- a/src/sql/base/browser/ui/dropdownList/media/dropdownList.css
+++ b/src/sql/base/browser/ui/dropdownList/media/dropdownList.css
@@ -20,6 +20,10 @@
 	padding-right: 10px;
 }

+.hc-light .monaco-dropdown > .dropdown-icon{
+	content: url("dropdownarrow.svg");
+}
+
 .vs-dark .monaco-dropdown > .dropdown-icon,
 .hc-black .monaco-dropdown > .dropdown-icon {
 	content: url("dropdownarrow_inverse.svg");
--- a/src/sql/base/browser/ui/panel/media/panel.css
+++ b/src/sql/base/browser/ui/panel/media/panel.css
@@ -83,6 +83,10 @@ panel {
 	outline: 1px dashed #f38518;
 	outline-offset: -3px;
 }
+.hc-light .tabbedPanel .tabList .tab-header:hover:not(.selected) {
+	background-color: #dcdcdc;
+	outline: none;
+}

 .tabbedPanel.horizontal > .title .tabList .tab .tabLabel,
 .tabbedPanel.vertical > .title .tabList .tab .tabLabel {
@@ -216,7 +220,8 @@ panel {
 	cursor: pointer;
 }

-.vs .tabbedPanel .tab-action.collapse {
+.vs .tabbedPanel .tab-action.collapse,
+.hc-light .tabbedPanel .tab-action.collapse {
 	background-image: url("collapse.svg");
 }

@@ -225,7 +230,8 @@ panel {
 	background-image: url("collapse_inverse.svg");
 }

-.vs .tabbedPanel .tab-action.expand {
+.vs .tabbedPanel .tab-action.expand,
+.hc-light .tabbedPanel .tab-action.expand {
 	background-image: url("expand.svg");
 }

--- a/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css
+++ b/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css
@@ -29,7 +29,9 @@ properties-container .columnLayout.property {
 }

 properties-container .propertyName,
-properties-container .splitter {
+.hc-light properties-container .propertyName,
+properties-container .splitter,
+.hc-light properties-container .splitter {
 	opacity: 0.6;
 	font-size: 12px;
 	flex: 0 0 auto
--- a/src/sql/base/browser/ui/table/media/slickColorTheme.css
+++ b/src/sql/base/browser/ui/table/media/slickColorTheme.css
@@ -155,54 +155,91 @@
 }

 /* icons */
+.hc-light .codicon.extendFullScreen {
+	/* ExtendToFullScreen_16x_vscode_inverse.svg */
+	background-image: url("extendFullScreen.svg");
+}
+
 .vs-dark .codicon.extendFullScreen,
 .hc-black .codicon.extendFullScreen {
 	/* ExtendToFullScreen_16x_vscode_inverse.svg */
 	background-image: url("extendFullScreen_inverse.svg");
 }

+.hc-light .codicon.exitFullScreen {
+	background-image: url("exitFullScreen.svg");
+}
+
 .vs-dark .codicon.exitFullScreen,
 .hc-black .codicon.exitFullScreen {
 	/* ExitFullScreen_16x_vscode_inverse.svg */
 	background-image: url("exitFullScreen_inverse.svg");
 }

+.hc-light .codicon.saveJson {
+	background-image: url("saveJson.svg");
+}
+
 .vs-dark .codicon.saveJson,
 .hc-black .codicon.saveJson {
 	/* ResultToJSON_16x_vscode_inverse.svg */
 	background-image: url("saveJson_inverse.svg");
 }

+.hc-light .codicon.saveCsv {
+	background-image: url("saveCsv.svg");
+}
+
 .vs-dark .codicon.saveCsv,
 .hc-black .codicon.saveCsv {
 	/* ResultToCSV_16x_vscode_inverse.svg */
 	background-image: url("saveCsv_inverse.svg");
 }

+.hc-light .codicon.saveExcel {
+	background-image: url("saveExcel.svg");
+}
+
 .vs-dark .codicon.saveExcel,
 .hc-black .codicon.saveExcel {
 	/* ResultToXlsx_16x_vscode_inverse.svg */
 	background-image: url("saveExcel_inverse.svg");
 }

+.hc-light .codicon.saveMarkdown {
+	background-image: url("saveMarkdown.svg");
+}
+
 .vs-dark .codicon.saveMarkdown,
 .hc-black .codicon.saveMarkdown {
 	/* ResultToMarkdown_16x_vscode_inverse.svg */
 	background-image: url("saveMarkdown_inverse.svg");
 }

+.hc-light .codicon.saveXml {
+	background-image: url("saveXml.svg");
+}
+
 .vs-dark .codicon.saveXml,
 .hc-black .codicon.saveXml {
 	/* ResultToXml_16x_vscode_inverse.svg */
 	background-image: url("saveXml_inverse.svg");
 }

+.hc-light .codicon.viewChart {
+	background-image: url("viewChart.svg");
+}
+
 .vs-dark .codicon.viewChart,
 .hc-black .codicon.viewChart {
 	/* ResultToXlsx_16x_vscode */
 	background-image: url("viewChart_inverse.svg");
 }

+.hc-light .codicon.viewVisualizer {
+	background-image: url("viewVisualizer.svg");
+}
+
 .vs-dark .codicon.viewVisualizer,
 .hc-black .codicon.viewVisualizer {
 	background-image: url("viewVisualizer_inverse.svg");
--- a/src/sql/base/browser/ui/table/media/table.css
+++ b/src/sql/base/browser/ui/table/media/table.css
@@ -24,7 +24,9 @@
 }

 .vs .slick-header-menuicon.ascending,
-.vs .monaco-table .slick-sort-indicator-asc {
+.hc-light .slick-header-menuicon.ascending,
+.vs .monaco-table .slick-sort-indicator-asc,
+.hc-light .monaco-table .slick-sort-indicator-asc {
 	background-image: url('sort_asc.svg');
 }

@@ -36,7 +38,9 @@
 }

 .vs .slick-header-menuicon.descending,
-.vs .monaco-table .slick-sort-indicator-desc {
+.hc-light .slick-header-menuicon.descending,
+.vs .monaco-table .slick-sort-indicator-desc,
+.hc-light .monaco-table .slick-sort-indicator-desc {
 	background-image: url('sort_desc.svg');
 }

@@ -71,12 +75,17 @@
 	padding: 0px;
 }

+.hc-light .slick-header-menubutton {
+	background-image: url('down.svg');
+}
+
 .vs-dark .slick-header-menubutton,
 .hc-black .slick-header-menubutton {
 	background-image: url('down-inverse.svg');
 }

-.slick-header-menubutton.filtered {
+.slick-header-menubutton.filtered,
+.hc-light .slick-header-menubutton.filtered {
 	background-image: url('filter.svg');
 }

@@ -97,6 +106,10 @@
 	position: absolute;
 }

+.hc-light .slick-header-menu {
+	background: none repeat scroll 0 0 #F3F2F1;
+}
+
 .vs-dark .slick-header-menu {
 	background: none repeat scroll 0 0 #333333;
 }
--- a/src/sql/base/browser/ui/taskbar/media/icons.css
+++ b/src/sql/base/browser/ui/taskbar/media/icons.css
@@ -3,7 +3,8 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-.vs .monaco-toolbar .action-label.toolbar-toggle-more {
+.vs .monaco-toolbar .action-label.toolbar-toggle-more,
+.hc-light .monaco-toolbar .action-label.toolbar-toggle-more {
 	background-image: url('ellipsis.svg');
 }

@@ -13,24 +14,28 @@
 }

 .vs .codicon.start,
+.hc-light .codicon.start,
 .vs-dark .codicon.start,
 .hc-black .codicon.start {
 	background-image: url('start.svg');
 }

 .vs .codicon.add,
+.hc-light .codicon.add,
 .vs-dark .codicon.add,
 .hc-black .codicon.add {
 	background-image: url('add.svg');
 }

 .vs .codicon.stop,
+.hc-light .codicon.stop,
 .vs-dark .codicon.stop,
 .hc-black .codicon.stop {
 	background-image: url('stop.svg');
 }

-.vs .codicon.disconnect {
+.vs .codicon.disconnect,
+.hc-light .codicon.disconnect {
 	background-image: url('disconnect.svg');
 }

@@ -40,7 +45,8 @@
 	background-repeat: no-repeat;
 }

-.vs .codicon.connect {
+.vs .codicon.connect,
+.hc-light .codicon.connect {
 	background-image: url('connect.svg');
 }

@@ -50,7 +56,8 @@
 	background-repeat: no-repeat;
 }

-.vs .codicon.changeConnection {
+.vs .codicon.changeConnection,
+.hc-light .codicon.changeConnection {
 	background-image: url('change_connection.svg');
 }

@@ -61,15 +68,19 @@
 }

 .vs .codicon.estimatedQueryPlan,
-.vs .codicon.actualQueryPlan {
+.hc-light .codicon.estimatedQueryPlan,
+.vs .codicon.actualQueryPlan,
+.hc-light .codicon.actualQueryPlan {
 	background-image: url('query-plan.svg');
 }

-.vs .codicon.disabledActualExecutionPlan {
+.vs .codicon.disabledActualExecutionPlan,
+.hc-light .codicon.disabledActualExecutionPlan {
 	background-image: url('disabled-actual-execution-plan.svg');
 }

-.vs .codicon.enabledActualExecutionPlan {
+.vs .codicon.enabledActualExecutionPlan,
+.hc-light .codicon.enabledActualExecutionPlan {
 	background-image: url('enabled-actual-execution-plan.svg');
 }

@@ -90,7 +101,8 @@
 	background-image: url('enabled-actual-execution-plan-inverse.svg');
 }

-.vs .codicon.createInsight {
+.vs .codicon.createInsight,
+.hc-light .codicon.createInsight {
 	background-image: url('create_insight.svg');
 }

@@ -99,7 +111,8 @@
 	background-image: url('create_insight_inverse.svg');
 }

-.vs .codicon.copyImage {
+.vs .codicon.copyImage,
+.hc-light .codicon.copyImage {
 	background-image: url('copy_image.svg');
 }

@@ -108,7 +121,8 @@
 	background-image: url('copy_image_inverse.svg');
 }

-.vs .codicon.saveAsImage {
+.vs .codicon.saveAsImage,
+.hc-light .codicon.saveAsImage {
 	background-image: url('save_as_image.svg');
 }

@@ -117,7 +131,8 @@
 	background-image: url('save_as_image_inverse.svg');
 }

-.vs .codicon.enablesqlcmd {
+.vs .codicon.enablesqlcmd,
+.hc-light .codicon.enablesqlcmd {
 	background-image: url('enable_sqlcmd.svg');
 }

@@ -127,7 +142,8 @@
 	background-repeat: no-repeat;
 }

-.vs .codicon.disablesqlcmd {
+.vs .codicon.disablesqlcmd,
+.hc-light .codicon.disablesqlcmd {
 	background-image: url('disable_sqlcmd.svg');
 }

--- a/src/sql/base/browser/ui/taskbar/media/taskbar.css
+++ b/src/sql/base/browser/ui/taskbar/media/taskbar.css
@@ -108,7 +108,8 @@
 	box-sizing: border-box;
 }

-.hc-black .carbon-taskbar .overflow {
+.hc-black .carbon-taskbar .overflow,
+.hc-light .carbon-taskbar .overflow {
 	box-shadow: none;
 }

--- a/src/sql/base/parts/tree/browser/loading-hc-light.svg
+++ b/src/sql/base/parts/tree/browser/loading-hc-light.svg
@@ -0,0 +1,31 @@
+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      0% { opacity: 1; }
+      100% { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:black;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>
--- a/src/sql/base/parts/tree/browser/tree-collapsed-hc-light.svg
+++ b/src/sql/base/parts/tree/browser/tree-collapsed-hc-light.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="black"/>
+</svg>
--- a/src/sql/base/parts/tree/browser/tree-expanded-hc-light.svg
+++ b/src/sql/base/parts/tree/browser/tree-expanded-hc-light.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97602 10.0719L12.3333 5.71461L12.952 6.33333L8.28538 11L7.66666 11L3 6.33333L3.61872 5.71461L7.97602 10.0719Z" fill="black"/>
+</svg>
--- a/src/sql/base/parts/tree/browser/tree.css
+++ b/src/sql/base/parts/tree/browser/tree.css
@@ -72,21 +72,42 @@
 	left: -16px;
 }

+.hc-light .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before {
+	background-image: url('tree-collapsed-hc-light.svg');
+}
+
 .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded > .content:before {
 	background-image: url('tree-expanded-light.svg');
 }

+.hc-light .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded > .content:before {
+	background-image: url('tree-expanded-hc-light.svg');
+}
+
 .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected.expanded:not(.loading) > .content:before {
 	background-image: url('tree-expanded-hc.svg');
 }

+.hc-light .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected.expanded:not(.loading) > .content:before {
+	background-image: url('tree-expanded-hc-light.svg');
+}
+
 .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected:not(.loading) > .content:before {
 	background-image: url('tree-collapsed-hc.svg');
 }

+.hc-light .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected:not(.loading) > .content:before {
+	background-image: url('tree-collapsed-hc-light.svg');
+}
+
 .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before {
 	background-image: url('loading.svg');
 }
+
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before {
+	background-image: url('loading-hc-light.svg');
+}
+
 .vs-dark .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before {
 	background-image: url('tree-collapsed-dark.svg');
 }
--- a/src/sql/media/icons/common-icons.css
+++ b/src/sql/media/icons/common-icons.css
@@ -3,7 +3,8 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-.vs .codicon.settings {
+.vs .codicon.settings,
+.hc-light .codicon.settings {
 	background-image: url("settings.svg");
 }

@@ -13,18 +14,21 @@
 }

 .vs .codicon.backup,
+.hc-light .codicon.backup,
 .vs-dark .codicon.backup,
 .hc-black .codicon.backup {
 	background: url("backup.svg") center center no-repeat;
 }

 .vs .codicon.restore,
+.hc-light .codicon.restore,
 .vs-dark .codicon.restore,
 .hc-black .codicon.restore {
 	background: url("restore.svg") center center no-repeat;
 }

-.vs .codicon.database {
+.vs .codicon.database,
+.hc-light .codicon.database {
 	background: url("database.svg") center center no-repeat;
 }

@@ -34,6 +38,7 @@
 }

 .vs-dark .codicon.icon-dashboard-view::before,
+.hc-light .codicon.icon-dashboard-view::before,
 .hc-black .codicon.icon-dashboard-view::before,
 .vs .codicon.icon-dashboard-view::before {
 	-webkit-mask-image: url("dashboard_view.svg");
@@ -41,12 +46,14 @@
 }

 .vs .codicon.error,
+.hc-light .codicon.error,
 .vs-dark .codicon.error,
 .hc-black .codicon.error {
 	background: url("globalerror_red.svg") center center no-repeat;
 }

-.vs .codicon.file {
+.vs .codicon.file,
+.hc-light .codicon.file {
 	background: url("file.svg") center center no-repeat;
 }

@@ -55,7 +62,8 @@
 	background: url("file_inverse.svg") center center no-repeat;
 }

-.vs .codicon.new-database {
+.vs .codicon.new-database,
+.hc-light .codicon.new-database {
 	background: url("new_database.svg") center center no-repeat;
 }

@@ -64,7 +72,8 @@
 	background: url("new_database_inverse.svg") center center no-repeat;
 }

-.vs .codicon.server-page {
+.vs .codicon.server-page,
+.hc-light .codicon.server-page {
 	background: url("server_page.svg") center center no-repeat;
 }

@@ -74,30 +83,35 @@
 }

 .vs .codicon.globalError,
+.hc-light .codicon.globalError,
 .vs-dark .codicon.globalError,
 .hc-black .codicon.globalError {
 	background: url("globalerror.svg") center center no-repeat;
 }

 .vs .sql.codicon.error,
+.hc-light .sql.codicon.error,
 .vs-dark .sql.codicon.error,
 .hc-black .sql.codicon.error {
 	content: url("status_error.svg");
 }

 .vs .sql.codicon.warning,
+.hc-light .sql.codicon.warning,
 .vs-dark .sql.codicon.warning,
 .hc-black .sql.codicon.warning {
 	content: url("status_warning.svg");
 }

 .vs .sql.codicon.info,
+.hc-light .sql.codicon.info,
 .vs-dark .sql.codicon.info,
 .hc-black .sql.codicon.info {
 	content: url("status_info.svg");
 }

-.vs .codicon.help {
+.vs .codicon.help,
+.hc-light .codicon.help {
 	content: url("help.svg");
 }

@@ -107,7 +121,8 @@
 }

 .codicon.info-icon,
-.vs .codicon.info-icon {
+.vs .codicon.info-icon,
+.hc-light .codicon.info-icon {
 	background-image: url("info.svg");
 }

@@ -117,18 +132,21 @@
 }

 .vs .codicon.success,
+.hc-light .codicon.success,
 .vs-dark .codicon.success,
 .hc-black .codicon.success {
 	content: url("status_success.svg");
 }

 .vs .codicon.canceled,
+.hc-light .codicon.canceled,
 .vs-dark .codicon.canceled,
 .hc-black .codicon.canceled {
 	content: url("status_cancelled.svg");
 }

-.vs .codicon.in-progress {
+.vs .codicon.in-progress,
+.hc-light .codicon.in-progress {
 	content: url("loading.svg");
 }

@@ -138,6 +156,7 @@
 }

 .vs .codicon.scriptToClipboard,
+.hc-light .codicon.scriptToClipboard,
 .vs-dark .codicon.scriptToClipboard,
 .hc-black .codicon.scriptToClipboard {
 	background-image: url("script_to_clipboard.svg");
@@ -146,7 +165,9 @@
 }

 .vs .codicon:not(.masked-icon).close,
-.vs .codicon:not(.masked-icon).remove {
+.vs .codicon:not(.masked-icon).remove,
+.hc-light .codicon:not(.masked-icon).close,
+.hc-light .codicon:not(.masked-icon).remove {
 	background: url('close.svg') center center no-repeat !important;
 }

@@ -157,7 +178,8 @@
 	background: url("close_inverse.svg") center center no-repeat !important;
 }

-.vs .codicon.filter {
+.vs .codicon.filter,
+.hc-light .codicon.filter {
 	background: url("filter.svg") center center no-repeat !important;
 }

@@ -166,7 +188,8 @@
 	background: url("filter_inverse.svg") center center no-repeat !important;
 }

-.vs .codicon.filterLabel {
+.vs .codicon.filterLabel,
+.hc-light .codicon.filterLabel {
 	background-image: url("filter.svg");
 }

@@ -175,7 +198,8 @@
 	background-image: url("filter_inverse.svg");
 }

-.vs .codicon.clear-filter {
+.vs .codicon.clear-filter,
+.hc-light .codicon.clear-filter {
 	background-image: url("clearfilter.svg");
 }

@@ -185,12 +209,14 @@
 }

 .vs .codicon.warning-badge,
+.hc-light .codicon.warning-badge,
 .vs-dark .codicon.warning-badge,
 .hc-black .codicon.warning-badge {
 	background: url("status_warning.svg") center center no-repeat;
 }

 .vs .codicon.refresh,
+.hc-light .codicon.refresh,
 .vs-dark .codicon.refresh,
 .hc-black .codicon.refresh {
 	background: url("refresh.svg") no-repeat;
@@ -201,7 +227,8 @@
 	background: url("ellipsis-inverse.svg") center center no-repeat;
 }

-.vs .codicon.toggle-more {
+.vs .codicon.toggle-more,
+.hc-light .codicon.toggle-more {
 	background: url("ellipsis.svg") center center no-repeat;
 }

@@ -210,23 +237,27 @@
 	background: url("new_inverse.svg") center center no-repeat;
 }

-.vs .codicon:not(.masked-icon).new {
+.vs .codicon:not(.masked-icon).new,
+.hc-light .codicon:not(.masked-icon).new {
 	background: url("new.svg") center center no-repeat;
 }

 .vs .codicon.new-query,
+.hc-light .codicon.new-query,
 .vs-dark .codicon.new-query,
 .hc-black .codicon.new-query {
 	background: url("newquery.svg") center center no-repeat;
 }

 .vs .codicon.info,
+.hc-light .codicon.info,
 .hc-black .codicon.info,
 .vs-dark .codicon.info {
 	background: url("info.svg") center center no-repeat;
 }

 .vs .codicon.edit,
+.hc-light .codicon.edit,
 .hc-black .codicon.edit,
 .vs-dark .codicon.edit {
 	background: url("edit.svg") center center no-repeat;
@@ -237,7 +268,8 @@
 	background: url("pin_inverse.svg") center center no-repeat;
 }

-.vs .codicon.pin {
+.vs .codicon.pin,
+.hc-light .codicon.pin {
 	background: url("pin.svg") center center no-repeat;
 }

@@ -246,7 +278,8 @@
 	background: url("unpin_inverse.svg") center center no-repeat;
 }

-.vs .codicon.unpin {
+.vs .codicon.unpin,
+.hc-light .codicon.unpin {
 	background: url("unpin.svg") center center no-repeat;
 }

@@ -255,11 +288,13 @@
 	background: url("book_inverse.svg") center center no-repeat;
 }

-.vs .codicon.bookreport {
+.vs .codicon.bookreport,
+.hc-light .codicon.bookreport {
 	background: url("book.svg") center center no-repeat;
 }

-.vs .sql.codicon.pause {
+.vs .sql.codicon.pause,
+.hc-light .sql.codicon.pause {
 	background-image: url("pause.svg");
 }

@@ -268,7 +303,8 @@
 	background-image: url("pause_inverse.svg");
 }

-.vs .sql.codicon.continue {
+.vs .sql.codicon.continue,
+.hc-light .sql.codicon.continue {
 	background-image: url("continue.svg");
 }

@@ -277,7 +313,8 @@
 	background-image: url("continue_inverse.svg");
 }

-.vs .sql.codicon.checked {
+.vs .sql.codicon.checked,
+.hc-light .sql.codicon.checked {
 	background-image: url("check.svg");
 }

@@ -286,7 +323,8 @@
 	background-image: url("check_inverse.svg");
 }

-.vs .sql.codicon.start {
+.vs .sql.codicon.start,
+.hc-light .sql.codicon.start {
 	background-image: url("start.svg");
 }

@@ -295,7 +333,8 @@
 	background-image: url("start_inverse.svg");
 }

-.vs .sql.codicon.stop {
+.vs .sql.codicon.stop,
+.hc-light .sql.codicon.stop {
 	background-image: url("stop.svg");
 }

@@ -309,24 +348,29 @@
 	background: url("export_inverse.svg") center center no-repeat;
 }

-.vs .codicon.export {
+.vs .codicon.export,
+.hc-light .codicon.export {
 	background: url("export.svg") center center no-repeat;
 }

 /* Notebook cells */
-.codicon.toolbarIconRunInactive {
+.codicon.toolbarIconRunInactive,
+.hc-light .codicon.toolbarIconRunInactive {
 	background-image: url("execute_cell_grey.svg");
 }

-.codicon.toolbarIconRun {
+.codicon.toolbarIconRun,
+.hc-light .codicon.toolbarIconRun {
 	background-image: url("execute_cell.svg");
 }

-.codicon.toolbarIconRunError {
+.codicon.toolbarIconRunError,
+.hc-light .codicon.toolbarIconRunError {
 	background-image: url("execute_cell_error.svg");
 }

-.codicon.toolbarIconStop {
+.codicon.toolbarIconStop,
+.hc-light .codicon.toolbarIconStop {
 	background-image: url("stop_cell_solidanimation.svg");
 }

@@ -502,7 +546,8 @@ Includes non-masked style declarations. */
 	mask-image: url("packages.svg");
 }

-.codicon.arrow-up {
+.codicon.arrow-up,
+.hc-light .codicon.arrow-up {
 	background-image: url("chevron_up.svg");
 }

@@ -511,7 +556,8 @@ Includes non-masked style declarations. */
 	background-image: url("chevron_up_inverse.svg");
 }

-.codicon:not(.masked-icon).arrow-down {
+.codicon:not(.masked-icon).arrow-down,
+.hc-light .codicon:not(.masked-icon).arrow-down {
 	background-image: url("chevron_down.svg");
 }

--- a/src/sql/media/overwriteVsIcons.css
+++ b/src/sql/media/overwriteVsIcons.css
@@ -7,7 +7,8 @@
 	background-size: 10px;
 }

-.monaco-workbench.vs .tab > .tab-close .action-label.close-editor-action {
+.monaco-workbench.vs .tab > .tab-close .action-label.close-editor-action,
+.monaco-workbench.hc-light .tab > .tab-close .action-label.close-editor-action {
 	background: url('icons/close.svg') center center no-repeat;
 }

--- a/src/sql/platform/actions/browser/menuEntryActionViewItem.ts
+++ b/src/sql/platform/actions/browser/menuEntryActionViewItem.ts
@@ -61,7 +61,7 @@ export class LabeledMenuItemActionItem extends MenuEntryActionViewItem {
 					iconClass = ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!;
 				} else {
 					iconClass = ids.nextId();
-					createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)} !important`);
+					createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)} !important`);
 					createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.dark)} !important`);
 					ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass);
 				}
--- a/src/sql/platform/theme/common/colorRegistry.ts
+++ b/src/sql/platform/theme/common/colorRegistry.ts
@@ -3,12 +3,12 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-import { contrastBorder, registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, focusBorder, registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { Color, RGBA } from 'vs/base/common/color';
 import * as nls from 'vs/nls';

 // Common
-export const GroupHeaderBackground = registerColor('groupHeaderBackground', { dark: '#252526', light: '#F3F3F3', hcDark: '#000000', hcLight: '#000000' }, nls.localize('groupHeaderBackground', "Background color of the group header."));
+export const GroupHeaderBackground = registerColor('groupHeaderBackground', { dark: '#252526', light: '#F3F3F3', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('groupHeaderBackground', "Background color of the group header."));

 // -- Welcome Page Colors
 export const tileBoxShadowColor = new Color(new RGBA(0, 1, 4, 0.13));
@@ -21,7 +21,7 @@ export const gradientTwoColorOne = new Color(new RGBA(156, 48, 48, 0));
 export const gradientTwoColorTwo = new Color(new RGBA(255, 255, 255, 0.1));

 // -- Tiles
-export const tileBorder = registerColor('tileBorder', { light: '#fff', dark: '#8A8886', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('tileBorder', "The border color of tiles"));
+export const tileBorder = registerColor('tileBorder', { light: '#fff', dark: '#8A8886', hcDark: '#2B56F2', hcLight: contrastBorder }, nls.localize('tileBorder', "The border color of tiles"));
 export const tileBoxShadow = registerColor('tileBoxShadow', { light: tileBoxShadowColor, dark: tileBoxShadowColor, hcDark: tileBoxShadowColor, hcLight: tileBoxShadowColor }, nls.localize('tileBoxShadow', "The tile box shadow color"));

 // -- Buttons
@@ -39,29 +39,29 @@ export const gradientTwo = registerColor('gradientTwo', { light: gradientTwoColo
 export const gradientBackground = registerColor('gradientBackground', { light: '#fff', dark: 'transparent', hcDark: 'transparent', hcLight: 'transparent' }, nls.localize('gradientBackground', "The background color for the banner image gradient"));

 // --- Notebook Colors
-export const notebookToolbarIcon = registerColor('notebook.notebookToolbarIcon', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.notebookToolbarIcon', "Notebook: Main toolbar icons"));
-export const notebookToolbarSelectBorder = registerColor('notebook.notebookToolbarSelectBorder', { light: '#A5A5A5', dark: '#8A8886', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('notebook.notebookToolbarSelectBorder', "Notebook: Main toolbar select box border"));
-export const notebookToolbarSelectBackground = registerColor('notebook.notebookToolbarSelectBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.notebookToolbarSelectBackground', "Notebook: Main toolbar select box background"));
-export const notebookToolbarLines = registerColor('notebook.notebookToolbarLines', { light: '#D6D6D6', dark: '#323130', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('notebook.notebookToolbarLines', "Notebook: Main toolbar bottom border and separator"));
-export const dropdownArrow = registerColor('notebook.dropdownArrow', { light: '#A5A5A5', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.dropdownArrow', "Notebook: Main toolbar dropdown arrow"));
-export const buttonMenuArrow = registerColor('notebook.buttonMenuArrow', { light: '#000000', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.buttonMenuArrow', "Notebook: Main toolbar custom buttonMenu dropdown arrow"));
+export const notebookToolbarIcon = registerColor('notebook.notebookToolbarIcon', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.notebookToolbarIcon', "Notebook: Main toolbar icons"));
+export const notebookToolbarSelectBorder = registerColor('notebook.notebookToolbarSelectBorder', { light: '#A5A5A5', dark: '#8A8886', hcDark: '#2B56F2', hcLight: focusBorder }, nls.localize('notebook.notebookToolbarSelectBorder', "Notebook: Main toolbar select box border"));
+export const notebookToolbarSelectBackground = registerColor('notebook.notebookToolbarSelectBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#fff' }, nls.localize('notebook.notebookToolbarSelectBackground', "Notebook: Main toolbar select box background"));
+export const notebookToolbarLines = registerColor('notebook.notebookToolbarLines', { light: '#D6D6D6', dark: '#323130', hcDark: '#2B56F2', hcLight: focusBorder }, nls.localize('notebook.notebookToolbarLines', "Notebook: Main toolbar bottom border and separator"));
+export const dropdownArrow = registerColor('notebook.dropdownArrow', { light: '#A5A5A5', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.dropdownArrow', "Notebook: Main toolbar dropdown arrow"));
+export const buttonMenuArrow = registerColor('notebook.buttonMenuArrow', { light: '#000000', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.buttonMenuArrow', "Notebook: Main toolbar custom buttonMenu dropdown arrow"));

-export const toolbarBackground = registerColor('notebook.toolbarBackground', { light: '#F5F5F5', dark: '#252423', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.toolbarBackground', "Notebook: Markdown toolbar background"));
-export const toolbarIcon = registerColor('notebook.toolbarIcon', { light: '#323130', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.toolbarIcon', "Notebook: Markdown toolbar icons"));
-export const toolbarBottomBorder = registerColor('notebook.toolbarBottomBorder', { light: '#D4D4D4', dark: '#323130', hcDark: '#E86E58', hcLight: '#E86E58' }, nls.localize('notebook.toolbarBottomBorder', "Notebook: Markdown toolbar bottom border"));
+export const toolbarBackground = registerColor('notebook.toolbarBackground', { light: '#F5F5F5', dark: '#252423', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.toolbarBackground', "Notebook: Markdown toolbar background"));
+export const toolbarIcon = registerColor('notebook.toolbarIcon', { light: '#323130', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.toolbarIcon', "Notebook: Markdown toolbar icons"));
+export const toolbarBottomBorder = registerColor('notebook.toolbarBottomBorder', { light: '#D4D4D4', dark: '#323130', hcDark: '#E86E58', hcLight: focusBorder }, nls.localize('notebook.toolbarBottomBorder', "Notebook: Markdown toolbar bottom border"));
 // Notebook: All cells
-export const cellBorder = registerColor('notebook.cellBorder', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#E86E58', hcLight: '#E86E58' }, nls.localize('notebook.cellBorder', "Notebook: Active cell border"));
+export const cellBorder = registerColor('notebook.cellBorder', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#E86E58', hcLight: focusBorder }, nls.localize('notebook.cellBorder', "Notebook: Active cell border"));
 // Notebook: Markdown cell
-export const markdownEditorBackground = registerColor('notebook.markdownEditorBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.markdownEditorBackground', "Notebook: Markdown editor background"));
-export const splitBorder = registerColor('notebook.splitBorder', { light: '#E6E6E6', dark: '#323130', hcDark: '#872412', hcLight: '#872412' }, nls.localize('notebook.splitBorder', "Notebook: Border between Markdown editor and preview"));
+export const markdownEditorBackground = registerColor('notebook.markdownEditorBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.markdownEditorBackground', "Notebook: Markdown editor background"));
+export const splitBorder = registerColor('notebook.splitBorder', { light: '#E6E6E6', dark: '#323130', hcDark: '#872412', hcLight: focusBorder }, nls.localize('notebook.splitBorder', "Notebook: Border between Markdown editor and preview"));

 // Notebook: Code cell
-export const codeEditorBackground = registerColor('notebook.codeEditorBackground', { light: '#F5F5F5', dark: '#333333', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.codeEditorBackground', "Notebook: Code editor background"));
-export const codeEditorBackgroundActive = registerColor('notebook.codeEditorBackgroundActive', { light: '#FFFFFF', dark: null, hcDark: null, hcLight: null }, nls.localize('notebook.codeEditorBackgroundActive', "Notebook: Code editor background of active cell"));
-export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber', { light: '#A19F9D', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.codeEditorLineNumber', "Notebook: Code editor line numbers"));
-export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons"));
-export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToolbarBackground', { light: '#EEEEEE', dark: '#333333', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.codeEditorToolbarBackground', "Notebook: Code editor toolbar background"));
-export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border"));
+export const codeEditorBackground = registerColor('notebook.codeEditorBackground', { light: '#F5F5F5', dark: '#333333', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.codeEditorBackground', "Notebook: Code editor background"));
+export const codeEditorBackgroundActive = registerColor('notebook.codeEditorBackgroundActive', { light: '#FFFFFF', dark: null, hcDark: null, hcLight: '#ffffff' }, nls.localize('notebook.codeEditorBackgroundActive', "Notebook: Code editor background of active cell"));
+export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber', { light: '#A19F9D', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.codeEditorLineNumber', "Notebook: Code editor line numbers"));
+export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons"));
+export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToolbarBackground', { light: '#EEEEEE', dark: '#333333', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.codeEditorToolbarBackground', "Notebook: Code editor toolbar background"));
+export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hcDark: '#000000', hcLight: '#6fc3df' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border"));
 export const notebookCellTagBackground = registerColor('notebook.notebookCellTagBackground', { light: '#0078D4', dark: '#0078D4', hcDark: '#0078D4', hcLight: '#0078D4' }, nls.localize('notebook.notebookCellTagBackground', "Tag background color."));
 export const notebookCellTagForeground = registerColor('notebook.notebookCellTagForeground', { light: '#FFFFFF', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.notebookCellTagForeground', "Tag foreground color."));

@@ -70,24 +70,24 @@ export const notebookFindMatchHighlight = registerColor('notebook.findMatchHighl
 export const notebookFindRangeHighlight = registerColor('notebook.findRangeHighlightBackground', { dark: '#FFA500', light: '#FFA500', hcDark: null, hcLight: null }, nls.localize('notebookFindRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true);

 // Info Box
-export const infoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
-export const infoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
-export const infoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
-export const infoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
+export const infoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
+export const infoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
+export const infoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
+export const infoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));

 // Info Button
-export const infoButtonForeground = registerColor('infoButton.foreground', { dark: '#FFFFFF', light: '#000000', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('infoButton.foreground', "Info button foreground color."));
-export const infoButtonBackground = registerColor('infoButton.background', { dark: '#1B1A19', light: '#FFFFFF', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoButton.background', "Info button background color."));
+export const infoButtonForeground = registerColor('infoButton.foreground', { dark: '#FFFFFF', light: '#000000', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('infoButton.foreground', "Info button foreground color."));
+export const infoButtonBackground = registerColor('infoButton.background', { dark: '#1B1A19', light: '#FFFFFF', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoButton.background', "Info button background color."));
 export const infoButtonBorder = registerColor('infoButton.border', { dark: '#1B1A19', light: '#FFFFFF', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('infoButton.border', "Info button border color."));
-export const infoButtonHoverBackground = registerColor('infoButton.hoverBackground', { dark: '#282625', light: '#F3F2F1', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoButton.hoverBackground', "Info button hover background color."));
+export const infoButtonHoverBackground = registerColor('infoButton.hoverBackground', { dark: '#282625', light: '#F3F2F1', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoButton.hoverBackground', "Info button hover background color."));

 // Callout Dialog
-export const calloutDialogForeground = registerColor('calloutDialog.foreground', { light: '#616161', dark: '#CCCCCC', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('calloutDialogForeground', 'Callout dialog foreground.'));
+export const calloutDialogForeground = registerColor('calloutDialog.foreground', { light: '#616161', dark: '#CCCCCC', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('calloutDialogForeground', 'Callout dialog foreground.'));
 export const calloutDialogInteriorBorder = registerColor('calloutDialog.interiorBorder', { light: '#D6D6D6', dark: '#323130', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('calloutDialogInteriorBorder', "Callout dialog interior borders used for separating elements."));
 export const calloutDialogExteriorBorder = registerColor('calloutDialog.exteriorBorder', { light: '#CCCCCC', dark: '#CCCCCC', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('calloutDialogExteriorBorder', "Callout dialog exterior borders to provide contrast against notebook UI."));
-export const calloutDialogHeaderFooterBackground = registerColor('calloutDialog.headerFooterBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.black }, nls.localize('calloutDialogHeaderFooterBackground', 'Callout dialog header and footer background.'));
-export const calloutDialogBodyBackground = registerColor('calloutDialog.bodyBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.black }, nls.localize('calloutDialogBodyBackground', "Callout dialog body background."));
+export const calloutDialogHeaderFooterBackground = registerColor('calloutDialog.headerFooterBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.white }, nls.localize('calloutDialogHeaderFooterBackground', 'Callout dialog header and footer background.'));
+export const calloutDialogBodyBackground = registerColor('calloutDialog.bodyBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.white }, nls.localize('calloutDialogBodyBackground', "Callout dialog body background."));
 export const calloutDialogShadowColor = registerColor('calloutDialog.shadow', { light: '#000000', dark: '#FFFFFF', hcDark: '#000000', hcLight: '#000000' }, nls.localize('calloutDialogShadowColor', 'Callout dialog box shadow color.'));

 // Designer
-export const DesignerPaneSeparator = registerColor('designer.paneSeparator', { light: '#DDDDDD', dark: '#8A8886', hcDark: contrastBorder, hcLight: '#000000' }, nls.localize('designer.paneSeparator', 'The pane separator color.'));
+export const DesignerPaneSeparator = registerColor('designer.paneSeparator', { light: '#DDDDDD', dark: '#8A8886', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('designer.paneSeparator', 'The pane separator color.'));
--- a/src/sql/platform/theme/common/colors.ts
+++ b/src/sql/platform/theme/common/colors.ts
@@ -3,26 +3,26 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-import { registerColor, foreground } from 'vs/platform/theme/common/colorRegistry';
+import { registerColor, foreground, activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { Color, RGBA } from 'vs/base/common/color';
 import * as nls from 'vs/nls';

-export const tableHeaderBackground = registerColor('table.headerBackground', { dark: new Color(new RGBA(51, 51, 52)), light: new Color(new RGBA(245, 245, 245)), hcDark: '#333334', hcLight: '#333334' }, nls.localize('tableHeaderBackground', "Table header background color"));
-export const tableHeaderForeground = registerColor('table.headerForeground', { dark: new Color(new RGBA(229, 229, 229)), light: new Color(new RGBA(16, 16, 16)), hcDark: '#e5e5e5', hcLight: '#e5e5e5' }, nls.localize('tableHeaderForeground', "Table header foreground color"));
+export const tableHeaderBackground = registerColor('table.headerBackground', { dark: new Color(new RGBA(51, 51, 52)), light: new Color(new RGBA(245, 245, 245)), hcDark: '#333334', hcLight: '#fff' }, nls.localize('tableHeaderBackground', "Table header background color"));
+export const tableHeaderForeground = registerColor('table.headerForeground', { dark: new Color(new RGBA(229, 229, 229)), light: new Color(new RGBA(16, 16, 16)), hcDark: '#e5e5e5', hcLight: '#000' }, nls.localize('tableHeaderForeground', "Table header foreground color"));
 export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hcDark: null, hcLight: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active"));
 export const tableCellOutline = registerColor('table.cell.outline', { dark: '#e3e4e229', light: '#33333333', hcDark: '#e3e4e229', hcLight: '#e3e4e229' }, nls.localize('tableCellOutline', 'Color of the outline of a cell.'));

-export const disabledInputBackground = registerColor('input.disabled.background', { dark: '#444444', light: '#dcdcdc', hcDark: Color.black, hcLight: Color.black }, nls.localize('disabledInputBoxBackground', "Disabled Input box background."));
+export const disabledInputBackground = registerColor('input.disabled.background', { dark: '#444444', light: '#dcdcdc', hcDark: Color.black, hcLight: Color.white }, nls.localize('disabledInputBoxBackground', "Disabled Input box background."));
 export const disabledInputForeground = registerColor('input.disabled.foreground', { dark: '#888888', light: '#888888', hcDark: foreground, hcLight: foreground }, nls.localize('disabledInputBoxForeground', "Disabled Input box foreground."));
-export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hcDark: null, hcLight: null }, nls.localize('buttonFocusOutline', "Button outline color when focused."));
-export const disabledCheckboxForeground = registerColor('checkbox.disabled.foreground', { dark: '#888888', light: '#888888', hcDark: Color.black, hcLight: Color.black }, nls.localize('disabledCheckboxforeground', "Disabled checkbox foreground."));
+export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hcDark: null, hcLight: activeContrastBorder }, nls.localize('buttonFocusOutline', "Button outline color when focused."));
+export const disabledCheckboxForeground = registerColor('checkbox.disabled.foreground', { dark: '#888888', light: '#888888', hcDark: Color.black, hcLight: Color.white }, nls.localize('disabledCheckboxforeground', "Disabled checkbox foreground."));


 // SQL Agent Colors
-export const tableBackground = registerColor('agent.tableBackground', { light: '#fffffe', dark: '#333333', hcDark: Color.black, hcLight: Color.black }, nls.localize('agentTableBackground', "SQL Agent Table background color."));
-export const cellBackground = registerColor('agent.cellBackground', { light: '#faf5f8', dark: Color.black, hcDark: Color.black, hcLight: Color.black }, nls.localize('agentCellBackground', "SQL Agent table cell background color."));
+export const tableBackground = registerColor('agent.tableBackground', { light: '#fffffe', dark: '#333333', hcDark: Color.black, hcLight: Color.white }, nls.localize('agentTableBackground', "SQL Agent Table background color."));
+export const cellBackground = registerColor('agent.cellBackground', { light: '#faf5f8', dark: Color.black, hcDark: Color.black, hcLight: Color.white }, nls.localize('agentCellBackground', "SQL Agent table cell background color."));
 export const tableHoverBackground = registerColor('agent.tableHoverColor', { light: '#dcdcdc', dark: '#444444', hcDark: null, hcLight: null }, nls.localize('agentTableHoverBackground', "SQL Agent table hover background color."));
-export const jobsHeadingBackground = registerColor('agent.jobsHeadingColor', { light: '#f4f4f4', dark: '#444444', hcDark: '#2b56f2', hcLight: '#2b56f2' }, nls.localize('agentJobsHeadingColor', "SQL Agent heading background color."));
-export const cellBorderColor = registerColor('agent.cellBorderColor', { light: null, dark: null, hcDark: '#2b56f2', hcLight: '#2b56f2' }, nls.localize('agentCellBorderColor', "SQL Agent table cell border color."));
+export const jobsHeadingBackground = registerColor('agent.jobsHeadingColor', { light: '#f4f4f4', dark: '#444444', hcDark: '#2b56f2', hcLight: '#ffffff' }, nls.localize('agentJobsHeadingColor', "SQL Agent heading background color."));
+export const cellBorderColor = registerColor('agent.cellBorderColor', { light: null, dark: null, hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('agentCellBorderColor', "SQL Agent table cell border color."));

 export const resultsErrorColor = registerColor('results.error.color', { light: '#f44242', dark: '#f44242', hcDark: '#f44242', hcLight: '#f44242' }, nls.localize('resultsErrorColor', "Results messages error color."));
--- a/src/sql/workbench/browser/modal/media/calloutDialog.css
+++ b/src/sql/workbench/browser/modal/media/calloutDialog.css
@@ -24,6 +24,8 @@
 .modal.callout-dialog .modal-content .row  {
 	margin-bottom: 16px;
 }
+
+.hc-light .modal.callout-dialog .modal-dialog,
 .hc-black .modal.callout-dialog .modal-dialog {
 	box-shadow: none;
 }
@@ -55,9 +57,12 @@
 	width: 26px;
 }

+.hc-light .callout-arrow:before,
 .hc-black .callout-arrow:before {
 	box-shadow: none;
 }
+
+.hc-light .callout-arrow.from-left:before,
 .hc-black .callout-arrow.from-left:before {
 	box-shadow: none;
 }
--- a/src/sql/workbench/browser/modal/media/modal.css
+++ b/src/sql/workbench/browser/modal/media/modal.css
@@ -219,16 +219,16 @@
 	margin: 3px 10px 3px 3px;
 }

-.modal.flyout-dialog .dialog-message.info .dialog-message-button > a:focus,
-.modal.flyout-dialog .dialog-message.error .dialog-message-button > a:focus {
+.modal.flyout-dialog .dialog-message.info .dialog-message-button>a:focus,
+.modal.flyout-dialog .dialog-message.error .dialog-message-button>a:focus {
 	outline-color: #FFFFFF;
 }

-.modal.flyout-dialog .dialog-message.warning .dialog-message-button > a:focus {
+.modal.flyout-dialog .dialog-message.warning .dialog-message-button>a:focus {
 	outline-color: #000000;
 }

-.modal.flyout-dialog .dialog-message-button > a {
+.modal.flyout-dialog .dialog-message-button>a {
 	background-position-x: 2px !important;
 	background-color: inherit !important;
 	color: inherit !important;
@@ -298,11 +298,32 @@
 	background: url('error_notification_inverse.svg') center center no-repeat;
 }

+.hc-light .dialog-message.info .dialog-message-icon {
+	background: url('info_notification.svg') center center no-repeat !important;
+}
+
+.hc-light .dialog-message.error .dialog-message-icon {
+	background: url('error_notification.svg') center center no-repeat !important;
+}
+
+.hc-light .dialog-message.warning .dialog-message-icon {
+	background: url('warning_notification.svg') center center no-repeat !important;
+}
+
+.hc-light .copy-message-icon {
+	background: url('copy.svg') center center no-repeat !important;
+}
+
+.hc-light .close-message-icon {
+	background: url('close.svg') center center no-repeat !important;
+}
+
 .codicon.masked-icon.browse-local {
 	display: inline-block;
 	height: 25px;
 	width: 25px;
 }
+
 .codicon.masked-icon.browse-local:before {
 	height: 25px;
 	width: 25px;
--- a/src/sql/workbench/browser/modal/media/optionsDialog.css
+++ b/src/sql/workbench/browser/modal/media/optionsDialog.css
@@ -47,7 +47,8 @@
 	align-items: center;
 }

-.backButtonIcon {
+.backButtonIcon,
+.hc-light .backButtonIcon {
 	content: url('back.svg');
 	width: 20px;
 	margin-right: 10px;
@@ -73,7 +74,8 @@
 	background-size: 16px;
 }

-.vs .optionsDialog-options .optionsDialog-description .modal-title {
+.vs .optionsDialog-options .optionsDialog-description .modal-title,
+.hc-light .optionsDialog-options .optionsDialog-description .modal-title {
 	background-image: url('info_notification.svg')
 }

--- a/src/sql/workbench/browser/modal/modal.ts
+++ b/src/sql/workbench/browser/modal/modal.ts
@@ -754,6 +754,8 @@ export abstract class Modal extends Disposable implements IThemable {
 					box-shadow: 0px 3.2px 7.2px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.132),
 								0px 0.6px 1.8px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.108);
 				}
+
+				.hc-light .modal.callout-dialog .modal-dialog,
 				.hc-black .modal.callout-dialog .modal-dialog {
 					border-color: rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1);
 				}
@@ -764,6 +766,8 @@ export abstract class Modal extends Disposable implements IThemable {
 					background-color: ${this._dialogBodyBackground};
 					border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5);
 				}
+
+				.hc-light .callout-arrow:before,
 				.hc-black .callout-arrow:before {
 					border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1);
 				}
--- a/src/sql/workbench/browser/modelComponents/iconUtils.ts
+++ b/src/sql/workbench/browser/modelComponents/iconUtils.ts
@@ -25,7 +25,7 @@ export function createIconCssClass(iconPath: IconPath, className?: string): stri
 	removeCSSRulesContainingSelector(iconClass);
 	const icon = getLightIconUri(iconPath);
 	const iconDark = getDarkIconUri(iconPath) || icon;
-	createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(icon)}`);
+	createCSSRule(`.icon.${iconClass}, .hc-light .icon.${iconClass}`, `background-image: ${asCSSUrl(icon)}`);
 	createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(iconDark)}`);
 	return iconClass;
 }
--- a/src/sql/workbench/browser/modelComponents/media/editor.css
+++ b/src/sql/workbench/browser/modelComponents/media/editor.css
@@ -24,6 +24,10 @@ modelview-diff-editor-component {
 	font-size: 11px
 }

+.hc-light .modelview-diff-editor-title-background {
+	background-color: #6fc3df;
+}
+
 .vs-dark .modelview-diff-editor-title-background {
 	background-color: #434343;
 }
@@ -34,4 +38,4 @@ modelview-diff-editor-component {

 .modelview-diff-editor-title-background {
 	background-color: #d5d5d5;
-}
+}
--- a/src/sql/workbench/browser/modelComponents/media/groupLayout.css
+++ b/src/sql/workbench/browser/modelComponents/media/groupLayout.css
@@ -27,7 +27,8 @@
 	cursor: pointer;
 }

-.vs .modelview-group-header-collapsible.expanded {
+.vs .modelview-group-header-collapsible.expanded,
+.hc-light .modelview-group-header-collapsible.expanded {
 	background-image: url("expanded.svg");
 }

@@ -36,7 +37,8 @@
 	background-image: url("expanded_inverse.svg");
 }

-.vs .modelview-group-header-collapsible.collapsed {
+.vs .modelview-group-header-collapsible.collapsed,
+.hc-light .modelview-group-header-collapsible.collapsed {
 	background-image: url("collapsed.svg");
 }

--- a/src/sql/workbench/browser/modelComponents/media/loadingComponent.css
+++ b/src/sql/workbench/browser/modelComponents/media/loadingComponent.css
@@ -14,7 +14,8 @@
 	margin-left: 5px;
 }

-.vs .modelview-loadingComponent-spinner {
+.vs .modelview-loadingComponent-spinner,
+.hc-light .modelview-loadingComponent-spinner {
 	content: url("loading.svg");
 }

--- a/src/sql/workbench/browser/modelComponents/media/markdown.css
+++ b/src/sql/workbench/browser/modelComponents/media/markdown.css
@@ -56,15 +56,18 @@ modelview-dom-component .showEditorSelection li.code-line:hover:before {
 	left: -30px;
 }

-modelview-dom-component .showEditorSelection .code-active-line:before {
+modelview-dom-component .showEditorSelection .code-active-line:before,
+.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-active-line:before {
 	border-left: 3px solid rgba(0, 0, 0, 0.15);
 }

-modelview-dom-component .showEditorSelection .code-line:hover:before {
+modelview-dom-component .showEditorSelection .code-line:hover:before,
+.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-line:hover:before {
 	border-left: 3px solid rgba(0, 0, 0, 0.40);
 }

-modelview-dom-component .showEditorSelection .code-line .code-line:hover:before {
+modelview-dom-component .showEditorSelection .code-line .code-line:hover:before,
+.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-line .code-line:hover:before {
 	border-left: none;
 }

@@ -91,6 +94,14 @@ modelview-dom-component .showEditorSelection .code-line .code-line:hover:before
 	border-left: 3px solid rgba(255, 160, 0, 1);
 }

+.hc-light modelview-dom-component .showEditorSelection .code-active-line:before {
+	border-left: 3px solid #6fc3df;
+}
+
+.hc-light modelview-dom-component .showEditorSelection .code-line:hover:before {
+	border-left: 3px solid #6fc3df;
+}
+
 modelview-dom-component .showEditorSelection .code-line .code-line:hover:before {
 	border-left: none;
 }
@@ -205,6 +216,14 @@ modelview-dom-component pre {
 	background-color: rgba(220, 220, 220, 0.4);
 }

+.monaco-workbench.hc-light modelview-dom-component pre {
+	background-color: rgba(255, 255, 255);
+}
+
+.monaco-workbench.hc-light modelview-dom-component h1 {
+	border-color: rgba(255, 255, 255);
+}
+
 .monaco-workbench.vs-dark modelview-dom-component pre {
 	background-color: rgba(10, 10, 10, 0.4);
 }
--- a/src/sql/workbench/browser/modelComponents/media/text.css
+++ b/src/sql/workbench/browser/modelComponents/media/text.css
@@ -17,7 +17,7 @@ modelview-text div#textContainer {
 	margin-left: 5px;
 }

-.vs .modelview-text-tooltip {
+.vs .modelview-text-tooltip, .hc-light .modelview-text-tooltip {
 	background-image: url('info.svg')
 }

@@ -36,7 +36,7 @@ modelview-text div#textContainer {
 	margin-left: 14px;
 }

-.vs .modelview-text-tooltip .modelview-text-tooltip-content {
+.vs .modelview-text-tooltip .modelview-text-tooltip-content, .hc-light .modelview-text-tooltip .modelview-text-tooltip-content {
 	background-color: #f5f5f5;
 }

--- a/src/sql/workbench/contrib/accounts/browser/accountManagement.contribution.ts
+++ b/src/sql/workbench/contrib/accounts/browser/accountManagement.contribution.ts
@@ -68,7 +68,7 @@ ExtensionsRegistry.registerExtensionPoint<IAccountContrib | IAccountContrib[]>({
 			} else {
 				const light = resources.joinPath(extension.description.extensionLocation, icon.light);
 				const dark = resources.joinPath(extension.description.extensionLocation, icon.dark);
-				createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
+				createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
 				createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`);
 			}
 		}
--- a/src/sql/workbench/contrib/assessment/browser/media/asmt.css
+++ b/src/sql/workbench/contrib/assessment/browser/media/asmt.css
@@ -98,7 +98,8 @@ asmtview-component .asmtview-grid .slick-cell.error-row {
 	margin-left: 5px;
 }

-.vs asmtview-component .action-label.codicon.exportAsScriptIcon {
+.vs asmtview-component .action-label.codicon.exportAsScriptIcon,
+.hc-light asmtview-component .action-label.codicon.exportAsScriptIcon {
 	background-image: url("newquery.svg");
 }

@@ -107,7 +108,8 @@ asmtview-component .asmtview-grid .slick-cell.error-row {
 	background-image: url("newquery_inverse.svg");
 }

-.vs asmtview-component .action-label.codicon.asmt-learnmore {
+.vs asmtview-component .action-label.codicon.asmt-learnmore,
+.hc-light asmtview-component .action-label.codicon.asmt-learnmore {
 	background-image: url("configuredashboard.svg");
 }

--- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.css
+++ b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.css
@@ -53,7 +53,8 @@ dashboard-page .editor-toolbar {
 	background-size: 8px;
 }

-.dashboardEditor breadcrumb {
+.dashboardEditor breadcrumb,
+.hc-light .dashboardEditor breadcrumb {
 	font-size: 13px;
 	color: #323130;
 }
--- a/src/sql/workbench/contrib/dashboard/browser/dashboardIconUtil.ts
+++ b/src/sql/workbench/contrib/dashboard/browser/dashboardIconUtil.ts
@@ -21,7 +21,7 @@ export function createCSSRuleForIcon(icon: IUserFriendlyIcon, extension: IExtens
 		} else {
 			const light = resources.joinPath(extension.description.extensionLocation, icon.light);
 			const dark = resources.joinPath(extension.description.extensionLocation, icon.dark);
-			createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
+			createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
 			createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`);
 		}
 	}
--- a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
+++ b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
@@ -25,6 +25,7 @@
 }

 /* High Contrast Theming */
+.monaco-workbench.hc-light .server-explorer-viewlet .server-group,
 .monaco-workbench.hc-black .server-explorer-viewlet .server-group {
 	line-height: 20px;
 }
@@ -134,7 +135,9 @@
 }

 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
-.monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page {
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
+.monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
+.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page {
 	background: url('default_server.svg') center center no-repeat;
 }

--- a/src/sql/workbench/contrib/editData/browser/media/editData.css
+++ b/src/sql/workbench/contrib/editData/browser/media/editData.css
@@ -152,6 +152,22 @@ slick-grid.active .editDataGrid .slick-cell.selected {
 	--color-grid-dirty-text: #000;
 }

+.hc-light .slickgridContainer {
+	--color-content: #101010;
+	--color-content-disabled: grey;
+	--color-error: #E81123;
+	--color-success: #7CD300;
+	--color-bg-header: hsla(0,0%,50%,.2); /* used for pane toolbars */
+	--color-resize-handle: #000000;
+	--color-bg-content-header: #ffffff; /* used for color of grid headers */
+	--color-cell-border-active: #6fc3df;
+	--color-cell-bg-grid-selected: rgb(173, 214, 255);
+	--color-grid-link: #0078D7;
+	--color-grid-link-hover: #0b93ff;
+	--color-grid-dirty-background: #FFF;
+	--color-grid-dirty-text: #000;
+}
+
 .vs-dark .slickgridContainer {
 	--color-content: #E5E5E5;
 	--color-content-disabled: grey;
@@ -183,3 +199,6 @@ slick-grid.active .editDataGrid .slick-cell.selected {
 	--color-grid-dirty-background: #CCC;
 	--color-grid-dirty-text: #101010;
 }
+
+
+
--- a/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css
+++ b/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css
@@ -316,7 +316,8 @@ However we always want it to be the width of the container it is resizing.
 	z-index: 3;
 }

-.eps-container .ep-save-plan-icon {
+.eps-container .ep-save-plan-icon,
+.hc-light .eps-container .ep-save-plan-icon {
 	background-image: url(../images/actionIcons/save.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -331,7 +332,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-open-properties-icon {
+.eps-container .ep-open-properties-icon,
+.hc-light .eps-container .ep-open-properties-icon {
 	background-image: url(../images/actionIcons/openProperties.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -346,7 +348,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-open-query-icon {
+.eps-container .ep-open-query-icon,
+.hc-light .eps-container .ep-open-query-icon {
 	background-image: url(../images/actionIcons/openQuery.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -361,7 +364,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-open-plan-file-icon {
+.eps-container .ep-open-plan-file-icon,
+.hc-light .eps-container .ep-open-plan-file-icon {
 	background-image: url(../images/actionIcons/openPlanFile.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -378,7 +382,9 @@ However we always want it to be the width of the container it is resizing.


 .eps-container .ep-search-icon,
-.top-operations-tab .ep-search-icon {
+.top-operations-tab .ep-search-icon,
+.hc-light .eps-container .ep-search-icon,
+.hc-light .top-operations-tab .ep-search-icon {
 	background-image: url(../images/actionIcons/search.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -396,7 +402,9 @@ However we always want it to be the width of the container it is resizing.
 }

 .eps-container .ep-filter-icon,
-.top-operations-tab .ep-filter-icon {
+.top-operations-tab .ep-filter-icon,
+.hc-light .eps-container .ep-filter-icon,
+.hc-light .top-operations-tab .ep-filter-icon {
 	background-image: url(../images/actionIcons/filter.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -413,7 +421,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-sort-alphabetically-icon {
+.eps-container .ep-sort-alphabetically-icon,
+.hc-light .eps-container .ep-sort-alphabetically-icon {
 	background-image: url(../images/actionIcons/sortAlphabetically.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -428,7 +437,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-sort-reverse-alphabetically-icon {
+.eps-container .ep-sort-reverse-alphabetically-icon,
+.hc-light .eps-container .ep-sort-reverse-alphabetically-icon {
 	background-image: url(../images/actionIcons/sortReverseAlphabetically.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -443,7 +453,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-sort-display-order-icon {
+.eps-container .ep-sort-display-order-icon,
+.hc-light .eps-container .ep-sort-display-order-icon {
 	background-image: url(../images/actionIcons/sortByDisplayOrder.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -458,7 +469,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-zoom-in-icon {
+.eps-container .ep-zoom-in-icon,
+.hc-light .eps-container .ep-zoom-in-icon {
 	background-image: url(../images/actionIcons/zoomIn.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -473,7 +485,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-zoom-out-icon {
+.eps-container .ep-zoom-out-icon,
+.hc-light .eps-container .ep-zoom-out-icon {
 	background-image: url(../images/actionIcons/zoomOut.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -488,7 +501,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-custom-zoom-icon {
+.eps-container .ep-custom-zoom-icon,
+.hc-light .eps-container .ep-custom-zoom-icon {
 	background-image: url(../images/actionIcons/customZoom.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -503,7 +517,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-zoom-to-fit-icon {
+.eps-container .ep-zoom-to-fit-icon,
+.hc-light .eps-container .ep-zoom-to-fit-icon {
 	background-image: url(../images/actionIcons/zoomToFit.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -518,21 +533,24 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-zoom-icon {
+.eps-container .ep-zoom-icon,
+.hc-light .eps-container .ep-zoom-icon {
 	background-image: url(../images/actionIcons/zoom.svg);
 	background-size: 16px 16px;
 	background-position: center;
 	background-repeat: no-repeat;
 }

-.eps-container .ep-zoom-icon {
+.eps-container .ep-zoom-icon,
+.hc-light .eps-container .ep-zoom-icon {
 	background-image: url(../images/actionIcons/zoomDark.svg);
 	background-size: 16px 16px;
 	background-position: center;
 	background-repeat: no-repeat;
 }

-.eps-container .ep-highlight-expensive-operation-icon {
+.eps-container .ep-highlight-expensive-operation-icon,
+.hc-light .eps-container .ep-highlight-expensive-operation-icon {
 	background-image: url(../images/actionIcons/highlightExpensiveOperation.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -547,7 +565,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-enable-tooltip-icon {
+.eps-container .ep-enable-tooltip-icon,
+.hc-light .eps-container .ep-enable-tooltip-icon {
 	background-image: url(../images/actionIcons/enableTooltip.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -562,7 +581,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-disable-tooltip-icon {
+.eps-container .ep-disable-tooltip-icon,
+.hc-light .eps-container .ep-disable-tooltip-icon {
 	background-image: url(../images/actionIcons/disableTooltip.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -577,7 +597,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-add-icon {
+.eps-container .ep-add-icon,
+.hc-light .eps-container .ep-add-icon {
 	background-image: url(../images/actionIcons/add.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -592,14 +613,16 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-settings-icon {
+.eps-container .ep-settings-icon,
+.hc-light .eps-container .ep-settings-icon {
 	background-image: url(../images/actionIcons/settings.svg);
 	background-size: 16px 16px;
 	background-position: center;
 	background-repeat: no-repeat;
 }

-.ep-split-screen-horizontally-icon {
+.ep-split-screen-horizontally-icon,
+.hc-light .ep-split-screen-horizontally-icon {
 	background-image: url(../images/actionIcons/splitScreenHorizontally.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -614,7 +637,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-split-screen-vertically-icon {
+.eps-container .ep-split-screen-vertically-icon,
+.hc-light .eps-container .ep-split-screen-vertically-icon {
 	background-image: url(../images/actionIcons/splitScreenVertically.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -629,7 +653,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-reset-zoom-icon {
+.eps-container .ep-reset-zoom-icon,
+.hc-light .eps-container .ep-reset-zoom-icon {
 	background-image: url(../images/actionIcons/resetZoom.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -645,7 +670,8 @@ However we always want it to be the width of the container it is resizing.
 }


-.eps-container .ep-plan-compare-icon {
+.eps-container .ep-plan-compare-icon,
+.hc-light .eps-container .ep-plan-compare-icon {
 	background-image: url(../images/actionIcons/execution-plan-compare.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -660,7 +686,8 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }

-.eps-container .ep-properties-different {
+.eps-container .ep-properties-different,
+.hc-light .eps-container .ep-properties-different {
 	background-image: url(../images/actionIcons/different.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -689,7 +716,8 @@ However we always want it to be the width of the container it is resizing.
 	margin-left: -28px;
 }

-.eps-container .ep-properties-down-arrow {
+.eps-container .ep-properties-down-arrow,
+.hc-light .eps-container .ep-properties-down-arrow {
 	background-image: url(../images/actionIcons/downArrow.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -708,7 +736,8 @@ However we always want it to be the width of the container it is resizing.
 	height: 16px;
 }

-.eps-container .ep-properties-up-arrow {
+.eps-container .ep-properties-up-arrow,
+.hc-light .eps-container .ep-properties-up-arrow {
 	background-image: url(../images/actionIcons/upArrow.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -727,7 +756,8 @@ However we always want it to be the width of the container it is resizing.
 	height: 16px;
 }

-.eps-container .ep-top-operations {
+.eps-container .ep-top-operations,
+.hc-light .eps-container .ep-top-operations {
 	background-image: url(../images/actionIcons/topOperations.svg);
 	background-size: 16px 16px;
 	background-position: center;
@@ -851,7 +881,6 @@ However we always want it to be the width of the container it is resizing.
 	height: fit-content;
 }

-
 .eps-container .comparison-editor .plan-comparison-container .split-view-container .plan-container .plan-diagram {
 	flex: 1;
 	overflow: scroll;
--- a/src/sql/workbench/contrib/jobManagement/browser/media/jobHistory.css
+++ b/src/sql/workbench/contrib/jobManagement/browser/media/jobHistory.css
@@ -46,6 +46,10 @@ notebookhistory-component .all-jobs {
 	color: #ffffff;
 }

+.hc-light .overview-container .overview-tab {
+	color: #000000;
+}
+
 .overview-container > .overview-tab {
 	position: relative;
 	margin-bottom: 1px;
@@ -75,6 +79,11 @@ input#accordion{
 	border: 1px solid #2b56f2;
 }

+.hc-light .overview-container .overview-tab label {
+	background: #ffffff;
+	border: 1px solid #6fc3df;
+}
+
 .overview-container .overview-tab label {
 	position: relative;
 	display: block;
@@ -96,6 +105,12 @@ input#accordion{
 	border: 1px solid #2b56f2;
 }

+.hc-light .overview-tab .accordion-content,
+.grid-arrow {
+	background: #ffffff;
+	border: 1px solid #6fc3df;
+}
+
 .overview-tab .accordion-content {
 	max-height: 0;
 	overflow: hidden;
@@ -136,7 +151,8 @@ input#accordion:checked ~ .accordion-content,
 	transition: all 0.3s;
 }

-.all-jobs > .back-button-icon {
+.all-jobs > .back-button-icon,
+.hc-light .all-jobs > .back-button-icon {
 	content: url("back.svg");
 	width: 20px;
 	margin-right: 10px;
@@ -151,7 +167,8 @@ input#accordion:checked ~ .accordion-content,
 	content: url("back_inverse.svg");
 }

-.vs .action-label.codicon.newStepIcon {
+.vs .action-label.codicon.newStepIcon,
+.hc-light .action-label.codicon.newStepIcon {
 	background-image: url("new.svg");
 }

@@ -168,7 +185,9 @@ notebookhistory-component .vs-dark .codicon.edit {
 }

 jobhistory-component .vs .codicon.edit,
-notebookhistory-component .vs .codicon.edit {
+jobhistory-component .hc-light .codicon.edit,
+notebookhistory-component .vs .codicon.edit,
+notebookhistory-component .hc-light .codicon.edit {
 	background-image: url("edit.svg");
 }

@@ -231,6 +250,10 @@ table.step-list tr.step-row td {
 	border-left: 3px solid #2b56f2;
 }

+.hc-light .history-details > .job-steps {
+	border-left: 3px solid #6fc3df;
+}
+
 .history-details > .job-steps > table.step-list {
 	padding-bottom: 10px;
 	display: flex;
@@ -331,6 +354,11 @@ notebookhistory-component > .agent-actionbar-container {
 	border-top: 3px solid #2b56f2;
 }

+.hc-light jobhistory-component > .agent-actionbar-container,
+.hc-light notebookhistory-component > .agent-actionbar-container {
+	border-top: 3px solid #6fc3df;
+}
+
 jobhistory-component
 	.step-table.prev-run-list
 	.monaco-tree-wrapper
@@ -374,7 +402,8 @@ notebookhistory-component
 	height: 50px;
 }

-.notebook-grid-item:hover {
+.notebook-grid-item:hover,
+.hc-light .notebook-grid-item:hover {
 	background: #dcdcdc !important;
 }

@@ -396,6 +425,11 @@ notebookhistory-component
 	background-repeat: no-repeat;
 }

+.hc-light .notebook-grid-item > .img-success {
+	background-image: url(./NotebookSuccess_16x.svg);
+	background-position: center;
+}
+
 .vs-dark .notebook-grid-item > .img-success,
 .hc-black .notebook-grid-item > .img-success {
 	background-image: url(./NotebookSuccess_16x_white.svg);
@@ -415,6 +449,11 @@ notebookhistory-component
 	background-repeat: no-repeat;
 }

+.hc-light .notebook-grid-item > .img-failure {
+	background-image: url(./NotebookFail_16x.svg);
+	background-position: center;
+}
+
 .vs-dark .notebook-grid-item > .img-failure,
 .hc-black .notebook-grid-item > .img-failure {
 	background-image: url(./NotebookFail_16x_white.svg);
@@ -435,6 +474,11 @@ notebookhistory-component
 	cursor: pointer;
 }

+.hc-light .notebook-grid-item > .img-error {
+	background-image: url(./NotebookError_16x.svg);
+	background-position: center;
+}
+
 .vs-dark .notebook-grid-item > .img-error,
 .hc-black .notebook-grid-item > .img-error {
 	background-image: url(./NotebookError_16x_white.svg);
@@ -475,3 +519,8 @@ notebookhistory-component
 	background: #000000;
 	border: 1px solid #2b56f2;
 }
+
+.hc-light .grid-title {
+	background: #ffffff;
+	border: 1px solid #6fc3df;
+}
--- a/src/sql/workbench/contrib/jobManagement/browser/media/jobStepsView.css
+++ b/src/sql/workbench/contrib/jobManagement/browser/media/jobStepsView.css
@@ -70,7 +70,8 @@
 	content: url("step_inverse.svg");
 }

-.steps-header > .steps-icon {
+.steps-header > .steps-icon,
+.hc-light .steps-header > .steps-icon {
 	content: url("step.svg");
 }

@@ -100,6 +101,13 @@ jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row {
 	background: none !important;
 }

+.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row,
+.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.focused,
+.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.selected,
+.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.focused.selected {
+	background: #ffffff !important;
+}
+
 jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row,
 jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.focused,
 jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.selected,
--- a/src/sql/workbench/contrib/jobManagement/browser/media/jobs.css
+++ b/src/sql/workbench/contrib/jobManagement/browser/media/jobs.css
@@ -30,6 +30,10 @@ notebooksview-component {
 	border-bottom: 3px solid #2b56f2;
 }

+.hc-light .job-heading-container {
+	border-bottom: 3px solid #6fc3df;
+}
+
 .jobview-grid {
 	height: calc(100% - 75px);
 	width: 100%;
@@ -69,6 +73,23 @@ notebooksview-component {
 	border: 1px solid #2b56f2;
 }

+.hc-light
+	#jobsDiv
+	jobsview-component
+	.jobview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell,
+.hc-light
+	#notebooksDiv
+	notebooksview-component
+	.jobnotebooksview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell {
+	border: 1px solid #6fc3df;
+}
+
 #jobsDiv
 	jobsview-component
 	.jobview-grid
@@ -268,7 +289,8 @@ notebooksview-component {
 	margin-left: 20px;
 }

-.jobsview-icon {
+.jobsview-icon,
+.hc-light .jobsview-icon {
 	background-image: url("./job.svg");
 }

@@ -277,7 +299,8 @@ notebooksview-component {
 	background-image: url("./job_inverse.svg");
 }

-.notebooksview-icon {
+.notebooksview-icon,
+.hc-light .notebooksview-icon {
 	background-image: url("./notebook.svg");
 }

@@ -286,7 +309,8 @@ notebooksview-component {
 	background-image: url("./notebook_inverse.svg");
 }

-.alertsview-icon {
+.alertsview-icon,
+.hc-light .alertsview-icon {
 	background-image: url("./alert.svg");
 }

@@ -295,7 +319,8 @@ notebooksview-component {
 	background-image: url("./alert_inverse.svg");
 }

-.proxiesview-icon {
+.proxiesview-icon,
+.hc-light .proxiesview-icon {
 	background-image: url("./proxy.svg");
 }

@@ -304,7 +329,8 @@ notebooksview-component {
 	background-image: url("./proxy_inverse.svg");
 }

-.operatorsview-icon {
+.operatorsview-icon,
+.hc-light .operatorsview-icon {
 	background-image: url("./operator.svg");
 }

@@ -342,6 +368,14 @@ agentview-component
 	border-left: 1px dotted #2b56f2;
 }

+.hc-light
+	.jobview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
+	border-left: 1px dotted #6fc3df;
+}
+
 .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
 	border-left: 1px dotted #444444;
 }
@@ -519,6 +553,57 @@ agentview-component
 	background: none !important;
 }

+.hc-light
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.hc-light
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.hc-light
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+.hc-light
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.hc-light
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.hc-light
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell {
+	background: #fff !important;
+}
+
 table.jobprevruns div.bar,
 table.jobprevruns div.bar0,
 table.jobprevruns div.bar1,
@@ -574,7 +659,8 @@ table.jobprevruns > tbody {
 	display: block;
 }

-.vs .action-label.codicon.refreshIcon {
+.vs .action-label.codicon.refreshIcon,
+.hc-light .action-label.codicon.refreshIcon {
 	background-image: url("refresh.svg");
 }

@@ -583,7 +669,8 @@ table.jobprevruns > tbody {
 	background-image: url("refresh_inverse.svg");
 }

-.vs .action-label.codicon.openNotebook {
+.vs .action-label.codicon.openNotebook,
+.hc-light .action-label.codicon.openNotebook {
 	background-image: url("open_notebook.svg");
 }

--- a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css
@@ -49,6 +49,7 @@ cell-toolbar-component .carbon-taskbar.monaco-toolbar .monaco-action-bar ul.acti
 cell-toolbar-component .codicon.masked-icon,
 .vs cell-toolbar-component .codicon.masked-icon,
 .vs-dark cell-toolbar-component .codicon.masked-icon,
-.hc-black cell-toolbar-component .codicon.masked-icon {
+.hc-black cell-toolbar-component .codicon.masked-icon,
+.hc-light cell-toolbar-component .codicon.masked-icon {
 	background-image: none;
 }
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/code.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/code.css
@@ -44,7 +44,8 @@ code-component .toolbar .carbon-taskbar.monaco-toolbar .monaco-action-bar .codic
 	background-position: center;
 }

-.notebook-cell:not(.active):hover code-component .toolbarIconRun {
+.notebook-cell:not(.active):hover code-component .toolbarIconRun,
+.hc-light .notebook-cell:not(.active):hover code-component .toolbarIconRun {
 	background-image: url('./media/execute_cell_grey.svg');
 }
 .vs-dark .notebook-cell:not(.active):hover code-component .toolbarIconRun {
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/markdown.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/markdown.css
@@ -89,6 +89,18 @@
 	border-left: none;
 }

+.hc-light .notebook-preview .showEditorSelection .code-active-line:before {
+	border-left: 3px solid rgba(111, 195, 223, 0.4);
+}
+
+.hc-light .notebook-preview .showEditorSelection .code-line:hover:before {
+	border-left: 3px solid rgba(111, 195, 223, 0.60);
+}
+
+.hc-light .notebook-preview .showEditorSelection .code-line .code-line:hover:before {
+	border-left: none;
+}
+
 .notebook-preview img {
 	max-width: 100%;
 	max-height: 100%;
@@ -209,6 +221,14 @@
 	border-color: rgb(0, 0, 0);
 }

+.hc-light .notebook-preview pre {
+	background-color: rgb(255, 255, 255);
+}
+
+.hc-light .notebook-preview h1 {
+	border-color: rgb(255, 255, 255);
+}
+
 .notebook-preview table > thead > tr > th {
 	border-color: rgba(0, 0, 0, 0.69);
 }
--- a/src/sql/workbench/contrib/notebook/browser/notebook.css
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.css
@@ -107,7 +107,8 @@
 }

 /* non-preview */
-.notebookEditor :not(.in-preview) .codicon.icon-add {
+.notebookEditor :not(.in-preview) .codicon.icon-add,
+.hc-light .notebookEditor :not(.in-preview) .codicon.icon-add {
 	background-image: url("./media/light/add.svg");
 }

@@ -116,7 +117,8 @@
 	background-image: url("./media/dark/add_inverse.svg");
 }

-.notebookEditor :not(.in-preview) .codicon.icon-run-cells {
+.notebookEditor :not(.in-preview) .codicon.icon-run-cells,
+.hc-light .notebookEditor :not(.in-preview) .codicon.icon-run-cells {
 	background-image: url("./media/light/run_cells.svg");
 }

@@ -125,7 +127,8 @@
 	background-image: url("./media/dark/run_cells_inverse.svg");
 }

-.notebookEditor :not(.in-preview) .codicon.icon-trusted {
+.notebookEditor :not(.in-preview) .codicon.icon-trusted,
+.hc-light .notebookEditor :not(.in-preview) .codicon.icon-trusted {
 	background-image: url("./media/light/trusted.svg");
 }

@@ -133,7 +136,9 @@
 .hc-black .notebookEditor :not(.in-preview) .codicon.icon-trusted {
 	background-image: url("./media/dark/trusted_inverse.svg");
 }
-.notebookEditor :not(.in-preview) .codicon.icon-notTrusted {
+
+.notebookEditor :not(.in-preview) .codicon.icon-notTrusted,
+.hc-light .notebookEditor :not(.in-preview) .codicon.icon-notTrusted {
 	background-image: url("./media/light/nottrusted.svg");
 }

@@ -142,7 +147,8 @@
 	background-image: url("./media/dark/nottrusted_inverse.svg");
 }

-.notebookEditor :not(.in-preview) .codicon.icon-show-cells {
+.notebookEditor :not(.in-preview) .codicon.icon-show-cells,
+.hc-light .notebookEditor :not(.in-preview) .codicon.icon-show-cells {
 	background-image: url("./media/light/show_code.svg");
 }

@@ -151,7 +157,8 @@
 	background-image: url("./media/dark/show_code_inverse.svg");
 }

-.notebookEditor :not(.in-preview) .codicon.icon-hide-cells {
+.notebookEditor :not(.in-preview) .codicon.icon-hide-cells,
+.hc-light .notebookEditor :not(.in-preview) .codicon.icon-hide-cells {
 	background-image: url("./media/light/hide_code.svg");
 }

@@ -160,7 +167,8 @@
 	background-image: url("./media/dark/hide_code_inverse.svg");
 }

-.notebookEditor :not(.in-preview) .codicon.icon-clear-results {
+.notebookEditor :not(.in-preview) .codicon.icon-clear-results,
+.hc-light .notebookEditor :not(.in-preview) .codicon.icon-clear-results {
 	background-image: url("./media/light/clear_results.svg");
 }

@@ -170,6 +178,7 @@
 }

 .notebookEditor .in-preview .codicon.masked-icon,
+.hc-light .nodebookEditor .in-preview .codicon.masked-icon,
 .vs-dark .notebookEditor .in-preview .codicon.icon-clear-results,
 .hc-black .notebookEditor .in-preview .codicon.icon-clear-results {
 	background-image: none;
@@ -215,7 +224,8 @@
 	min-height: 39px;
 }

-.monaco-workbench .notebook-action.new-notebook {
+.monaco-workbench .notebook-action.new-notebook,
+.monaco-workbench.hc-light .notebook-action.new-notebook {
 	background: url("./media/light/new_notebook.svg") center center no-repeat;
 }

--- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
@@ -72,11 +72,13 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		const hcOutline = theme.getColor(contrastBorder);
 		if (outline) {
 			collector.addRule(`
-				.hc-black .notebookEditor .notebook-cell:not(.active) code-component {
+				.hc-black .notebookEditor .notebook-cell:not(.active) code-component,
+				.hc-light .notebookEditor .notebook-cell:not(.active) code-component {
 					border-color: ${hcOutline};
 					border-width: 0px 0px 1px 0px;
 				}
-				.hc-black .notebookEditor .notebook-cell:not(.active) {
+				.hc-black .notebookEditor .notebook-cell:not(.active),
+				.hc-light .notebookEditor .notebook-cell:not(.active) {
 					outline-color: ${hcOutline};
 					outline-width: 1px;
 					outline-style: solid;
--- a/src/sql/workbench/contrib/notebook/browser/notebookViews/cellToolbar.css
+++ b/src/sql/workbench/contrib/notebook/browser/notebookViews/cellToolbar.css
@@ -48,7 +48,8 @@
 .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon,
 .vs .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon,
 .vs-dark .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon,
-.hc-black .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon {
+.hc-black .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon,
+.hc-light .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon {
 	background-image: none;
 }

--- a/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts
@@ -6,7 +6,7 @@
 import { OnInit, Component, Input, Inject, ViewChild, ElementRef, ChangeDetectorRef, forwardRef } from '@angular/core';
 import * as azdata from 'azdata';

-import { IGridDataProvider, getResultsString, getTableHeaderString } from 'sql/workbench/services/query/common/gridDataProvider';
+import { IGridDataProvider, getResultsString } from 'sql/workbench/services/query/common/gridDataProvider';
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
@@ -410,16 +410,7 @@ export class DataResourceDataProvider implements IGridDataProvider {
 			let results = await getResultsString(this, selection, includeHeaders, tableView);
 			this._clipboardService.writeText(results);
 		} catch (error) {
-			this._notificationService.error(localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error)));
-		}
-	}
-
-	async copyHeaders(selection: Slick.Range[]): Promise<void> {
-		try {
-			const results = getTableHeaderString(this, selection);
-			await this._clipboardService.writeText(results);
-		} catch (error) {
-			this._notificationService.error(localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error)));
+			this._notificationService.error(localize('copyFailed', "Copy failed with error {0}", getErrorMessage(error)));
 		}
 	}

--- a/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css
+++ b/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css
@@ -4,7 +4,8 @@
 *--------------------------------------------------------------------------------------------*/

 /* Icons for various registered servers actions */
-.monaco-workbench .actions-container .action-label.add-server-action {
+.monaco-workbench .actions-container .action-label.add-server-action,
+.monaco-workbench.hc-light .actions-container .action-label.add-server-action {
 	background-image: url('add_server.svg') !important;
 }

@@ -13,7 +14,8 @@
 	background-image: url('add_server_inverse.svg') !important;
 }

-.monaco-workbench .dataExplorer-viewlet .actions-container .action-label.add-server-group-action {
+.monaco-workbench .dataExplorer-viewlet .actions-container .action-label.add-server-group-action,
+.monaco-workbench.hc-light .dataExplorer-viewlet .actions-container .action-label.add-server-group-action {
 	background-image: url('new_servergroup.svg') !important;
 }

@@ -22,7 +24,8 @@
 	background-image: url('new_servergroup_inverse.svg') !important;
 }

-.monaco-workbench .actions-container .action-label.active-connections-action {
+.monaco-workbench .actions-container .action-label.active-connections-action,
+.monaco-workbench.hc-light .actions-container .action-label.active-connections-action {
 	background-image: url('connected_active_server.svg') !important;
 }

@@ -31,7 +34,8 @@
 	background-image: url('connected_active_server_inverse.svg') !important;
 }

-.monaco-workbench .actions-container .action-label.server-page {
+.monaco-workbench .actions-container .action-label.server-page,
+.monaco-workbench.hc-light .actions-container .action-label.server-page {
 	background-image: url('server_page.svg') !important;
 }

--- a/src/sql/workbench/contrib/query/browser/actions.ts
+++ b/src/sql/workbench/contrib/query/browser/actions.ts
@@ -23,6 +23,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { getChartMaxRowCount, notifyMaxRowCountExceeded } from 'sql/workbench/contrib/charts/browser/utils';
 import { IEncodingSupport } from 'vs/workbench/services/textfile/common/textfiles';
+import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';

 export interface IGridActionContext {
 	gridDataProvider: IGridDataProvider;
@@ -126,13 +127,19 @@ export class CopyHeadersAction extends Action {
 	private static ID = 'grid.copyHeaders';
 	private static LABEL = localize('copyHeaders', 'Copy Headers');

-	constructor() {
+	constructor(
+		@IClipboardService private clipboardService: IClipboardService
+	) {
 		super(CopyHeadersAction.ID, CopyHeadersAction.LABEL);
 	}

 	public override async run(context: IGridActionContext): Promise<void> {
-		const selection = mapForNumberColumn(context.selection);
-		await context.gridDataProvider.copyHeaders(selection);
+		// Starting at index 1 to ignore the first column of row numbers
+		const columnHeaders = context.table.columns.slice(1, context.table.columns.length)
+			.map(c => c.name ? c.name : '')
+			.join(',');
+
+		await this.clipboardService.writeText(columnHeaders);
 	}
 }

--- a/src/sql/workbench/contrib/query/browser/modelViewTab/media/dialogModal.css
+++ b/src/sql/workbench/contrib/query/browser/modelViewTab/media/dialogModal.css
@@ -45,7 +45,8 @@
 	background-position: center;
 }

-.vs .footer-button .validating {
+.vs .footer-button .validating,
+.hc-light .footer-button .validating {
 	background-image: url("loading.svg");
 }

--- a/src/sql/workbench/contrib/query/browser/modelViewTab/media/wizardNavigation.css
+++ b/src/sql/workbench/contrib/query/browser/modelViewTab/media/wizardNavigation.css
@@ -17,6 +17,13 @@
 	background-color: unset;
 }

+.hc-light .wizardNavigation-container {
+	border-right-color: #6fc3df;
+	border-right-style: solid;
+	border-right-width: 1px;
+	background-color: unset;
+}
+
 .wizardNavigation-pageNumber {
 	flex-grow: 1;
 	display: flex;
@@ -51,6 +58,14 @@
 	border-color: white;
 }

+.hc-light .wizardNavigation-dot {
+	flex-grow: 1;
+	background-color: unset;
+	border-style: solid;
+	border-width: 1px;
+	border-color: black;
+}
+
 .wizardNavigation-connector {
 	width: 3px;
 	display: inline-block;
@@ -62,6 +77,10 @@
 	display: none;
 }

+.hc-light .wizardNavigation-connector {
+	display: none;
+}
+
 .wizardNavigation-connector.active,
 .wizardNavigation-dot.active {
 	background-color: rgb(9, 109, 201);
@@ -73,16 +92,33 @@
 	border-style: solid;
 }

+.hc-light .wizardNavigation-dot.active {
+	border-color: #6fc3df;
+	background-color: unset;
+	border-style: solid;
+}
+
 .hc-black .wizardNavigation-dot.active:hover,
 .hc-black .wizardNavigation-dot.active.currentPage:hover {
 	border-color: #F38518;
 	border-style: dashed;
 }

+.hc-light .wizardNavigation-dot.active:hover,
+.hc-light .wizardNavigation-dot.active.currentPage:hover {
+	border-color: #0F4A85;
+	border-style: dashed;
+}
+
 .wizardNavigation-dot.active.currentPage {
 	border-style: double;
 }

+.hc-light .wizardNavigation-dot.active.currentPage {
+	border-style: solid;
+	border-color: #0F4A85;
+}
+
 .hc-black .wizardNavigation-dot.active.currentPage {
 	border-style: solid;
 	border-color: #F38518;
@@ -90,4 +126,4 @@

 .wizardNavigation-connector.invisible {
 	visibility: hidden;
-}
+}
--- a/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css
+++ b/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css
@@ -50,7 +50,8 @@
 	display: inline-block;
 }

-.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started {
+.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started,
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started {
 	background-image: url('status_queuedtask.svg');
 }

@@ -59,7 +60,8 @@
 	background-image: url('status_queuedtask_inverse.svg');
 }

-.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress {
+.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress,
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress {
 	background-image: url("loading.svg");
 }

@@ -68,14 +70,17 @@
 	background-image: url("loading_inverse.svg");
 }

-.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success {
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success,
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success {
 	background-image: url("status_success.svg");
 }

-.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled {
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled,
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled {
 	background-image: url("status_cancelled.svg");
 }

-.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.error {
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.error,
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.error {
 	background-image: url("error.svg");
 }
--- a/src/sql/workbench/contrib/views/browser/treeView.ts
+++ b/src/sql/workbench/contrib/views/browser/treeView.ts
@@ -808,7 +808,8 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
 			}
 			return ({ start, end });
 		}) : undefined;
-		const icon = this.themeService.getColorTheme().type === ColorScheme.LIGHT ? node.icon : node.iconDark;
+		const isLightTheme = [ColorScheme.LIGHT, ColorScheme.HIGH_CONTRAST_LIGHT].includes(this.themeService.getColorTheme().type);
+		const icon = isLightTheme ? node.icon : node.iconDark;
 		const iconUrl = icon ? URI.revive(icon) : null;
 		const title = node.tooltip ? isString(node.tooltip) ? node.tooltip : undefined : resource ? undefined : label;
 		const sqlIcon = node.sqlIcon;
@@ -916,7 +917,8 @@ class Aligner extends Disposable {
 	}

 	private hasIcon(node: ITreeItem): boolean {
-		const icon = this.themeService.getColorTheme().type === ColorScheme.LIGHT ? node.icon : node.iconDark;
+		const isLightTheme = [ColorScheme.LIGHT, ColorScheme.HIGH_CONTRAST_LIGHT].includes(this.themeService.getColorTheme().type);
+		const icon = isLightTheme ? node.icon : node.iconDark;
 		if (icon) {
 			return true;
 		}
--- a/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css
+++ b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css
@@ -32,7 +32,10 @@

 .hc-black .monaco-workbench.blur-background #workbench\.parts\.editor,
 .hc-black .monaco-workbench.blur-background #workbench\.parts\.panel,
-.hc-black .monaco-workbench.blur-background #workbench\.parts\.sidebar {
+.hc-black .monaco-workbench.blur-background #workbench\.parts\.sidebar,
+.hc-light .monaco-workbench.blur-background #workbench\.parts\.editor,
+.hc-light .monaco-workbench.blur-background #workbench\.parts\.panel,
+.hc-light .monaco-workbench.blur-background #workbench\.parts\.sidebar {
 	opacity: .2;
 }

--- a/src/sql/workbench/services/connection/browser/media/connectionDialog.css
+++ b/src/sql/workbench/services/connection/browser/media/connectionDialog.css
@@ -83,6 +83,7 @@

 .vs-dark .connection-dialog .connection-history-actions .action-label.codicon,
 .hc-black .connection-dialog .connection-history-actions .action-label.codicon,
+.hc-light .connection-dialog .connection-history-actions .action-label.codicon,
 .connection-dialog .connection-history-actions .action-label.codicon {
 	display: block;
 	height: 20px;
@@ -95,7 +96,8 @@
 	width: auto;
 }

-.search-action.clear-search-results {
+.search-action.clear-search-results,
+.hc-light .search-action.clear-search-results {
 	background: url('clear-search-results.svg');
 }

@@ -112,6 +114,7 @@
 }

 .custom-connection-options .connection-label .dialog-label-container,
+.hc-light .custom-connection-options .connection-label .dialog-label-container,
 .vs-dark .custom-connection-options .connection-label .dialog-label-container,
 .hc-black .custom-connection-options .connection-label .dialog-label-container {
 	background-size: 9px;
@@ -122,7 +125,8 @@
 }

 .dialog-label-container.info-icon,
-.vs .dialog-label-container.info-icon {
+.vs .dialog-label-container.info-icon,
+.hc-light .dialog-label-container.info-icon {
 	background-image: url("info.svg");
 }

--- a/src/sql/workbench/services/dialog/browser/media/dialogModal.css
+++ b/src/sql/workbench/services/dialog/browser/media/dialogModal.css
@@ -45,7 +45,8 @@
 	background-position: center;
 }

-.vs .footer-button .validating {
+.vs .footer-button .validating,
+.hc-light .footer-button .validating {
 	background-image: url("loading.svg");
 }

--- a/src/sql/workbench/services/dialog/browser/media/wizardNavigation.css
+++ b/src/sql/workbench/services/dialog/browser/media/wizardNavigation.css
@@ -18,6 +18,13 @@
 	background-color: unset;
 }

+.hc-light .wizardNavigation-container {
+	border-right-color: rgb(111, 195, 223);
+	border-right-style: solid;
+	border-right-width: 1px;
+	background-color: unset;
+}
+
 .wizardNavigation-pageNumber {
 	flex-grow: 1;
 	display: flex;
@@ -52,6 +59,13 @@
 	border-color: white;
 }

+.hc-light .wizardNavigation-dot {
+	flex-grow: 1;
+	border-style: solid;
+	border-width: 1px;
+	color: black;
+}
+
 .wizardNavigation-connector {
 	width: 3px;
 	display: inline-block;
@@ -60,7 +74,16 @@
 }

 .hc-black .wizardNavigation-connector {
-	display: none;
+	width: 3px;
+	display: inline-block;
+	flex-grow: 1;
+	background-color: rgb(200, 200, 200);
+}
+
+.hc-light .wizardNavigation-connector {
+	width: 3px;
+	display: inline-block;
+	flex-grow: 1;
 }

 .wizardNavigation-connector.active,
@@ -74,12 +97,23 @@
 	border-style: solid;
 }

+.hc-light .wizardNavigation-dot.active {
+	background-color: unset;
+	border-style: solid;
+}
+
 .hc-black .wizardNavigation-dot.active:hover,
 .hc-black .wizardNavigation-dot.active.currentPage:hover {
 	border-color: #F38518;
 	border-style: dashed;
 }

+.hc-light .wizardNavigation-dot.active:hover,
+.hc-light .wizardNavigation-dot.active.currentPage:hover {
+	border-color: #0F4A85;
+	border-style: dashed;
+}
+
 .wizardNavigation-dot.active.currentPage {
 	border-style: double;
 }
@@ -89,6 +123,11 @@
 	border-color: #F38518;
 }

+.hc-light .wizardNavigation-dot.active.currentPage {
+	border-style: solid;
+	border-color: #0F4A85;
+}
+
 .wizardNavigation-connector.invisible {
 	visibility: hidden;
 }
--- a/src/sql/workbench/services/objectExplorer/browser/iconRenderer.ts
+++ b/src/sql/workbench/services/objectExplorer/browser/iconRenderer.ts
@@ -16,7 +16,7 @@ class IconRenderer {
 		const iconPath: ThemedIconUri = this.toThemedIconUri(path);
 		const iconUid: string | undefined = this.getIconUid(iconPath);
 		if (iconUid && !this.iconRegistered.has(iconUid)) {
-			createCSSRule(`.icon#${iconUid}`, `background: ${asCSSUrl(iconPath.light || iconPath.dark)} center center no-repeat`);
+			createCSSRule(`.icon#${iconUid}, .hc-light .icon#${iconUid}`, `background: ${asCSSUrl(iconPath.light || iconPath.dark)} center center no-repeat`);
 			createCSSRule(`.vs-dark .icon#${iconUid}, .hc-black .icon#${iconUid}`, `background: ${asCSSUrl(iconPath.dark)} center center no-repeat`);
 			this.iconRegistered.add(iconUid);
 		}
--- a/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/objecttypes.css
+++ b/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/objecttypes.css
@@ -4,6 +4,7 @@
 *--------------------------------------------------------------------------------------------*/

 .vs .icon.table,
+.hc-light .icon.table,
 .vs-dark .icon.table,
 .hc-black .icon.table,
 .vs .codicon.table,
@@ -13,675 +14,791 @@
 }

 .vs .icon.aggregatefunction,
+.hc-light .icon.aggregatefunction,
 .vs-dark .icon.aggregatefunction,
 .hc-black .icon.aggregatefunction {
 	background: url("AggregateFunction.svg") center center no-repeat;
 }

 .vs .icon.aggregatefunctionparameter_input,
+.hc-light .icon.aggregatefunctionparameter_input,
 .vs-dark .icon.aggregatefunctionparameter_input,
 .hc-black .icon.aggregatefunctionparameter_input {
 	background: url("AggregateFunctionParameter_Input.svg") center center no-repeat;
 }

 .vs .icon.aggregatefunctionparameter_output,
+.hc-light .icon.aggregatefunctionparameter_output,
 .vs-dark .icon.aggregatefunctionparameter_output,
 .hc-black .icon.aggregatefunctionparameter_output {
 	background: url("AggregateFunctionParameter_Output.svg") center center no-repeat;
 }

 .vs .icon.aggregatefunctionparameter_return,
+.hc-light .icon.aggregatefunctionparameter_return,
 .vs-dark .icon.aggregatefunctionparameter_return,
 .hc-black .icon.aggregatefunctionparameter_return {
 	background: url("AggregateFunctionParameter_Return.svg") center center no-repeat;
 }

 .vs .icon.applicationrole,
+.hc-light .icon.applicationrole,
 .vs-dark .icon.applicationrole,
 .hc-black .icon.applicationrole {
 	background: url("ApplicationRole.svg") center center no-repeat;
 }

 .vs .icon.assembly,
+.hc-light .icon.assembly,
 .vs-dark .icon.assembly,
 .hc-black .icon.assembly {
 	background: url("Assembly.svg") center center no-repeat;
 }

 .vs .icon.asymmetrickey,
+.hc-light .icon.asymmetrickey,
 .vs-dark .icon.asymmetrickey,
 .hc-black .icon.asymmetrickey {
 	background: url("AsymmetricKey.svg") center center no-repeat;
 }

 .vs .icon.brokerpriority,
+.hc-light .icon.brokerpriority,
 .vs-dark .icon.brokerpriority,
 .hc-black .icon.brokerpriority {
 	background: url("BrokerPriority.svg") center center no-repeat;
 }

 .vs .icon.certificate,
+.hc-light .icon.certificate,
 .vs-dark .icon.certificate,
 .hc-black .icon.certificate {
 	background: url("Certificate.svg") center center no-repeat;
 }

 .vs .icon.column,
+.hc-light .icon.column,
 .vs-dark .icon.column,
 .hc-black .icon.column {
 	background: url("Column.svg") center center no-repeat;
 }

 .vs .icon.columnencryptionkey,
+.hc-light .icon.columnencryptionkey,
 .vs-dark .icon.columnencryptionkey,
 .hc-black .icon.columnencryptionkey {
 	background: url("ColumnEncryptionKey.svg") center center no-repeat;
 }

 .vs .icon.columnmasterkey,
+.hc-light .icon.columnmasterkey,
 .vs-dark .icon.columnmasterkey,
 .hc-black .icon.columnmasterkey {
 		background: url("ColumnMasterKey.svg") center center no-repeat;
 }

 .vs .icon.constraint,
+.hc-light .icon.constraint,
 .vs-dark .icon.constraint,
 .hc-black .icon.constraint {
 	background: url("Constraint.svg") center center no-repeat;
 }

 .vs .icon.contract,
+.hc-light .icon.contract,
 .vs-dark .icon.contract,
 .hc-black .icon.contract {
 	background: url("Contract.svg") center center no-repeat;
 }

 .vs .icon.database,
+.hc-light .icon.database,
 .vs-dark .icon.database,
 .hc-black .icon.database {
 	background: url("Database.svg") center center no-repeat;
 }

 .vs .icon.database_ledger,
+.hc-light .icon.database_ledger,
 .vs-dark .icon.database_ledger,
 .hc-black .icon.database_ledger {
 	background: url("Database_Ledger.svg") center center no-repeat;
 }

 .vs .icon.database_unavailable,
+.hc-light .icon.database_unavailable,
 .vs-dark .icon.database_unavailable,
 .hc-black .icon.database_unavailable {
 	background: url("Database_Unavailable.svg") center center no-repeat;
 }

 .vs .icon.databaseandqueueeventnotification,
+.hc-light .icon.databaseandqueueeventnotification,
 .vs-dark .icon.databaseandqueueeventnotification,
 .hc-black .icon.databaseandqueueeventnotification {
 	background: url("DatabaseAndQueueEventNotification.svg") center center no-repeat;
 }

 .vs .icon.databaseauditspecification,
+.hc-light .icon.databaseauditspecification,
 .vs-dark .icon.databaseauditspecification,
 .hc-black .icon.databaseauditspecification {
 	background: url("DatabaseAuditSpecification.svg") center center no-repeat;
 }

 .vs .icon.databaseencryptionkey,
+.hc-light .icon.databaseencryptionkey,
 .vs-dark .icon.databaseencryptionkey,
 .hc-black .icon.databaseencryptionkey {
 	background: url("DatabaseEncryptionKey.svg") center center no-repeat;
 }

 .vs .icon.databaserole,
+.hc-light .icon.databaserole,
 .vs-dark .icon.databaserole,
 .hc-black .icon.databaserole {
 	background: url("DatabaseRole.svg") center center no-repeat;
 }

 .vs .icon.databasescopedcredential,
+.hc-light .icon.databasescopedcredential,
 .vs-dark .icon.databasescopedcredential,
 .hc-black .icon.databasescopedcredential {
 	background: url("DatabaseScopedCredential.svg") center center no-repeat;
 }

 .vs .icon.databasetrigger,
+.hc-light .icon.databasetrigger,
 .vs-dark .icon.databasetrigger,
 .hc-black .icon.databasetrigger {
 	background: url("DatabaseTrigger.svg") center center no-repeat;
 }

 .vs .icon.defaulticon,
+.hc-light .icon.defaulticon,
 .vs-dark .icon.defaulticon,
 .hc-black .icon.defaulticon,
 .vs .icon.filegroup,
+.hc-light .icon.filegroup,
 .vs-dark .icon.filegroup,
 .hc-black .icon.filegroup,
 .vs .icon.historytable,
+.hc-light .icon.historytable,
 .vs-dark .icon.historytable,
 .hc-black .icon.historytable {
 	background: url("DefaultIcon.svg") center center no-repeat;
 }

 .vs .icon.externaldatasource,
+.hc-light .icon.externaldatasource,
 .vs-dark .icon.externaldatasource,
 .hc-black .icon.externaldatasource {
 	background: url("ExternalDataSource.svg") center center no-repeat;
 }

 .vs .icon.externalfileformat,
+.hc-light .icon.externalfileformat,
 .vs-dark .icon.externalfileformat,
 .hc-black .icon.externalfileformat {
 	background: url("ExternalFileFormat.svg") center center no-repeat;
 }

 .vs .icon.filegroupfile,
+.hc-light .icon.filegroupfile,
 .vs-dark .icon.filegroupfile,
 .hc-black .icon.filegroupfile {
 	background: url("FileGroupFile.svg") center center no-repeat;
 }

 .vs .icon.filegroupfile_mounted,
+.hc-light .icon.filegroupfile_mounted,
 .vs-dark .icon.filegroupfile_mounted,
 .hc-black .icon.filegroupfile_mounted {
 	background: url("FileGroupFile_mounted.svg") center center no-repeat;
 }

 .vs .icon.folder,
+.hc-light .icon.folder,
 .vs-dark .icon.folder,
 .hc-black .icon.folder {
 	background: url("Folder.svg") center center no-repeat;
 }

 .vs .icon.folder_mounted,
+.hc-light .icon.folder_mounted,
 .vs-dark .icon.folder_mounted,
 .hc-black .icon.folder_mounted {
 	background: url("Folder_mounted.svg") center center no-repeat;
 }

 .vs .icon.fulltextcatalog,
+.hc-light .icon.fulltextcatalog,
 .vs-dark .icon.fulltextcatalog,
 .hc-black .icon.fulltextcatalog {
 	background: url("FullTextCatalog.svg") center center no-repeat;
 }

 .vs .icon.fulltextstoplist,
+.hc-light .icon.fulltextstoplist,
 .vs-dark .icon.fulltextstoplist,
 .hc-black .icon.fulltextstoplist {
 	background: url("FullTextStopList.svg") center center no-repeat;
 }

 .vs .icon.index,
+.hc-light .icon.index,
 .vs-dark .icon.index,
 .hc-black .icon.index {
 	background: url("Index.svg") center center no-repeat;
 }

 .vs .icon.key_foreignkey,
+.hc-light .icon.key_foreignkey,
 .vs-dark .icon.key_foreignkey,
 .hc-black .icon.key_foreignkey {
 	background: url("Key_ForeignKey.svg") center center no-repeat;
 }

 .vs .icon.key_primarykey,
+.hc-light .icon.key_primarykey,
 .vs-dark .icon.key_primarykey,
 .hc-black .icon.key_primarykey,
 .vs .icon.index_primarykey,
+.hc-light .icon.index_primarykey,
 .vs-dark .icon.index_primarykey,
 .hc-black .icon.index_primarykey {
 	background: url("Key_PrimaryKey.svg") center center no-repeat;
 }

 .vs .icon.key_uniquekey,
+.hc-light .icon.key_uniquekey,
 .vs-dark .icon.key_uniquekey,
 .hc-black .icon.key_uniquekey,
 .vs .icon.index_uniquekey,
+.hc-light .icon.index_uniquekey,
 .vs-dark .icon.index_uniquekey,
 .hc-black .icon.index_uniquekey {
 	background: url("Key_UniqueKey.svg") center center no-repeat;
 }

 .vs .icon.masterkey,
+.hc-light .icon.masterkey,
 .vs-dark .icon.masterkey,
 .hc-black .icon.masterkey {
 		background: url("MasterKey.svg") center center no-repeat;
 }

 .vs .icon.messagetype,
+.hc-light .icon.messagetype,
 .vs-dark .icon.messagetype,
 .hc-black .icon.messagetype {
 	background: url("MessageType.svg") center center no-repeat;
 }

 .vs .icon.objecttypes.css,
+.hc-light .icon.objecttypes.css,
 .vs-dark .icon.objecttypes.css,
 .hc-black .icon.objecttypes.css {
 	background: url("objecttypes.css") center center no-repeat;
 }

 .vs .icon.partitionfunction,
+.hc-light .icon.partitionfunction,
 .vs-dark .icon.partitionfunction,
 .hc-black .icon.partitionfunction {
 	background: url("PartitionFunction.svg") center center no-repeat;
 }

 .vs .icon.partitionscheme,
+.hc-light .icon.partitionscheme,
 .vs-dark .icon.partitionscheme,
 .hc-black .icon.partitionscheme {
 	background: url("PartitionScheme.svg") center center no-repeat;
 }

 .vs .icon.queue,
+.hc-light .icon.queue,
 .vs-dark .icon.queue,
 .hc-black .icon.queue {
 	background: url("Queue.svg") center center no-repeat;
 }

 .vs .icon.remoteservicebinding,
+.hc-light .icon.remoteservicebinding,
 .vs-dark .icon.remoteservicebinding,
 .hc-black .icon.remoteservicebinding {
 	background: url("RemoteServiceBinding.svg") center center no-repeat;
 }

 .vs .icon.route,
+.hc-light .icon.route,
 .vs-dark .icon.route,
 .hc-black .icon.route {
 	background: url("Route.svg") center center no-repeat;
 }

 .vs .icon.scalarvaluedfunction,
+.hc-light .icon.scalarvaluedfunction,
 .vs-dark .icon.scalarvaluedfunction,
 .hc-black .icon.scalarvaluedfunction {
 	background: url("ScalarValuedFunction.svg") center center no-repeat;
 }

 .vs .icon.scalarvaluedfunctionparameter_input,
+.hc-light .icon.scalarvaluedfunctionparameter_input,
 .vs-dark .icon.scalarvaluedfunctionparameter_input,
 .hc-black .icon.scalarvaluedfunctionparameter_input {
 	background: url("ScalarValuedFunctionParameter_Input.svg") center center no-repeat;
 }

 .vs .icon.scalarvaluedfunctionparameter_output,
+.hc-light .icon.scalarvaluedfunctionparameter_output,
 .vs-dark .icon.scalarvaluedfunctionparameter_output,
 .hc-black .icon.scalarvaluedfunctionparameter_output {
 	background: url("ScalarValuedFunctionParameter_Output.svg") center center no-repeat;
 }

 .vs .icon.scalarvaluedfunctionparameter_return,
+.hc-light .icon.scalarvaluedfunctionparameter_return,
 .vs-dark .icon.scalarvaluedfunctionparameter_return,
 .hc-black .icon.scalarvaluedfunctionparameter_return {
 	background: url("ScalarValuedFunctionParameter_Return.svg") center center no-repeat;
 }

 .vs .icon.schema,
+.hc-light .icon.schema,
 .vs-dark .icon.schema,
 .hc-black .icon.schema {
 	background: url("Schema.svg") center center no-repeat;
 }

 .vs .icon.searchpropertylist,
+.hc-light .icon.searchpropertylist,
 .vs-dark .icon.searchpropertylist,
 .hc-black .icon.searchpropertylist {
 	background: url("SearchPropertyList.svg") center center no-repeat;
 }

 .vs .icon.securitypolicy,
+.hc-light .icon.securitypolicy,
 .vs-dark .icon.securitypolicy,
 .hc-black .icon.securitypolicy {
 	background: url("SecurityPolicy.svg") center center no-repeat;
 }

 .vs .icon.sequence,
+.hc-light .icon.sequence,
 .vs-dark .icon.sequence,
 .hc-black .icon.sequence {
 	background: url("Sequence.svg") center center no-repeat;
 }

 .vs .icon.server,
+.hc-light .icon.server,
 .vs-dark .icon.server,
 .hc-black .icon.server {
 	background: url("Server.svg") center center no-repeat;
 }

 .vs .icon.serverlevelcredential,
+.hc-light .icon.serverlevelcredential,
 .vs-dark .icon.serverlevelcredential,
 .hc-black .icon.serverlevelcredential {
 	background: url("ServerLevelCredential.svg") center center no-repeat;
 }

 .vs .icon.serverlevelcryptographicprovider,
+.hc-light .icon.serverlevelcryptographicprovider,
 .vs-dark .icon.serverlevelcryptographicprovider,
 .hc-black .icon.serverlevelcryptographicprovider {
 	background: url("ServerLevelCryptographicProvider.svg") center center no-repeat;
 }

 .vs .icon.serverlevelendpoint,
+.hc-light .icon.serverlevelendpoint,
 .vs-dark .icon.serverlevelendpoint,
 .hc-black .icon.serverlevelendpoint {
 	background: url("ServerLevelEndpoint.svg") center center no-repeat;
 }

 .vs .icon.serverlevellinkedserver,
+.hc-light .icon.serverlevellinkedserver,
 .vs-dark .icon.serverlevellinkedserver,
 .hc-black .icon.serverlevellinkedserver {
 	background: url("ServerLevelLinkedServer.svg") center center no-repeat;
 }

 .vs .icon.serverlevellinkedserverlogin,
+.hc-light .icon.serverlevellinkedserverlogin,
 .vs-dark .icon.serverlevellinkedserverlogin,
 .hc-black .icon.serverlevellinkedserverlogin {
 	background: url("ServerLevelLinkedServerLogin.svg") center center no-repeat;
 }

 .vs .icon.serverlevellinkedserverlogin_disabled,
+.hc-light .icon.serverlevellinkedserverlogin_disabled,
 .vs-dark .icon.serverlevellinkedserverlogin_disabled,
 .hc-black .icon.serverlevellinkedserverlogin_disabled {
 	background: url("ServerLevelLinkedServerLogin_Disabled.svg") center center no-repeat;
 }

 .vs .icon.serverlevellogin,
+.hc-light .icon.serverlevellogin,
 .vs-dark .icon.serverlevellogin,
 .hc-black .icon.serverlevellogin {
 	background: url("ServerLevelLogin.svg") center center no-repeat;
 }

 .vs .icon.serverlevellogin_disabled,
+.hc-light .icon.serverlevellogin_disabled,
 .vs-dark .icon.serverlevellogin_disabled,
 .hc-black .icon.serverlevellogin_disabled {
 	background: url("ServerLevelLogin_Disabled.svg") center center no-repeat;
 }

 .vs .icon.serverlevelserveraudit,
+.hc-light .icon.serverlevelserveraudit,
 .vs-dark .icon.serverlevelserveraudit,
 .hc-black .icon.serverlevelserveraudit {
 	background: url("ServerLevelServerAudit.svg") center center no-repeat;
 }

 .vs .icon.serverlevelserverauditspecification,
+.hc-light .icon.serverlevelserverauditspecification,
 .vs-dark .icon.serverlevelserverauditspecification,
 .hc-black .icon.serverlevelserverauditspecification {
 	background: url("ServerLevelServerAuditSpecification.svg") center center no-repeat;
 }

 .vs .icon.serverlevelserverrole,
+.hc-light .icon.serverlevelserverrole,
 .vs-dark .icon.serverlevelserverrole,
 .hc-black .icon.serverlevelserverrole {
 	background: url("ServerLevelServerRole.svg") center center no-repeat;
 }

 .vs .icon.serverlevelservertrigger,
+.hc-light .icon.serverlevelservertrigger,
 .vs-dark .icon.serverlevelservertrigger,
 .hc-black .icon.serverlevelservertrigger {
 	background: url("ServerLevelServerTrigger.svg") center center no-repeat;
 }

 .vs .icon.serverlevelservertrigger_disabled,
+.hc-light .icon.serverlevelservertrigger_disabled,
 .vs-dark .icon.serverlevelservertrigger_disabled,
 .hc-black .icon.serverlevelservertrigger_disabled {
 	background: url("ServerLevelServerTrigger_Disabled.svg") center center no-repeat;
 }

 .vs .icon.service,
+.hc-light .icon.service,
 .vs-dark .icon.service,
 .hc-black .icon.service {
 	background: url("Service.svg") center center no-repeat;
 }

 .vs .icon.sqllogfile,
+.hc-light .icon.sqllogfile,
 .vs-dark .icon.sqllogfile,
 .hc-black .icon.sqllogfile {
 	background: url("SqlLogFile.svg") center center no-repeat;
 }

 .vs .icon.statistic,
+.hc-light .icon.statistic,
 .vs-dark .icon.statistic,
 .hc-black .icon.statistic {
 	background: url("Statistic.svg") center center no-repeat;
 }

 .vs .icon.storedprocedure,
+.hc-light .icon.storedprocedure,
 .vs-dark .icon.storedprocedure,
 .hc-black .icon.storedprocedure {
 	background: url("StoredProcedure.svg") center center no-repeat;
 }

 .vs .icon.storedprocedureparameter_input,
+.hc-light .icon.storedprocedureparameter_input,
 .vs-dark .icon.storedprocedureparameter_input,
 .hc-black .icon.storedprocedureparameter_input {
 	background: url("StoredProcedureParameter_Input.svg") center center no-repeat;
 }

 .vs .icon.storedprocedureparameter_output,
+.hc-light .icon.storedprocedureparameter_output,
 .vs-dark .icon.storedprocedureparameter_output,
 .hc-black .icon.storedprocedureparameter_output {
 	background: url("StoredProcedureParameter_Output.svg") center center no-repeat;
 }

 .vs .icon.storedprocedureparameter_return,
+.hc-light .icon.storedprocedureparameter_return,
 .vs-dark .icon.storedprocedureparameter_return,
 .hc-black .icon.storedprocedureparameter_return {
 	background: url("StoredProcedureParameter_Return.svg") center center no-repeat;
 }

 .vs .icon.symmetrickey,
+.hc-light .icon.symmetrickey,
 .vs-dark .icon.symmetrickey,
 .hc-black .icon.symmetrickey {
 	background: url("SymmetricKey.svg") center center no-repeat;
 }

 .vs .icon.synonym,
+.hc-light .icon.synonym,
 .vs-dark .icon.synonym,
 .hc-black .icon.synonym {
 	background: url("Synonym.svg") center center no-repeat;
 }

 .vs .icon.systemapproximatenumeric,
+.hc-light .icon.systemapproximatenumeric,
 .vs-dark .icon.systemapproximatenumeric,
 .hc-black .icon.systemapproximatenumeric {
 	background: url("SystemApproximateNumeric.svg") center center no-repeat;
 }

 .vs .icon.systembinarystring,
+.hc-light .icon.systembinarystring,
 .vs-dark .icon.systembinarystring,
 .hc-black .icon.systembinarystring {
 	background: url("SystemBinaryString.svg") center center no-repeat;
 }

 .vs .icon.systemcharacterstring,
+.hc-light .icon.systemcharacterstring,
 .vs-dark .icon.systemcharacterstring,
 .hc-black .icon.systemcharacterstring {
 	background: url("SystemCharacterString.svg") center center no-repeat;
 }

 .vs .icon.systemclrdatatype,
+.hc-light .icon.systemclrdatatype,
 .vs-dark .icon.systemclrdatatype,
 .hc-black .icon.systemclrdatatype {
 	background: url("SystemClrDataType.svg") center center no-repeat;
 }

 .vs .icon.systemcontract,
+.hc-light .icon.systemcontract,
 .vs-dark .icon.systemcontract,
 .hc-black .icon.systemcontract {
 	background: url("SystemContract.svg") center center no-repeat;
 }

 .vs .icon.systemdateandtime,
+.hc-light .icon.systemdateandtime,
 .vs-dark .icon.systemdateandtime,
 .hc-black .icon.systemdateandtime {
 	background: url("SystemDateAndTime.svg") center center no-repeat;
 }

 .vs .icon.systemexactnumeric,
+.hc-light .icon.systemexactnumeric,
 .vs-dark .icon.systemexactnumeric,
 .hc-black .icon.systemexactnumeric {
 	background: url("SystemExactNumeric.svg") center center no-repeat;
 }

 .vs .icon.systemmessagetype,
+.hc-light .icon.systemmessagetype,
 .vs-dark .icon.systemmessagetype,
 .hc-black .icon.systemmessagetype {
 	background: url("SystemMessageType.svg") center center no-repeat;
 }

 .vs .icon.systemotherdatatype,
+.hc-light .icon.systemotherdatatype,
 .vs-dark .icon.systemotherdatatype,
 .hc-black .icon.systemotherdatatype {
 	background: url("SystemOtherDataType.svg") center center no-repeat;
 }

 .vs .icon.systemqueue,
+.hc-light .icon.systemqueue,
 .vs-dark .icon.systemqueue,
 .hc-black .icon.systemqueue {
 	background: url("SystemQueue.svg") center center no-repeat;
 }

 .vs .icon.systemservice,
+.hc-light .icon.systemservice,
 .vs-dark .icon.systemservice,
 .hc-black .icon.systemservice {
 	background: url("SystemService.svg") center center no-repeat;
 }

 .vs .icon.systemspatialdatatype,
+.hc-light .icon.systemspatialdatatype,
 .vs-dark .icon.systemspatialdatatype,
 .hc-black .icon.systemspatialdatatype {
 	background: url("SystemSpatialDataType.svg") center center no-repeat;
 }

 .vs .icon.systemunicodecharacterstring,
+.hc-light .icon.systemunicodecharacterstring,
 .vs-dark .icon.systemunicodecharacterstring,
 .hc-black .icon.systemunicodecharacterstring {
 	background: url("SystemUnicodeCharacterString.svg") center center no-repeat;
 }

 .vs .icon.function,
+.hc-light .icon.function,
 .vs-dark .icon.function,
 .hc-black .icon.function,
 .vs .icon.tablevaluedfunction,
+.hc-light .icon.tablevaluedfunction,
 .vs-dark .icon.tablevaluedfunction,
 .hc-black .icon.tablevaluedfunction {
 	background: url("TableValuedFunction.svg") center center no-repeat;
 }

 .vs .icon.tablevaluedfunctionparameter_input,
+.hc-light .icon.tablevaluedfunctionparameter_input,
 .vs-dark .icon.tablevaluedfunctionparameter_input,
 .hc-black .icon.tablevaluedfunctionparameter_input {
 	background: url("TableValuedFunctionParameter_Input.svg") center center no-repeat;
 }

 .vs .icon.tablevaluedfunctionparameter_output,
+.hc-light .icon.tablevaluedfunctionparameter_output,
 .vs-dark .icon.tablevaluedfunctionparameter_output,
 .hc-black .icon.tablevaluedfunctionparameter_output {
 	background: url("TableValuedFunctionParameter_Output.svg") center center no-repeat;
 }

 .vs .icon.tablevaluedfunctionparameter_return,
+.hc-light .icon.tablevaluedfunctionparameter_return,
 .vs-dark .icon.tablevaluedfunctionparameter_return,
 .hc-black .icon.tablevaluedfunctionparameter_return {
 	background: url("TableValuedFunctionParameter_Return.svg") center center no-repeat;
 }

 .vs .icon.table_ledgerappendonly,
+.hc-light .icon.table_ledgerappendonly,
 .vs-dark .icon.table_ledgerappendonly,
 .hc-black .icon.table_ledgerappendonly,
 .vs .icon.table_ledgerupdatable,
+.hc-light .icon.table_ledgerupdatable,
 .vs-dark .icon.table_ledgerupdatable,
 .hc-black .icon.table_ledgerupdatable,
 .vs .icon.table_ledgerdropped,
+.hc-light .icon.table_ledgerdropped,
 .vs-dark .icon.table_ledgerdropped,
 .hc-black .icon.table_ledgerdropped  {
 	background: url("Table_Ledger.svg") center center no-repeat;
 }

 .vs .icon.table_temporal,
+.hc-light .icon.table_temporal,
 .vs-dark .icon.table_temporal,
 .hc-black .icon.table_temporal {
 	background: url("Table_Temporal.svg") center center no-repeat;
 }

 .vs .icon.table_graphnode,
+.hc-light .icon.table_graphnode,
 .vs-dark .icon.table_graphnode,
 .hc-black .icon.table_graphnode {
 	background: url("Table_GraphNode.svg") center center no-repeat;
 }

 .vs .icon.table_graphedge,
+.hc-light .icon.table_graphedge,
 .vs-dark .icon.table_graphedge,
 .hc-black .icon.table_graphedge {
 	background: url("Table_GraphEdge.svg") center center no-repeat;
 }

 .vs .icon.historytable_ledgerhistory,
+.hc-light .icon.historytable_ledgerhistory,
 .vs-dark .icon.historytable_ledgerhistory,
 .hc-black .icon.historytable_ledgerhistory {
 	background: url("Table_LedgerHistory.svg") center center no-repeat;
 }

 .vs .icon.trigger,
+.hc-light .icon.trigger,
 .vs-dark .icon.trigger,
 .hc-black .icon.trigger {
 	background: url("Trigger.svg") center center no-repeat;
 }

 .vs .icon.trigger_disabled,
+.hc-light .icon.trigger_disabled,
 .vs-dark .icon.trigger_disabled,
 .hc-black .icon.trigger_disabled {
 	background: url("Trigger_Disabled.svg") center center no-repeat;
 }

 .vs .icon.user,
+.hc-light .icon.user,
 .vs-dark .icon.user,
 .hc-black .icon.user {
 	background: url("User.svg") center center no-repeat;
 }

 .vs .icon.user_disabled,
+.hc-light .icon.user_disabled,
 .vs-dark .icon.user_disabled,
 .hc-black .icon.user_disabled {
 	background: url("User_Disabled.svg") center center no-repeat;
 }

 .vs .icon.userdefineddatatype,
+.hc-light .icon.userdefineddatatype,
 .vs-dark .icon.userdefineddatatype,
 .hc-black .icon.userdefineddatatype {
 	background: url("UserDefinedDataType.svg") center center no-repeat;
 }

 .vs .icon.userdefinedtabletype,
+.hc-light .icon.userdefinedtabletype,
 .vs-dark .icon.userdefinedtabletype,
 .hc-black .icon.userdefinedtabletype {
 	background: url("UserDefinedTableType.svg") center center no-repeat;
 }

 .vs .icon.userdefinedtabletypecolumn,
+.hc-light .icon.userdefinedtabletypecolumn,
 .vs-dark .icon.userdefinedtabletypecolumn,
 .hc-black .icon.userdefinedtabletypecolumn {
 	background: url("UserDefinedTableTypeColumn.svg") center center no-repeat;
 }

 .vs .icon.userdefinedtabletypeconstraint,
+.hc-light .icon.userdefinedtabletypeconstraint,
 .vs-dark .icon.userdefinedtabletypeconstraint,
 .hc-black .icon.userdefinedtabletypeconstraint {
 	background: url("UserDefinedTableTypeConstraint.svg") center center no-repeat;
 }

 .vs .icon.userdefinedtype,
+.hc-light .icon.userdefinedtype,
 .vs-dark .icon.userdefinedtype,
 .hc-black .icon.userdefinedtype {
 	background: url("UserDefinedType.svg") center center no-repeat;
 }

 .vs .icon.view,
+.hc-light .icon.view,
 .vs-dark .icon.view,
 .hc-black .icon.view {
 	background: url("View.svg") center center no-repeat;
 }

 .vs .icon.view_ledger,
+.hc-light .icon.view_ledger,
 .vs-dark .icon.view_ledger,
 .hc-black .icon.view_ledger {
 	background: url("View_Ledger.svg") center center no-repeat;
 }

 .vs .icon.xmlschemacollection,
+.hc-light .icon.xmlschemacollection,
 .vs-dark .icon.xmlschemacollection,
 .hc-black .icon.xmlschemacollection {
 	background: url("XmlSchemaCollection.svg") center center no-repeat;
--- a/src/sql/workbench/services/query/common/gridDataProvider.ts
+++ b/src/sql/workbench/services/query/common/gridDataProvider.ts
@@ -25,12 +25,6 @@ export interface IGridDataProvider {
 	 */
 	copyResults(selection: Slick.Range[], includeHeaders?: boolean, tableView?: IDisposableDataProvider<Slick.SlickData>): Promise<void>;

-	/**
-	 * Sends a copy request to copy table headers to the clipboard
-	 * @param selection The selection range to copy
-	 */
-	copyHeaders(selection: Slick.Range[]): Promise<void>;
-
 	/**
 	 * Gets the EOL terminator to use for this data type.
 	 */
@@ -106,8 +100,11 @@ export async function getResultsString(provider: IGridDataProvider, selection: S
 	// Make sure all these tasks have executed
 	await Promise.all(actionedTasks);

-	headers = sortMapEntriesByColumnOrder(headers);
-	rows = sortMapEntriesByColumnOrder(rows);
+	const sortResults = (e1: [number, any], e2: [number, any]) => {
+		return e1[0] - e2[0];
+	};
+	headers = new Map([...headers].sort(sortResults));
+	rows = new Map([...rows].sort(sortResults));

 	let copyString = '';
 	if (includeHeaders) {
@@ -135,42 +132,6 @@ export async function getResultsString(provider: IGridDataProvider, selection: S
 	return copyString;
 }

-export function getTableHeaderString(provider: IGridDataProvider, selection: Slick.Range[]): string {
-	let headers: Map<number, string> = new Map(); // Maps a column index -> header
-
-	selection.forEach((range) => {
-		let startCol = range.fromCell;
-		let columnHeaders = provider.getColumnHeaders(range);
-		if (columnHeaders !== undefined) {
-			let idx = 0;
-			for (let header of columnHeaders) {
-				headers.set(startCol + idx, header);
-				idx++;
-			}
-		}
-	});
-
-	headers = sortMapEntriesByColumnOrder(headers)
-
-	const copyString = Array.from(headers.values())
-		.map(colHeader => colHeader ? colHeader : '')
-		.join('\t');
-
-	return copyString;
-}
-
-/**
- * Ensures that table entries in the map appear in column order instead of the order that they were selected.
- * @param map Contains the entries selected in a table
- * @returns Sorted map with entries appearing in column order.
- */
-function sortMapEntriesByColumnOrder(map: Map<number, any>): Map<number, any> {
-	const leftToRight = (e1: [number, any], e2: [number, any]) => {
-		return e1[0] - e2[0];
-	};
-
-	return new Map([...map].sort(leftToRight));
-}

 function removeNewLines(inputString: string): string {
 	// This regex removes all newlines in all OS types
--- a/src/sql/workbench/services/query/common/queryRunner.ts
+++ b/src/sql/workbench/services/query/common/queryRunner.ts
@@ -21,7 +21,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur
 import { URI } from 'vs/base/common/uri';
 import * as perf from 'vs/base/common/performance';
 import { mssqlProviderName } from 'sql/platform/connection/common/constants';
-import { IGridDataProvider, getResultsString, getTableHeaderString } from 'sql/workbench/services/query/common/gridDataProvider';
+import { IGridDataProvider, getResultsString } from 'sql/workbench/services/query/common/gridDataProvider';
 import { getErrorMessage } from 'vs/base/common/errors';
 import { ILogService } from 'vs/platform/log/common/log';
 import { IRange, Range } from 'vs/editor/common/core/range';
@@ -564,16 +564,7 @@ export class QueryGridDataProvider implements IGridDataProvider {
 			const results = await getResultsString(this, selection, includeHeaders, tableView);
 			await this._clipboardService.writeText(results);
 		} catch (error) {
-			this._notificationService.error(nls.localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error)));
-		}
-	}
-
-	async copyHeaders(selection: Slick.Range[]): Promise<void> {
-		try {
-			const results = getTableHeaderString(this, selection);
-			await this._clipboardService.writeText(results);
-		} catch (error) {
-			this._notificationService.error(nls.localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error)));
+			this._notificationService.error(nls.localize('copyFailed', "Copy failed with error {0}", getErrorMessage(error)));
 		}
 	}

--- a/src/sql/workbench/services/tasks/browser/tasksRegistry.ts
+++ b/src/sql/workbench/services/tasks/browser/tasksRegistry.ts
@@ -62,7 +62,7 @@ export const TaskRegistry: ITaskRegistry = new class implements ITaskRegistry {
 			// TODO
 		} else if (item.icon?.dark) { // at the very least we need a dark icon
 			iconClass = ids.nextId();
-			createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`);
+			createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`);
 			createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.dark)}`);
 			this.taskIdToIconClassNameMap.set(item.id, iconClass);
 		}