fix: 'Not found' page should obey theme

closes #1626

app/scenes/Document/components/DataLoader.js

@@ -7,6 +7,7 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import type { RouterHistory, Match } from "react-router-dom";
 import { withRouter } from "react-router-dom";
+import { withTheme } from "styled-components";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
@@ -34,6 +35,7 @@ type Props = {|
   policies: PoliciesStore,
   revisions: RevisionsStore,
   ui: UiStore,
+  theme: Object,
   history: RouterHistory,
 |};
 
@@ -47,6 +49,7 @@ class DataLoader extends React.Component<Props> {
     const { documents, match } = this.props;
     this.document = documents.getByUrl(match.params.documentSlug);
     this.loadDocument();
+    this.updateBackground();
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -71,6 +74,13 @@ class DataLoader extends React.Component<Props> {
     ) {
       this.loadRevision();
     }
+    this.updateBackground();
+  }
+
+  updateBackground() {
+    // ensure the wider page color always matches the theme. This is to
+    // account for share links which don't sit in the wider Layout component
+    window.document.body.style.background = this.props.theme.background;
   }
 
   get isEditing() {
@@ -258,5 +268,5 @@ export default withRouter(
     "revisions",
     "policies",
     "shares"
-  )(DataLoader)
+  )(withTheme(DataLoader))
 );