Enable dark theme

client/components/AutocompleteInput/AutocompleteInput.scss

@@ -179,3 +179,34 @@
     }
   }
 }
+
+.dark-theme {
+  .dummy-input__package-name {
+    color: $ghost-white;
+  }
+
+  .dummy-input__package-version {
+    color: $spun-pearl;
+  }
+
+  .autocomplete-input__suggestions-menu {
+    background: $black-russian;
+    border-color: $autocomplete-border-color-dark;
+  }
+
+  .autocomplete-input__suggestion {
+    color: $spun-pearl;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid transparentize($spun-pearl, 0.6);
+    }
+
+    em {
+      color: $ghost-white;
+    }
+  }
+
+  .autocomplete-input__suggestion--highlight {
+    background-color: lighten($black-russian, 5%);
+  }
+}

client/components/AutocompleteInputBox/AutocompleteInputBox.scss

@@ -32,3 +32,9 @@
     height: 1px;
   }
 }
+
+.dark-theme {
+  .autocomplete-input-box {
+    border-color: $autocomplete-border-color-dark;
+  }
+}

client/components/ProgressHex/ProgressHex.scss

@@ -1,3 +1,5 @@
+@import '../../../stylesheets/colors';
+
 .progress-hex {
   width: 8rem;
   height: 8rem;
@@ -14,3 +16,11 @@
 .progress-hex__trail {
   stroke-width: 1px;
 }
+
+.dark-theme {
+  .progress-hex {
+    circle {
+      fill: $ghost-white;
+    }
+  }
+}

client/components/QuickStatsBar/QuickStatsBar.scss

@@ -36,11 +36,6 @@
     margin: auto;
     left: 0;
   }
-
-  &:first-of-type,
-  &:last-of-type {
-    //padding-left: $global-spacing;
-  }
 }
 
 .quick-stats-bar__stat--optional {
@@ -106,3 +101,26 @@
     }
   }
 }
+
+.dark-theme {
+  .quick-stats-bar {
+    background: lighten($black-russian, 10%);
+    color: $spun-pearl;
+  }
+
+  .quick-stats-bar__stat {
+    &:not(:first-of-type)::before {
+      background: darken($spun-pearl, 30%);
+    }
+  }
+
+  .quick-stats-bar__link {
+    &:hover {
+      .quick-stats-bar__logo-icon--github {
+        path {
+          fill: $ghost-white;
+        }
+      }
+    }
+  }
+}

client/components/ResultLayout/ResultLayout.js

@@ -3,6 +3,7 @@ import cx from 'classnames'
 import Link from 'next/link'
 
 import Layout from 'client/components/Layout'
+import ThemeToggle from 'client/components/ThemeToggle'
 
 import GithubLogo from '../../assets/github-logo.svg'
 import './ResultLayout.scss'
@@ -58,6 +59,7 @@ export default class ResultLayout extends Component {
               >
                 <GithubLogo />
               </a>
+              <ThemeToggle />
             </section>
           </header>
           <div className="page-content">{children}</div>

client/components/ResultLayout/ResultLayout.scss

@@ -58,7 +58,7 @@
   flex-direction: column;
   min-height: 100vh;
   min-height: calc(100vh - 6px);
-  flex-gorw: 1;
+  flex-grow: 1;
 }
 
 .page-content {
@@ -105,3 +105,23 @@
     overflow: scroll;
   }
 }
+
+.dark-theme {
+  .github-logo {
+    &:hover {
+      path {
+        fill: $ghost-white;
+      }
+    }
+  }
+
+  .logo-small {
+    color: $ghost-white;
+  }
+
+  .page-header__quicklinks {
+    a {
+      color: $spun-pearl;
+    }
+  }
+}

