diff --git a/Gruntfile.js b/Gruntfile.js
index c5547010974ed..f9d70fa3111a3 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -198,7 +198,8 @@ module.exports = function(grunt) {
 				cwd: WORKING_DIR,
 				dest: WORKING_DIR,
 				src: [
-					'wp-admin/css/colors/*/colors.css'
+					'wp-admin/css/colors/*/colors.css',
+					'wp-admin/css/colors/*/admin-bar.css'
 				]
 			}
 		},
@@ -828,7 +829,10 @@ module.exports = function(grunt) {
 				cwd: SOURCE_DIR,
 				dest: WORKING_DIR,
 				ext: '.css',
-				src: ['wp-admin/css/colors/*/colors.scss'],
+				src: [
+					'wp-admin/css/colors/*/colors.scss',
+					'wp-admin/css/colors/*/admin-bar.scss'
+				],
 				options: {
 					implementation: sass
 				}
diff --git a/src/wp-admin/css/colors/_admin-bar.scss b/src/wp-admin/css/colors/_admin-bar.scss
new file mode 100644
index 0000000000000..db68f5882d779
--- /dev/null
+++ b/src/wp-admin/css/colors/_admin-bar.scss
@@ -0,0 +1,158 @@
+@use "variables";
+
+// Admin bar color scheme styles.
+//
+// Included in each color scheme's colors.css for the admin, and compiled
+// separately into each color scheme's admin-bar.css for the front end.
+@mixin styles() {
+	/* Admin Bar */
+
+	#wpadminbar {
+		color: variables.$menu-text;
+		background: variables.$menu-background;
+	}
+
+	#wpadminbar .ab-item,
+	#wpadminbar a.ab-item,
+	#wpadminbar > #wp-toolbar span.ab-label,
+	#wpadminbar > #wp-toolbar span.noticon {
+		color: variables.$menu-text;
+	}
+
+	#wpadminbar .ab-icon,
+	#wpadminbar .ab-icon::before,
+	#wpadminbar .ab-item::before,
+	#wpadminbar .ab-item::after {
+		color: variables.$menu-icon;
+	}
+
+	#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
+	#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
+	#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
+	#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
+	#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
+		color: variables.$menu-submenu-focus-text;
+		background: variables.$menu-submenu-background;
+	}
+
+	#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
+	#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
+	#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
+		color: variables.$menu-submenu-focus-text;
+	}
+
+	#wpadminbar:not(.mobile) li:hover .ab-icon::before,
+	#wpadminbar:not(.mobile) li:hover .ab-item::before,
+	#wpadminbar:not(.mobile) li:hover .ab-item::after,
+	#wpadminbar:not(.mobile) li:hover #adminbarsearch::before {
+		color: variables.$menu-submenu-focus-text;
+	}
+
+	/* Admin Bar: submenu */
+
+	#wpadminbar .menupop .ab-sub-wrapper {
+		background: variables.$menu-submenu-background;
+	}
+
+	#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
+	#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
+		background: variables.$menu-submenu-background-alt;
+	}
+
+	#wpadminbar .ab-submenu .ab-item,
+	#wpadminbar .quicklinks .menupop ul li a,
+	#wpadminbar .quicklinks .menupop.hover ul li a,
+	#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
+		color: variables.$menu-submenu-text;
+	}
+
+	#wpadminbar .quicklinks li .blavatar,
+	#wpadminbar .menupop .menupop > .ab-item::before {
+		color: variables.$menu-icon;
+	}
+
+	#wpadminbar .quicklinks .menupop ul li a:hover,
+	#wpadminbar .quicklinks .menupop ul li a:focus,
+	#wpadminbar .quicklinks .menupop ul li a:hover strong,
+	#wpadminbar .quicklinks .menupop ul li a:focus strong,
+	#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
+	#wpadminbar .quicklinks .menupop.hover ul li a:hover,
+	#wpadminbar .quicklinks .menupop.hover ul li a:focus,
+	#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
+	#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
+	#wpadminbar li:hover .ab-icon::before,
+	#wpadminbar li:hover .ab-item::before,
+	#wpadminbar li a:focus .ab-icon::before,
+	#wpadminbar li .ab-item:focus::before,
+	#wpadminbar li .ab-item:focus .ab-icon::before,
+	#wpadminbar li.hover .ab-icon::before,
+	#wpadminbar li.hover .ab-item::before,
+	#wpadminbar li:hover #adminbarsearch::before,
+	#wpadminbar li #adminbarsearch.adminbar-focused::before {
+		color: variables.$menu-submenu-focus-text;
+	}
+
+	#wpadminbar .quicklinks li a:hover .blavatar,
+	#wpadminbar .quicklinks li a:focus .blavatar,
+	#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
+	#wpadminbar .menupop .menupop > .ab-item:hover::before,
+	#wpadminbar.mobile .quicklinks .hover .ab-icon::before,
+	#wpadminbar.mobile .quicklinks .hover .ab-item::before {
+		color: variables.$menu-submenu-focus-text;
+	}
+
+	#wpadminbar.mobile .quicklinks .ab-icon::before,
+	#wpadminbar.mobile .quicklinks .ab-item::before {
+		color: variables.$menu-icon;
+	}
+
+	/* Admin Bar: search */
+
+	#wpadminbar #adminbarsearch::before {
+		color: variables.$menu-icon;
+	}
+
+	#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
+		color: variables.$menu-text;
+		background: variables.$adminbar-input-background;
+	}
+
+	/* Admin Bar: recovery mode */
+
+	#wpadminbar #wp-admin-bar-recovery-mode {
+		color: variables.$adminbar-recovery-exit-text;
+		background-color: variables.$adminbar-recovery-exit-background;
+	}
+
+	#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
+	#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
+		color: variables.$adminbar-recovery-exit-text;
+	}
+
+	#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
+	#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
+	#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
+	#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
+		color: variables.$adminbar-recovery-exit-text;
+		background-color: variables.$adminbar-recovery-exit-background-alt;
+	}
+
+	/* Admin Bar: my account */
+
+	#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+		border-color: variables.$adminbar-avatar-frame;
+		background-color: variables.$adminbar-avatar-frame;
+	}
+
+	#wpadminbar #wp-admin-bar-user-info .display-name {
+		color: variables.$menu-text;
+	}
+
+	#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
+		color: variables.$menu-submenu-focus-text;
+	}
+
+	#wpadminbar #wp-admin-bar-user-info .username {
+		color: variables.$menu-submenu-text;
+	}
+}
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 20704b3f525f0..02ed1abd40bf0 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -4,6 +4,7 @@
 @use "variables";
 @use "mixins";
 @use "tokens";
