Dark theme woo

oliverjam · Feb 4, 2018 · 01ccd64 · 01ccd64
1 parent f28cad3
commit 01ccd64
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -50,7 +50,7 @@ module.exports = {
  `gatsby-plugin-sharp`,
  // `gatsby-plugin-offline`,
  `gatsby-plugin-react-helmet`,
- // `gatsby-plugin-netlify-cms`,
+ `gatsby-plugin-netlify-cms`,
  `gatsby-plugin-styled-components`,
  `gatsby-plugin-purify-css`,
  ],

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -1,12 +1,14 @@
 import styled from 'styled-components';
 import { space, flexDirection } from 'styled-system';
+import t from '../styles/theme';
 import shadow from '../styles/shadow';
 
 export default styled.div`
  ${space};
  ${flexDirection};
  position: relative;
  display: flex;
+ color: ${t.colors.textDark};
  background-color: ${p => p.theme.colors[p.background] || p.theme.colors.bg};
  border: 1px solid ${p => p.theme.colors.grey[0]};
  border-radius: 6px;

diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -12,7 +12,7 @@ const Nav = styled.nav`
  bottom: 0;
  height: 3.25rem;
  display: flex;
- background-color: ${t.colors.grey[0]};
+ background-color: ${t.colors.bgDark};
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
  z-index: 999;
  @media (min-width: 40em) {
@@ -50,7 +50,7 @@ const NavLink = styled(Link)`
  transition: border-color 0.2s;
  @media (min-width: 40em) {
  border-bottom: 4px solid transparent;
- ${p => p.current && css`border-bottom-color: ${t.colors.grey[3]};`};
+ ${p => p.current && css`border-bottom-color: ${t.colors.grey[1]};`};
  &:hover {
  color: inherit;
  border-bottom-color: ${t.colors.primary};

diff --git a/src/components/Title.js b/src/components/Title.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import { fontSize } from 'styled-system';
+import t from '../styles/theme';
 import shadow from '../styles/longShadow';
 
 const Title = styled.h1`
  ${fontSize};
  font-size: ${p => (p.big ? p.theme.fontSizes[3] : p.theme.fontSizes[2])};
- color: orange;
+ color: ${t.colors.textLight};
  text-shadow: ${p => shadow(20)};
  @media (min-width: 40em) {
  font-size: ${p => (p.big ? p.theme.fontSizes[4] : p.theme.fontSizes[3])};

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -5,6 +5,7 @@ import Helmet from 'react-helmet';
 import Container from '../components/Container';
 import Title from '../components/Title';
 import BlogSection from '../components/BlogSection';
+import t from '../styles/theme';
 
 class BlogIndex extends React.Component {
  render() {
@@ -14,7 +15,7 @@ class BlogIndex extends React.Component {
  return (
  <Container>
  <Helmet title={siteTitle} />
- <Title big>I'm a frontend developer in London.</Title>
+ <Title big>I'm a <span style={{ color: t.colors.primary }}>frontend developer</span> in London.</Title>
  <BlogSection
  label="Recent Posts"
  direction={['column', 'column', 'row']}

diff --git a/src/styles/global.js b/src/styles/global.js
@@ -22,8 +22,8 @@ injectGlobal`
 
  body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- color: ${t.colors.textDark};
- background-color: ${t.colors.bg};
+ color: ${t.colors.textLight};
+ background-color: ${t.colors.bgDark};
  line-height: 1.5;
  }
 

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -24,6 +24,7 @@ export default {
  grey: shades,
  primary: palette.orange,
  bg: palette.white,
+ bgDark: shades[4],
  textLight: palette.white,
  textDark: shades[4],
  },