diff --git a/core/modules/node/node.module b/core/modules/node/node.module
index a54fc0a..5f0ef02 100644
--- a/core/modules/node/node.module
+++ b/core/modules/node/node.module
@@ -154,6 +154,48 @@ function node_theme() {
 }
 
 /**
+ * Implements hook_library_info_alter().
+ *
+ * Includes additional stylesheets defined by the admin theme to allow it to
+ * customize the Node Preview bar appearance.
+ *
+ * An admin theme can specify CSS files to make the node preview bar match the
+ * administration experience in the back-end.
+ *
+ * The CSS files can be specified via the "node_preview_stylesheets" property
+ * in the .info.yml file:
+ * @code
+ * preview_stylesheets:
+ *   - css/node-preview.css
+ * @endcode
+ */
+function node_library_info_alter(&$libraries, $extension) {
+  if ($extension === 'node' && isset($libraries['drupal.node.preview'])) {
+    $theme = Drupal::config('system.theme')->get('admin');
+    if ($theme != '0') {
+      // First let the base theme modify the library, then the actual theme.
+      $alter_library = function(&$library, $theme) use (&$alter_library) {
+        if (isset($theme) && $theme_path = drupal_get_path('theme', $theme)) {
+          $info = system_get_info('theme', $theme);
+          // Recurse to process base theme(s) first.
+          if (isset($info['base theme'])) {
+            $alter_library($library, $info['base theme']);
+          }
+          if (isset($info['node_preview_stylesheets'])) {
+            foreach ($info['node_preview_stylesheets'] as $path) {
+              // Load the styling as late as possible.
+              $library['css']['theme']['/' . $theme_path . '/' . $path] = ['weight' => 20 ];
+            }
+          }
+        }
+      };
+    }
+
+    $alter_library($libraries['drupal.node.preview'], $theme);
+  }
+}
+
+/**
  * Implements hook_entity_view_display_alter().
  */
 function node_entity_view_display_alter(EntityViewDisplayInterface $display, $context) {
diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index fd82367..e2be4dd 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -28,7 +28,6 @@ global-styling:
       css/components/menu.css: {}
       css/components/messages.css: {}
       css/components/node.css: {}
-      css/components/node-preview.css: {}
       css/components/page-title.css: {}
       css/components/pager.css: {}
       css/components/panel.css: {}
diff --git a/core/themes/bartik/css/components/node-preview.css b/core/themes/seven/css/components/node-preview.css
similarity index 95%
rename from core/themes/bartik/css/components/node-preview.css
rename to core/themes/seven/css/components/node-preview.css
index 520141a..2cd90db 100644
--- a/core/themes/bartik/css/components/node-preview.css
+++ b/core/themes/seven/css/components/node-preview.css
@@ -1,3 +1,9 @@
+/**
+ * @file
+ * Styles for the node preview bar component.
+ * This is loaded on the frontend, so we can't rely on any other Seven styles.
+ */
+
 .node-preview-container {
   background: #d1e8f5;
   background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4);
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 699c963..5f52473 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -30,6 +30,8 @@ libraries-extend:
     - seven/seven.jquery.ui
 quickedit_stylesheets:
   - css/components/quickedit.css
+node_preview_stylesheets:
+  - css/components/node-preview.css
 regions:
   header: 'Header'
   pre_content: 'Pre-content'