Add dark theme

src/browser/components/DataTables.jsx

@@ -25,7 +25,8 @@ export const StyledTable = styled.table`
   margin-bottom: 0
 `
 export const StyledBodyTr = styled.tr`
-  background-color: #fff
+  background-color: ${props => props.theme.secondaryBackground};
+  color: ${props => props.theme.secondaryText};
 `
 export const StyledTh = styled.th`
   text-align: left
@@ -43,12 +44,12 @@ export const StyledTd = styled.td`
 `
 
 export const StyledJsonPre = styled.pre`
-  background-color: #eee;
+  background-color: ${props => props.theme.preBackground};
   -webkit-border-radius: 5px;
   border-radius: 5px;
   margin: 20px 10px;
   border-bottom: none;
-  color: #666;
+  color: ${props => props.theme.preText};
   line-height: 26px;
   padding: 2px 10px;
   max-width: 320px;

src/browser/components/Tables.jsx

@@ -23,20 +23,21 @@ import styled from 'styled-components'
 const StyledTable = styled.table`
   border-radius: 4px;
   margin: 0 15px 20px 15px;
-  background-color: #fff;
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
   box-shadow: 0 1px 1px rgba(0,0,0,.05);
   `
 const StyledTr = styled.tr`
   padding: 10px 15px;
   border: 1px solid #ddd;
+  background-color: ${props => props.theme.secondaryBackground};
+  color: ${props => props.theme.secondaryText};
 `
 const StyledTh = styled.th`
   font-size: 18px;
   -webkit-column-span: all;
   column-span: all;
   text-align: left;
-  background-color: #f5f5f5;
+  background-color: ${props => props.theme.secondaryBackground};
   border-color: #ddd;
   padding: 10px 15px
 `