+@use "admin-bar";
 
 /**
  * This function name uses British English to maintain backward compatibility, as developers
@@ -382,156 +383,7 @@ ul#adminmenu > li.current > a.current::after {
 	background: variables.$menu-highlight-background;
 }
 
-/* Admin Bar */
-
-#wpadminbar {
-	color: variables.$menu-text;
-	background: variables.$menu-background;
-}
-
-#wpadminbar .ab-item,
-#wpadminbar a.ab-item,
-#wpadminbar > #wp-toolbar span.ab-label,
-#wpadminbar > #wp-toolbar span.noticon {
-	color: variables.$menu-text;
-}
-
-#wpadminbar .ab-icon,
-#wpadminbar .ab-icon::before,
-#wpadminbar .ab-item::before,
-#wpadminbar .ab-item::after {
-	color: variables.$menu-icon;
-}
-
-#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
-#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
-#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
-#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
-#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
-	color: variables.$menu-submenu-focus-text;
-	background: variables.$menu-submenu-background;
-}
-
-#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
-#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
-#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
-	color: variables.$menu-submenu-focus-text;
-}
-
-#wpadminbar:not(.mobile) li:hover .ab-icon::before,
-#wpadminbar:not(.mobile) li:hover .ab-item::before,
-#wpadminbar:not(.mobile) li:hover .ab-item::after,
-#wpadminbar:not(.mobile) li:hover #adminbarsearch::before {
-	color: variables.$menu-submenu-focus-text;
-}
-
-/* Admin Bar: submenu */
-
-#wpadminbar .menupop .ab-sub-wrapper {
-	background: variables.$menu-submenu-background;
-}
-
-#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
-#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
-	background: variables.$menu-submenu-background-alt;
-}
-
-#wpadminbar .ab-submenu .ab-item,
-#wpadminbar .quicklinks .menupop ul li a,
-#wpadminbar .quicklinks .menupop.hover ul li a,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
-	color: variables.$menu-submenu-text;
-}
-
-#wpadminbar .quicklinks li .blavatar,
-#wpadminbar .menupop .menupop > .ab-item::before {
-	color: variables.$menu-icon;
-}
-
-#wpadminbar .quicklinks .menupop ul li a:hover,
-#wpadminbar .quicklinks .menupop ul li a:focus,
-#wpadminbar .quicklinks .menupop ul li a:hover strong,
-#wpadminbar .quicklinks .menupop ul li a:focus strong,
-#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
-#wpadminbar .quicklinks .menupop.hover ul li a:hover,
-#wpadminbar .quicklinks .menupop.hover ul li a:focus,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
-#wpadminbar li:hover .ab-icon::before,
-#wpadminbar li:hover .ab-item::before,
-#wpadminbar li a:focus .ab-icon::before,
-#wpadminbar li .ab-item:focus::before,
-#wpadminbar li .ab-item:focus .ab-icon::before,
-#wpadminbar li.hover .ab-icon::before,
-#wpadminbar li.hover .ab-item::before,
-#wpadminbar li:hover #adminbarsearch::before,
-#wpadminbar li #adminbarsearch.adminbar-focused::before {
-	color: variables.$menu-submenu-focus-text;
-}
-
-#wpadminbar .quicklinks li a:hover .blavatar,
-#wpadminbar .quicklinks li a:focus .blavatar,
-#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
-#wpadminbar .menupop .menupop > .ab-item:hover::before,
-#wpadminbar.mobile .quicklinks .hover .ab-icon::before,
-#wpadminbar.mobile .quicklinks .hover .ab-item::before {
-	color: variables.$menu-submenu-focus-text;
-}
-
-#wpadminbar.mobile .quicklinks .ab-icon::before,
-#wpadminbar.mobile .quicklinks .ab-item::before {
-	color: variables.$menu-icon;
-}
-
-/* Admin Bar: search */
-
-#wpadminbar #adminbarsearch::before {
-	color: variables.$menu-icon;
-}
-
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-	color: variables.$menu-text;
-	background: variables.$adminbar-input-background;
-}
-
-/* Admin Bar: recovery mode */
-
-#wpadminbar #wp-admin-bar-recovery-mode {
-	color: variables.$adminbar-recovery-exit-text;
-	background-color: variables.$adminbar-recovery-exit-background;
-}
-
-#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
-#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
-	color: variables.$adminbar-recovery-exit-text;
-}
-
-#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
-#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
-#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
-#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
-	color: variables.$adminbar-recovery-exit-text;
-	background-color: variables.$adminbar-recovery-exit-background-alt;
-}
-
-/* Admin Bar: my account */
-
-#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
-	border-color: variables.$adminbar-avatar-frame;
-	background-color: variables.$adminbar-avatar-frame;
-}
-
-#wpadminbar #wp-admin-bar-user-info .display-name {
-	color: variables.$menu-text;
-}
-
-#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
-	color: variables.$menu-submenu-focus-text;
-}
-
-#wpadminbar #wp-admin-bar-user-info .username {
-	color: variables.$menu-submenu-text;
-}
+@include admin-bar.styles();
 
 /* Pointers */
 
