preparing for color themes

2025-02-11 19:19:16 +00:00 · 2024-02-13 14:17:29 -08:00 · 2024-02-13 14:17:29 -08:00 · 17f6eea3e8
commit 17f6eea3e8
parent 253de78c82
20 changed files with 453 additions and 343 deletions
--- a/net/web/package-lock.json
+++ b/net/web/package-lock.json
@ -6103,9 +6103,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001507",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz",
-      "integrity": "sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==",
+      "version": "1.0.30001587",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
+      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
      "funding": [
        {
          "type": "opencollective",
@ -25227,9 +25227,9 @@
      }
    },
    "caniuse-lite": {
-      "version": "1.0.30001507",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz",
-      "integrity": "sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A=="
+      "version": "1.0.30001587",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
+      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA=="
    },
    "case-sensitive-paths-webpack-plugin": {
      "version": "2.4.0",
--- a/net/web/src/App.js
+++ b/net/web/src/App.js
@ -10,7 +10,7 @@ import { CardContextProvider } from 'context/CardContext';
 import { ChannelContextProvider } from 'context/ChannelContext';
 import { StoreContextProvider } from 'context/StoreContext';
 import { UploadContextProvider } from 'context/UploadContext';
-import { ViewportContextProvider } from 'context/ViewportContext';
+import { SettingsContextProvider } from 'context/SettingsContext';
 import { ConversationContextProvider } from 'context/ConversationContext';
 import { RingContextProvider } from 'context/RingContext';

@ -32,7 +32,7 @@ function App() {
            <StoreContextProvider>
              <AccountContextProvider>
                <RingContextProvider>
-                  <ViewportContextProvider>
+                  <SettingsContextProvider>
                    <AppContextProvider>
                      <AppWrapper>
                        <ConfigProvider theme={{ token: {
@ -58,7 +58,7 @@ function App() {
                        </ConfigProvider>
                      </AppWrapper>
                    </AppContextProvider>
-                  </ViewportContextProvider>
+                  </SettingsContextProvider>
                </RingContextProvider>
              </AccountContextProvider>
            </StoreContextProvider>
--- a/net/web/src/access/useAccess.hook.js
+++ b/net/web/src/access/useAccess.hook.js
@ -1,7 +1,7 @@
 import { useContext, useState, useEffect } from 'react';
 import { useNavigate, useLocation } from "react-router-dom";
 import { AppContext } from 'context/AppContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';

 export function useAccess() {

@ -12,7 +12,7 @@ export function useAccess() {
  const navigate = useNavigate();
  const location = useLocation();
  const app = useContext(AppContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);

  const updateState = (value) => {
    setState((s) => ({ ...s, ...value }));
@ -43,9 +43,9 @@ export function useAccess() {


  useEffect(() => {
-    const { display } = viewport.state;
+    const { display } = settings.state;
    updateState({ display });
-  }, [viewport.state]);
+  }, [settings.state]);

  const actions = {};

--- a/net/web/src/context/SettingsContext.js
+++ b/net/web/src/context/SettingsContext.js
@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { useSettingsContext } from './useSettingsContext.hook';
+
+export const SettingsContext = createContext({});
+
+export function SettingsContextProvider({ children }) {
+  const { state, actions } = useSettingsContext();
+  return (
+    <SettingsContext.Provider value={{ state, actions }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
--- a/net/web/src/context/ViewportContext.js
+++ b/net/web/src/context/ViewportContext.js
@ -1,14 +0,0 @@
-import { createContext } from 'react';
-import { useViewportContext } from './useViewportContext.hook';
-
-export const ViewportContext = createContext({});
-
-export function ViewportContextProvider({ children }) {
-  const { state, actions } = useViewportContext();
-  return (
-    <ViewportContext.Provider value={{ state, actions }}>
-      {children}
-    </ViewportContext.Provider>
-  );
-}
-
--- a/net/web/src/context/useSettingsContext.hook.js
+++ b/net/web/src/context/useSettingsContext.hook.js
@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react';
+
+const LightTheme = {
+  background: '#8fbea7',
+  primary: '#448866',
+  formBackground: '#f2f2f2',
+  darkBackground: '#222222',
+  formFocus: '#f8f8f8',
+  formHover: '#efefef',
+  grey: '#888888',
+  white: '#ffffff',
+  black: '#000000',
+  divider: '#dddddd',
+  mask: '#dddddd',
+  encircle: '#cccccc',
+  alert: '#ff8888',
+  warn: '#dd4444',
+  enabled: '#444444',
+  disabled: '#aaaaaa',
+  text: '#444444',
+  link: '#0077CC',
+  itemDivider: '#eeeeee',
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
+  error: '#ff4444',
+  profileForm: '#e8e8e8',
+  profileDivider: '#aaaaaa',
+  statsForm: '#ededed',
+  statsDivider: '#afafaf',
+  channel: '#f2f2f2',
+  card: '#eeeeee',
+  selectHover: '#fafafa',
+};
+
+const DarkTheme = {
+  background: '#8fbea7',
+  primary: '#448866',
+  formBackground: '#f2f2f2',
+  darkBackground: '#222222',
+  formFocus: '#f8f8f8',
+  formHover: '#efefef',
+  grey: '#888888',
+  white: '#ffffff',
+  black: '#000000',
+  divider: '#dddddd',
+  mask: '#dddddd',
+  encircle: '#cccccc',
+  alert: '#ff8888',
+  warn: '#dd4444',
+  enabled: '#444444',
+  disabled: '#aaaaaa',
+  text: '#444444',
+  link: '#0077CC',
+  itemDivider: '#eeeeee',
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
+  error: '#ff4444',
+  profileForm: '#e8e8e8',
+  profileDivider: '#aaaaaa',
+  statsForm: '#ededed',
+  statsDivider: '#afafaf',
+  channel: '#f2f2f2',
+  card: '#eeeeee',
+  selectHover: '#fafafa',
+};
+
+
+export function useSettingsContext() {
+
+  const [state, setState] = useState({ 
+    display: null,
+    width: null,
+    height: null,
+    darkTheme: DarkTheme,
+    lightTheme: LightTheme,
+  });
+
+  const SMALL_MEDIUM = 650;
+  const MEDIUM_LARGE = 1000;
+  const LARGE_XLARGE = 1600;
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  };
+
+  const handleResize = () => {
+    if (window.innerWidth < SMALL_MEDIUM) {
+      updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight });
+    }
+    else if (window.innerWidth < MEDIUM_LARGE) {
+      updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight });
+    }
+    else if (window.innerWidth < LARGE_XLARGE) {
+      updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight });
+    }
+    else {
+      updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight });
+    }
+  };
+
+  useEffect(() => {
+    for (let i = 0; i < 10; i++) {
+      setTimeout(handleResize, 100 * i); //cludge for my mobile browser
+    }
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+
+    const scheme = localStorage.getItem('color_scheme');
+    if (scheme === 'dark') {
+      updateState({ darkTheme: DarkTheme, lightTheme: DarkTheme });
+    }
+    else if (scheme === 'light') {
+      updateState({ darkTheme: LightTheme, lightTheme: LightTheme });
+    }
+    else {
+      updateState({ darkTheme: DarkTheme, lightTheme: LightTheme });
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  const actions = {
+    setDarkTheme() {
+      localStorage.setItem('color_scheme', 'dark');
+      updateState({ darkTheme: DarkTheme, lightTheme: DarkTheme });
+    },
+    setLightTheme() {
+      localStorage.setItem('color_scheme', 'light');
+      updateState({ darkTheme: LightTheme, lightTheme: LightTheme });
+    },
+    steDefaultTheme() {
+      localStorage.clearItem('color_scheme');
+      updateState({ darkTheme: DarkTheme, lightTheme: LightTheme });
+    }
+  }
+
+  return { state, actions }
+}
+
+
--- a/net/web/src/context/useViewportContext.hook.js
+++ b/net/web/src/context/useViewportContext.hook.js
@ -1,51 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useViewportContext() {
-
-  const [state, setState] = useState({ 
-    display: null,
-    width: null,
-    height: null,
-  });
-
-  const SMALL_MEDIUM = 650;
-  const MEDIUM_LARGE = 1000;
-  const LARGE_XLARGE = 1600;
-
-  const updateState = (value) => {
-    setState((s) => ({ ...s, ...value }));
-  };
-
-  const handleResize = () => {
-    if (window.innerWidth < SMALL_MEDIUM) {
-      updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight });
-    }
-    else if (window.innerWidth < MEDIUM_LARGE) {
-      updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight });
-    }
-    else if (window.innerWidth < LARGE_XLARGE) {
-      updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight });
-    }
-    else {
-      updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight });
-    }
-  };
-
-  useEffect(() => {
-    for (let i = 0; i < 10; i++) {
-      setTimeout(handleResize, 100 * i); //cludge for my mobile browser
-    }
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('orientationchange', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('orientationchange', handleResize);
-    }
-    // eslint-disable-next-line
-  }, []);
-
-  return { state, actions: {} }
-}
-
-
--- a/net/web/src/dashboard/accountItem/useAccountItem.hook.js
+++ b/net/web/src/dashboard/accountItem/useAccountItem.hook.js
@ -2,7 +2,7 @@ import { useContext, useState, useEffect } from 'react';
 import { getAccountImageUrl } from 'api/getAccountImageUrl';
 import { setAccountStatus } from 'api/setAccountStatus';
 import { addAccountAccess } from 'api/addAccountAccess';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { AppContext } from 'context/AppContext';

 export function useAccountItem(item, remove) {
@ -15,7 +15,7 @@ export function useAccountItem(item, remove) {
  });
 
  const app = useContext(AppContext);
