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..ec359fccb21d3
--- /dev/null
+++ b/src/wp-admin/css/colors/_admin-bar.scss
@@ -0,0 +1,25 @@
+@use "variables";
+
+// Admin bar color scheme tokens.
+//
+// The admin bar stylesheet (wp-includes/css/admin-bar.css) reads its colors
+// from these custom properties, falling back to the default colors.
+//
+// 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 tokens() {
+	#wpadminbar {
+		--wp-admin--admin-bar--text: #{variables.$menu-text};
+		--wp-admin--admin-bar--background: #{variables.$menu-background};
+		--wp-admin--admin-bar--icon: #{variables.$menu-icon};
+		--wp-admin--admin-bar--focus-text: #{variables.$menu-submenu-focus-text};
+		--wp-admin--admin-bar--submenu-text: #{variables.$menu-submenu-text};
+		--wp-admin--admin-bar--submenu-background: #{variables.$menu-submenu-background};
+		--wp-admin--admin-bar--submenu-background-alt: #{variables.$menu-submenu-background-alt};
+		--wp-admin--admin-bar--input-background: #{variables.$adminbar-input-background};
+		--wp-admin--admin-bar--recovery-text: #{variables.$adminbar-recovery-exit-text};
+		--wp-admin--admin-bar--recovery-background: #{variables.$adminbar-recovery-exit-background};
+		--wp-admin--admin-bar--recovery-background-hover: #{variables.$adminbar-recovery-exit-background-alt};
+		--wp-admin--admin-bar--avatar-frame: #{variables.$adminbar-avatar-frame};
+	}
+}
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 20704b3f525f0..7b2097752c652 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.tokens();
 
 /* 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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/blue/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/coffee/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/ectoplasm/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/light/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/midnight/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/modern/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/ocean/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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..d708155b8efde
--- /dev/null
+++ b/src/wp-admin/css/colors/sunrise/admin-bar.scss
@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.tokens();
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/class-wp-admin-bar.php b/src/wp-includes/class-wp-admin-bar.php
index 200d9152002f1..e6721e5004246 100644
--- a/src/wp-includes/class-wp-admin-bar.php
+++ b/src/wp-includes/class-wp-admin-bar.php
@@ -72,6 +72,10 @@ public function initialize() {
 		wp_enqueue_script( 'admin-bar' );
 		wp_enqueue_style( 'admin-bar' );
 
+		if ( ! is_admin() ) {
+			$this->add_color_scheme_styles();
+		}
+
 		/**
 		 * Fires after WP_Admin_Bar is initialized.
 		 *
@@ -80,6 +84,40 @@ public function initialize() {
 		do_action( 'admin_bar_init' );
 	}
 
+	/**
+	 * Applies the current user's admin color scheme to the admin bar on the front end.
+	 *
+	 * Inlines the color scheme's admin-bar.css, which only sets the custom properties
+	 * that the admin bar stylesheet reads its colors from. In the admin, the color
+	 * scheme stylesheet already sets them.
+	 *
+	 * @since 7.2.0
+	 */
+	private function add_color_scheme_styles(): void {
+		$color_scheme = get_user_option( 'admin_color' );
+
+		if ( empty( $color_scheme ) ) {
+			$color_scheme = 'modern';
+		}
+
+		if ( ! is_string( $color_scheme ) || sanitize_key( $color_scheme ) !== $color_scheme ) {
+			return;
+		}
+
+		$suffix = SCRIPT_DEBUG ? '' : '.min';
+		$path   = ABSPATH . "wp-admin/css/colors/{$color_scheme}/admin-bar{$suffix}.css";
+
+		if ( ! is_readable( $path ) ) {
+			return;
+		}
+
+		$css = file_get_contents( $path );
+
+		if ( $css ) {
+			wp_add_inline_style( 'admin-bar', $css );
+		}
+	}
+
 	/**
 	 * Adds a node (menu item) to the admin bar menu.
 	 *
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 6958234ac739a..7b7dc24f7ef87 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -41,7 +41,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar a.ab-item,
 #wpadminbar > #wp-toolbar span.ab-label,
 #wpadminbar > #wp-toolbar span.noticon {
-	color: #f0f0f1;
+	color: var(--wp-admin--admin-bar--text, #f0f0f1);
 }
 
 #wpadminbar #wp-admin-bar-site-name a.ab-item,
@@ -86,7 +86,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 
 #wpadminbar {
 	direction: ltr;
-	color: #c3c4c7;
+	color: var(--wp-admin--admin-bar--text, #c3c4c7);
 	font-size: 13px;
 	font-weight: 400;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -98,7 +98,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	width: 100%;
 	min-width: 600px; /* match the min-width of the body in wp-admin/css/common.css */
 	z-index: 99999;
-	background: #1d2327;
+	background: var(--wp-admin--admin-bar--background, #1d2327);
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
 }
@@ -146,7 +146,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	margin: 0;
 	padding: 0;
 	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
-	background: #2c3338;
+	background: var(--wp-admin--admin-bar--submenu-background, #2c3338);
 	display: none;
 	position: absolute;
 	float: none;
@@ -216,14 +216,14 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
 #wpadminbar .ab-top-menu > li.hover > .ab-item {
-	background: #2c3338;
-	color: #72aee6;
+	background: var(--wp-admin--admin-bar--submenu-background, #2c3338);
+	color: var(--wp-admin--admin-bar--focus-text, #72aee6);
 }
 
 #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
 #wpadminbar > #wp-toolbar li.hover span.ab-label,
 #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
-	color: #72aee6;
+	color: var(--wp-admin--admin-bar--focus-text, #72aee6);
 }
 
 #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
@@ -244,27 +244,33 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar .ab-item::before,
 #wpadminbar #adminbarsearch::before {
 	position: relative;
-	color: #a7aaad;
-	color: rgba(240, 246, 252, 0.6);
+	color: var(--wp-admin--admin-bar--icon, rgba(240, 246, 252, 0.6));
 	transition: color 0.1s ease-in-out;
 }
 
+#wpadminbar .ab-icon,
+#wpadminbar .ab-item::after {
+	color: var(--wp-admin--admin-bar--icon, inherit);
+}
+
+#wpadminbar:not(.mobile) li:hover .ab-item::after {
+	color: var(--wp-admin--admin-bar--focus-text, inherit);
+}
+
 #wpadminbar .ab-label {
 	display: inline-block;
 	height: 32px;
 }
 
 #wpadminbar .ab-submenu .ab-item {