diff --git a/src/wp-admin/css/colors/blue/_scheme.scss b/src/wp-admin/css/colors/blue/_scheme.scss
new file mode 100644
index 0000000000000..660e0d662633b
--- /dev/null
+++ b/src/wp-admin/css/colors/blue/_scheme.scss
@@ -0,0 +1,16 @@
+$highlight-color: #437aa8;
+
+@forward "../variables" with (
+	$scheme-name: "blue",
+	$base-color: #245278,
+	$icon-color: #e5f8ff,
+	$highlight-color: $highlight-color,
+	$notification-color: #e1a948,
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-bubble-text: #1e1e1e,
+	$menu-submenu-text: #e2ecf1,
+	$menu-submenu-focus-text: #fff,
+
+	$dashboard-icon-background: $highlight-color
+);
diff --git a/src/wp-admin/css/colors/blue/admin-bar.scss b/src/wp-admin/css/colors/blue/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/blue/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/blue/colors.scss b/src/wp-admin/css/colors/blue/colors.scss
index f1d5f66a1fa8d..9e8712fcbddd1 100644
--- a/src/wp-admin/css/colors/blue/colors.scss
+++ b/src/wp-admin/css/colors/blue/colors.scss
@@ -1,16 +1,2 @@
-$highlight-color: #437aa8;
-
-@use "../_admin.scss" with (
-	$scheme-name: "blue",
-	$base-color: #245278,
-	$icon-color: #e5f8ff,
-	$highlight-color: $highlight-color,
-	$notification-color: #e1a948,
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-bubble-text: #1e1e1e,
-	$menu-submenu-text: #e2ecf1,
-	$menu-submenu-focus-text: #fff,
-
-	$dashboard-icon-background: $highlight-color
-);
+@use "scheme";
+@use "../admin";
diff --git a/src/wp-admin/css/colors/coffee/_scheme.scss b/src/wp-admin/css/colors/coffee/_scheme.scss
new file mode 100644
index 0000000000000..1ffb78ccee646
--- /dev/null
+++ b/src/wp-admin/css/colors/coffee/_scheme.scss
@@ -0,0 +1,13 @@
+$base-color: #5c4c40;
+
+@forward "../variables" with (
+	$scheme-name: "coffee",
+	$base-color: $base-color,
+	$highlight-color: #916745,
+	$notification-color: #9ea476,
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-bubble-text: #1e1e1e,
+	$menu-submenu-focus-text: #fff,
+	$form-checked: $base-color,
+);
diff --git a/src/wp-admin/css/colors/coffee/admin-bar.scss b/src/wp-admin/css/colors/coffee/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/coffee/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/coffee/colors.scss b/src/wp-admin/css/colors/coffee/colors.scss
index 30e9e0649f4cf..9e8712fcbddd1 100644
--- a/src/wp-admin/css/colors/coffee/colors.scss
+++ b/src/wp-admin/css/colors/coffee/colors.scss
@@ -1,13 +1,2 @@
-$base-color: #5c4c40;
-
-@use "../_admin.scss" with (
-	$scheme-name: "coffee",
-	$base-color: $base-color,
-	$highlight-color: #916745,
-	$notification-color: #9ea476,
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-bubble-text: #1e1e1e,
-	$menu-submenu-focus-text: #fff,
-	$form-checked: $base-color,
-);
+@use "scheme";
+@use "../admin";
diff --git a/src/wp-admin/css/colors/ectoplasm/_scheme.scss b/src/wp-admin/css/colors/ectoplasm/_scheme.scss
new file mode 100644
index 0000000000000..e98005367a3e5
--- /dev/null
+++ b/src/wp-admin/css/colors/ectoplasm/_scheme.scss
@@ -0,0 +1,15 @@
+$base-color: #4a3369;
+
+@forward "../variables" with (
+	$scheme-name: "ectoplasm",
+	$base-color: $base-color,
+	$icon-color: #ece6f6,
+	$highlight-color: #646c3e,
+	$notification-color: #d46f15,
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-bubble-text: #1e1e1e,
+	$menu-submenu-focus-text: #fff,
+
+	$form-checked: $base-color,
+);
diff --git a/src/wp-admin/css/colors/ectoplasm/admin-bar.scss b/src/wp-admin/css/colors/ectoplasm/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/ectoplasm/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/ectoplasm/colors.scss b/src/wp-admin/css/colors/ectoplasm/colors.scss
index b2c4005313e50..9e8712fcbddd1 100644
--- a/src/wp-admin/css/colors/ectoplasm/colors.scss
+++ b/src/wp-admin/css/colors/ectoplasm/colors.scss
@@ -1,15 +1,2 @@
-$base-color: #4a3369;
-
-@use "../_admin.scss" with (
-	$scheme-name: "ectoplasm",
-	$base-color: $base-color,
-	$icon-color: #ece6f6,
-	$highlight-color: #646c3e,
-	$notification-color: #d46f15,
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-bubble-text: #1e1e1e,
-	$menu-submenu-focus-text: #fff,
-
-	$form-checked: $base-color,
-);
+@use "scheme";
+@use "../admin";
diff --git a/src/wp-admin/css/colors/light/_scheme.scss b/src/wp-admin/css/colors/light/_scheme.scss
new file mode 100644
index 0000000000000..302b4138d562d
--- /dev/null
+++ b/src/wp-admin/css/colors/light/_scheme.scss
@@ -0,0 +1,30 @@
+@use "sass:color";
+
+$highlight-color: #007cba;
+$text-color: #333;
+$menu-avatar-frame: #aaa;
+
+@forward "../variables" with (
+	$scheme-name: "light",
+	$base-color: #e5e5e5,
+	$icon-color: #6a6a6a,
+	$text-color: $text-color,
+	$highlight-color: $highlight-color,
+	$notification-color: #c64606,
+
+	$body-background: #f5f5f5,
+
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-highlight-background: #6e6e6e,
+
+	$menu-bubble-text: #fff,
+	$menu-submenu-background: #fff,
+
+	$menu-collapse-text: #777,
+	$menu-collapse-focus-icon: #555,
+
+	$dashboard-accent-1: $highlight-color,
+	$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%),
+	$dashboard-icon-background: $text-color
+);
diff --git a/src/wp-admin/css/colors/light/admin-bar.scss b/src/wp-admin/css/colors/light/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/light/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/light/colors.scss b/src/wp-admin/css/colors/light/colors.scss
index e53e4daed1aff..fa1ab8fbf88aa 100644
--- a/src/wp-admin/css/colors/light/colors.scss
+++ b/src/wp-admin/css/colors/light/colors.scss
@@ -1,33 +1,5 @@
-@use "sass:color";
-
-$highlight-color: #007cba;
-$text-color: #333;
-$menu-avatar-frame: #aaa;
-
-@use "../_admin.scss" with (
-	$scheme-name: "light",
-	$base-color: #e5e5e5,
-	$icon-color: #6a6a6a,
-	$text-color: $text-color,
-	$highlight-color: $highlight-color,
-	$notification-color: #c64606,
-
-	$body-background: #f5f5f5,
-
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-highlight-background: #6e6e6e,
-
-	$menu-bubble-text: #fff,
-	$menu-submenu-background: #fff,
-
-	$menu-collapse-text: #777,
-	$menu-collapse-focus-icon: #555,
-
-	$dashboard-accent-1: $highlight-color,
-	$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%),
-	$dashboard-icon-background: $text-color
-);
+@use "scheme";
+@use "../admin";
 
 /* Override the theme filter highlight color for this scheme */
 .theme-section.current,
