dark-mode: make it happen

Author: barbosa

gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
     `gatsby-alias-imports`,
+    'gatsby-plugin-use-dark-mode',
     {
       resolve: `gatsby-source-filesystem`,
       options: {

package.json

@@ -20,6 +20,7 @@
     "gatsby-plugin-sharp": "^2.6.10",
     "gatsby-plugin-sitemap": "^2.4.4",
     "gatsby-plugin-styled-components": "^3.3.3",
+    "gatsby-plugin-use-dark-mode": "^1.1.2",
     "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-remark-images": "^3.3.9",
     "gatsby-remark-prismjs": "^3.5.3",
@@ -32,7 +33,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.1.1",
+    "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
     "@textlint-rule/textlint-rule-no-unmatched-pair": "^1.0.7",

src/components/GlobalStyle.js

@@ -0,0 +1,35 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: var(--background);
+    color: var(--text-primary);
+
+    &.light-mode {
+      --background: #e7ebef;
+      --text-primary: #1d2124;
+      --text-secondary: #6a7884;
+      --text-content: #333;
+      --accent-primary: #29D455;
+    }
+
+    &.dark-mode {
+      --background: #191b1f;
+      --text-primary: #FFF;
+      --text-secondary: #FFFC;
+      --text-content: #FFFC;
+      --accent-primary: #29D455;
+    }
+  }
+
+  .gatsby-highlight {
+    font-size: 15px;
+  }
+
+  :not(pre) > code[class*="language-"] {
+    font-size: 15px;
+    padding: .1em .4em;
+  }
+`
+
+export default GlobalStyle

src/components/Header.js

@@ -4,16 +4,16 @@ import styled from 'styled-components'
 import Section from './Section'
 import LogoMobile from './LogoMobile'
 import LogoDesktop from './LogoDesktop'
-import { theme } from 'styles/theme'
+import { fonts, sizes } from 'styles/theme'
 import { screen } from 'styles/screen'
 
 const Wrapper = styled(Section)`
   position: relative;
   width: 100%;
 
   ${screen.lg} {
-    max-width: ${theme.light.sizes.max};
-    width: ${theme.light.sizes.default};
+    max-width: ${sizes.max};
+    width: ${sizes.default};
   }
 `
 
@@ -34,8 +34,7 @@ const WrapperLogoMobile = styled.div`
 `
 
 const Nav = styled.nav`
-  background: #e7ebef;
-  color: ${theme.light.colors.primary};
+  color: var(--text-secondary);
   padding: 15px 15px 25px 15px;
   margin: 0 auto;
   text-transform: uppercase;
@@ -52,9 +51,9 @@ const Logo = styled.a`
   width: 40%;
 
   span {
-    color: #6a7884 !important;
+    color: var(--text-seconday) !important;
     display: inline-block;
-    font-family: ${theme.light.fonts.text};
+    font-family: ${fonts.text};
     font-size: 18px;
     font-weight: bold;
     letter-spacing: 0;
@@ -90,9 +89,9 @@ const Links = styled.div`
 
   a {
     padding: 0;
-    color: #333b43 !important;
+    color: var(--text-primary);
     display: inline-block;
-    font-family: ${theme.light.fonts.title};
+    font-family: ${fonts.title};
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0;

src/components/Layout.js

@@ -11,21 +11,16 @@ import PropTypes from 'prop-types'
 import 'styles/typography.css'
 import 'styles/layout.css'
 
-import styled, { createGlobalStyle } from 'styled-components'
+import styled from 'styled-components'
 
-import { screen } from 'styles/screen'
-import { theme } from 'styles/theme'
-
-import Header from './Header'
+import GlobalStyle from 'components/GlobalStyle'
+import Header from 'components/Header'
 
-const GlobalStyle = createGlobalStyle`
-  body {
-    color: ${theme.light.colors.text}
-  }
-`
+import { screen } from 'styles/screen'
+import { fonts } from 'styles/theme'
 
 const Wrapper = styled.div`
-  font-family: ${theme.light.fonts.text};
+  font-family: ${fonts.text};
   padding: 15px 7px 15px 0;
   margin: 0 auto;
   width: 100%;
@@ -47,16 +42,18 @@ const Section = styled.div`
   }
 `
 
-const Layout = ({ children }) => (
-  <div>
-    <GlobalStyle />
-
-    <Wrapper>
-      <Header />
-      <Section>{children}</Section>
-    </Wrapper>
-  </div>
-)
+const Layout = ({ children }) => {
+  return (
+    <div>
+      <GlobalStyle />
+
+      <Wrapper>
+        <Header />
+        <Section>{children}</Section>
+      </Wrapper>
+    </div>
+  )
+}
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,

src/components/Link.js

@@ -4,7 +4,7 @@ const Link = styled.a`
   display: block;
   font-size: 20px;
   font-weight: 500;
-  color: #333;
+  color: var(--text-primary);
   margin-bottom: 40px;
   padding: 15px 0;
   line-height: 1.5em;

src/components/LogoDesktop.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { screen } from 'styles/screen'
 
 const Author = styled.div`
-  color: #151b1f;
+  color: var(--text-primary);
   display: inline-block;
 
   font-weight: bold;

src/components/LogoMobile.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 const PostDate = styled.div`
-  color: #1d2124;
+  color: var(--text-primary);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0;

src/components/PostAuthor.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { theme } from 'styles/theme'
+import { fonts } from 'styles/theme'
 import { screen } from 'styles/screen'
 import PostAuthor from './PostAuthor'
 
@@ -18,8 +18,8 @@ const Block = styled.div`
 const Publication = styled(Block)`
   display: inline-block;
   width: 100%;
-  color: #6a7884;
-  font-family: ${theme.light.fonts.title};
+  color: var(--text-primary);
+  font-family: ${fonts.title};
   font-size: 14px;
   letter-spacing: 0;
 
@@ -30,7 +30,6 @@ const Publication = styled(Block)`
 
 const Date = styled.div`
   display: inline-block;
-  color: #1d2124;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0;
@@ -44,7 +43,7 @@ const Date = styled.div`
 `
 
 const Article = styled(Block)`
-  color: #1d2124;
+  color: var(--text-primary);
   display: inline-block;
   width: 100%;
 
@@ -54,11 +53,11 @@ const Article = styled(Block)`
 `
 
 const Title = styled.h1`
-  font-family: ${theme.light.fonts.title};
+  font-family: ${fonts.title};
   font-size: 24px;
   font-weight: bold;
   letter-spacing: 0;
-  line-height: 1em;
+  line-height: 1.5em;
   margin-bottom: 10px;
 
   a {
@@ -68,15 +67,15 @@ const Title = styled.h1`
 
 const Text = styled.p`
   margin: 20px 0 10px 0;
-  font-family: ${theme.light.fonts.text};
+  font-family: ${fonts.text};
   font-size: 17px;
   font-weight: 400;
 `
 
 const ReadMore = styled.a`
-  color: #6a7884;
+  color: var(--text-secondary);
   display: block;
-  font-family: ${theme.light.fonts.title};
+  font-family: ${fonts.title};
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 0;

src/components/PostDate.js

@@ -1,15 +1,15 @@
 import styled from 'styled-components'
 
-import { theme } from 'styles/theme'
+import { sizes } from 'styles/theme'
 import { screen } from 'styles/screen'
 
 const Section = styled.div`
   margin: 0 auto;
   width: 100%;
 
   ${screen.lg} {
-    max-width: ${theme.light.sizes.max};
-    width: ${theme.light.sizes.default};
+    max-width: ${sizes.max};
+    width: ${sizes.default};
   }
 `