diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
index e420b4ea65947..6f0bc38481142 100644
--- a/packages/kbn-optimizer/src/worker/webpack.config.ts
+++ b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -36,6 +36,23 @@ const nodeModulesButNotKbnPackages = (path: string) => {
   return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`);
 };
 
+const mediaAwareStyleLoaders = [
+  {
+    resourceQuery: /print/,
+    loader: 'style-loader',
+    options: {
+      attributes: { 'data-print-media-style': 'true' },
+    },
+  },
+  {
+    resourceQuery: undefined,
+    loader: 'style-loader',
+    options: {
+      attributes: { media: 'screen, projection' },
+    },
+  },
+];
+
 export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) {
   const ENTRY_CREATOR = require.resolve('./entry_point_creator');
 
@@ -129,13 +146,15 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
             },
           ],
         },
+        {
+          test: /\.css$/,
+          include: /node_modules/,
+          oneOf: mediaAwareStyleLoaders,
+        },
         {
           test: /\.css$/,
           include: /node_modules/,
           use: [
-            {
-              loader: 'style-loader',
-            },
             {
               loader: 'css-loader',
               options: {
@@ -144,6 +163,11 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
             },
           ],
         },
+        {
+          test: /\.scss$/,
+          exclude: nodeModulesButNotKbnPackages,
+          oneOf: mediaAwareStyleLoaders,
+        },
         {
           test: /\.scss$/,
           exclude: nodeModulesButNotKbnPackages,
@@ -151,9 +175,6 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
             ...worker.themeTags.map((theme) => ({
               resourceQuery: `?${theme}`,
               use: [
-                {
-                  loader: 'style-loader',
-                },
                 {
                   loader: 'css-loader',
                   options: {
diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts
index 1aa01c13dd375..3d0c6fbfddefa 100644
--- a/src/core/public/core_system.ts
+++ b/src/core/public/core_system.ts
@@ -253,6 +253,29 @@ export class CoreSystem {
       this.rootDomElement.appendChild(notificationsTargetDomElement);
       this.rootDomElement.appendChild(overlayTargetDomElement);
 
+      // HACKS: scope all current styles to screen or projection media
+      const setTargetMedia = (el: HTMLElement) => {
+        if (el.getAttribute('data-print-media-style') === 'true') {
+          el.setAttribute('media', 'print');
+        } else {
+          el.setAttribute('media', 'screen, projection');
+        }
+      };
+      document.querySelectorAll('link').forEach(setTargetMedia);
+      document.querySelectorAll('style').forEach(setTargetMedia);
+      new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.addedNodes.forEach((node) => {
+            if (
+              node instanceof HTMLElement &&
+              (node.tagName.toLowerCase() === 'link' || node.tagName.toLowerCase() === 'style')
+            ) {
+              setTargetMedia(node);
+            }
+          });
+        });
+      }).observe(document.head, { childList: true, subtree: true });
+
       this.rendering.start({
         application,
         chrome,
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index 2f63062ccf60c..ae6a81c79c3db 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -79,6 +79,8 @@ import { dashboardFeatureCatalog } from './dashboard_strings';
 import { replaceUrlHashQuery } from '../../kibana_utils/public';
 import { SpacesPluginStart } from './services/spaces';
 
+import './print.scss?v8light&print';
+
 export interface DashboardFeatureFlagConfig {
   allowByValueEmbeddables: boolean;
 }
diff --git a/src/plugins/dashboard/public/print.scss b/src/plugins/dashboard/public/print.scss
new file mode 100644
index 0000000000000..a28db86880b37
--- /dev/null
+++ b/src/plugins/dashboard/public/print.scss
@@ -0,0 +1,3 @@
+html {
+  background-color: rgb(255, 0, 0);
+}