diff --git a/src/wp-admin/css/colors/midnight/_scheme.scss b/src/wp-admin/css/colors/midnight/_scheme.scss
new file mode 100644
index 0000000000000..75bd1d1360e2a
--- /dev/null
+++ b/src/wp-admin/css/colors/midnight/_scheme.scss
@@ -0,0 +1,18 @@
+@use "sass:color";
+
+$base-color: #333c42;
+$highlight-color: #cf4339;
+$notification-color: #69a8bb;
+
+@forward "../variables" with (
+	$scheme-name: "midnight",
+	$base-color: $base-color,
+	$highlight-color: $highlight-color,
+	$notification-color: $notification-color,
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-bubble-text: #1e1e1e,
+	$menu-submenu-focus-text: #fff,
+
+	$dashboard-accent-2: color.mix($base-color, $notification-color, 90%),
+);
diff --git a/src/wp-admin/css/colors/midnight/admin-bar.scss b/src/wp-admin/css/colors/midnight/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/midnight/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/midnight/colors.scss b/src/wp-admin/css/colors/midnight/colors.scss
index 67f6f665a8567..9e8712fcbddd1 100644
--- a/src/wp-admin/css/colors/midnight/colors.scss
+++ b/src/wp-admin/css/colors/midnight/colors.scss
@@ -1,18 +1,2 @@
-@use "sass:color";
-
-$base-color: #333c42;
-$highlight-color: #cf4339;
-$notification-color: #69a8bb;
-
-@use "../_admin.scss" with (
-	$scheme-name: "midnight",
-	$base-color: $base-color,
-	$highlight-color: $highlight-color,
-	$notification-color: $notification-color,
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-bubble-text: #1e1e1e,
-	$menu-submenu-focus-text: #fff,
-
-	$dashboard-accent-2: color.mix($base-color, $notification-color, 90%),
-);
+@use "scheme";
+@use "../admin";
diff --git a/src/wp-admin/css/colors/modern/_scheme.scss b/src/wp-admin/css/colors/modern/_scheme.scss
new file mode 100644
index 0000000000000..fb3e22bd6942f
--- /dev/null
+++ b/src/wp-admin/css/colors/modern/_scheme.scss
@@ -0,0 +1,16 @@
+@use "sass:color";
+
+$highlight-color: #3858e9;
+
+@forward "../variables" with (
+	$scheme-name: "modern",
+	$base-color: #1e1e1e,
+	$highlight-color: #3858e9,
+	$menu-submenu-focus-text: #7b90ff,
+	$notification-color: $highlight-color,
+
+	$link: $highlight-color,
+	$link-focus: color.adjust($highlight-color, $lightness: -10%),
+
+	$custom-welcome-panel: "false"
+);
diff --git a/src/wp-admin/css/colors/modern/admin-bar.scss b/src/wp-admin/css/colors/modern/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/modern/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss
index 45c750c0f583a..9e8712fcbddd1 100644
--- a/src/wp-admin/css/colors/modern/colors.scss
+++ b/src/wp-admin/css/colors/modern/colors.scss
@@ -1,16 +1,2 @@
-@use "sass:color";
-
-$highlight-color: #3858e9;
-
-@use "../_admin.scss" with (
-	$scheme-name: "modern",
-	$base-color: #1e1e1e,
-	$highlight-color: #3858e9,
-	$menu-submenu-focus-text: #7b90ff,
-	$notification-color: $highlight-color,
-
-	$link: $highlight-color,
-	$link-focus: color.adjust($highlight-color, $lightness: -10%),
-
-	$custom-welcome-panel: "false"
-);
+@use "scheme";
+@use "../admin";
diff --git a/src/wp-admin/css/colors/ocean/_scheme.scss b/src/wp-admin/css/colors/ocean/_scheme.scss
new file mode 100644
index 0000000000000..3b5c94156670c
--- /dev/null
+++ b/src/wp-admin/css/colors/ocean/_scheme.scss
@@ -0,0 +1,14 @@
+$base-color: #39535a;
+
+@forward "../variables" with (
+	$scheme-name: "ocean",
+	$base-color: $base-color,
+	$icon-color: #f2fcff,
+	$highlight-color: #567958,
+	$notification-color: #aa9d88,
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-bubble-text: #1e1e1e,
+	$menu-submenu-focus-text: #fff,
+	$form-checked: $base-color,
+);
diff --git a/src/wp-admin/css/colors/ocean/admin-bar.scss b/src/wp-admin/css/colors/ocean/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/ocean/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/ocean/colors.scss b/src/wp-admin/css/colors/ocean/colors.scss
index b96b7a8520f2d..9e8712fcbddd1 100644
--- a/src/wp-admin/css/colors/ocean/colors.scss
+++ b/src/wp-admin/css/colors/ocean/colors.scss
@@ -1,14 +1,2 @@
-$base-color: #39535a;
-
-@use "../_admin.scss" with (
-	$scheme-name: "ocean",
-	$base-color: $base-color,
-	$icon-color: #f2fcff,
-	$highlight-color: #567958,
-	$notification-color: #aa9d88,
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-bubble-text: #1e1e1e,
-	$menu-submenu-focus-text: #fff,
-	$form-checked: $base-color,
-);
+@use "scheme";
+@use "../admin";
diff --git a/src/wp-admin/css/colors/sunrise/_scheme.scss b/src/wp-admin/css/colors/sunrise/_scheme.scss
new file mode 100644
index 0000000000000..83755f317179b
--- /dev/null
+++ b/src/wp-admin/css/colors/sunrise/_scheme.scss
@@ -0,0 +1,10 @@
+@forward "../variables" with (
+	$scheme-name: "sunrise",
+	$base-color: #8a312d,
+	$highlight-color: #ad631e,
+	$notification-color: #ccaf0b,
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-bubble-text: #1e1e1e,
+	$menu-submenu-focus-text: #fff
+);
diff --git a/src/wp-admin/css/colors/sunrise/admin-bar.scss b/src/wp-admin/css/colors/sunrise/admin-bar.scss
new file mode 100644
index 0000000000000..561ecbef901c6
--- /dev/null
+++ b/src/wp-admin/css/colors/sunrise/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();
diff --git a/src/wp-admin/css/colors/sunrise/colors.scss b/src/wp-admin/css/colors/sunrise/colors.scss
index a1ef34054906e..9e8712fcbddd1 100644
--- a/src/wp-admin/css/colors/sunrise/colors.scss
+++ b/src/wp-admin/css/colors/sunrise/colors.scss
@@ -1,10 +1,2 @@
-@use "../_admin.scss" with (
-	$scheme-name: "sunrise",
-	$base-color: #8a312d,
-	$highlight-color: #ad631e,
-	$notification-color: #ccaf0b,
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-bubble-text: #1e1e1e,
-	$menu-submenu-focus-text: #fff
-);
+@use "scheme";
+@use "../admin";
diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php
index 5ba568792209c..5a5cada526d64 100644
--- a/src/wp-includes/admin-bar.php
+++ b/src/wp-includes/admin-bar.php
@@ -1486,3 +1486,36 @@ function _get_admin_bar_pref( $context = 'front', $user = 0 ) {
 
 	return 'true' === $pref;
 }
