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