set up theme and dark mode toggle

cleanup
RENCI · May 6, 2024 · 9220b41 · 9220b41
1 parent 55a7699
commit 9220b41
Show file tree

Hide file tree

Showing 9 changed files with 260 additions and 21 deletions.
diff --git a/src/components/buttons/action-button-menu.js b/src/components/buttons/action-button-menu.js
@@ -12,7 +12,7 @@ export const ActionButtonMenu = ({ children }) => {
       className="action-button-menu"
       sx={{
         p: 1,
-        backgroundColor: 'neutral.softActiveBg',
+        backgroundColor: 'background.surface',
       }}
     >
       { children }

diff --git a/src/components/map/map.js b/src/components/map/map.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import { MapContainer, TileLayer } from 'react-leaflet';
 import { DefaultLayers } from './default-layers';
-import { useLayers } from '@context';
+import {
+  useLayers,
+  useSettings,
+} from '@context';
 import 'leaflet/dist/leaflet.css';
 
 const DEFAULT_CENTER = [30.0, -73.0];
 
 export const Map = () => {
+    const { darkMode } = useSettings();
     const {
       setMap
     } = useLayers();
@@ -19,10 +23,10 @@ export const Map = () => {
         scrollWheelZoom={true}
         whenCreated={setMap}
         style={{ height: '100vh', width:'100wh' }}>
-          <TileLayer
-              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          />
+          { darkMode.enabled
+            ? <TileLayer url="https://api.mapbox.com/styles/v1/mvvatson/clvu3inqs05v901qlabcfhxsr/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibXZ2YXRzb24iLCJhIjoiY2xwOHMwYWgwMjQwbzJxcXVzZGFqcTd6cCJ9.dvDUkcfq19Qg7Yl6_DDEAg" />
+            : <TileLayer url="https://api.mapbox.com/styles/v1/mvvatson/clvu2u7iu061901ph15n55v2e/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibXZ2YXRzb24iLCJhIjoiY2xwOHMwYWgwMjQwbzJxcXVzZGFqcTd6cCJ9.dvDUkcfq19Qg7Yl6_DDEAg" />
+          }
           <DefaultLayers/>
       </MapContainer>
     );

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
@@ -3,12 +3,14 @@ import { Fragment, useCallback, useState } from 'react';
 import {
   List,
   Sheet,
+  useTheme,
 } from '@mui/joy';
 import { Tray } from './tray';
 import { MenuItem } from './menu-item';
 import SidebarTrays from '../trays';
 
 export const Sidebar = () => {
+  const theme = useTheme();
   const [activeIndex, setActiveIndex] = useState(0);
 
   const handleClickMenuItem = useCallback(newIndex => {
@@ -34,13 +36,15 @@ export const Sidebar = () => {
           maxWidth: '68px',
           overflow: 'hidden',
           p: 0,
-          backgroundColor: activeIndex === -1 ? '#f0f4f899' : '#f0f4f8',
+          backgroundColor: activeIndex === -1
+            ? `rgba(${ theme.palette.mainChannel } / 0.2)`
+            : `rgba(${ theme.palette.mainChannel } / 1.0)`,
           // a drop shadow looks nice. we'll remove it if a tray is open,
           // as they should appear on the same plane.
           filter: activeIndex === -1 ? 'drop-shadow(0 0 8px rgba(0, 0, 0, 0.2))' : 'drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2))',
           // similarly, here.
           '&:hover': {
-            backgroundColor: '#f0f4f8',
+            backgroundColor: `rgba(${ theme.palette.mainChannel } / 1.0)`,
             transition: 'max-width 250ms, filter 250ms, background-color 150ms',
           },
           // we'll add a delay to this exit animation to give ample time

diff --git a/src/components/trays/layers/layer-card.js b/src/components/trays/layers/layer-card.js
@@ -48,7 +48,12 @@ export const LayerCard = ({ index, layer }) => {
         sx={{
           p: 1,
           borderLeft: '6px solid',
-          borderLeftColor: isVisible ? 'primary.400' : 'primary.100',
+          // borderLeftColor: isVisible
+          //   ? `rgba(${ theme.palette.primary.mainChannel }) / 1.0`
+          //   : `rgba(${ theme.palette.primary.mainChannel }) / 0.2`,
+          borderLeftColor: isVisible
+            ? `primary.plainColor`
+            : `primary.plainDisabledColor`,
           '.action-button': { filter: 'opacity(0.1)', transition: 'filter 250ms' },
           '&:hover .action-button': { filter: 'opacity(0.5)' },
           '& .action-button:hover': { filter: 'opacity(1.0)' },
@@ -119,7 +124,8 @@ export const LayerCard = ({ index, layer }) => {
           />
         </ActionButton>
       </Stack>
-      <AccordionDetails variant="solid" sx={{
+      <AccordionDetails sx={{
+        backgroundColor: 'background.surface',
         position: 'relative',
         // remove default margin that doesn't work well in our situation.
         marginInline: 0,
@@ -131,9 +137,10 @@ export const LayerCard = ({ index, layer }) => {
         <LayerActions layerId={ layer.id } />
         <Box component="pre" sx={{
           fontSize: '75%',
-          color: '#def',
+          color: 'text.primary',
           backgroundColor: 'transparent',
           overflowX: 'auto',
+          p: 1,
         }}>
           { JSON.stringify(layer.properties, null, 2) }
         </Box>

diff --git a/src/components/trays/settings/dark-mode.js b/src/components/trays/settings/dark-mode.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { IconButton, Stack, Typography } from '@mui/joy';
+import {
+  DarkMode as OnIcon,
+  LightMode as OffIcon,
+} from '@mui/icons-material';
+import { useSettings } from '@context';
+
+export const DarkModeToggle = () => {
+  const { darkMode } = useSettings();
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+      gap={ 2 }
+    >
+      <Toggler />
+      <div>
+        <Typography level="title-md">
+          Dark Mode
+        </Typography>
+        <Typography level="body-md" variant="soft" color="primary">
+          { darkMode.enabled ? 'Enabled' : 'Disabled' }
+        </Typography>
+      </div>
+    </Stack>
+  );
+};
+
+export const Toggler = () => {
+  const { darkMode } = useSettings();
+
+  return (
+    <IconButton
+      id="boolean-value-toggler"
+      size="lg"
+      onClick={ darkMode.toggle }
+      variant="outlined"
+    >
+      {
+        darkMode.enabled
+          ? <OnIcon color="primary" />
+          : <OffIcon color="neutral" />
+      }
+    </IconButton>
+  );
+};
diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js
@@ -2,14 +2,14 @@ import React from 'react';
 import { Stack } from '@mui/joy';
 import { Tune as SettingsIcon } from '@mui/icons-material';
 
-import { SampleToggle } from './sample';
+import { DarkModeToggle } from './dark-mode';
 
 export const icon = <SettingsIcon />;
 
 export const title = 'Settings';
 
 export const trayContents = () => (
   <Stack gap={ 2 } p={ 2 }>
-    <SampleToggle />
+    <DarkModeToggle />
   </Stack>
 );
diff --git a/src/context/settings.js b/src/context/settings.js
@@ -1,5 +1,11 @@
-import React, { createContext, useContext } from "react";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
 import PropTypes from "prop-types";
+import { useColorScheme } from '@mui/joy/styles';
 import {
   // useToggleLocalStorage,
   useToggleState,
@@ -9,13 +15,24 @@ export const SettingsContext = createContext({});
 export const useSettings = () => useContext(SettingsContext);
 
 export const SettingsProvider = ({ children }) => {
+  const { mode, setMode } = useColorScheme();
   const booleanValue = useToggleState();
   // to persist the value in the device's local
   // storage, use `useToggleLocalStorage` instead:
   //   const booleanValue = useToggleLocalStorage('boolean-value')
+  const darkMode = useMemo(() => mode === 'dark', [mode]);
+  const toggleDarkMode = useCallback(() => {
+    setMode(darkMode ? 'light' : 'dark');
+  }, [mode]);
 
   return (
-    <SettingsContext.Provider value={{ booleanValue }}>
+    <SettingsContext.Provider value={{
+      booleanValue,
+      darkMode: {
+        enabled: darkMode,
+        toggle: toggleDarkMode,
+      },
+    }}>
       { children }
     </SettingsContext.Provider>
   );

diff --git a/src/index.js b/src/index.js
@@ -1,18 +1,23 @@
 import React from 'react';
-import { App } from './app';
+import { CssVarsProvider } from '@mui/joy/styles';
 import { createRoot } from 'react-dom/client';
+import { App } from './app';
 import { LayersProvider, SettingsProvider } from '@context';
 import './index.css';
+import '@fontsource/inter';
+import theme from './theme';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
 
 const ProvisionedApp = () => (
-  <SettingsProvider>
-    <LayersProvider>
-      <App />
-    </LayersProvider>
-  </SettingsProvider>
+  <CssVarsProvider theme={ theme } defaultMode="system">
+    <SettingsProvider>
+      <LayersProvider>
+        <App />
+      </LayersProvider>
+    </SettingsProvider>
+  </CssVarsProvider>
 );
 
 root.render(<ProvisionedApp />);