+
+/**
+ * Enqueues the admin bar color scheme stylesheet on the front end if present.
+ *
+ * @since 7.2.0
+ */
+function wp_enqueue_admin_bar_color_scheme_styles(): void {
+	if ( is_admin() ) {
+		return;
+	}
+
+	$color_scheme = get_user_option( 'admin_color' );
+	if ( empty( $color_scheme ) ) {
+		$color_scheme = 'modern';
+	}
+
+	if ( sanitize_key( $color_scheme ) !== $color_scheme ) {
+		return;
+	}
+
+	$suffix = SCRIPT_DEBUG ? '' : '.min';
+	$path   = "css/colors/{$color_scheme}/admin-bar{$suffix}.css";
+
+	if ( ! file_exists( ABSPATH . 'wp-admin/' . $path ) ) {
+		return;
+	}
+
+	wp_enqueue_style(
+		'admin-bar-color-scheme',
+		admin_url( $path ),
+		array( 'admin-bar' )
+	);
+}
diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php
index 025a371781200..40b658e14b7f9 100644
--- a/src/wp-includes/default-filters.php
+++ b/src/wp-includes/default-filters.php
@@ -726,6 +726,7 @@
 add_action( 'wp_body_open', 'wp_admin_bar_render', 0 );
 add_action( 'wp_footer', 'wp_admin_bar_render', 1000 ); // Back-compat for themes not using `wp_body_open`.
 add_action( 'in_admin_header', 'wp_admin_bar_render', 0 );
