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';

hooks/useLocale.js

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { updateApp } from 'redux/actions/app';
+import { setLocale } from 'redux/actions/app';
 import { setItem } from 'lib/web';
 import { LOCALE_CONFIG } from 'lib/constants';
 
@@ -7,10 +7,10 @@ export default function useLocale() {
   const locale = useSelector(state => state.app.locale);
   const dispatch = useDispatch();
 
-  function setLocale(value) {
+  function saveLocale(value) {
     setItem(LOCALE_CONFIG, value);
-    dispatch(updateApp({ locale: value }));
+    dispatch(setLocale(value));
   }
 
-  return [locale, setLocale];
+  return [locale, saveLocale];
 }

hooks/useTheme.js

@@ -0,0 +1,21 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { setTheme } from 'redux/actions/app';
+import { getItem, setItem } from 'lib/web';
+import { THEME_CONFIG } from 'lib/constants';
+import { useEffect } from 'react';
+
+export default function useLocale() {
+  const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || 'light');
+  const dispatch = useDispatch();
+
+  function saveTheme(value) {
+    setItem(THEME_CONFIG, value);
+    dispatch(setTheme(value));
+  }
+
+  useEffect(() => {
+    document.body.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return [theme, saveTheme];
+}

lib/constants.js

@@ -2,6 +2,38 @@ export const AUTH_COOKIE_NAME = 'umami.auth';
 export const LOCALE_CONFIG = 'umami.locale';
 export const TIMEZONE_CONFIG = 'umami.timezone';
 export const DATE_RANGE_CONFIG = 'umami.date-range';
+export const THEME_CONFIG = 'umami.theme';
+
+export const THEME_COLORS = {
+  light: {
+    primary: '#2680eb',
+    gray50: '#ffffff',
+    gray75: '#fafafa',
+    gray100: '#f5f5f5',
+    gray200: '#eaeaea',
+    gray300: '#e1e1e1',
+    gray400: '#cacaca',
+    gray500: '#b3b3b3',
+    gray600: '#8e8e8e',
+    gray700: '#6e6e6e',
+    gray800: '#4b4b4b',
+    gray900: '#2c2c2c',
+  },
+  dark: {
+    primary: '#2680eb',
+    gray50: '#252525',
+    gray75: '#2f2f2f',
+    gray100: '#323232',
+    gray200: '#3e3e3e',
+    gray300: '#4a4a4a',
+    gray400: '#5a5a5a',
+    gray500: '#6e6e6e',
+    gray600: '#909090',
+    gray700: '#b9b9b9',
+    gray800: '#e3e3e3',
+    gray900: '#ffffff',
+  },
+};
 
 export const DEFAULT_DATE_RANGE = '24hour';
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

redux/actions/app.js

@@ -1,18 +1,25 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { getItem } from 'lib/web';
-import { LOCALE_CONFIG } from 'lib/constants';
+import { LOCALE_CONFIG, THEME_CONFIG } from 'lib/constants';
 
 const app = createSlice({
   name: 'app',
-  initialState: { locale: getItem(LOCALE_CONFIG) || 'en-US' },
+  initialState: {
+    locale: getItem(LOCALE_CONFIG) || 'en-US',
+    theme: getItem(THEME_CONFIG) || 'light',
+  },
   reducers: {
-    updateApp(state, action) {
-      state = action.payload;
+    setLocale(state, action) {
+      state.locale = action.payload;
+      return state;
+    },
+    setTheme(state, action) {
+      state.theme = action.payload;
       return state;
     },
   },
 });
 
-export const { updateApp } = app.actions;
+export const { setLocale, setTheme } = app.actions;
 
 export default app.reducer;

styles/index.css

@@ -1,14 +1,17 @@
 html,
 body {
   font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: var(--font-size-normal);
   font-weight: 400;
   line-height: 1.8;
   padding: 0;
   margin: 0;
-  width: 100%;
   height: 100%;
+  overflow: auto;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  font-size: var(--font-size-normal);
   color: var(--gray900);
   background: var(--gray75);
 }
@@ -51,6 +54,8 @@ a:visited {
 input[type='text'],
 input[type='password'],
 textarea {
+  color: var(--gray900);
+  background: var(--gray50);
   padding: 4px 8px;
   font-size: var(--font-size-normal);
   line-height: 1.8;
@@ -92,6 +97,7 @@ main {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  flex: 1;
 }
 
 #__modals {

styles/variables.css

@@ -36,4 +36,33 @@
   --green500: #268e6c;
   --green600: #12805c;
   --green700: #107154;
+
+  --msgColor: #ffffff;
+}
+
+[data-theme='dark'] {
+  /*
+  --gray50: #080808;
+  --gray75: #1a1a1a;
+  --gray100: #1e1e1e;
+  --gray200: #2c2c2c;
+  --gray300: #393939;
+  --gray400: #494949;
+  --gray500: #5c5c5c;
+  --gray600: #7c7c7c;
+  --gray700: #6e6e6e;
+  --gray800: #a2a2a2;
+  --gray900: #efefef;
+  */
+  --gray50: #252525;
+  --gray75: #2f2f2f;
+  --gray100: #323232;
+  --gray200: #3e3e3e;
+  --gray300: #4a4a4a;
+  --gray400: #5a5a5a;
+  --gray500: #6e6e6e;
+  --gray600: #909090;
+  --gray700: #b9b9b9;
+  --gray800: #e3e3e3;
+  --gray900: #ffffff;
 }