interface: dynamically switch indigo-react theme

pkg/interface/src/App.js

@@ -4,7 +4,7 @@ import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
  
 import './css/indigo-static.css';
 import './css/fonts.css';
-import { light } from '@tlon/indigo-react';
+import { light, dark, inverted, paperDark } from '@tlon/indigo-react';
 
 import LaunchApp from './apps/launch/app';
 import ChatApp from './apps/chat/app';
@@ -58,10 +58,23 @@ export default class App extends React.Component {
     this.api = new GlobalApi(this.ship, this.appChannel, this.store);
     this.subscription =
       new GlobalSubscription(this.store, this.api, this.appChannel);
+
+    this.updateTheme = this.updateTheme.bind(this);
   }
 
   componentDidMount() {
     this.subscription.start();
+    this.themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
+    this.api.local.setDark(this.themeWatcher.matches);
+    this.themeWatcher.addListener(this.updateTheme);
+  }
+  
+  componentWillUnmount() {
+    this.themeWatcher.removeListener(this.updateTheme);
+  }
+
+  updateTheme(e) {
+    this.api.local.setDark(e.matches);
   }
 
   render() {
@@ -70,9 +83,10 @@ export default class App extends React.Component {
     const associations = this.state.associations ? this.state.associations : { contacts: {} };
     const selectedGroups = this.state.selectedGroups ? this.state.selectedGroups : [];
     const { state } = this;
+    const theme = state.dark ? paperDark : light;
 
     return (
-      <ThemeProvider theme={light}>
+      <ThemeProvider theme={theme}>
         <Root>
           <Router>
             <StatusBarWithRouter props={this.props}

pkg/interface/src/api/local.ts

@@ -25,4 +25,14 @@ export default class LocalApi extends BaseApi<StoreState> {
     })
   }
 
+  setDark(isDark: boolean) {
+    this.store.handleEvent({
+      data: {
+        local: {
+          setDark: isDark
+        }
+      }
+    });
+  }
+
 }

pkg/interface/src/apps/chat/components/join.js

@@ -112,7 +112,7 @@ export class JoinScreen extends Component {
         </div>
         <h2 className="mb3 f8">Join Existing Chat</h2>
         <div className="w-100">
-          <p className="f8 lh-copy mt3 db">Enter a <span className="mono">~ship/chat-name</span> or <span className="mono">~/~ship/chat-name</span></p>
+          <p className="f8 lh-copy mt3 db">Enter a <span className="mono">~ship/chat-name</span></p>
           <p className="f9 gray2 mb4">Chat names use lowercase, hyphens, and slashes.</p>
           <textarea
             ref={ (e) => {

pkg/interface/src/apps/groups/components/join.js

@@ -95,7 +95,7 @@ export class JoinScreen extends Component {
             } }
             className={'f7 mono ba bg-gray0-d white-d pa3 mb2 db ' +
             'focus-b--black focus-b--white-d b--gray3 b--gray2-d nowrap '}
-            placeholder="~zod/dream-journal"
+            placeholder="~zod/group-name"
             spellCheck="false"
             rows={1}
             onKeyPress={(e) => {

pkg/interface/src/reducers/local.ts

@@ -3,7 +3,7 @@ import { StoreState } from '../store/type';
 import { Cage } from '../types/cage';
 import { LocalUpdate } from '../types/local-update';
 
-type LocalState = Pick<StoreState, 'sidebarShown' | 'selectedGroups'>;
+type LocalState = Pick<StoreState, 'sidebarShown' | 'selectedGroups' | 'dark'>;
 
 export default class LocalReducer<S extends LocalState> {
     reduce(json: Cage, state: S) {
@@ -11,6 +11,7 @@ export default class LocalReducer<S extends LocalState> {
         if (data) {
             this.sidebarToggle(data, state);
             this.setSelected(data, state);
+            this.setDark(data, state);
         }
     }
 
@@ -25,4 +26,10 @@ export default class LocalReducer<S extends LocalState> {
         state.selectedGroups = obj.selected;
       }
     }
+
+    setDark(obj: LocalUpdate, state: S) {
+      if('setDark' in obj) {
+        state.dark = obj.setDark;
+      }
+    }
 }

pkg/interface/src/store/store.ts

@@ -69,6 +69,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
       notebooks: {},
       contacts: {},
       selectedGroups: [],
+      dark: false,
       inbox: {},
       chatSynced: null,
     };

pkg/interface/src/store/type.ts

@@ -16,6 +16,7 @@ export interface StoreState {
   // local state
   sidebarShown: boolean;
   selectedGroups: SelectedGroup[];
+  dark: boolean;
   // invite state
   invites: Invites;
   // metadata state

pkg/interface/src/types/local-update.ts

@@ -2,7 +2,8 @@ import { Path } from './noun';
 
 export type LocalUpdate =
   LocalUpdateSidebarToggle
-| LocalUpdateSelectedGroups;
+| LocalUpdateSelectedGroups
+| LocalUpdateSetDark;
 
 interface LocalUpdateSidebarToggle {
   sidebarToggle: boolean;
@@ -12,4 +13,8 @@ interface LocalUpdateSelectedGroups {
   selected: SelectedGroup[];
 }
 
+interface LocalUpdateSetDark {
+  setDark: boolean;
+}
+
 export type SelectedGroup = [Path, string];