Dark Mode (#912)

closes #704

app/components/Sidebar/Sidebar.js

@@ -6,10 +6,12 @@ import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import { observer, inject } from 'mobx-react';
 import { CloseIcon, MenuIcon } from 'outline-icons';
+import Fade from 'components/Fade';
 import Flex from 'shared/components/Flex';
-
 import UiStore from 'stores/UiStore';
 
+let firstRender = true;
+
 type Props = {
   children: React.Node,
   location: Location,
@@ -30,8 +32,7 @@ class Sidebar extends React.Component<Props> {
 
   render() {
     const { children, ui } = this.props;
-
-    return (
+    const content = (
       <Container
         editMode={ui.editMode}
         mobileSidebarVisible={ui.mobileSidebarVisible}
@@ -46,6 +47,14 @@ class Sidebar extends React.Component<Props> {
         {children}
       </Container>
     );
+
+    // Fade in the sidebar on first render after page load
+    if (firstRender) {
+      firstRender = false;
+      return <Fade>{content}</Fade>;
+    }
+
+    return content;
   }
 }
 
@@ -55,7 +64,7 @@ const Container = styled(Flex)`
   bottom: 0;
   left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
   width: 100%;
-  background: ${props => props.theme.smoke};
+  background: ${props => props.theme.sidebarBackground};
   transition: left 100ms ease-out;
   margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
   z-index: 2;
@@ -68,7 +77,7 @@ const Container = styled(Flex)`
   &:before,
   &:after {
     content: '';
-    background: ${props => props.theme.smoke};
+    background: ${props => props.theme.sidebarBackground};
     position: absolute;
     top: -50vh;
     left: 0;

app/components/Sidebar/components/Header.js

@@ -6,7 +6,7 @@ const Header = styled(Flex)`
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  color: ${props => props.theme.slateDark};
+  color: ${props => props.theme.sidebarText};
   letter-spacing: 0.04em;
   margin: 4px 16px;
 `;

app/components/Sidebar/components/HeaderBlock.js

@@ -46,7 +46,7 @@ const Subheading = styled.div`
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
-  color: ${props => props.theme.slateDark};
+  color: ${props => props.theme.sidebarText};
 `;
 
 const TeamName = styled.div`

app/components/Sidebar/components/SidebarLink.js

@@ -34,7 +34,7 @@ class SidebarLink extends React.Component<Props> {
 
   activeStyle = {
     color: this.props.theme.text,
-    background: 'rgba(0, 0, 0, 0.05)',
+    background: this.props.theme.sidebarItemBackground,
     fontWeight: 600,
     ...this.style,
   };
@@ -115,7 +115,7 @@ const StyledNavLink = styled(NavLink)`
   text-overflow: ellipsis;
   padding: 4px 16px;
   border-radius: 4px;
-  color: ${props => props.theme.slateDark};
+  color: ${props => props.theme.sidebarText};
   font-size: 15px;
   cursor: pointer;
 
@@ -128,7 +128,7 @@ const Action = styled.span`
   position: absolute;
   top: 4px;
   right: 4px;
-  color: ${props => props.theme.slate};
+  color: ${props => props.theme.textTertiary};
 
   svg {
     opacity: 0.75;