-  const viewport = useContext(ViewportContext); 
+  const settings = useContext(SettingsContext); 

  const updateState = (value) => {
    setState((s) => ({ ...s, ...value }));
@ -37,8 +37,8 @@ export function useAccountItem(item, remove) {
  }, [app.state.adminToken, item]); 

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport]);
+    updateState({ display: settings.state.display });
+  }, [settings]);

  const actions = {
    setAccessLink: async () => {
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useContext } from 'react';
 import { Modal, Drawer, Spin } from 'antd';
 import { CallingWrapper, RingingWrapper, SessionWrapper } from './Session.styled';
 import { useSession } from './useSession.hook';
@ -16,10 +16,13 @@ import { BottomNav } from './bottomNav/BottomNav';
 import { Logo } from 'logo/Logo';
 import { EyeInvisibleOutlined, PhoneOutlined } from '@ant-design/icons';
 import { IoVideocamOffOutline, IoVideocamOutline, IoMicOffOutline, IoMicOutline, IoCallOutline } from "react-icons/io5";
+import { ThemeProvider } from "styled-components";
+import { SettingsContext } from 'context/SettingsContext';

 export function Session() {

  const { state, actions } = useSession();
+  const settings = useContext(SettingsContext);
  const [ringing, setRinging] = useState([]);
  const [callWidth, setCallWidth] = useState(256);
  const [callHeight, setCallHeight] = useState(256);
@ -156,231 +159,233 @@ export function Session() {
  }

  return (
-    <SessionWrapper>
-      { (state.display === 'xlarge') && (
-        <div class="desktop-layout noselect">
-          <div class="left">
-            <Identity openAccount={openAccount} openCards={openCards} cardUpdated={state.cardUpdated} />
-            <div class="bottom">
-              <Channels open={openConversation} active={{
-                  set: state.conversation,
-                  card: state.cardId,
-                  channel: state.channelId,
-                }} />
-            </div>
-            { state.loading && (
-              <div class="spinner">
-                <Spin size="large" />
+    <ThemeProvider theme={{ light: settings.state.lightTheme, dark: settings.state.darkTheme }}>
+      <SessionWrapper>
+        { (state.display === 'xlarge') && (
+          <div class="desktop-layout noselect">
+            <div class="left">
+              <Identity openAccount={openAccount} openCards={openCards} cardUpdated={state.cardUpdated} />
+              <div class="bottom">
+                <Channels open={openConversation} active={{
+                    set: state.conversation,
+                    card: state.cardId,
+                    channel: state.channelId,
+                  }} />
              </div>
-            )}
-          </div>
-          <div class="center">
-            <div class="reframe">
-              <Welcome />
-            </div>
-            { state.conversation && (
-              <div class="reframe">
-                <Conversation closeConversation={actions.closeConversation}
-                    openDetails={actions.openDetails}
-                    cardId={state.cardId} channelId={state.channelId} />
-              </div>
-            )}
-            { state.contact && (
-              <div class="reframe">
-                <Contact close={actions.closeContact} guid={state.contactGuid} listing={state.contactListing} />
-              </div>
-            )}
-            { state.profile && (
-              <div class="reframe">
-                <Profile closeProfile={actions.closeProfile} />
-              </div>
-            )}
-          </div>
-          <div class="right">
-            { (state.conversation || state.details) && (
-              <div class="reframe">
-                <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}
-                    cardId={state.cardId} channelId={state.channelId} />
-              </div>
-            )}
-            { state.cards && (
-              <div class="reframe">
-                <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
-                <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
-                    onClose={actions.closeListing} getContainer={false} height={'100%'}
-                    style={{ position: 'absolute', overflow: 'hidden' }}>
-                  <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
-                </Drawer>
-              </div>
-            )}
-            { (state.profile || state.account) && (
-              <div class="reframe">
-                <Account closeAccount={closeAccount} openProfile={actions.openProfile} />
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      { (state.display === 'large' || state.display === 'medium') && (
-        <div class="tablet-layout noselect">
-          <div class="left">
-            <Identity openAccount={actions.openProfile} openCards={actions.openCards} cardUpdated={state.cardUpdated} />
-            <div class="bottom">
-              <Channels open={actions.openConversation} active={{
-                  set: state.conversation,
-                  card: state.cardId,
-                  channel: state.channelId,
-                }} />
-            </div>
-            { state.loading && (
-              <div class="spinner">
-                <Spin size="large" />
-              </div>
-            )}
-          </div>
-          <div class="right">
-            <div class="reframe">
-              <Welcome />
-            </div>
-            { state.conversation && (
-              <div class="reframe">
-                <Conversation closeConversation={actions.closeConversation}
-                    openDetails={actions.openDetails}
-                    cardId={state.cardId} channelId={state.channelId} />
-              </div>
-            )}
-            <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
-              { state.details && (
-                <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}
-                    cardId={state.cardId} channelId={state.channelId} />
+              { state.loading && (
+                <div class="spinner">
+                  <Spin size="large" />
+                </div>
              )}
-            </Drawer>
-            <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeCards} visible={state.cards} zIndex={20} push={state.contact}>
-              { state.cards && (
-                <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
+            </div>
+            <div class="center">
+              <div class="reframe">
+                <Welcome />
+              </div>
+              { state.conversation && (
+                <div class="reframe">
+                  <Conversation closeConversation={actions.closeConversation}
+                      openDetails={actions.openDetails}
+                      cardId={state.cardId} channelId={state.channelId} />
+                </div>
              )}
-              <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
-                  onClose={actions.closeListing} getContainer={false} height={'100%'}
-                  style={{ overflow: 'hidden', position: 'absolute' }}>
-                <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
-              </Drawer>
-              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
-                { state.contact && (
+              { state.contact && (
+                <div class="reframe">
                  <Contact close={actions.closeContact} guid={state.contactGuid} listing={state.contactListing} />
+                </div>
+              )}
+              { state.profile && (
+                <div class="reframe">
+                  <Profile closeProfile={actions.closeProfile} />
+                </div>
+              )}
+            </div>
+            <div class="right">
+              { (state.conversation || state.details) && (
+                <div class="reframe">
+                  <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}
+                      cardId={state.cardId} channelId={state.channelId} />
+                </div>
+              )}
+              { state.cards && (
+                <div class="reframe">
+                  <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
+                  <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
+                      onClose={actions.closeListing} getContainer={false} height={'100%'}
+                      style={{ position: 'absolute', overflow: 'hidden' }}>
+                    <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
+                  </Drawer>
+                </div>
+              )}
+              { (state.profile || state.account) && (
+                <div class="reframe">
+                  <Account closeAccount={closeAccount} openProfile={actions.openProfile} />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        { (state.display === 'large' || state.display === 'medium') && (
+          <div class="tablet-layout noselect">
+            <div class="left">
+              <Identity openAccount={actions.openProfile} openCards={actions.openCards} cardUpdated={state.cardUpdated} />
+              <div class="bottom">
+                <Channels open={actions.openConversation} active={{
+                    set: state.conversation,
+                    card: state.cardId,
+                    channel: state.channelId,
+                  }} />
+              </div>
+              { state.loading && (
+                <div class="spinner">
+                  <Spin size="large" />
+                </div>
+              )}
+            </div>
+            <div class="right">
+              <div class="reframe">
+                <Welcome />
+              </div>
+              { state.conversation && (
+                <div class="reframe">
+                  <Conversation closeConversation={actions.closeConversation}
+                      openDetails={actions.openDetails}
+                      cardId={state.cardId} channelId={state.channelId} />
+                </div>
+              )}
+              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
+                { state.details && (
+                  <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}
+                      cardId={state.cardId} channelId={state.channelId} />
                )}
              </Drawer>
-            </Drawer>
-            <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeAccount} visible={state.profile || state.account} zIndex={40}>
-              { (state.profile || state.account) && (
-                <Profile closeProfile={closeAccount}/>
+              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeCards} visible={state.cards} zIndex={20} push={state.contact}>
+                { state.cards && (
+                  <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
+                )}
+                <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
+                    onClose={actions.closeListing} getContainer={false} height={'100%'}
+                    style={{ overflow: 'hidden', position: 'absolute' }}>
+                  <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
+                </Drawer>
+                <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
+                  { state.contact && (
+                    <Contact close={actions.closeContact} guid={state.contactGuid} listing={state.contactListing} />
+                  )}
+                </Drawer>
+              </Drawer>
+              <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeAccount} visible={state.profile || state.account} zIndex={40}>
+                { (state.profile || state.account) && (
+                  <Profile closeProfile={closeAccount}/>
+                )}
+              </Drawer>
+            </div>
+          </div>
+        )}
+        { (state.display === 'small') && (
+          <div class="mobile-layout noselect">
+            <div class="top">
+              <div class="reframe">
+                <Channels open={actions.openConversation} active={{ 
+                    set: state.conversation,
+                    card: state.cardId,
+                    channel: state.channelId,
+                  }} />
+              </div>
+              { state.conversation && (
+                <div class="reframe">
+                  <Conversation closeConversation={actions.closeConversation} openDetails={actions.openDetails}
+                      cardId={state.cardId} channelId={state.channelId} />
+                </div>
+              )}
+              { state.details && (
+                <div class="reframe">
+                  <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact} 
+                      cardId={state.cardId} channelId={state.channelId} />
+                </div>
+              )}
+              { state.cards && (
+                <div class="reframe">
+                  <Cards openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
+                </div>
+              )}
+              { state.listing && (
+                <div class="reframe">
+                  <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
+                </div>
+              )}
+              { state.contact && (
+                <div class="reframe">
+                  <Contact close={actions.closeContact} guid={state.contactGuid} listing={state.contactListing} />
+                </div>
+              )}
+              { state.loading && (
+                <div class="spinner">
+                  <Spin size="large" />
+                </div>
+              )}
+              { (state.profile || state.account) && (
+                <div class="reframe">
+                  <Profile />
+                </div>
              )}
-            </Drawer>
-          </div>
-        </div>
-      )}
-      { (state.display === 'small') && (
-        <div class="mobile-layout noselect">
-          <div class="top">
-            <div class="reframe">
-              <Channels open={actions.openConversation} active={{ 
-                  set: state.conversation,
-                  card: state.cardId,
-                  channel: state.channelId,
-                }} />
            </div>
-            { state.conversation && (
-              <div class="reframe">
-                <Conversation closeConversation={actions.closeConversation} openDetails={actions.openDetails}
-                    cardId={state.cardId} channelId={state.channelId} />
-              </div>
-            )}
-            { state.details && (
-              <div class="reframe">
-                <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact} 
-                    cardId={state.cardId} channelId={state.channelId} />
-              </div>
-            )}
-            { state.cards && (
-              <div class="reframe">
-                <Cards openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
-              </div>
-            )}
-            { state.listing && (
-              <div class="reframe">
-                <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
-              </div>
-            )}
-            { state.contact && (
-              <div class="reframe">
-                <Contact close={actions.closeContact} guid={state.contactGuid} listing={state.contactListing} />
-              </div>
-            )}
-            { state.loading && (
-              <div class="spinner">
-                <Spin size="large" />
-              </div>
-            )}
-            { (state.profile || state.account) && (
-              <div class="reframe">
-                <Profile />
-              </div>
-            )}
-          </div>
-          <div class="bottom">
-            <BottomNav state={state} actions={actions} />
-          </div>
-        </div>
-      )}
-      <Modal centered visible={ringing.length > 0 && state.callStatus == null} footer={null} closable={false}> 
-        <RingingWrapper>
-          <div className="ringing-list">
-            {ringing}
-          </div>
-        </RingingWrapper>
-      </Modal>
-      <Modal centered visible={state.callStatus} footer={null} closable={false} width={callModal.width} height={callModal.height} bodyStyle={{ padding: 6 }}>
-        <CallingWrapper>
-          { !state.remoteVideo && (
-            <Logo url={state.callLogo} width={256} height={256} radius={8} />
-          )}
-          { state.remoteStream && (
-            <video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%' }}
-    complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
-          )}
-          { state.localStream && (
-            <div className="calling-local">
-              <video ref={local} disablepictureinpicture playsInline autoPlay muted style={{ width: '100%', display: 'block' }}
-    complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+            <div class="bottom">
+              <BottomNav state={state} actions={actions} />
            </div>
-          )}
-          <div className="calling-options calling-hovered">
-            { state.localVideo && (
-              <div className="calling-option" onClick={actions.disableVideo}>
-                <IoVideocamOutline />
-              </div>
-            )}
-            { !state.localVideo && (
-              <div className="calling-option" onClick={actions.enableVideo}>
-                <IoVideocamOffOutline />
-              </div>
-            )}
-            { state.localAudio && (
-              <div className="calling-option" onClick={actions.disableAudio}>
-                <IoMicOutline />
-              </div>
-            )}
-            { !state.localAudio && (
-              <div className="calling-option" onClick={actions.enableAudio}>
-                <IoMicOffOutline />
-              </div>
-            )}
          </div>
-          <div className="calling-end calling-hovered" onClick={actions.end}>
-            <IoCallOutline />
-          </div>
-        </CallingWrapper>
-      </Modal>
-    </SessionWrapper>
+        )}
+        <Modal centered visible={ringing.length > 0 && state.callStatus == null} footer={null} closable={false}> 
+          <RingingWrapper>
+            <div className="ringing-list">
+              {ringing}
+            </div>
+          </RingingWrapper>
+        </Modal>
+        <Modal centered visible={state.callStatus} footer={null} closable={false} width={callModal.width} height={callModal.height} bodyStyle={{ padding: 6 }}>
+          <CallingWrapper>
+            { !state.remoteVideo && (
+              <Logo url={state.callLogo} width={256} height={256} radius={8} />
+            )}
+            { state.remoteStream && (
+              <video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%' }}
+      complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+            )}
+            { state.localStream && (
+              <div className="calling-local">
+                <video ref={local} disablepictureinpicture playsInline autoPlay muted style={{ width: '100%', display: 'block' }}
+      complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+              </div>
+            )}
+            <div className="calling-options calling-hovered">
+              { state.localVideo && (
+                <div className="calling-option" onClick={actions.disableVideo}>
+                  <IoVideocamOutline />
+                </div>
+              )}
+              { !state.localVideo && (
+                <div className="calling-option" onClick={actions.enableVideo}>
+                  <IoVideocamOffOutline />
+                </div>
+              )}
+              { state.localAudio && (
+                <div className="calling-option" onClick={actions.disableAudio}>
+                  <IoMicOutline />
+                </div>
+              )}
+              { !state.localAudio && (
+                <div className="calling-option" onClick={actions.enableAudio}>
+                  <IoMicOffOutline />
+                </div>
+              )}
+            </div>
+            <div className="calling-end calling-hovered" onClick={actions.end}>
+              <IoCallOutline />
+            </div>
+          </CallingWrapper>
+        </Modal>
+      </SessionWrapper>
+    </ThemeProvider>
  );
 }

--- a/net/web/src/session/account/profile/useProfile.hook.js
+++ b/net/web/src/session/account/profile/useProfile.hook.js
@ -1,7 +1,7 @@
 import { useState, useEffect, useContext } from 'react';
 import { ProfileContext } from 'context/ProfileContext';
 import { AppContext } from 'context/AppContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import avatar from 'images/avatar.png';

 export function useProfile() {
@ -25,7 +25,7 @@ export function useProfile() {

  const IMAGE_DIM = 256;
  const app = useContext(AppContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
  const profile = useContext(ProfileContext);

  const updateState = (value) => {
@ -41,8 +41,8 @@ export function useProfile() {
  }, [profile.state]);

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport.state]);
+    updateState({ display: settings.state.display });
+  }, [settings.state]);

  const actions = {
    logout: app.actions.logout,
--- a/net/web/src/session/cards/useCards.hook.js
+++ b/net/web/src/session/cards/useCards.hook.js
@ -1,6 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { StoreContext } from 'context/StoreContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { AccountContext } from 'context/AccountContext';
@ -26,16 +26,16 @@ export function useCards() {
  const card = useContext(CardContext);
  const channel = useContext(ChannelContext);
  const store = useContext(StoreContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);

  const updateState = (value) => {
    setState((s) => ({ ...s, ...value }));
  }

  useEffect(() => {
-    const { display } = viewport.state;
+    const { display } = settings.state;
    updateState({ display });
-  }, [viewport.state]);
+  }, [settings.state]);

  useEffect(() => {
    const { seal, sealKey, status } = account.state;
@ -118,13 +118,13 @@ export function useCards() {
  }, [card.state, state.sorted, filter]);

  useEffect(() => {
-    if (viewport.state.display === 'small') {
+    if (settings.state.display === 'small') {
      updateState({ tooltip: false });
    }
    else {
      updateState({ tooltip: true });
    }
-  }, [viewport.state]);
+  }, [settings.state]);

  const actions = {
    onFilter: (value) => {
--- a/net/web/src/session/channels/useChannels.hook.js
+++ b/net/web/src/session/channels/useChannels.hook.js
@ -3,7 +3,7 @@ import { StoreContext } from 'context/StoreContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { CardContext } from 'context/CardContext';
 import { AccountContext } from 'context/AccountContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { getCardByGuid } from 'context/cardUtil';
 import { isUnsealed, getChannelSeals, getContentKey, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil';
@ -24,7 +24,7 @@ export function useChannels() {
  const channel = useContext(ChannelContext);
  const account = useContext(AccountContext);
  const store = useContext(StoreContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);

  const channels = useRef(new Map());

@ -264,8 +264,8 @@ export function useChannels() {
  }, [account.state, store.state, card.state, channel.state, filter]);

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport]);
+    updateState({ display: settings.state.display });
+  }, [settings]);

  const actions = {
    onFilter: (value) => {
--- a/net/web/src/session/contact/useContact.hook.js
+++ b/net/web/src/session/contact/useContact.hook.js
@ -1,6 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { getListingMessage } from 'api/getListingMessage';
 import { getCardByGuid } from 'context/cardUtil';

@ -20,7 +20,7 @@ export function useContact(guid, listing, close) {
  });

  const card = useContext(CardContext);
-  const viewport = useContext(ViewportContext);  
+  const settings = useContext(SettingsContext);  

  const updateState = (value) => {
    setState((s) => ({ ...s, ...value }));
@ -62,8 +62,8 @@ export function useContact(guid, listing, close) {
  }, [card.state, guid, listing]); 

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport.state]);
+    updateState({ display: settings.state.display });
+  }, [settings.state]);

  const applyAction = async (action) => {
    if (!state.busy) {
--- a/net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js
+++ b/net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js
@ -1,5 +1,5 @@
 import { useState, useContext, useEffect, useRef } from 'react';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { CardContext } from 'context/CardContext';
 import { ProfileContext } from 'context/ProfileContext';
@ -17,7 +17,7 @@ export function useChannelHeader(contentKey) {
    display: null,
  });

-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
  const card = useContext(CardContext);
  const conversation = useContext(ConversationContext);
  const profile = useContext(ProfileContext);
@ -32,8 +32,8 @@ export function useChannelHeader(contentKey) {
  }

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport.state]);
+    updateState({ display: settings.state.display });
+  }, [settings.state]);

  useEffect(() => {

--- a/net/web/src/session/conversation/useConversation.hook.js
+++ b/net/web/src/session/conversation/useConversation.hook.js
@ -1,5 +1,5 @@
 import { useContext, useRef, useState, useEffect } from 'react';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { AccountContext } from 'context/AccountContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { UploadContext } from 'context/UploadContext';
@ -27,7 +27,7 @@ export function useConversation(cardId, channelId) {
  const profile = useContext(ProfileContext);
  const card = useContext(CardContext);
  const account = useContext(AccountContext);
-  const viewport = useContext(ViewportContext);  
+  const settings = useContext(SettingsContext);  
  const conversation = useContext(ConversationContext);
  const upload = useContext(UploadContext);
  const store = useContext(StoreContext);
@ -41,8 +41,8 @@ export function useConversation(cardId, channelId) {
  }

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport]);
+    updateState({ display: settings.state.display });
+  }, [settings]);

  useEffect(() => {
    const { dataType, data } = conversation.state.channel?.data?.channelDetail || {};
--- a/net/web/src/session/details/useDetails.hook.js
+++ b/net/web/src/session/details/useDetails.hook.js
@ -3,7 +3,7 @@ import { CardContext } from 'context/CardContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { AccountContext } from 'context/AccountContext';
 import { ProfileContext } from 'context/ProfileContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { getCardByGuid } from 'context/cardUtil';
 import { decryptChannelSubject, updateChannelSubject, getContentKey, getChannelSeals, isUnsealed } from 'context/sealUtil';

@ -34,7 +34,7 @@ export function useDetails() {
  const conversation = useContext(ConversationContext);
  const card = useContext(CardContext);
  const account = useContext(AccountContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
  const profile = useContext(ProfileContext);

  const cardId = useRef();
@ -72,8 +72,8 @@ export function useDetails() {
  }, [account.state.sealKey, conversation.state.channel?.data?.channelDetail]);

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport]);
+    updateState({ display: settings.state.display });
+  }, [settings]);

  useEffect(() => {

--- a/net/web/src/session/identity/Identity.styled.js
+++ b/net/web/src/session/identity/Identity.styled.js
@ -10,7 +10,12 @@ export const IdentityWrapper = styled.div`
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid ${Colors.divider};
-  background-color: ${Colors.formBackground};
+  @media (prefers-color-scheme: light) {
+    background-color: ${props => props.theme.light.formBackground};
+  }
+  @media (prefers-color-scheme: dark) {
+    background-color: ${props => props.theme.dark.formBackground};
+  }
  flex-shrink: 0;

  &:hover {
--- a/net/web/src/session/listing/useListing.hook.js
+++ b/net/web/src/session/listing/useListing.hook.js
@ -1,6 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { ProfileContext } from 'context/ProfileContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { getListing } from 'api/getListing';
 import { getListingImageUrl } from 'api/getListingImageUrl';

@ -17,7 +17,7 @@ export function useListing() {
  });

  const profile = useContext(ProfileContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);

  const updateState = (value) => {
    setState((s) => ({ ...s, ...value }));
@ -78,8 +78,8 @@ export function useListing() {
  }, [profile.state]);

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport.state]);
+    updateState({ display: settings.state.display });
+  }, [settings.state]);

  return { state, actions };
 }
--- a/net/web/src/session/useSession.hook.js
+++ b/net/web/src/session/useSession.hook.js
@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { AppContext } from 'context/AppContext';
 import { CardContext } from 'context/CardContext';
 import { StoreContext } from 'context/StoreContext';
-import { ViewportContext } from 'context/ViewportContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { RingContext } from 'context/RingContext';

@ -38,7 +38,7 @@ export function useSession() {
  const card = useContext(CardContext);
  const store = useContext(StoreContext);
  const ring = useContext(RingContext);
-  const viewport = useContext(ViewportContext);
+  const settings = useContext(SettingsContext);
  const profile = useContext(ProfileContext);

  const navigate = useNavigate();
@ -96,8 +96,8 @@ export function useSession() {
  }, [app.state]);

  useEffect(() => {
-    updateState({ display: viewport.state.display });
-  }, [viewport]);
+    updateState({ display: settings.state.display });
+  }, [settings]);

  useEffect(() => {
    let updated;
--- a/net/web/yarn.lock
+++ b/net/web/yarn.lock
@ -3502,9 +3502,9 @@ caniuse-api@^3.0.0:
    lodash.uniq "^4.5.0"

 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001507"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz"
-  integrity sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==
+  version "1.0.30001587"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz"
+  integrity sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==

 case-sensitive-paths-webpack-plugin@^2.4.0:
  version "2.4.0"
@ -5232,9 +5232,9 @@ fs.realpath@^1.0.0:
  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==

 fsevents@^2.3.2, fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==

 function-bind@^1.1.1:
  version "1.1.1"