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,10 +13,23 @@ function SettingsModal({ isOpen, onRequestClose }) {
     window.location.reload();
   }
 
+  const [colorMode, setColorMode] = useColorMode();
+
   return (
+    <>
       <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
-      <Box>
+        <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 }}
@@ -25,6 +38,8 @@ function SettingsModal({ isOpen, onRequestClose }) {
               Erase all content and reset
             </Button>
           </Flex>
+        </Flex>
+      </Modal>
       <Modal
         isOpen={isDeleteModalOpen}
         onRequestClose={() => setIsDeleteModalOpen(false)}
@@ -45,8 +60,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
           </Flex>
         </Box>
       </Modal>
-      </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",