feat: add dark mode

apps/web/src/app.js

@@ -20,7 +20,7 @@ const NavMenuItem = props => {
         width: "full",
         borderRadius: "none",
         textAlign: "center",
-        color: props.selected ? "accent" : "fontPrimary"
+        color: props.selected ? "primary" : "text"
       }}
       px={0}
     >
@@ -38,7 +38,12 @@ function App() {
   const [selectedIndex, setSelectedIndex] = useState(1);
   return (
     <ThemeProvider theme={theme}>
-      <Flex height="100%" alignContent="stretch">
+      <Flex
+        bg="background"
+        sx={{ color: "text" }}
+        height="100%"
+        alignContent="stretch"
+      >
         <Box
           width={[0, 0, 70]}
           sx={{ borderRight: "1px solid", borderRightColor: "border" }}
@@ -59,7 +64,6 @@ function App() {
         <Flex flex="1 1 auto" flexDirection="row" alignContent="stretch" px={0}>
           <Flex
             className="navigationView"
-            bg="primary"
             sx={{ borderRight: "1px solid", borderColor: "border" }}
             flexDirection="column"
             flex="1 1 auto"

apps/web/src/components/button/index.js

@@ -4,7 +4,7 @@ import { ButtonPressedStyle } from "../../theme";
 
 const Button = props => (
   <Flex
-    bg="accent"
+    bg="primary"
     width={props.width || "full"}
     py={3}
     px={3}
@@ -16,7 +16,7 @@ const Button = props => (
       color: "fontSecondary",
       fontFamily: "body",
       fontWeight: "body",
-      boxShadow: "0 0 20px 0px #1790F3aa",
+      boxShadow: 1,
       ...ButtonPressedStyle,
       ...props.style
     }}

apps/web/src/components/list-item/index.js

@@ -43,7 +43,7 @@ const ListItem = props => (
         display={props.info ? "flex" : "none"}
         variant="body"
         fontSize={12}
-        color="accent"
+        color="primary"
       >
         {props.info}
       </Text>
@@ -59,7 +59,7 @@ const ListItem = props => (
           style={{ marginRight: -5 }}
         />
       </DropdownTrigger>
-      <DropdownContent style={{ zIndex: 999, marginLeft: -70 }}>
+      <DropdownContent style={{ zIndex: 999, marginLeft: -85 }}>
         <Menu
           dropdownRef={props.dropdownRefs[props.index]}
           menuItems={props.menuItems}

apps/web/src/components/menu/index.js

@@ -4,11 +4,7 @@ import { SHADOW } from "../../theme";
 
 function Menu(props) {
   return (
-    <Flex
+    <Flex bg="background" py={1} sx={{ borderRadius: "default", boxShadow: 2 }}>
-      bg="primary"
-      py={1}
-      sx={{ borderRadius: "default", boxShadow: SHADOW }}
-    >
       <Box>
         {props.menuItems.map(item => (
           <Flex
@@ -29,7 +25,7 @@ function Menu(props) {
             sx={{
               color: item.color || "fontPrimary",
               ":hover": {
-                backgroundColor: "accent",
+                backgroundColor: "primary",
                 color: "fontSecondary"
               }
             }}

apps/web/src/components/notebook/index.js

@@ -29,7 +29,7 @@ const Notebook = ({ item, index, onClick, onTopicClick }) => {
                 e.stopPropagation();
               }}
               key={topic.dateCreated + topic.title}
-              bg="accent"
+              bg="primary"
               px={1}
               py={1}
               sx={{
@@ -48,7 +48,7 @@ const Notebook = ({ item, index, onClick, onTopicClick }) => {
       info={
         <Text>
           {new Date(notebook.dateCreated).toDateString().substring(4)}
-          <Text as="span" color="fontPrimary">
+          <Text as="span" color="text">
             {" • " + notebook.totalNotes} Notes
           </Text>
         </Text>

apps/web/src/components/snackbar/index.js

@@ -40,7 +40,7 @@ const Snackbar = props => (
       }}
       alignItems="center"
       flexDirection="row"
-      bg="accent"
+      bg="primary"
       py={2}
       px={2}
     >

apps/web/src/components/topic/index.js

@@ -22,7 +22,7 @@ const Topic = ({ item, index, onClick }) => {
       title={topic.title}
       info={
         <Text>
-          <Text as="span" color="fontPrimary">
+          <Text as="span" color="text">
             {topic.totalNotes} Notes
           </Text>
         </Text>

apps/web/src/index.css

@@ -6,6 +6,13 @@ body,
   height: 100%;
   overflow: hidden;
 }
+
+body {
+  font-family: Quicksand, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+}
+
 @keyframes fadeUp {
   0% {
     transform: translateY(500px);

apps/web/src/theme.js

@@ -1,23 +1,42 @@
-export const SHADOW = "0 0 8px 0px #aaaaaa44";
-export const DIALOG_SHADOW = "0 0 20px 0px #aaaaaa77";
 export const ButtonPressedStyle = {
   ":active": {
     opacity: "0.8"
   }
 };
+const colorsLight = makeTheme({
+  background: "white",
+  accent: "white",
+  navbg: "#f0f0f0",
+  border: "#f0f0f0",
+  hover: "#e0e0e0",
+  fontSecondary: "white",
+  text: "black",
+  overlay: "rgba(255, 255, 255, 0.75)"
+});
+const colorsDark = makeTheme({
+  background: "#1f1f1f",
+  accent: "#000",
+  navbg: "#2b2b2b",
+  border: "#2b2b2b",
+  hover: "#3b3b3b",
+  fontSecondary: "#000",
+  text: "#fff",
+  overlay: "rgba(0, 0, 0, 0.75)"
+});
+const shadowsDark = {
+  1: "0 0 0px 0px #00000000",
+  2: "0 0 8px 0px #55555544",
+  3: "0 0 20px 0px #55555599"
+};
+const shadowsLight = {
+  1: "0 0 20px 0px #1790F3aa",
+  2: "0 0 8px 0px #aaaaaa44",
+  3: "0 0 20px 0px #aaaaaa77"
+};
+
 export default {
   breakpoints: ["480px", "834px", "1200px"],
-  colors: {
+  colors: colorsLight,
-    primary: "white",
-    accent: "#1790F3",
-    navbg: "#f0f0f0",
-    transparent: "#00000000",
-    //font related
-    fontPrimary: "black",
-    fontSecondary: "white",
-    border: "#f0f0f0",
-    hover: "#e0e0e0"
-  },
   space: [0, 5, 10, 12],
   fontSizes: {
     heading: 36,
@@ -47,7 +66,6 @@ export default {
     default: {
       borderWidth: 0,
       borderRadius: "default",
-      bg: "primary",
       border: "2px solid",
       borderColor: "border",
       fontFamily: "body",
@@ -55,27 +73,17 @@ export default {
       fontSizes: "input",
       ":focus": {
         outline: "none",
-        borderColor: "accent"
+        borderColor: "primary"
       },
       ":hover": {
         borderColor: "hover"
       }
     },
     search: {
-      borderWidth: 0,
+      variant: "forms.default",
-      borderRadius: "default",
-      bg: "primary",
-      border: "2px solid",
-      borderColor: "border",
-      fontFamily: "body",
-      fontWeight: "body",
-      fontSizes: "input",
       ":focus": {
         outline: "none",
-        boxShadow: SHADOW
+        boxShadow: 2
-      },
-      ":hover": {
-        borderColor: "hover"
       }
     }
   },
@@ -83,7 +91,8 @@ export default {
     heading: {
       fontFamily: "body",
       fontWeight: "heading",
-      fontSize: "heading"
+      fontSize: "heading",
+      color: "text"
     },
     title: {
       fontFamily: "body",
@@ -97,18 +106,9 @@ export default {
     }
   },
   buttons: {
-    nav: {
-      color: "fontPrimary",
-      bg: "transparent",
-      fontFamily: "body",
-      fontWeight: "body",
-      ":focus": {
-        outline: "none"
-      }
-    },
     primary: {
       color: "fontSecondary",
-      bg: "accent",
+      bg: "primary",
       borderRadius: "default",
       fontFamily: "body",
       fontWeight: "body",
@@ -118,31 +118,56 @@ export default {
       ...ButtonPressedStyle
     },
     secondary: {
-      color: "fontPrimary",
+      variant: "buttons.primary",
+      color: "text",
       bg: "navbg",
-      borderRadius: "default",
-      fontFamily: "body",
-      fontWeight: "body",
-      ":focus": {
-        outline: "none"
-      },
       ...ButtonPressedStyle
     },
     tertiary: {
-      color: "fontPrimary",
+      variant: "buttons.primary",
+      color: "text",
       bg: "transparent",
-      borderRadius: "default",
       border: "2px solid",
       borderColor: "border",
+      ":active": {
+        color: "primary",
+        opacity: 0.8
+      }
+    },
+    nav: {
+      bg: "transparent",
       fontFamily: "body",
       fontWeight: "body",
       ":focus": {
         outline: "none"
-      },
-      ":active": {
-        color: "accent",
-        opacity: 0.8
       }
     }
-  }
+  },
+  shadows: shadowsLight
 };
+
+function makeTheme({
+  background,
+  accent,
+  navbg,
+  border,
+  hover,
+  fontSecondary,
+  text,
+  overlay
+}) {
+  return {
+    background,
+    primary: "#1790F3",
+    //secondary: "",
+    accent,
+    //custom
+    navbg,
+    border,
+    hover,
+    fontSecondary,
+    transparent: "#00000000",
+    text,
+    overlay
+  };
+}

apps/web/src/views/Notebooks.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Flex, Box, Text, Button as RebassButton } from "rebass";
-import { Input } from "@rebass/forms";
+import { Input, Checkbox, Label } from "@rebass/forms";
 import Button from "../components/button";
 import * as Icon from "react-feather";
 import theme, { DIALOG_SHADOW } from "../theme";
@@ -46,7 +46,7 @@ const Notebooks = props => {
       {notebooks.length > 0 ? (
         <Flex flexDirection="column" flex="1 1 auto">
           {selected.type === "topic" && (
-            <Text variant="title" color="accent">
+            <Text variant="title" color="primary">
               {selected.title}
             </Text>
           )}
@@ -155,11 +155,16 @@ const CreateNotebookDialog = props => {
           transform: "translate(-50%, -50%)",
           borderWidth: 0,
           borderRadius: theme.radii["default"],
-          boxShadow: DIALOG_SHADOW,
+          backgroundColor: theme.colors.background,
+          color: theme.colors.text,
+          boxShadow: theme.shadows["3"],
           width: "20%",
           paddingRight: 40,
           paddingLeft: 40,
           overflowY: "hidden"
+        },
+        overlay: {
+          background: theme.colors.overlay
         }
       }}
       contentLabel="Add a Notebook"
@@ -170,10 +175,12 @@ const CreateNotebookDialog = props => {
           alignItems="center"
           alignSelf="center"
           justifyContent="center"
-          color="accent"
+          color="primary"
           py={2}
         >
-          <Icon.BookOpen size={42} />
+          <Box height={42}>
+            <Icon.BookOpen size={42} />
+          </Box>
           <Text
             mx={2}
             as="span"
@@ -196,6 +203,10 @@ const CreateNotebookDialog = props => {
             onChange={e => (CreateNotebookDialog.description = e.target.value)}
             placeholder="Enter description (optional)"
           />
+          <Label>
+            <Checkbox variant="checkbox" />
+            Locked?
+          </Label>
           <Text variant="body" fontWeight="bold" my={1}>
             Topics (optional):
           </Text>

apps/web/yarn.lock

@@ -6996,7 +6996,7 @@ normalize-url@^3.0.0, normalize-url@^3.0.1:
 
 "notes-core@https://github.com/thecodrr/notes-core.git":
   version "0.2.0"
-  resolved "https://github.com/thecodrr/notes-core.git#281414d69b6bdc73b70e5347745ce8b797b55991"
+  resolved "https://github.com/thecodrr/notes-core.git#82058c8fa60c370644320fea5e1b4bb0c393c4df"
   dependencies:
     fast-filter "^1.0.4"
     fuzzysearch "^1.0.3"