feat: add dark mode

2025-12-23 23:19:40 +01:00 · 2019-12-11 00:07:32 +05:00
parent e9c3067acb
commit 3802acb377
11 changed files with 118 additions and 75 deletions
--- a/apps/web/src/app.js
+++ b/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"
--- a/apps/web/src/components/button/index.js
+++ b/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
    }}
--- a/apps/web/src/components/list-item/index.js
+++ b/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}
--- a/apps/web/src/components/menu/index.js
+++ b/apps/web/src/components/menu/index.js
@@ -4,11 +4,7 @@ import { SHADOW } from "../../theme";

 function Menu(props) {
  return (
-    <Flex
-      bg="primary"
-      py={1}
-      sx={{ borderRadius: "default", boxShadow: SHADOW }}
-    >
+    <Flex bg="background" py={1} sx={{ borderRadius: "default", boxShadow: 2 }}>
      <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"
              }
            }}
--- a/apps/web/src/components/notebook/index.js
+++ b/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>
--- a/apps/web/src/components/snackbar/index.js
+++ b/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}
    >
--- a/apps/web/src/components/topic/index.js
+++ b/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>
--- a/apps/web/src/index.css
+++ b/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);
--- a/apps/web/src/theme.js
+++ b/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: {
-    primary: "white",
-    accent: "#1790F3",
-    navbg: "#f0f0f0",
-    transparent: "#00000000",
-    //font related
-    fontPrimary: "black",
-    fontSecondary: "white",
-    border: "#f0f0f0",
-    hover: "#e0e0e0"
-  },
+  colors: colorsLight,
  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,
-      borderRadius: "default",
-      bg: "primary",
-      border: "2px solid",
-      borderColor: "border",
-      fontFamily: "body",
-      fontWeight: "body",
-      fontSizes: "input",
+      variant: "forms.default",
      ":focus": {
        outline: "none",
-        boxShadow: SHADOW
-      },
-      ":hover": {
-        borderColor: "hover"
+        boxShadow: 2
      }
    }
  },
@@ -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
+  };
+}
--- a/apps/web/src/views/Notebooks.js
+++ b/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}
        >
+          <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>
--- a/apps/web/yarn.lock
+++ b/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"