Added light theme

src/components/map/MapTile.js

@@ -122,13 +122,13 @@ function MapTile({
           right: 0,
           bottom: 0,
           background:
-            "linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%);",
+            "linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
           alignItems: "flex-end",
           justifyContent: "center",
         }}
         p={2}
       >
-        <Text as="p" variant="heading">
+        <Text as="p" variant="heading" color="hsl(210, 50%, 96%)">
           {map.name}
         </Text>
       </Flex>

src/components/party/Party.js

@@ -55,12 +55,12 @@ function Party({
       </Box>
       <Flex sx={{ flexDirection: "column" }}>
         <ChangeNicknameButton nickname={nickname} onChange={onNicknameChange} />
+        <AddPartyMemberButton gameId={gameId} />
         <StartStreamButton
           onStreamStart={onStreamStart}
           onStreamEnd={onStreamEnd}
           stream={stream}
         />
-        <AddPartyMemberButton gameId={gameId} />
         <SettingsButton />
       </Flex>
     </Flex>

src/components/token/TokenLabel.js

@@ -39,6 +39,7 @@ function TokenLabel({ label }) {
               verticalAlign: "middle",
               lineHeight: 1.4,
             }}
+            color="hsl(210, 50%, 96%)"
           >
             {label}
           </Text>

src/modals/SettingsModal.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Box, Label, Flex, Button } from "theme-ui";
+import { Box, Label, Flex, Button, useColorMode, Checkbox } from "theme-ui";
 
 import Modal from "../components/Modal";
 
@@ -13,40 +13,54 @@ function SettingsModal({ isOpen, onRequestClose }) {
     window.location.reload();
   }
 
+  const [colorMode, setColorMode] = useColorMode();
+
   return (
-    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
-      <Box>
-        <Label py={2}>Settings</Label>
-        <Flex py={2}>
-          <Button
-            sx={{ flexGrow: 1 }}
-            onClick={() => setIsDeleteModalOpen(true)}
-          >
-            Erase all content and reset
-          </Button>
+    <>
+      <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+        <Flex sx={{ flexDirection: "column" }}>
+          <Label py={2}>Settings</Label>
+          <Label py={2}>
+            Light theme
+            <Checkbox
+              checked={colorMode === "light"}
+              onChange={(e) =>
+                setColorMode(e.target.checked ? "light" : "default")
+              }
+              pl={1}
+            />
+          </Label>
+          <Flex py={2}>
+            <Button
+              sx={{ flexGrow: 1 }}
+              onClick={() => setIsDeleteModalOpen(true)}
+            >
+              Erase all content and reset
+            </Button>
+          </Flex>
         </Flex>
-        <Modal
-          isOpen={isDeleteModalOpen}
-          onRequestClose={() => setIsDeleteModalOpen(false)}
-        >
-          <Box>
-            <Label py={2}>Are you sure?</Label>
-            <Flex py={2}>
-              <Button
-                sx={{ flexGrow: 1 }}
-                m={1}
-                onClick={() => setIsDeleteModalOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button m={1} sx={{ flexGrow: 1 }} onClick={handleEraseAllData}>
-                Erase
-              </Button>
-            </Flex>
-          </Box>
-        </Modal>
-      </Box>
-    </Modal>
+      </Modal>
+      <Modal
+        isOpen={isDeleteModalOpen}
+        onRequestClose={() => setIsDeleteModalOpen(false)}
+      >
+        <Box>
+          <Label py={2}>Are you sure?</Label>
+          <Flex py={2}>
+            <Button
+              sx={{ flexGrow: 1 }}
+              m={1}
+              onClick={() => setIsDeleteModalOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button m={1} sx={{ flexGrow: 1 }} onClick={handleEraseAllData}>
+              Erase
+            </Button>
+          </Flex>
+        </Box>
+      </Modal>
+    </>
   );
 }
 

src/theme.js

@@ -9,6 +9,17 @@ export default {
     muted: "hsla(230, 20%, 0%, 20%)",
     gray: "hsl(0, 0%, 70%)",
     overlay: "hsla(230, 25%, 18%, 0.8)",
+    modes: {
+      light: {
+        text: "hsl(10, 20%, 20%)",
+        background: "hsl(10, 10%, 98%)",
+        primary: "hsl(260, 100%, 80%)",
+        secondary: "hsl(290, 100%, 80%)",
+        highlight: "hsl(260, 20%, 40%)",
+        muted: "hsla(230, 20%, 60%, 20%)",
+        overlay: "hsla(230, 100%, 97%, 0.8)",
+      },
+    },
   },
   fonts: {
     body: "'Bree Serif', serif",