From 3432e70fa13315a97887663c0aab08fc2e64c5b1 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip@weave.works>
Date: Wed, 2 Oct 2019 15:28:00 +0200
Subject: [PATCH] Prototype global inject of Scope theme

---
 client/app/scripts/components/app.js          | 81 ++++++++++---------
 client/app/scripts/components/global-style.js |  9 +++
 2 files changed, 52 insertions(+), 38 deletions(-)
 create mode 100644 client/app/scripts/components/global-style.js

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index b9a4ebc74..e27417fe7 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -8,6 +8,7 @@ import { debounce, isEqual } from 'lodash';
 import { ThemeProvider } from 'styled-components';
 import theme from 'weaveworks-ui-components/lib/theme';
 
+import GlobalStyle from './global-style';
 import Logo from './logo';
 import Footer from './footer';
 import Sidebar from './sidebar';
@@ -205,52 +206,56 @@ class App extends React.Component {
     const isIframe = window !== window.top;
 
     return (
-      <ThemeProvider theme={theme}>
-        <div className={className} ref={this.saveAppRef}>
-          {showingDebugToolbar() && <DebugToolbar />}
+      <ThemeProvider theme={{...theme, scope: { background: contrastMode ? '#f00' : '#00f' }}}>
+        <>
+          <GlobalStyle />
 
-          {showingHelp && <HelpPanel />}
+          <div className={className} ref={this.saveAppRef}>
+            {showingDebugToolbar() && <DebugToolbar />}
 
-          {showingTroubleshootingMenu && <TroubleshootingMenu />}
+            {showingHelp && <HelpPanel />}
 
-          {showingDetails && (
-          <Details
-            renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
-          />
-          )}
+            {showingTroubleshootingMenu && <TroubleshootingMenu />}
 
-          <div className="header">
-            {timeTravelSupported && this.props.renderTimeTravel()}
+            {showingDetails && (
+            <Details
+              renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
+            />
+            )}
 
-            <div className="selectors">
-              <div className="logo">
-                {!isIframe
-                  && (
-                  <svg width="100%" height="100%" viewBox="0 0 1089 217">
-                    <Logo />
-                  </svg>
-                  )
-                }
+            <div className="header">
+              {timeTravelSupported && this.props.renderTimeTravel()}
+
+              <div className="selectors">
+                <div className="logo">
+                  {!isIframe
+                    && (
+                    <svg width="100%" height="100%" viewBox="0 0 1089 217">
+                      <Logo />
+                    </svg>
+                    )
+                  }
+                </div>
+                <Search />
+                <Topologies />
+                <ViewModeSelector />
+                <TimeControl />
               </div>
-              <Search />
-              <Topologies />
-              <ViewModeSelector />
-              <TimeControl />
             </div>
+
+            <Nodes />
+
+            <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
+              {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
+              {!isResourceViewMode && <Status />}
+              {!isResourceViewMode && <TopologyOptions />}
+            </Sidebar>
+
+            <Footer />
+
+            <Overlay faded={timeTravelTransitioning} />
           </div>
-
-          <Nodes />
-
-          <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
-            {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
-            {!isResourceViewMode && <Status />}
-            {!isResourceViewMode && <TopologyOptions />}
-          </Sidebar>
-
-          <Footer />
-
-          <Overlay faded={timeTravelTransitioning} />
-        </div>
+        </>
       </ThemeProvider>
     );
   }
diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
new file mode 100644
index 000000000..0e6cbcb93
--- /dev/null
+++ b/client/app/scripts/components/global-style.js
@@ -0,0 +1,9 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  div {
+    background: ${props => props.theme.scope.background};
+  }
+`;
+
+export default GlobalStyle;