client/components/Separator.js → client/components/Separator/Separator.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import './Separator.scss'
 
 export default function Separator({ text = 'or' }) {
   const commonStyles = {
@@ -24,7 +25,7 @@ export default function Separator({ text = 'or' }) {
       >
         <div style={commonStyles}>
           <svg width="49" height="39" xmlns="http://www.w3.org/2000/svg">
-            <g fill="#211915" fillRule="evenodd">
+            <g className="separator-flourish" fillRule="evenodd">
               <path d="M28.4 21c5.2-2.9 12.2-2.3 18.1-1-1.9.8-3.7 1.8-5.8 2.1a24.8 24.8 0 0 1-12.3-1zm-7.2 14.7c3 4.3 11.2 3.8 11.7-2.1.4-4.7-5.8-8-8.5-3.6-.7 1.3-.9 3 .3 4 1.5 1.3 3.5.5 4.1-1.2.3-.7-.8-.7-1.1-.4-1.1 1-2-.1-2-1 0-1.6 2-2 3.1-1.4 3 1.5 2.8 5.8-.4 6.7-2.6.7-5-1-6-3.3-1.2-2.3-.6-4.9.6-7 1-1.7 2.1-3 3.4-4l2.3.7c3.6 1 7.5 1.3 11.2.8 2.8-.4 6.4-1.3 8.4-3.5l.2-.3c.2-.2.3-.5 0-.6-6.8-3-15.3-3.2-21.7 1a15 15 0 0 1-6.3-4.8C17.5 12 17 4.4 22.7 2.6c2.4-.8 5.3.3 5.7 3 .3 2-1.1 4-3.3 4.2-.8 0-1.9-.3-2.2-1a.9.9 0 0 1 1.4-1.1c.5.4 1.3-.3 1-.8-1.4-1.8-3.4-1-3.9 1-.5 2.6 2 3.7 4 3.3 5.1-1 6.6-8.4 1.4-10.2-5.4-1.8-10 3.7-10.3 8.6-.4 5.7 3.7 9.9 8.5 12.2-4 3.4-7.1 9.1-3.8 14z" />
               <path d="M5.7 21.7zm12.5 1.8c-1.7 3-3.7 5.4-7 6.6 1-3.3 3.6-5.7 7-6.6zm-.9-3.6a17.7 17.7 0 0 1-7.3-5c2.7 1 5.3 3 7.3 5zM.6 22.3c2.4 1 5 1.2 7.6 1.3h6a12.2 12.2 0 0 0-5.1 7.8c-.1.6.3.8.9.7 4.5-1 9.9-5 10.3-10v-.2c0-.1.1-.3 0-.4a20.5 20.5 0 0 0-10.9-8.6c-.3-.1-.8.1-1 .4-1.3 2 1 3.7 2.4 4.9 1.1 1 2.3 1.8 3.6 2.4-4.4-.2-8.8-1.1-13.1.1-.5.1-1.5 1.2-.7 1.6z" />
             </g>
@@ -34,37 +35,21 @@ export default function Separator({ text = 'or' }) {
           <svg width="249" height="3" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M1.5 2.3c31.4.7 62.9.2 94.3.3h144.8c1.3 0 .5-1.7-.5-1.7h-.3c-1.3 0-.4 1.7.5 1.7h8c1.3-.1.3-2-.8-1.6h.1c-1.2 0-.4 1.5.5 1.5.1 0 .2 0 0 0 1.2.4 1-1.5-.2-1.6h-8c-1.4 0-.5 1.7.4 1.7h.3c1.3 0 .5-1.7-.5-1.7H55.4c-18 0-36.2-.1-54.2.3-.9 0-.3 1.1.3 1.1"
-              fill="#211915"
+              className="separator-line"
               fillRule="evenodd"
             />
           </svg>
         </div>
         <div style={commonStyles}>
           <svg width="49" height="39" xmlns="http://www.w3.org/2000/svg">
-            <g fill="#211915" fillRule="evenodd">
+            <g className="separator-flourish" fillRule="evenodd">
               <path d="M16 22.2c-2.5.3-5 .3-7.4 0-2.1-.4-4-1.4-5.8-2.2 6-1.3 12.9-1.9 18.1 1-1.6.6-3.3 1-5 1.2zm8.2-.4c4.9-2.3 9-6.5 8.6-12.2C32.5 4.7 28-.8 22.5 1c-5.2 1.8-3.7 9.3 1.3 10.2 2.1.4 4.6-.7 4-3.2-.4-2.1-2.4-2.9-3.8-1-.3.4.5 1 1 .7a.9.9 0 0 1 1.4 1c-.3.8-1.4 1.2-2.2 1.1-2.2-.1-3.6-2.2-3.3-4.2.4-2.7 3.3-3.8 5.7-3 5.7 1.8 5.1 9.3 2.2 13.1a15 15 0 0 1-6.3 4.8c-6.4-4.2-15-4-21.7-1-.3 0-.2.4 0 .6l.2.3c2 2.3 5.6 3.1 8.4 3.5A27.8 27.8 0 0 0 23 22.4c1.3 1 2.4 2.3 3.4 4 1.2 2.1 1.7 4.7.6 7-1 2.2-3.4 4-6 3.3-3.2-.9-3.4-5.2-.5-6.7 1.3-.6 3.1-.2 3.1 1.4 0 .9-.8 2-1.9 1-.4-.3-1.4-.3-1.1.4.6 1.7 2.6 2.5 4 1.2 1.3-1 1.1-2.7.4-4-2.7-4.4-9-1-8.5 3.6.5 6 8.7 6.4 11.7 2.1 3.3-4.8.1-10.5-3.9-14z" />
               <path d="M39.6 21.9zM38.1 30a12.7 12.7 0 0 1-7-6.6c3.4.9 6 3.3 7 6.6zm1.2-15.2c-1 1.1-3.4 3-3.7 3.1-1.1.8-2.4 1.4-3.7 2 2.1-2.2 4.7-4.1 7.4-5.1zm8.7 5.8c-4.4-1.2-8.7-.3-13.1 0a23 23 0 0 0 3.6-2.5c1.4-1.2 3.7-3 2.4-4.9-.2-.3-.7-.5-1-.4-4.3 1-8.7 5-11 8.6l.1.4v.2c.4 5 5.8 9 10.3 10 .6.1 1-.1 1-.7-.7-3.3-2.6-6-5.3-7.8h6.1c2.6-.1 5.2-.2 7.5-1.3.8-.4-.1-1.5-.6-1.6z" />
             </g>
           </svg>
         </div>
       </div>
-      <span
-        style={{
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
-          margin: 'auto',
-          width: '42px',
-          height: '20px',
-          background: 'white',
-          padding: '0 15px',
-          borderRadius: '50%',
-        }}
-      >
-        {text}
-      </span>
+      <span className="separator-text">{text}</span>
     </div>
   )
 }

client/components/Separator/Separator.scss

@@ -0,0 +1,32 @@
+@import '../../../stylesheets/colors.scss';
+
+.separator-flourish,
+.separator-line {
+  fill: #211915;
+}
+
+.separator-text {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 42px;
+  height: 20px;
+  background: white;
+  padding: 0 15px;
+  border-radius: 50%;
+}
+
+.dark-theme {
+  .separator-flourish,
+  .separator-line {
+    fill: $spun-pearl;
+  }
+
+  .separator-text {
+    background: $black-russian;
+    color: $spun-pearl;
+  }
+}

client/components/Separator/index.js

@@ -0,0 +1,3 @@
+import Separator from './Separator.js'
+
+export default Separator

client/components/SimilarPackageCard/SimilarPackageCard.scss

@@ -155,3 +155,27 @@
     fill: transparentize($raven, 0.7);
   }
 }