src/browser/components/Text.jsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2002-2017 "Neo Technology,"
+ * Network Engine for Objects in Lund AB [http://neotechnology.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import styled from 'styled-components'
+
+export const Lead = styled.p`
+  font-weight: 300;
+  font-size: 15px;
+  line-height: 22px;
+  font-family: ${props => props.theme.primaryFontFamily};
+  color: ${props => props.theme.headerText};
+`

src/browser/components/buttons/index.jsx

@@ -108,23 +108,23 @@ export const NavigationButtonContainer = styled.li`
 `
 
 const StyledFormButton = styled.button`
-  color: ${props => props.theme.primaryText};
-  background-color: #fff;
+  color: ${props => props.theme.secondaryButtonText};
+  background-color: ${props => props.theme.secondaryButtonBackground};
+  border: ${props => props.theme.secondaryButtonBorder};
+  font-family: ${props => props.theme.primaryFontFamily};
   padding: 6px 12px;
-  border-color: #ccc;
   font-weight: 400;
   font-size: 14px;
-  font-family: ${props => props.theme.primaryFontFamily};
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
-  border: ${props => props.theme.formButtonBorder};
   border-radius: 4px;
   line-height: 20px;
   &:hover {
-    background-color: ${props => props.theme.formButtonBackgroundHover};
-    border: ${props => props.theme.formButtonBorderHover}
+    background-color: ${props => props.theme.secondaryButtonBackgroundHover};
+    color: ${props => props.theme.secondaryButtonTextHover};
+    border: ${props => props.theme.secondaryButtonBorderHover};
   }
 `
 
@@ -183,13 +183,15 @@ const StyledCypherFrameButton = styled.li`
   text-align: center;
   &:hover {
     background-color: ${props => props.theme.secondaryButtonBackgroundHover};
-    color: ${props => props.theme.editorBarBackground};
+    color: ${props => props.theme.secondaryButtonTextHover};
+    fill: ${props => props.theme.secondaryButtonTextHover};
     text-decoration: none;
   }
 `
 const StyledSelectedCypherFrameButton = styled(StyledCypherFrameButton)`
   background-color: ${props => props.theme.secondaryButtonBackgroundHover};
-  color: ${props => props.theme.editorBarBackground};
+  color: ${props => props.theme.secondaryButtonTextHover};
+  fill: ${props => props.theme.secondaryButtonTextHover};
 `
 export const FrameButton = (props) => {
   const {pressed, children, ...rest} = props
@@ -199,7 +201,6 @@ const StyledFrameButton = styled.li`
   color: ${props => props.theme.secondaryButtonText};
   background-color: transparent;
   border-left: ${props => props.theme.inFrameBorder};
-  border-right: ${props => props.theme.inFrameBorder};
   height: ${dim.frameTitlebarHeight}px;
   width: 41px;
   cursor: pointer;
@@ -209,15 +210,15 @@ const StyledFrameButton = styled.li`
   display: inline-block;
   &:hover {
     background-color: ${props => props.theme.secondaryButtonBackgroundHover};
-    color: ${props => props.theme.secondaryBackground};
-    fill: ${props => props.theme.secondaryBackground};
+    color: ${props => props.theme.secondaryButtonTextHover};
+    fill: ${props => props.theme.secondaryButtonTextHover};
     text-decoration: none;
   }
 `
 const StyledFrameButtonPressed = styled(StyledFrameButton)`
   background-color: ${props => props.theme.secondaryButtonBackgroundHover};
-  color: ${props => props.theme.secondaryBackground};
-  fill: ${props => props.theme.secondaryBackground};
+  color: ${props => props.theme.secondaryButtonTextHover};
+  fill: ${props => props.theme.secondaryButtonTextHover};
 `
 export const DefaultA = styled.a`
   color: ${props => props.theme.secondaryButtonText};

src/browser/modules/App/styled.jsx

@@ -49,10 +49,11 @@ export const StyledBody = styled.div`
 
 export const StyledMainWrapper = styled.div`
   flex: auto;
-  background-color: #D2D5DA;
   overflow: auto;
   padding: 0;
   z-index: 1;
   height: auto;
   width: 0;
+  background-color: ${props => props.theme.primaryBackground};
+  color: ${props => props.theme.primaryText};
 `

src/browser/modules/D3Visualization/components/styled.jsx

@@ -24,14 +24,28 @@ export const legendRowHeight = 32
 export const inspectorFooterContractedHeight = 22
 const pMarginTop = 6
 
+// Themes is here because the colors are unique to this component
+const getColor = (theme, name) => {
+  const themes = {
+    normal: {
+      svgBackground: '#f9fbfd'
+    },
+    dark: {
+      svgBackground: '#5a6070'
+    }
+  }
+  if (themes[theme] === undefined) theme = 'normal'
+  return themes[theme][name] || ''
+}
+
 export const StyledSvgWrapper = styled.div`
   line-height: 0;
   height: 100%;
   position: relative;
   > svg {
     height: 100%;
     width: 100%;
-    background-color: #f9fbfd;
+    background-color: ${props => getColor(props.theme.name, 'svgBackground')};
     .node {
       cursor: pointer;
       > .ring {
@@ -181,10 +195,10 @@ export const StyledStatusBarWrapper = styled.div`
 export const StyledStatusBar = styled.div`
   min-height: 39px;
   line-height:  39px;
-  color: #788185;
+  color: ${props => props.theme.secondaryText};
   font-size: 13px;
   position: relative;
-  background-color: #fff;
+  background-color: ${props => props.theme.secondaryBackground};
   white-space: nowrap;
   overflow: hidden;
   border-top: 1px solid #e6e9ef;
@@ -256,7 +270,7 @@ export const StyledLegendRow = styled.div`
   }
 `
 export const StyledLegend = styled.div`
-  background-color: #eef1f8;
+  background-color: ${props => props.theme.secondaryBackground};
   margin-top: -${(legendRowHeight * 2) + 1}px;
   &.one-row {
     margin-top: -${legendRowHeight}px;

src/browser/modules/Editor/styled.jsx

@@ -59,7 +59,11 @@ const BaseEditorWrapper = styled.div`
   padding: ${editorPadding}px;
   background-color: ${props => props.theme.editorBarBackground};
   font-family: Monaco,"Courier New",Terminal,monospace;
-  min-Height: ${props => Math.max(dim.editorbarHeight, props.minHeight + editorPadding * 2)}px
+  min-Height: ${props => Math.max(dim.editorbarHeight, props.minHeight + editorPadding * 2)}px;
+  .CodeMirror {
+    background-color: ${props => props.theme.editorBackground} !important;
+    color: ${props => props.theme.editorCommandColor};
+  }
 `
 
 export const EditorWrapper = styled(BaseEditorWrapper)`

src/browser/modules/Guides/Slide.jsx

@@ -19,8 +19,10 @@
  */
 
 import styles from './style.css'
+import { StyledSlide } from './styled.jsx'
+
 const Slide = ({html}) => {
-  return (<div className={styles.slide} dangerouslySetInnerHTML={{__html: html}} />)
+  return (<StyledSlide className={styles.slide} dangerouslySetInnerHTML={{__html: html}} />)
 }
 
 export default Slide

src/browser/modules/Guides/styled.jsx

@@ -62,3 +62,41 @@ export const CarouselIndicatorActive = styled(CarouselIndicator)`
 export const StyledUl = styled.ul`
   margin: 15px;
 `
+
+export const StyledSlide = styled.div`
+  color: ${props => props.theme.primaryText};
+  & p.lead, .title, .subtitle, .content > p, .table-help {
+    color: ${props => props.theme.primaryText} !important;
+  }
+  & a {
+    color: ${props => props.theme.link};
+    text-decoration: ${props => props.theme.name === 'dark' ? 'underline' : 'none'};
+  }
+  & kbd {
+    color: ${props => props.theme.primaryBackground} !important; /* inverted */
+    background-color: ${props => props.theme.primaryText} !important;
+  }
+  & .content > pre {
+    background-color: ${props => props.theme.secondaryBackground};
+    color: ${props => props.theme.preText};
+  }
+  & pre.runnable {
+    background-color: ${props => props.theme.preBackground};
+    color: ${props => props.theme.preText};
+  }
+  & pre.content {
+    background-color: ${props => props.theme.secondaryBackground};
+    color: ${props => props.theme.preText};
+  }
+  & a[help-topic], a[play-topic], a[server-topic], a[exec-topic] {
+    background-color: ${props => props.theme.topicBackground} !important;
+    color: ${props => props.theme.topicText} !important;
+  }
+  & button [help-topic], button [play-topic], button [server-topic], button [exec-topic] {
+    background-color: ${props => props.theme.primaryButtonBackground};
+    color: ${props => props.theme.primaryButtonText};
+  }
+  .code {
+    background-color: transparent;
+  }
+`

src/browser/modules/Main/styled.jsx

@@ -37,7 +37,6 @@ export const StyledMain = styled.div`
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
-  background-color: #D2D5DA;
   min-width: 0;
   position: relative;
   height: 100vh;

src/browser/modules/Sidebar/Settings.jsx

@@ -33,7 +33,7 @@ const visualSettings =
           theme: {
             displayName: 'Theme',
             type: 'radio',
-            options: ['normal', 'outline']
+            options: ['normal', 'outline', 'dark']
           }
         },
         {

src/browser/modules/Stream/Auth/ChangePasswordFrame.jsx

@@ -24,7 +24,8 @@ import ConnectionForm from './ConnectionForm'
 import FrameTemplate from '../FrameTemplate'
 import FrameError from '../FrameError'
 import Render from 'browser-components/Render'
-import {H3} from 'browser-components/headers'
+import { H3 } from 'browser-components/headers'
+import { Lead } from 'browser-components/Text'
 import {
   StyledConnectionFrame,
   StyledConnectionAside,
@@ -73,10 +74,10 @@ export class ChangePasswordFrame extends Component {
         <StyledConnectionAside>
           <H3>Password change</H3>
           <Render if={!this.state.success}>
-            Enter your current password and the new twice to change your password.
+            <Lead>Enter your current password and the new twice to change your password.</Lead>
           </Render>
           <Render if={this.state.success}>
-            Password change successful
+            <Lead>Password change successful</Lead>
           </Render>
         </StyledConnectionAside>
 

src/browser/modules/Stream/Auth/ConnectionFrame.jsx

@@ -24,6 +24,8 @@ import FrameTemplate from '../FrameTemplate'
 import ConnectionForm from './ConnectionForm'
 import FrameError from '../FrameError'
 import {H3} from 'browser-components/headers'
+import { Lead } from 'browser-components/Text'
+
 import Render from 'browser-components/Render'
 import {
   StyledConnectionFrame,
@@ -53,16 +55,16 @@ export class ConnectionFrame extends Component {
           <StyledConnectionFrame>
             <StyledConnectionAside>
               <Render if={!this.state.success}>
-                <span>
+                <div>
                   <H3>Connect to Neo4j</H3>
-                  Database access requires an authenticated connection.
-                </span>
+                  <Lead>Database access requires an authenticated connection.</Lead>
+                </div>
               </Render>
               <Render if={this.state.success}>
-                <span>
+                <div>
                   <H3>Connected to Neo4j</H3>
-                  Nice to meet you.
-                </span>
+                  <Lead>Nice to meet you.</Lead>
+                </div>
               </Render>
             </StyledConnectionAside>
             <StyledConnectionBodyContainer>

src/browser/modules/Stream/Auth/DisconnectFrame.jsx

@@ -20,7 +20,8 @@
 
 import FrameTemplate from '../FrameTemplate'
 import { StyledConnectionFrame, StyledConnectionAside } from './styled'
-import {H3} from 'browser-components/headers'
+import { H3 } from 'browser-components/headers'
+import { Lead } from 'browser-components/Text'
 import Render from 'browser-components/Render'
 
 const Disconnect = ({frame, activeConnectionData}) => {
@@ -31,16 +32,20 @@ const Disconnect = ({frame, activeConnectionData}) => {
         <StyledConnectionFrame>
           <StyledConnectionAside>
             <Render if={activeConnectionData}>
-              <span>
+              <div>
                 <H3>Connected</H3>
-                {'You\'re still connected'}
-              </span>
+                <Lead>
+                  You're still connected
+                </Lead>
+              </div>
             </Render>
             <Render if={!activeConnectionData}>
-              <span>
+              <div>
                 <H3>Disconnected</H3>
-                You are disconnected from the server
-              </span>
+                <Lead>
+                  You are disconnected from the server
+                </Lead>
+              </div>
             </Render>
           </StyledConnectionAside>
         </StyledConnectionFrame>