+add_action( 'admin_bar_init', 'wp_enqueue_admin_bar_color_scheme_styles' );
 
 // Former admin filters that can also be hooked on the front end.
 add_action( 'media_buttons', 'media_buttons' );
diff --git a/tests/phpunit/tests/adminbar/wpEnqueueAdminBarColorSchemeStyles.php b/tests/phpunit/tests/adminbar/wpEnqueueAdminBarColorSchemeStyles.php
new file mode 100644
index 0000000000000..d09c9f63ecd81
--- /dev/null
+++ b/tests/phpunit/tests/adminbar/wpEnqueueAdminBarColorSchemeStyles.php
@@ -0,0 +1,100 @@
+<?php
+
+/**
+ * Tests for wp_enqueue_admin_bar_color_scheme_styles().
+ *
+ * @group admin-bar
+ * @group toolbar
+ *
+ * @covers ::wp_enqueue_admin_bar_color_scheme_styles
+ */
+class Tests_AdminBar_wpEnqueueAdminBarColorSchemeStyles extends WP_UnitTestCase {
+
+	/**
+	 * User ID.
+	 *
+	 * @var int
+	 */
+	private static int $user_id;
+
+	/**
+	 * Original value of the `$wp_styles` global.
+	 *
+	 * @var WP_Styles|null
+	 */
+	private ?WP_Styles $original_wp_styles;
+
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$user_id = $factory->user->create();
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->original_wp_styles = $GLOBALS['wp_styles'] ?? null;
+		$GLOBALS['wp_styles']     = null;
+
+		wp_set_current_user( self::$user_id );
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_styles'] = $this->original_wp_styles;
+
+		parent::tear_down();
+	}
+
+	/**
+	 * @ticket 64762
+	 */
+	public function test_enqueues_stylesheet_for_core_color_scheme() {
+		update_user_option( self::$user_id, 'admin_color', 'blue', true );
+
+		wp_enqueue_admin_bar_color_scheme_styles();
+
+		$this->assertTrue( wp_style_is( 'admin-bar-color-scheme' ), 'The admin bar color scheme stylesheet should be enqueued.' );
+
+		$style  = wp_styles()->registered['admin-bar-color-scheme'];
+		$suffix = SCRIPT_DEBUG ? '' : '.min';
+		$this->assertSame( admin_url( "css/colors/blue/admin-bar{$suffix}.css" ), $style->src, 'The stylesheet URL should match the color scheme.' );
+		$this->assertContains( 'admin-bar', $style->deps, 'The stylesheet should depend on the admin bar stylesheet.' );
+	}
+
+	/**
+	 * @ticket 64762
+	 *
+	 * @dataProvider data_color_schemes_without_admin_bar_stylesheet
+	 *
+	 * @param string $color_scheme Color scheme.
+	 */
+	public function test_does_not_enqueue_stylesheet_for_color_scheme_without_admin_bar_stylesheet( $color_scheme ) {
+		update_user_option( self::$user_id, 'admin_color', $color_scheme, true );
+
+		wp_enqueue_admin_bar_color_scheme_styles();
+
+		$this->assertFalse( wp_style_is( 'admin-bar-color-scheme', 'registered' ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array<non-falsy-string, array{ 0: non-falsy-string }>
+	 */
+	public static function data_color_schemes_without_admin_bar_stylesheet(): array {
+		return array(
+			'fresh'         => array( 'fresh' ),
+			'plugin scheme' => array( 'my-plugin-scheme' ),
+		);
+	}
+
+	/**
+	 * @ticket 64762
+	 */
+	public function test_does_not_enqueue_stylesheet_in_admin() {
+		update_user_option( self::$user_id, 'admin_color', 'blue', true );
+		set_current_screen( 'dashboard' );
+
+		wp_enqueue_admin_bar_color_scheme_styles();
+
+		$this->assertFalse( wp_style_is( 'admin-bar-color-scheme', 'registered' ) );
+	}
+}