+
+.dark-theme {
+  .similar-package-card {
+    background: lighten($black-russian, 10%);
+  }
+
+  .similar-package-card__name {
+    color: lighten($spun-pearl, 10%);
+  }
+
+  .similar-package-card__description {
+    color: darken($spun-pearl, 15%);
+  }
+
+  .similar-package-card__footer {
+    background: $black-russian;
+  }
+
+  .similar-package-card__github-icon {
+    path {
+      fill: $ghost-white;
+    }
+  }
+}

client/components/Stat/Stat.scss

@@ -30,6 +30,7 @@
   color: #212121;
   background: inherit;
   position: relative;
+  transition: none;
 
   .stat-container--compact & {
     @include font-size-lg;
@@ -118,3 +119,9 @@
     display: none;
   }
 }
+
+.dark-theme {
+  .stat-container__value {
+    color: $spun-pearl;
+  }
+}

client/components/ThemeContext/ThemeContext.js

@@ -0,0 +1,25 @@
+import React, { createContext, useState } from 'react'
+
+export const Themes = {
+  light: 'light',
+  dark: 'dark',
+}
+
+export const ThemeContext = createContext({
+  theme: Themes.light,
+  toggleTheme: () => {},
+})
+
+const ThemeContextProvider = props => {
+  const [theme, setTheme] = useState(Themes.light)
+  const toggleTheme = () => {
+    setTheme(theme === Themes.light ? Themes.dark : Themes.light)
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+export default ThemeContextProvider

client/components/ThemeContext/index.js

@@ -0,0 +1,4 @@
+import ThemeContextProvider from './ThemeContext'
+export { Themes, ThemeContext } from './ThemeContext'
+
+export default ThemeContextProvider

client/components/ThemeToggle/ThemeToggle.js

@@ -0,0 +1,28 @@
+import React, { useContext, useCallback } from 'react'
+import cx from 'classnames'
+import { Themes, ThemeContext } from 'client/components/ThemeContext'
+import SunIcon from '../../assets/sun.svg'
+import MoonIcon from '../../assets/moon.svg'
+
+import './ThemeToggle.scss'
+
+const ThemeToggle = ({ className }) => {
+  const { theme, toggleTheme } = useContext(ThemeContext)
+  const onToggleTheme = useCallback(() => {
+    if (theme === Themes.dark) {
+      document.body.classList.remove('dark-theme')
+    } else {
+      document.body.classList.add('dark-theme')
+    }
+
+    toggleTheme()
+  })
+
+  return (
+    <button className={cx('theme-toggle', className)} onClick={onToggleTheme}>
+      {theme === Themes.dark ? <SunIcon /> : <MoonIcon />}
+    </button>
+  )
+}
+
+export default ThemeToggle

client/components/ThemeToggle/ThemeToggle.scss

@@ -0,0 +1,25 @@
+@import '../../../stylesheets/variables';
+@import '../../../stylesheets/colors';
+
+.theme-toggle {
+  background: none;
+  border: none;
+  margin-left: $global-spacing * 2;
+  outline: none;
+  cursor: pointer;
+
+  .sun-icon,
+  .moon-icon {
+    height: 30px;
+    width: 30px;
+
+    @media screen and (max-width: 40em) {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .sun-icon {
+    fill: $dandelion;
+  }
+}

client/components/ThemeToggle/index.js

@@ -0,0 +1,3 @@
+import ThemeToggle from './ThemeToggle.js'
+
+export default ThemeToggle