Dark mode.

components/common/Button.module.css

@@ -3,6 +3,7 @@
   justify-content: center;
   align-items: center;
   font-size: var(--font-size-normal);
+  color: var(--gray900);
   background: var(--gray100);
   padding: 8px 16px;
   border-radius: 4px;
@@ -18,7 +19,7 @@
 }
 
 .button:active {
-  color: initial;
+  color: var(--gray700);
 }
 
 .large {

components/common/ButtonGroup.module.css

@@ -7,6 +7,7 @@
 
 .group .button {
   border-radius: 0;
+  color: var(--gray800);
   background: var(--gray50);
   border-left: 1px solid var(--gray500);
   padding: 4px 8px;
@@ -24,6 +25,7 @@
   margin: 0;
 }
 
-.selected {
+.group .button.selected {
+  color: var(--gray900);
   font-weight: 600;
 }

components/common/Dropdown.module.css

@@ -20,5 +20,5 @@
 }
 
 .icon {
-  padding-left: 10px;
+  padding-left: 20px;
 }

components/common/Link.module.css

@@ -2,7 +2,7 @@ a.link,
 a.link:active,
 a.link:visited {
   position: relative;
-  color: #2c2c2c;
+  color: var(--gray900);
   text-decoration: none;
 }
 
@@ -12,7 +12,7 @@ a.link:before {
   bottom: -2px;
   width: 0;
   height: 2px;
-  background: #2680eb;
+  background: var(--primary400);
   opacity: 0.5;
   transition: width 100ms;
 }

components/common/Menu.module.css

@@ -8,14 +8,14 @@
 .option {
   font-size: var(--font-size-small);
   font-weight: normal;
-  background: #fff;
+  background: var(--gray50);
   padding: 4px 16px;
   cursor: pointer;
   white-space: nowrap;
 }
 
 .option:hover {
-  background: #f5f5f5;
+  background: var(--gray100);
 }
 
 .float {

components/common/Modal.module.css

@@ -16,8 +16,8 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  background: var(--gray900);
-  opacity: 0.1;
+  background: #000;
+  opacity: 0.5;
 }
 
 .content {

components/common/NavMenu.module.css

@@ -1,4 +1,5 @@
 .menu {
+  color: var(--gray800);
   border: 1px solid var(--gray500);
   border-radius: 4px;
   overflow: hidden;
@@ -16,5 +17,6 @@
 }
 
 .selected {
+  color: var(--gray900);
   font-weight: 600;
 }

components/common/Toast.module.css

@@ -9,7 +9,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 8px 16px;
-  color: var(--gray50);
+  color: var(--msgColor);
   background: var(--green400);
   margin: auto;
   z-index: 2;

components/common/WorldMap.js

@@ -1,44 +1,57 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import ReactTooltip from 'react-tooltip';
+import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import tinycolor from 'tinycolor2';
-import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
 import styles from './WorldMap.module.css';
 
 const geoUrl = '/world-110m.json';
 
-export default function WorldMap({
-  data,
-  className,
-  baseColor = '#e9f3fd',
-  fillColor = '#f5f5f5',
-  strokeColor = '#2680eb',
-  hoverColor = '#2680eb',
-}) {
+export default function WorldMap({ data, className }) {
   const [tooltip, setTooltip] = useState();
+  const [theme] = useTheme();
+  const colors = useMemo(
+    () => ({
+      baseColor: THEME_COLORS[theme].primary,
+      fillColor: THEME_COLORS[theme].gray100,
+      strokeColor: THEME_COLORS[theme].primary,
+      hoverColor: THEME_COLORS[theme].primary,
+    }),
+    [theme],
+  );
 
   function getFillColor(code) {
-    if (code === 'AQ') return '#ffffff';
+    if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
-    return country ? tinycolor(baseColor).darken(country.z) : fillColor;
+
+    if (!country) {
+      return colors.fillColor;
+    }
+
+    return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
+      40 * (1.0 - country.z / 100),
+    );
   }
 
-  function getStrokeColor(code) {
-    return code === 'AQ' ? '#ffffff' : strokeColor;
-  }
-
-  function getHoverColor(code) {
-    return code === 'AQ' ? '#ffffff' : hoverColor;
+  function getOpacity(code) {
+    return code === 'AQ' ? 0 : 1;
   }
 
   function handleHover({ ISO_A2: code, NAME: name }) {
+    if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
     setTooltip(`${name}: ${country?.y || 0} visitors`);
   }
 
   return (
-    <div className={classNames(styles.container, className)}>
-      <ComposableMap data-tip="" projection="geoMercator">
+    <div
+      className={classNames(styles.container, className)}
+      data-tip=""
+      data-for="world-map-tooltip"
+    >
+      <ComposableMap projection="geoMercator">
         <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
           <Geographies geography={geoUrl}>
             {({ geographies }) => {
@@ -50,10 +63,11 @@ export default function WorldMap({
                     key={geo.rsmKey}
                     geography={geo}
                     fill={getFillColor(code)}
-                    stroke={getStrokeColor(code)}
+                    stroke={colors.strokeColor}
+                    opacity={getOpacity(code)}
                     style={{
                       default: { outline: 'none' },
-                      hover: { outline: 'none', fill: getHoverColor(code) },
+                      hover: { outline: 'none', fill: colors.hoverColor },
                       pressed: { outline: 'none' },
                     }}
                     onMouseOver={() => handleHover(geo.properties)}
@@ -65,7 +79,7 @@ export default function WorldMap({
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      <ReactTooltip>{tooltip}</ReactTooltip>
+      <ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
     </div>
   );
 }

components/common/WorldMap.module.css

@@ -1,5 +1,4 @@
 .container {
   overflow: hidden;
   position: relative;
-  background: #fff;
 }

components/forms/DatePickerForm.js

@@ -6,7 +6,7 @@ import Button from 'components/common/Button';
 import { FormButtons } from 'components/layout/FormLayout';
 import { getDateRangeValues } from 'lib/date';
 import styles from './DatePickerForm.module.css';
-import ButtonGroup from '../common/ButtonGroup';
+import ButtonGroup from 'components/common/ButtonGroup';
 
 const FILTER_DAY = 0;
 const FILTER_RANGE = 1;

components/layout/FormLayout.module.css

@@ -39,7 +39,7 @@
 }
 
 .msg {
-  color: var(--gray50);
+  color: var(--msgColor);
   background: var(--red400);
   font-size: var(--font-size-small);
   padding: 4px 8px;

components/layout/Header.js

@@ -3,11 +3,12 @@ import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
-import UserButton from '../common/UserButton';
-import Icon from '../common/Icon';
+import UserButton from 'components/common/UserButton';
+import Icon from 'components/common/Icon';
+import LanguageButton from 'components/settings/LanguageButton';
+import ThemeButton from 'components/settings/ThemeButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
-import LanguageButton from '../common/LanguageButton';
 
 export default function Header() {
   const user = useSelector(state => state.user);
@@ -32,10 +33,14 @@ export default function Header() {
                   <FormattedMessage id="label.settings" defaultMessage="Settings" />
                 </Link>
                 <LanguageButton menuAlign="right" />
+                <ThemeButton />
                 <UserButton />
               </>
             ) : (
-              <LanguageButton menuAlign="right" />
+              <>
+                <LanguageButton menuAlign="right" />
+                <ThemeButton />
+              </>
             )}
           </div>
         </div>

components/layout/Layout.js

@@ -16,8 +16,8 @@ export default function Layout({ title, children, header = true, footer = true }
       </Head>
       {header && <Header />}
       <main className="container">{children}</main>
-      <div id="__modals" />
       {footer && <Footer />}
+      <div id="__modals" />
     </>
   );
 }

components/layout/Layout.module.css

@@ -0,0 +1,6 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}

components/metrics/BarChart.js

@@ -6,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import styles from './BarChart.module.css';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
 
 export default function BarChart({
   chartId,
@@ -23,6 +25,12 @@ export default function BarChart({
   const chart = useRef();
   const [tooltip, setTooltip] = useState({});
   const [locale] = useLocale();
+  const [theme] = useTheme();
+  const colors = {
+    text: THEME_COLORS[theme].gray700,
+    line: THEME_COLORS[theme].gray200,
+    zeroLine: THEME_COLORS[theme].gray500,
+  };
 
   function renderXLabel(label, index, values) {
     const d = new Date(values[index].value);
@@ -97,6 +105,11 @@ export default function BarChart({
       responsive: true,
       responsiveAnimationDuration: 0,
       maintainAspectRatio: false,
+      legend: {
+        labels: {
+          fontColor: colors.text,
+        },
+      },
       scales: {
         xAxes: [
           {
@@ -110,6 +123,7 @@ export default function BarChart({
               callback: renderXLabel,
               minRotation: 0,
               maxRotation: 0,
+              fontColor: colors.text,
             },
             gridLines: {
               display: false,
@@ -123,6 +137,11 @@ export default function BarChart({
             ticks: {
               callback: renderYLabel,
               beginAtZero: true,
+              fontColor: colors.text,
+            },
+            gridLines: {
+              color: colors.line,
+              zeroLineColor: colors.zeroLine,
             },
             stacked,
           },
@@ -144,8 +163,13 @@ export default function BarChart({
   function updateChart() {
     const { options } = chart.current;
 
+    options.legend.labels.fontColor = colors.text;
     options.scales.xAxes[0].time.unit = unit;
     options.scales.xAxes[0].ticks.callback = renderXLabel;
+    options.scales.xAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].gridLines.color = colors.line;
+    options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
     options.animation.duration = animationDuration;
     options.tooltips.custom = renderTooltip;
 
@@ -161,7 +185,7 @@ export default function BarChart({
         updateChart();
       }
     }
-  }, [datasets, unit, animationDuration, locale]);
+  }, [datasets, unit, animationDuration, locale, theme]);
 
   return (
     <>

components/metrics/BarChart.module.css

@@ -3,6 +3,7 @@
 }
 
 .tooltip {
+  color: var(--msgColor);
   pointer-events: none;
   z-index: 1;
 }
@@ -12,7 +13,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--gray50);
   text-align: center;
 }
 

components/metrics/MetricsTable.module.css

@@ -74,7 +74,7 @@
   position: relative;
   width: 50px;
   color: #6e6e6e;
-  border-left: 1px solid var(--gray600);
+  border-left: 1px solid var(--gray500);
   padding-left: 10px;
   z-index: 1;
 }

components/settings/LanguageButton.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import Head from 'next/head';
-import Menu from './Menu';
-import Button from './Button';
+import Menu from 'components/common/Menu';
+import Button from 'components/common/Button';
 import { menuOptions } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import useDocumentClick from 'hooks/useDocumentClick';

components/settings/ThemeButton.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Button from 'components/common/Button';
+import useTheme from 'hooks/useTheme';
+
+export default function ThemeButton() {
+  const [theme, setTheme] = useTheme();
+
+  function handleClick() {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  }
+
+  return <Button onClick={handleClick}>{theme}</Button>;
+}

components/settings/TimezoneSetting.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { listTimeZones } from 'timezone-support';
-import DropDown from '../common/DropDown';
-import Button from '../common/Button';
+import DropDown from 'components/common/DropDown';
+import Button from 'components/common/Button';
 import useTimezone from 'hooks/useTimezone';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';