-	color: #c3c4c7;
-	color: rgba(240, 246, 252, 0.7);
+	color: var(--wp-admin--admin-bar--submenu-text, rgba(240, 246, 252, 0.7));
 }
 
 #wpadminbar .quicklinks .menupop ul li a,
 #wpadminbar .quicklinks .menupop ul li a strong,
 #wpadminbar .quicklinks .menupop.hover ul li a,
 #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
-	color: #c3c4c7;
-	color: rgba(240, 246, 252, 0.7);
+	color: var(--wp-admin--admin-bar--submenu-text, rgba(240, 246, 252, 0.7));
 }
 
 #wpadminbar .quicklinks .menupop ul li a:hover,
@@ -287,17 +293,17 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar li.hover .ab-item::before,
 #wpadminbar li:hover #adminbarsearch::before,
 #wpadminbar li #adminbarsearch.adminbar-focused::before {
-	color: #72aee6;
+	color: var(--wp-admin--admin-bar--focus-text, #72aee6);
 }
 
 #wpadminbar.mobile .quicklinks .ab-icon::before,
 #wpadminbar.mobile .quicklinks .ab-item::before {
-	color: #c3c4c7;
+	color: var(--wp-admin--admin-bar--icon, #c3c4c7);
 }
 
 #wpadminbar.mobile .quicklinks .hover .ab-icon::before,
 #wpadminbar.mobile .quicklinks .hover .ab-item::before {
-	color: #72aee6;
+	color: var(--wp-admin--admin-bar--focus-text, #72aee6);
 }
 
 #wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow::before,
@@ -344,7 +350,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 
 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
-	background: #3c434a;
+	background: var(--wp-admin--admin-bar--submenu-background-alt, #3c434a);
 }
 
 #wpadminbar .quicklinks .menupop .ab-sub-secondary > li > a:hover,
@@ -380,16 +386,21 @@ html:lang(he-il) .rtl #wpadminbar * {
  * Recovery Mode
  */
 #wpadminbar #wp-admin-bar-recovery-mode {
-	color: #fff;
-	background-color: #d63638;
+	color: var(--wp-admin--admin-bar--recovery-text, #fff);
+	background-color: var(--wp-admin--admin-bar--recovery-background, #d63638);
+}
+
+#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
+#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
+	color: var(--wp-admin--admin-bar--recovery-text, #f0f0f1);
 }
 
 #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: #fff;
-	background-color: #d63638;
+	color: var(--wp-admin--admin-bar--recovery-text, #fff);
+	background-color: var(--wp-admin--admin-bar--recovery-background-hover, #d63638);
 }
 
 /**
@@ -466,8 +477,16 @@ html:lang(he-il) .rtl #wpadminbar * {
 	display: block;
 }
 
+#wpadminbar #wp-admin-bar-user-info .display-name {
+	color: var(--wp-admin--admin-bar--text, inherit);
+}
+
+#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
+	color: var(--wp-admin--admin-bar--focus-text, inherit);
+}
+
 #wpadminbar #wp-admin-bar-user-info .username {
-	color: #a7aaad;
+	color: var(--wp-admin--admin-bar--submenu-text, #a7aaad);
 	font-size: 11px;
 }
 
@@ -476,9 +495,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 	width: auto;
 	height: 20px;
 	padding: 0;
-	border: 1px solid #2c353b;
+	border: 1px solid var(--wp-admin--admin-bar--avatar-frame, #2c353b);
 	border-radius: 50%;
-	background: #f0f0f1;
+	background: var(--wp-admin--admin-bar--avatar-frame, #f0f0f1);
 	line-height: 1.84615384;
 	vertical-align: middle;
 	margin: -4px 0 0 6px;
@@ -515,13 +534,13 @@ html:lang(he-il) .rtl #wpadminbar * {
 	font: 400 16px/1 dashicons !important;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	color: #f0f0f1;
+	color: var(--wp-admin--admin-bar--icon, #f0f0f1);
 }
 
 #wpadminbar .quicklinks li a:hover .blavatar,
 #wpadminbar .quicklinks li a:focus .blavatar,
 #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar {
-	color: #72aee6;
+	color: var(--wp-admin--admin-bar--focus-text, #72aee6);
 }
 
 #wpadminbar .quicklinks li img.blavatar,
@@ -700,9 +719,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 
 #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
 	z-index: 10;
-	color: #000;
+	color: var(--wp-admin--admin-bar--text, #000);
 	width: 200px;
-	background-color: rgba(255, 255, 255, 0.9);
+	background-color: var(--wp-admin--admin-bar--input-background, rgba(255, 255, 255, 0.9));
 	cursor: text;
 	border: 0;
 }
@@ -1043,7 +1062,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 		height: auto;
 		font-size: 16px;
 		line-height: 1.5;
-		color: #f0f0f1;
+		color: var(--wp-admin--admin-bar--text, #f0f0f1);
 	}
 
 	#wpadminbar #wp-admin-bar-user-info a {