diff --git a/frappe/printing/page/print_format_builder/print_format_builder.css b/frappe/printing/page/print_format_builder/print_format_builder.css
index 0c4a50f17c..b2ca181345 100644
--- a/frappe/printing/page/print_format_builder/print_format_builder.css
+++ b/frappe/printing/page/print_format_builder/print_format_builder.css
@@ -71,7 +71,9 @@
 }
 
 .print-format-builder-section-head .section-label {
-	@include get_textstyle("lg", "medium");
+	font-size: var(--text-lg);
+	font-weight: var(--weight-medium);
+	letter-spacing: 0.015em;
 	color: var(--text-color);
 	vertical-align: middle;
 	margin-left: var(--margin-sm);
diff --git a/frappe/public/css/bootstrap.css b/frappe/public/css/bootstrap.css
index d4ce177bae..ab165529f8 100644
--- a/frappe/public/css/bootstrap.css
+++ b/frappe/public/css/bootstrap.css
@@ -2622,8 +2622,8 @@ tbody.collapse.in {
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  -webkit-box-shadow: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
+          box-shadow: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
 }
 .dropdown-menu.pull-right {
   right: 0;
diff --git a/frappe/public/images/frappe-favicon.svg b/frappe/public/images/frappe-favicon.svg
index 40abde3d41..f4bb424bca 100644
--- a/frappe/public/images/frappe-favicon.svg
+++ b/frappe/public/images/frappe-favicon.svg
@@ -2,16 +2,16 @@
 <svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 	<style>
 		polygon {
-			fill: #0E253A;
+			fill: #171717;
 		}
 		@media (prefers-color-scheme: dark) {
 			polygon {
-				fill: #0089FF;
+				fill: #ffffff;
 			}
 		}
     </style>
     <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="favicon" transform="translate(110.000000, 66.000000)" fill="#0089FF" fill-rule="nonzero">
+        <g id="favicon" transform="translate(110.000000, 66.000000)" fill="#171717" fill-rule="nonzero">
             <polygon id="Path" points="0 0 0 47.1807692 57.2278846 47.1807692 167.313462 47.1807692 179.203846 47.1807692 179.203846 0"></polygon>
             <polygon id="Path" points="0 120.297115 0 268.052885 57.2278846 268.052885 57.2278846 167.477885 167.313462 167.477885 167.313462 120.297115 57.2278846 120.297115"></polygon>
         </g>
diff --git a/frappe/public/images/frappe-framework-logo.png b/frappe/public/images/frappe-framework-logo.png
index b9b6380c82..226a92fa9d 100644
Binary files a/frappe/public/images/frappe-framework-logo.png and b/frappe/public/images/frappe-framework-logo.png differ
diff --git a/frappe/public/images/frappe-framework-logo.svg b/frappe/public/images/frappe-framework-logo.svg
index 398c360a4a..1c3e2d821b 100644
--- a/frappe/public/images/frappe-framework-logo.svg
+++ b/frappe/public/images/frappe-framework-logo.svg
@@ -1,5 +1,5 @@
 <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z" fill="#0089FF"/>
+<path d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z" fill="#171717"/>
 <path d="M68.4319 25H35V33.794H68.4319V25Z" fill="white"/>
 <path d="M35 47.4357V75H45.671V56.2445H66.2149V47.4357H35Z" fill="white"/>
 </svg>
diff --git a/frappe/public/images/frappe-logo.png b/frappe/public/images/frappe-logo.png
index b9b6380c82..226a92fa9d 100644
Binary files a/frappe/public/images/frappe-logo.png and b/frappe/public/images/frappe-logo.png differ
diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue
index a186effe59..ca215bd3aa 100644
--- a/frappe/public/js/form_builder/components/FieldTypes.vue
+++ b/frappe/public/js/form_builder/components/FieldTypes.vue
@@ -79,7 +79,7 @@ function on_drag_end(evt) {
 		display: block !important;
 		background-color: var(--bg-light-gray);
 		border-radius: var(--border-radius);
-		border: 0.5px solid var(--gray-400);
+		border: 0.5px solid var(--dark-border-color);
 		padding: 0.5rem 0.75rem;
 		font-size: var(--text-sm);
 		cursor: pointer;
diff --git a/frappe/public/js/frappe/file_uploader/FileUploader.vue b/frappe/public/js/frappe/file_uploader/FileUploader.vue
index 66dcebd8c7..1df4d93aa2 100644
--- a/frappe/public/js/frappe/file_uploader/FileUploader.vue
+++ b/frappe/public/js/frappe/file_uploader/FileUploader.vue
@@ -15,12 +15,12 @@
 				<div class="mt-2 text-center">
 					<button class="btn btn-file-upload" @click="browse_files">
 						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
-							<path d="M13.5 22V19" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M16.5 22V19" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M10.5 22H19.5" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M7.5 16H22.5" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
+							<path d="M13.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M16.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M10.5 22H19.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M7.5 16H22.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
 						</svg>
 						<div class="mt-1">{{ __('My Device') }}</div>
 					</button>
@@ -34,26 +34,26 @@
 					>
 					<button class="btn btn-file-upload" v-if="!disable_file_browser" @click="show_file_browser = true">
 						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
-							<path d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z" stroke="var(--gray-900)" stroke-miterlimit="10" stroke-linecap="square"/>
-							<path d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12" stroke="var(--gray-900)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
+							<path d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="square"/>
+							<path d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 						</svg>
 						<div class="mt-1">{{ __('Library') }}</div>
 					</button>
 					<button class="btn btn-file-upload" v-if="allow_web_link" @click="show_web_link = true">
 						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
-							<path d="M12.0469 17.9543L17.9558 12.0454" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455" stroke="var(--gray-900)" stroke-linecap="round" stroke-linejoin="round"/>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
+							<path d="M12.0469 17.9543L17.9558 12.0454" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+							<path d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
 						</svg>
 						<div class="mt-1">{{ __('Link') }}</div>
 					</button>
 					<button v-if="allow_take_photo" class="btn btn-file-upload" @click="capture_image">
 						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--gray-100)"/>
-							<path d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z" stroke="var(--gray-900)" stroke-linejoin="round"/>
-							<circle cx="15" cy="16" r="2.5" stroke="var(--gray-900)"/>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
+							<path d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z" stroke="var(--text-color)" stroke-linejoin="round"/>
+							<circle cx="15" cy="16" r="2.5" stroke="var(--text-color)"/>
 						</svg>
 						<div class="mt-1">{{ __('Camera') }}</div>
 					</button>
diff --git a/frappe/public/js/frappe/form/footer/form_timeline.js b/frappe/public/js/frappe/form/footer/form_timeline.js
index 7a2a6d8bf9..d9961e9977 100644
--- a/frappe/public/js/frappe/form/footer/form_timeline.js
+++ b/frappe/public/js/frappe/form/footer/form_timeline.js
@@ -153,7 +153,9 @@ class FormTimeline extends BaseTimeline {
 		this.timeline_items.push(this.get_modified_message());
 		this.timeline_items.push(...this.get_communication_timeline_contents());
 		this.timeline_items.push(...this.get_comment_timeline_contents());
+		this.timeline_wrapper.addClass("only_communication_timeline");
 		if (!this.only_communication) {
+			this.timeline_wrapper.removeClass("only_communication_timeline");
 			this.timeline_items.push(...this.get_view_timeline_contents());
 			this.timeline_items.push(...this.get_energy_point_timeline_contents());
 			this.timeline_items.push(...this.get_version_timeline_contents());
@@ -166,6 +168,8 @@ class FormTimeline extends BaseTimeline {
 			this.timeline_items.push(...this.get_info_timeline_contents());
 			this.timeline_items.push(...this.get_milestone_timeline_contents());
 		}
+		
+		
 	}
 
 	get_view_timeline_contents() {
diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js
index 9c395972a7..41f8ca6c2d 100644
--- a/frappe/public/js/frappe/list/list_sidebar.js
+++ b/frappe/public/js/frappe/list/list_sidebar.js
@@ -275,7 +275,7 @@ frappe.views.ListSidebar = class ListSidebar {
 			this.insights_banner = $(`
 				<div style="position: relative;">
 					<div class="pr-3">
-						${message} <a href="${link}" target="_blank" style="color: var(--primary-color)">${cta} &rarr; </a>
+						${message} <a href="${link}" target="_blank" style="color: var(--text-color)">${cta} &rarr; </a>
 					</div>
 					<div style="position: absolute; top: -1px; right: -4px; cursor: pointer;" title="Dismiss"
 						onclick="localStorage.setItem('show_insights_banner', 'false') || this.parentElement.remove()">
diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html
index 06b082f014..7ca3dd32d5 100644
--- a/frappe/public/js/frappe/ui/toolbar/navbar.html
+++ b/frappe/public/js/frappe/ui/toolbar/navbar.html
@@ -1,7 +1,7 @@
 <header class="navbar navbar-expand sticky-top" role="navigation">
 	<div class="container">
 		<a class="navbar-brand navbar-home" href="/app">
-			<img class="app-logo" style="width: {{ navbar_settings.logo_width || 32 }}px" src="{{ frappe.boot.app_logo_url }}">
+			<img class="app-logo" style="width: {{ navbar_settings.logo_width || 28 }}px" src="{{ frappe.boot.app_logo_url }}">
 		</a>
 		<ul class="nav navbar-nav d-none d-sm-flex" id="navbar-breadcrumbs"></ul>
 		<div class="collapse navbar-collapse justify-content-end">
diff --git a/frappe/public/scss/common/buttons.scss b/frappe/public/scss/common/buttons.scss
index 7755daddd5..cb4c0cf326 100644
--- a/frappe/public/scss/common/buttons.scss
+++ b/frappe/public/scss/common/buttons.scss
@@ -7,10 +7,15 @@
 .btn {
 	border: none;
 	padding: 4px 8px;
-	background-color: var(--neutral-white);
 	border-radius: var(--border-radius);
 	box-shadow: none;
 	@include get_textstyle("base", "regular");
+
+	&:active {
+		// override #dadada that comes from bootstrap (probably) to support dark theme.
+		background-color: var(--bg-color) !important;
+	}
+
 	&.icon-btn {
 		height: var(--btn-height);
 		padding: 0px;
@@ -65,7 +70,7 @@
 	background-color: var(--control-bg);
 	color: var(--text-color);
 	&:hover, &:active {
-		background-color: var(--gray-300);
+		background-color: var(--btn-default-hover-bg);
 		color: var(--text-color);
 	}
 }
@@ -74,17 +79,17 @@
 	background-color: var(--control-bg);
 	color: var(--text-color);
 	&:hover, &:active {
-		background: var(--gray-300);
+		background: var(--btn-default-hover-bg);
 		color: var(--text-color);
 	}
 }
 
 .btn.btn-primary {
-	background-color: var(--primary);
-	color: var(--white);
+	background-color: var(--btn-primary);
+	color: var(--neutral);
 	white-space: nowrap;
 	--icon-stroke: currentColor;
-	--icon-fill-bg: var(--primary);
+	--icon-fill-bg: var(--btn-primary);
 }
 
 .btn.btn-danger {
@@ -102,7 +107,7 @@
 
 [data-theme="dark"] {
 	.btn-primary-light {
-		background-color: var(--bg-dark-blue);
+		background-color: var(--bg-dark-gray);
 		box-shadow: none;
 	}
 }
diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index 48add443c5..99c33ed47d 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -496,7 +496,7 @@ button.data-pill {
 	background-color: var(--fg-color);
 	border-radius: var(--border-radius);
 	color: var(--text-color);
-	background-color: var(--gray-100);
+	background-color: var(--subtle-fg);
 	justify-content: space-between;
 	align-items: center;
 	.pill-label {
diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss
index 96a9a207d7..7ed299b3dc 100644
--- a/frappe/public/scss/common/css_variables.scss
+++ b/frappe/public/scss/common/css_variables.scss
@@ -78,6 +78,8 @@ $disabled-input-height: 22px;
 	// Layout Colors
 	--bg-color: white;
 	--fg-color: white;
+	--subtle-accent: var(--gray-50);
+	--subtle-fg: var(--gray-100);
 	--navbar-bg: white;
 	--fg-hover-color: var(--gray-100);
 	--card-bg: var(--fg-color);
@@ -93,6 +95,7 @@ $disabled-input-height: 22px;
 	--awesomplete-hover-bg: var(--control-bg);
 
 	// Button Colors
+	--btn-primary: var(--gray-900);
 	--btn-default-bg: var(--gray-100);
 	--btn-default-hover-bg: var(--gray-300);
 
@@ -111,7 +114,7 @@ $disabled-input-height: 22px;
 
 	--btn-group-border-color: var(--gray-300);
 
-	--field-placeholder-color: var(--gray-50);
+	--placeholder-color: var(--gray-50);
 
 	--highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);
 
@@ -130,9 +133,15 @@ $disabled-input-height: 22px;
 	// Checkbox
 	--checkbox-right-margin: var(--margin-xs);
 	--checkbox-size: 14px;
+	--checkbox-color: var(--neutral-black);
+
 	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
 	--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);
 
+
+	// switch
+	--switch-bg: var(--gray-300);
+
 	// "diff" colors
 	--diff-added: var(--green-100);
 	--diff-removed: var(--red-100);
diff --git a/frappe/public/scss/common/flex.scss b/frappe/public/scss/common/flex.scss
index 46666a018d..97d01f4f63 100644
--- a/frappe/public/scss/common/flex.scss
+++ b/frappe/public/scss/common/flex.scss
@@ -74,7 +74,7 @@
 
 .level-item {
 	font-weight: var(--weight-medium);
-	color: var(--gray-700);
+	color: var(--text-muted);
 	align-items: center;
 	display: flex;
 	flex-basis: auto;
diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index ec2ed30bfb..525a0b921c 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -17,7 +17,7 @@ html, body {
 
 	.label-area {
 		@include get_textstyle("sm", "medium");
-		color: var(--gray-800);
+		color: var(--text-color);
 	}
 
 	.input-area, .disp-area {
diff --git a/frappe/public/scss/common/grid.scss b/frappe/public/scss/common/grid.scss
index b0f48d2cce..0c0dd85773 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -11,7 +11,7 @@
 .grid-heading-row {
 	border-bottom: 1px solid var(--table-border-color);
 	color: var(--gray-600);
-	background-color: var(--gray-100);
+	background-color: var(--subtle-fg);
 	@include get_textstyle("sm", "regular");
 	height: 32px;
 	padding: 0 !important;
@@ -85,7 +85,7 @@
 
 .grid-body .data-row {
 	@include get_textstyle("sm", "regular");
-	color: var(--gray-700)
+	color: var(--text-muted)
 }
 
 .grid-empty,
@@ -199,7 +199,8 @@
 	}
 
 	.editable-row {
-		--control-bg: var(--neutral-white);
+		// TODO: Dark and Light Mode
+		--control-bg: var(--neutral);
 		--input-disabled-bg: var(--gray-50);
 		.grid-static-col {
 			padding: 0px !important;
@@ -229,7 +230,7 @@
 
 		.link-btn {
 			top: 5px;
-			background-color: var(--neutral-white);
+			background-color: var(--neutral);
 		}
 
 		.form-control:focus {
diff --git a/frappe/public/scss/common/icons.scss b/frappe/public/scss/common/icons.scss
index b2dda8382e..487078024a 100644
--- a/frappe/public/scss/common/icons.scss
+++ b/frappe/public/scss/common/icons.scss
@@ -34,7 +34,7 @@ use.like-icon {
 }
 
 #icon-close {
-	fill: var(--gray-600);
+	fill: var(--invert-neutral);
 }
 
 .icon > .close-alt {
diff --git a/frappe/public/scss/common/quill.scss b/frappe/public/scss/common/quill.scss
index d698f81adb..e0030b2785 100644
--- a/frappe/public/scss/common/quill.scss
+++ b/frappe/public/scss/common/quill.scss
@@ -47,7 +47,7 @@
 .ql-snow .ql-toolbar .ql-picker-item:hover,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-	color: black;
+	color: var(--invert-neutral);
 }
 .ql-snow.ql-toolbar button:hover .ql-fill,
 .ql-snow .ql-toolbar button:hover .ql-fill,
@@ -77,7 +77,7 @@
 .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
-	fill: black;
+	fill: var(--invert-neutral);
 }
 .ql-snow.ql-toolbar button:hover .ql-stroke,
 .ql-snow .ql-toolbar button:hover .ql-stroke,
@@ -107,14 +107,14 @@
 .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-	stroke: black;
+	stroke: var(--invert-neutral);
 }
 
 .ql-toolbar.ql-snow {
 	border-top-left-radius: var(--border-radius);
 	border-top-right-radius: var(--border-radius);
-	background-color: var(--gray-50);
-	border-bottom: 1px solid var(--gray-200);
+	background-color: var(--subtle-accent);
+	border-bottom: 1px solid var(--border-color);
 	padding: 0;
 	padding-top: 4px;
 }
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index c9adeef11d..7941e32343 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -38,6 +38,8 @@
 	--timeline-item-bottom-margin: var(--margin-sm);
 	--timeline-content-max-width: 700px;
 	--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);
+	--timeline-badge-color: var(--gray-900);
+	--timeline-badge-bg: var(--gray-100);
 
 	// mentions
 	--user-mention-bg-color: var(--fg-color);
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 09e4680a1b..1589c1c2fe 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -1,19 +1,15 @@
+$check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 [data-theme="dark"] {
-	--gray-50: #{$gray-50};
-	--gray-100: #f7fafc;
-	--gray-200: #edf2f7;
-	--gray-300: #c9d0d6;
-	--gray-400: #7a838c;
-	--gray-500: #575e66;
-	--gray-600: #434a52;
-	--gray-700: #242a30;
-	--gray-800: #1c2126;
-	--gray-900: #161a1f;
+	--neutral: var(--neutral-black);
+	--invert-neutral: var(--neutral-white);
+	// TODO: Update Pallete for dark mode.
+	--gray-700: #383838;
+	--gray-800: #232323;
 
 	// Type Colors
+	--text-dark: var(--gray-900);
 	--text-muted: var(--gray-400);
 	--text-light: var(--gray-300);
-	--text-dark: var(--gray-900);
 	--text-color: var(--gray-50);
 	--heading-color: var(--gray-50);
 
@@ -27,23 +23,28 @@
 
 	// Layout Colors
 	--bg-color: var(--gray-900);
-	--fg-color: var(--gray-800);
-	--navbar-bg: var(--gray-800);
-	--fg-hover-color: var(--gray-700);
-	--card-bg: var(--gray-800);
+	--fg-color: var(--gray-900);
+	--subtle-accent: var(--gray-700);
+	--subtle-fg: var(--gray-800);
+	--navbar-bg: var(--gray-900);
+	--fg-hover-color: var(--gray-800);
+	--card-bg: var(--gray-900);
 	--disabled-text-color: var(--gray-400);
 	--disabled-control-bg: var(--gray-700);
-	--control-bg: var(--gray-700);
+	--control-bg: var(--gray-800);
 	--control-bg-on-gray: var(--gray-800);
 	--awesomebar-focus-bg: var(--control-bg);
 	--awesomplete-hover-bg: var(--gray-700);
-	--modal-bg: var(--gray-700);
+	--modal-bg: var(--gray-900);
 	--toast-bg: var(--modal-bg);
 	--popover-bg: var(--bg-color);
 
 	// Button Colors
-	--btn-default-bg: var(--gray-700);
-	--btn-default-hover-bg: var(--gray-500);
+	--btn-default-bg: var(--gray-800);
+	--btn-default-hover-bg: var(--gray-700);
+	--btn-primary: var(--gray-300);
+
+
 
 	// Background Text Color Pairs
 	--bg-blue: var(--blue-600);
@@ -53,11 +54,11 @@
 	--bg-yellow: var(--yellow-700);
 	--bg-orange: var(--orange-700);
 	--bg-red: var(--red-600);
-	--bg-gray: var(--gray-400);
-	--bg-grey: var(--gray-400);
+	--bg-gray: var(--gray-600);
+	--bg-grey: var(--gray-600);
 	--bg-darkgrey: var(--gray-600);
-	--bg-dark-gray: var(--gray-600);
-	--bg-light-gray: var(--gray-700);
+	--bg-dark-gray: var(--gray-500);
+	--bg-light-gray: var(--gray-800);
 	--bg-purple: var(--purple-700);
 	--bg-pink: var(--pink-700);
 	--bg-cyan: var(--cyan-800);
@@ -93,16 +94,19 @@
 	--scrollbar-thumb-color: var(--gray-600);
 	--scrollbar-track-color: var(--gray-700);
 
+	--timeline-badge-color: var(--gray-900);
+	--timeline-badge-bg: var(--gray-500);
+
 	--shadow-inset: var(--fg-color);
-	--border-color: var(--gray-700);
+	--border-color: var(--gray-800);
 	--dark-border-color: var(--gray-600);
-	--table-border-color: var(--gray-200);
+	--table-border-color: var(--border-color);
 	--highlight-color: var(--gray-700);
 	--yellow-highlight-color: var(--yellow-700);
 
 	--btn-group-border-color: var(--gray-800);
 
-	--field-placeholder-color: var(--gray-700);
+	--placeholder-color: var(--gray-700);
 
 	--highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
 
@@ -112,12 +116,34 @@
 	--diff-added: var(--green-800);
 	--diff-removed: var(--red-800);
 
+	// sidebar toggle
+	.page-title .sidebar-toggle-btn {
+		--icon-stroke: var(--gray-300);
+	}
+
 	// input
 	--input-disabled-bg: none;
 
 	// checkbox
+	--checkbox-color: var(--neutral-white);
+	--checkbox-gradient: linear-gradient(180deg, var(--neutral-white) -124.51%, var(--neutral-white) 100%);
 	--checkbox-focus-shadow: 0 0 0 2px var(--gray-600);
 
+	input[type="checkbox"] {
+		&:checked, &.disabled-selected, &:disabled:checked {
+			background-image: $check-icon-dark, var(--checkbox-gradient);
+		}
+	}
+
+	// switch
+	--switch-bg: var(--gray-500);
+
+
+	// grid
+	.grid-body .editable-row {
+		--control-bg: var(--gray-900);
+		--input-disabled-bg: var(--gray-800);
+	}
 	color-scheme: dark;
 
 	.frappe-card {
@@ -133,7 +159,7 @@
 	.modal,
 	.form-in-grid {
 		--control-bg: var(--gray-800);
-		--border-color: var(--gray-600);
+		--border-color: var(--gray-800);
 	}
 
 	.print-format {
@@ -153,6 +179,9 @@
 			}
 		}
 	}
+	.comment-input-wrapper .ql-editor.ql-blank::before {
+		color: var(--text-on-gray);
+	}
 	// --appreciation-color: var(--dark-green-100);
 	// --appreciation-bg: var(--dark-green-600);
 	// --criticism-color: var(--red-100);
@@ -161,7 +190,7 @@
 	// Frappe Charts Colors
 	.chart-container {
 		--charts-label-color: var(--gray-300);
-		--charts-axis-line-color: var(--gray-500);
+		--charts-axis-line-color: var(--subtle-fg);
 
 		--charts-stroke-width: 5px;
 		--charts-dataset-circle-stroke: #ffffff;
diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index 1c810f7f4a..01ec942b43 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -210,7 +210,7 @@ body {
 	// Overrides for each widgets
 	&.dashboard-widget-box {
 		min-height: 240px;
-		border: 1px solid var(--gray-300);
+		border: 1px solid var(--border-color);
 
 		.widget-head {
 			padding: 4px 8px;
@@ -348,16 +348,17 @@ body {
 	&.onboarding-widget-box {
 		margin-bottom: var(--margin-2xl);
 		padding: var(--padding-lg) !important;
-		background-color: var(--neutral-white);
-		border: 1px solid var(--gray-200);
+		background-color: var(--bg-color);
+		border: 1px solid var(--border-color);
 
 		&.edit-mode:hover {
 			background-color: var(--bg-color);
 
 			.onboarding-step {
 				&.active,
-				&:hover {
-					background-color: var(--bg-color);
+				&:hover,
+				&.complete {
+					background-color: var(--fg-hover-color);
 
 					.step-index.step-pending {
 						background-color: var(--fg-color);
@@ -416,7 +417,7 @@ body {
 				}
 
 				.onboarding-step-body {
-					color: var(--gray-700);
+					color: var(--text-muted);
 
 					p {
 						@include get_textstyle("base", "regular");
@@ -458,12 +459,7 @@ body {
 
 				&.active,
 				&:hover {
-					background-color: var(--gray-100);
-
-					.step-index {
-						background-color: var(--gray-100);
-					}
-
+					background-color: var(--subtle-fg);
 				}
 				&.active .step-skip {
 					visibility: visible;
@@ -503,7 +499,7 @@ body {
 
 				&.skipped {
 					color: var(--text-light);
-					background-color: var(--gray-50);
+					background-color: var(--bg-color);
 					.step-index.step-skipped {
 						display: flex;
 					}
@@ -579,7 +575,7 @@ body {
 		}
 
 		padding: 10px;
-    	border: 1px solid var(--gray-200);
+    	border: 1px solid var(--border-color);
 
 		.link-item {
 			display: flex;
@@ -641,7 +637,7 @@ body {
 
 		.widget-head .widget-label .widget-title {
 			@include get_textstyle("lg", "semibold");
-			color: var(--gray-800) !important;
+			color: var(--text-color) !important;
 		}
 	}
 
@@ -649,7 +645,7 @@ body {
 		cursor: pointer;
 		min-height: 84px;
 		padding: var(--number-card-padding);
-		border: 1px solid var(--gray-200);
+		border: 1px solid var(--border-color);
 
 		.widget-head {
 			.widget-title {
@@ -1141,7 +1137,7 @@ body {
 
 	// widgets
 	.widget.number-widget-box {
-		border: 1px solid var(--gray-200);
+		border: 1px solid var(--border-color);
 	}
 
 
diff --git a/frappe/public/scss/desk/filters.scss b/frappe/public/scss/desk/filters.scss
index 1f42b4fbe3..75d1a6e396 100644
--- a/frappe/public/scss/desk/filters.scss
+++ b/frappe/public/scss/desk/filters.scss
@@ -7,6 +7,7 @@
 	min-height: 50px;
 	@include get_textstyle("base", "regular");
 	z-index: 1019;
+	border: 1px solid var(--border-color);
 }
 
 .filter-area {
diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
index e9279ab6a6..1149c9dd24 100644
--- a/frappe/public/scss/desk/form.scss
+++ b/frappe/public/scss/desk/form.scss
@@ -26,7 +26,7 @@
 
 .std-form-layout > .form-layout > .form-page {
 	border-radius: var(--border-radius-md);
-	border: 1px solid var(--gray-200);
+	border: 1px solid var(--border-color);
 	box-shadow: none;
 	background-color: var(--card-bg);
 }
@@ -37,13 +37,13 @@
 	.form-section-description {
 		margin-bottom: 10px;
 		@include get_textstyle("base", "regular");
-		color: var(--gray-900);
+		color: var(--text-black);
 	}
 
 	.section-head {
 		@extend .head-title;
 		@include get_textstyle("lg", "semibold");
-		color: var(--gray-800);
+		color: var(--text-color);
 		width: 100%;
 		padding: var(--padding-sm) var(--padding-md);
 		margin: 0;
@@ -133,6 +133,7 @@
 }
 
 .form-control:disabled, .form-control[readonly] {
+	color: var(--text-muted);
 	cursor: not-allowed;
 }
 
@@ -153,7 +154,7 @@
 			padding-right: 0;
 			.ql-editor {
 				background-color: var(--bg-color) !important;
-				border: 1px solid var(--gray-200);
+				border: 1px solid var(--border-color);
 				min-height: 24px;
 				padding: 6px;
 			}
@@ -193,7 +194,7 @@
 			.count {
 				font-size: var(--text-xs);
 				font-weight: var(--weight-regular);
-				background-color: var(--bg-color);
+				background-color: var(--neutral-white);
 				border-radius: var(--border-radius-full);
 				color: var(--gray-700);
 				padding: 0 var(--padding-xs);
@@ -285,10 +286,17 @@
 	}
 }
 
-@mixin form-message-background($color) {
-	border: 1px solid var(--#{$color}-100);
-    color: var(--#{$color}-800);
-    background: var(--#{$color}-50);
+@mixin form-message-background($color, $theme: "light") {
+	@if $theme == "light" {
+		border: 1px solid var(--#{$color}-100);
+		color: var(--#{$color}-800);
+		background: var(--#{$color}-100);
+	}
+	@if $theme == "dark" {
+		border: 1px solid var(--#{$color}-700);
+		color: var(--#{$color}-100);
+		background: var(--#{$color}-800);
+	}
 }
 
 .form-message {
@@ -327,6 +335,28 @@
 		cursor: pointer;
 	}
 }
+[data-theme="dark"] .form-message {
+
+	&.blue {
+		@include form-message-background("blue", "dark");
+	}
+
+	&.green {
+		@include form-message-background("green", "dark");
+	}
+
+	&.yellow {
+		@include form-message-background("yellow", "dark");
+	}
+
+	&.orange {
+		@include form-message-background("orange", "dark");
+	}
+
+	&.red {
+		@include form-message-background("red", "dark");
+	}
+}
 
 .help-box {
 	margin-top: 4px;
diff --git a/frappe/public/scss/desk/frappe_datatable.scss b/frappe/public/scss/desk/frappe_datatable.scss
index 5198a104f6..4c0eec783f 100644
--- a/frappe/public/scss/desk/frappe_datatable.scss
+++ b/frappe/public/scss/desk/frappe_datatable.scss
@@ -48,12 +48,12 @@
 			display: flex !important;
 		}
 		.dt-row-header {
-			background-color: var(--gray-100);
+			background-color: var(--subtle-fg);
 		}
 
 		.dt-cell--header .dt-cell__content {
 			font-weight: normal;
-			background-color: var(--gray-100);
+			background-color: var(--subtle-fg);
 		}
 	}
 
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index 325a7f4201..e17648b7ee 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -392,6 +392,9 @@ kbd {
 
 .table {
 	color: var(--text-color);
+	th, td {
+		padding: 0.5rem;
+	}
 }
 
 .appreciation {
diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss
index dbea226e6d..679ea60336 100644
--- a/frappe/public/scss/desk/list.scss
+++ b/frappe/public/scss/desk/list.scss
@@ -153,7 +153,7 @@
 .list-row-head {
 	@extend .list-row;
 	cursor: default;
-	background-color: var(--gray-100);
+	background-color: var(--subtle-fg);
     height: 30px;
 	padding: 8px, 10px, 8px, 0px;
 	margin: 8px 5px;
diff --git a/frappe/public/scss/desk/navbar.scss b/frappe/public/scss/desk/navbar.scss
index 90e597bdab..ffcf66af48 100644
--- a/frappe/public/scss/desk/navbar.scss
+++ b/frappe/public/scss/desk/navbar.scss
@@ -2,6 +2,7 @@
 	height: $navbar-height;
 	background: var(--navbar-bg);
 	box-shadow: var(--shadow-sm);
+	border-bottom: 1px solid var(--border-color);
 	padding: 0;
 	.navbar-brand {
 		margin-right: 0;
@@ -10,7 +11,7 @@
 		.dropdown-item {
 			padding: 6px 8px !important;
 		}
-		
+
 		.nav-link {
 			padding: 0;
 		}
@@ -34,7 +35,7 @@
 
 .navbar-home {
 	img {
-		max-height: 32px;
+		max-height: 28px;
 		width: auto;
 	}
 }
diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss
index 455ab129c7..e9047e7a6c 100644
--- a/frappe/public/scss/desk/page.scss
+++ b/frappe/public/scss/desk/page.scss
@@ -83,7 +83,7 @@
 	overflow: hidden;
 	@include card($padding: 0px);
 	box-shadow: none;
-	border: 1px solid var(--gray-200)
+	border: 1px solid var(--border-color)
 }
 
 .page-head {
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 5f87134832..0e9a40cd7f 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -108,7 +108,7 @@ body[data-route^="Module"] .main-menu {
 	.sidebar-image-section {
 		width: min(100%, 170px);
 		cursor: pointer;
-		border: 1px solid var(--gray-200);
+		border: 1px solid var(--border-color);
 		border-radius: var(--border-radius-lg);
 
 		.sidebar-image {
@@ -383,7 +383,7 @@ body[data-route^="Module"] .main-menu {
 	max-width: 100%;
 	.data-pill {
 		justify-content: space-between;
-		background-color: var(--gray-100);
+		background-color: var(--subtle-fg);
 		box-shadow: none;
 	}
 }
diff --git a/frappe/public/scss/desk/theme_switcher.scss b/frappe/public/scss/desk/theme_switcher.scss
index 924c2edd9d..87c82dfbef 100644
--- a/frappe/public/scss/desk/theme_switcher.scss
+++ b/frappe/public/scss/desk/theme_switcher.scss
@@ -34,7 +34,7 @@
 
 	.selected {
 		.background {
-			box-shadow: 0 0 0pt 3pt var(--primary-color);
+			box-shadow: var(--focus-default);
 		}
 
 		.preview-check {
@@ -85,6 +85,19 @@
 }
 
 // TODO: Replace with better alternative
+[data-theme="dark"] {
+	.background {
+		border: 1px solid var(--gray-500);
+	}
+	.selected {
+		.preview-check {
+			background-color: var(--white) !important;
+			.icon use {
+				stroke: var(--primary-color) !important;
+			}
+		}
+	}
+}
 [data-is-auto-theme="true"] {
 	.background::after {
 		content: "";
diff --git a/frappe/public/scss/desk/timeline.scss b/frappe/public/scss/desk/timeline.scss
index 64419a8fe4..4b61654413 100644
--- a/frappe/public/scss/desk/timeline.scss
+++ b/frappe/public/scss/desk/timeline.scss
@@ -11,9 +11,9 @@ $threshold: 34;
 	--zero-px: 0px;
 	top: unquote("clamp(var(--zero-px), 50% - #{$badge-size}/2, max(var(--zero-px), (#{$threshold}px - (50% - #{$badge-size}/2)) * #{$threshold}))");
 	left: calc(-1 * (#{$badge-size} / 2));
-	background-color: var(--gray-100);
+	background-color: var(--timeline-badge-bg);
 	@extend .center-content;
-	--icon-stroke: var(--gray-900);
+	--icon-stroke: var(--timeline-badge-color);
 }
 
 .new-timeline {
@@ -23,15 +23,17 @@ $threshold: 34;
 	@include media-breakpoint-down(xs) {
 		padding-left: calc(var(--padding-sm) + var(--timeline-item-icon-size) / 2);
 	}
-
 	&:before {
 		content: ' ';
-		top: 40px; // TODO: get top and bottom programmatically
+		top: 90px; // TODO: get top and bottom programmatically
 		left: calc(var(--timeline-item-icon-size) / 2);
 		position: absolute;
 		border-left: 1px solid var(--dark-border-color);
 		bottom: calc(-1 * var(--timeline-item-bottom-margin) + 25px);
 	}
+	&.only_communication_timeline::before {
+		top: 130px;
+	}
 	.timeline-dot {
 		@include timeline-badge(16px);
 		left: calc(-1.25 * var(--timeline-item-left-margin) / 2);
@@ -95,9 +97,9 @@ $threshold: 34;
 			margin-left: var(--margin-md);
 			&.frappe-card {
 				color: var(--gray-900);
-				background-color: var(--neutral-white);
+				background-color: var(--bg-color);
 				box-shadow: none;
-				border: 1px solid var(--gray-300);
+				border: 1px solid var(--border-color);
 				margin: calc(var(--timeline-item-bottom-margin) + var(--padding-md)) 0;
 				margin-left: var(--margin-lg);
 
diff --git a/frappe/public/scss/desk/variables.scss b/frappe/public/scss/desk/variables.scss
index c59cf7d6c1..b05948f9ed 100644
--- a/frappe/public/scss/desk/variables.scss
+++ b/frappe/public/scss/desk/variables.scss
@@ -55,7 +55,7 @@ $input-btn-focus-width: 2px;
 // dropdown
 $dropdown-color: var(--text-color);
 $dropdown-bg: var(--fg-color);
-$dropdown-border-color: var(--dark-border-color);
+$dropdown-border-color: var(--border-color);
 $dropdown-link-color: var(--text-color);
 $dropdown-link-hover-color: var(--text-color);
 $dropdown-link-hover-bg: var(--fg-hover-color);
diff --git a/frappe/public/scss/element/checkbox.scss b/frappe/public/scss/element/checkbox.scss
index d660ad99ab..746f2f3cf1 100644
--- a/frappe/public/scss/element/checkbox.scss
+++ b/frappe/public/scss/element/checkbox.scss
@@ -1,4 +1,4 @@
-// change icon to Espresso
+// TODO: change icon to Espresso
 $check-icon: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 
 input[type="checkbox"] {
@@ -45,7 +45,7 @@ input[type="checkbox"] {
 	}
 
 	&.disabled-selected, &:disabled:checked {
-		background-color: var(--gray-500);
+		background-color: var(--checkbox-color);
 		background-image: $check-icon;
 		background-size: 57%;
 		box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
@@ -61,14 +61,14 @@ input[type="checkbox"] {
 	width: 26px;
 	height: 16px;
   }
-  
+
   /* Hide default HTML checkbox */
   .switch input {
 	opacity: 0;
 	width: 0;
 	height: 0;
   }
-  
+
   /* The slider */
   .slider {
 	position: absolute;
@@ -77,11 +77,11 @@ input[type="checkbox"] {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: var(--gray-300);
+	background-color: var(--switch-bg);
 	-webkit-transition: .4s;
 	transition: .4s;
   }
-  
+
   .slider:before {
 	position: absolute;
 	content: "";
@@ -89,15 +89,15 @@ input[type="checkbox"] {
 	width: 12px;
 	left: 2px;
 	bottom: 2px;
-	background-color: var(--neutral-white);
+	background-color: var(--neutral);
 	-webkit-transition: .4s;
 	transition: .4s;
   }
-  
+
   input:checked + .slider {
-	background-color: var(--gray-900);
+	background-color: var(--invert-neutral);
   }
-  
+
   input:focus + .slider {
 	box-shadow: var(--focus-default)
   }
@@ -116,7 +116,7 @@ input[type="checkbox"] {
   label.switch {
 	margin-bottom: 0;
   }
-  
+
   .slider.round:before {
 	border-radius: 50%;
   }
\ No newline at end of file
diff --git a/frappe/public/scss/espresso/_colors.scss b/frappe/public/scss/espresso/_colors.scss
index efdac59d82..23c706fa77 100644
--- a/frappe/public/scss/espresso/_colors.scss
+++ b/frappe/public/scss/espresso/_colors.scss
@@ -21,6 +21,8 @@ $light-yellow: #FEF4E2;
 :root {
     --neutral-white: #ffffff;
     --neutral-black: #000000;
+    --neutral: var(--neutral-white);
+    --invert-neutral: var(--neutral-black);
 
     --gray-50: #f8f8f8;
     --gray-100: #f3f3f3;
diff --git a/frappe/public/scss/espresso/_typography.scss b/frappe/public/scss/espresso/_typography.scss
index 7ab81e87b5..1fe7610d39 100644
--- a/frappe/public/scss/espresso/_typography.scss
+++ b/frappe/public/scss/espresso/_typography.scss
@@ -43,11 +43,12 @@
 
 
 	// font color
+	--heading-color: var(--gray-900);
+	--text-black: var(--gray-900);
+	--text-color: var(--gray-800);
 	--text-muted: var(--gray-700);
 	--text-light: var(--gray-600);
 	--text-dark: var(--fg-color);
-	--text-color: var(--gray-800);
-	--heading-color: var(--gray-900);
 }
 
 $weight-list: "regular", "medium", "semibold", "bold", "black";
diff --git a/frappe/templates/styles/discussion_style.css b/frappe/templates/styles/discussion_style.css
index 97b5fcd52a..b39de1d399 100644
--- a/frappe/templates/styles/discussion_style.css
+++ b/frappe/templates/styles/discussion_style.css
@@ -49,7 +49,7 @@
 
 .reply-card {
 	padding: 1.25rem 0;
-	border-bottom: 1px solid var(--gray-200);
+	border-bottom: 1px solid var(--border-color);
 }
 
 .reply-card:last-of-type {