Dark / Light Mode

pages/map.js

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from 'react';
 import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
+import { useColorMode } from 'theme-ui'
 import { filter, orderBy, slice, last, remove } from 'lodash'
 import { timeSince, humanizedDateRange } from '../lib/util'
 import { getGroupingData } from '../lib/data'
@@ -10,14 +11,19 @@ mapboxgl.accessToken = 'pk.eyJ1IjoiaGFja2NsdWIyIiwiYSI6ImNsbDNzY2syazA2ZnQzcm1vM
 export default function App({events}) {
  const mapContainer = useRef(null);
  const map = useRef(null);
+ const [colorMode, setColorMode] = useColorMode()
  const [lng, setLng] = useState(-51);
  const [lat, setLat] = useState(37);
  const [zoom, setZoom] = useState(2.08);
+ useEffect(() => {
+ map.current?.setStyle(`mapbox:https://styles/mapbox/${colorMode || "light"}-v11`)
+ }, [colorMode])
  useEffect(() => {
  if (map.current) return; // initialize map only once
+ console.log(colorMode)
  map.current = new mapboxgl.Map({
  container: mapContainer.current,
- style: 'mapbox:https://styles/mapbox/dark-v11',
+ style: `mapbox:https://styles/mapbox/${colorMode || "light"}-v11`,
  center: [lng, lat],
  projection: 'mercator',
  zoom: zoom
@@ -57,7 +63,7 @@ export default function App({events}) {
  .marker {
  background: #121217;
  opacity: 0.95!important;
- border: 1px solid white;
+ border: 1px solid var(--theme-ui-colors-border);
  box-sizing: border-box;
  height: 24px;
  width: 24px;