feat: darkmode (#412)

Co-authored-by: sidemt <[email protected]>
freeCodeCamp · Jan 27, 2024 · dc9ab37 · dc9ab37
1 parent 4130880
commit dc9ab37
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 53 deletions.
diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
@@ -223,7 +223,6 @@ const EditorDrawer = ({
               w="100%"
               h="175px"
               overflow="hidden"
-              bg="#f1f5f9"
               justifyContent="center"
               alignItems="center"
             >
@@ -311,7 +310,6 @@ const EditorDrawer = ({
               <AutoCompleteInput
                 variant="outline"
                 placeholder="Filter by Tag"
-                backgroundColor="white"
                 value={postTagInputText}
                 fontSize="14px"
                 fontWeight="600"
@@ -423,7 +421,6 @@ const EditorDrawer = ({
                   <AutoCompleteInput
                     variant="outline"
                     placeholder="Filter by Author"
-                    backgroundColor="white"
                     fontSize="14px"
                     value={authorName}
                     fontWeight="600"

diff --git a/apps/frontend/src/components/nav-menu.jsx b/apps/frontend/src/components/nav-menu.jsx
@@ -17,6 +17,8 @@ import {
   Spacer,
   chakra,
   useDisclosure,
+  useColorMode,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import {
   faArrowRightFromBracket,
@@ -26,6 +28,8 @@ import {
   faTags,
   faUser,
   faUsers,
+  faMoon,
+  faSun,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { signOut } from "next-auth/react";
@@ -37,16 +41,19 @@ import PostSearch from "./search-component";
 const Icon = chakra(FontAwesomeIcon);
 
 const NavMenuLink = ({ text, link, icon }) => {
+  const color = useColorModeValue("gray.800", "white");
+  const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.700");
+
   return (
     <a href={link}>
       <Box
-        color="black"
         p="0.5rem 2rem"
         fontWeight="400"
         m="2px 5px"
         _hover={{
-          bgColor: "rgb(243, 244, 246)",
+          bgColor: hoverBgColor,
           borderRadius: "5px",
+          color: color,
         }}
       >
         <Icon icon={icon} fixedWidth mr="0.5rem" />
@@ -57,13 +64,19 @@ const NavMenuLink = ({ text, link, icon }) => {
 };
 
 const NavMenuContent = ({ user, onClose, ...rest }) => {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  const bg = useColorModeValue("white", "gray.800");
+  const color = useColorModeValue("gray.800", "white");
+  const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.700");
+
   return (
     <Flex
       flexDirection="column"
       w={{ base: "full", md: "300px" }}
       h="100%"
       pos="fixed"
-      bgColor="white"
+      bgColor={bg}
       borderRightWidth="1px"
       {...rest}
     >
@@ -116,15 +129,16 @@ const NavMenuContent = ({ user, onClose, ...rest }) => {
           <MenuButton
             as={Button}
             rightIcon={<Icon icon={faChevronDown} fixedWidth />}
-            bgColor="white"
             w="100%"
             mt={3}
             mb={6}
             _hover={{
-              bgColor: "rgb(243, 244, 246)",
+              bgColor: hoverBgColor,
+              color: color,
             }}
             _active={{
-              bgColor: "rgb(243, 244, 246)",
+              bgColor: hoverBgColor,
+              color: color,
             }}
           >
             <Flex>
@@ -138,14 +152,24 @@ const NavMenuContent = ({ user, onClose, ...rest }) => {
                   fontWeight="400"
                   lineHeight="1.1em"
                   pb="3px"
-                  color="#54666d"
                 >
                   {user.email}
                 </Box>
               </Flex>
             </Flex>
           </MenuButton>
           <MenuList>
+            <MenuItem
+              icon={
+                <Icon
+                  icon={colorMode === "light" ? faMoon : faSun}
+                  fixedWidth
+                />
+              }
+              onClick={toggleColorMode}
+            >
+              {colorMode === "light" ? "Dark Mode" : "Light Mode"}
+            </MenuItem>
             <MenuItem
               icon={<Icon icon={faUser} fixedWidth />}
               as={NextLink}

diff --git a/apps/frontend/src/components/schedule-menu.jsx b/apps/frontend/src/components/schedule-menu.jsx
@@ -111,7 +111,6 @@ const PublishedMenu = ({
           >
             <Text
               fontWeight={"500"}
-              color={"gray.600"}
               fontSize={"sm"}
               onClick={() => setScheduleOption("unpublished")}
             >
@@ -131,7 +130,6 @@ const PublishedMenu = ({
           >
             <Text
               fontWeight={"500"}
-              color={"gray.600"}
               fontSize={"sm"}
               onClick={() => setScheduleOption("now")}
             >
@@ -217,7 +215,6 @@ const NotPublishedMenu = ({
           >
             <Text
               fontWeight={"500"}
-              color={"gray.600"}
               fontSize={"sm"}
               onClick={() => {
                 if (isScheduled) {
@@ -243,7 +240,6 @@ const NotPublishedMenu = ({
           >
             <Text
               fontWeight={"500"}
-              color={"gray.600"}
               fontSize={"sm"}
               onClick={() => setScheduleOption("later")}
             >
@@ -264,7 +260,6 @@ const NotPublishedMenu = ({
         <Button
           mr="1rem"
           variant={"ghost"}
-          color="gray.500"
           fontWeight={"400"}
           size="sm"
           onClick={onClose}

diff --git a/apps/frontend/src/components/tiptap.jsx b/apps/frontend/src/components/tiptap.jsx
@@ -327,7 +327,6 @@ const Tiptap = ({ handleContentChange, user, content }) => {
         <Text
           fontSize="xl"
           opacity={0.6}
-          backgroundColor="white"
           data-testid="word-count"
           padding="0.5rem"
         >

diff --git a/apps/frontend/src/lib/theme.js b/apps/frontend/src/lib/theme.js
@@ -0,0 +1,10 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const config = {
+  initialColorMode: "system",
+  useSystemColorMode: false,
+};
+
+const theme = extendTheme({ config });
+
+export default theme;
diff --git a/apps/frontend/src/pages/_document.js b/apps/frontend/src/pages/_document.js
@@ -1,4 +1,6 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import { ColorModeScript } from "@chakra-ui/react";
+import theme from "../lib/theme";
 
 // Custom document component
 // https://nextjs.org/docs/pages/building-your-application/routing/custom-document
@@ -7,6 +9,7 @@ export default function Document() {
     <Html lang="en">
       <Head />
       <body>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Main />
         <NextScript />
       </body>

diff --git a/apps/frontend/src/pages/index.js b/apps/frontend/src/pages/index.js
@@ -1,21 +1,25 @@
 import { Button, Box, Flex, Img } from "@chakra-ui/react";
 import { signIn } from "next-auth/react";
+import { useColorModeValue } from "@chakra-ui/react";
 
 export default function IndexPage() {
+  const bg = useColorModeValue("gray.200", "gray.700");
+  const container = useColorModeValue("white", "gray.800");
+
   return (
     <>
       <Box
         display="flex"
         justifyContent="center"
         alignItems="center"
+        bg={bg}
         h="100vh"
-        bgColor="gray.200"
       >
         <Flex
           flexDirection="column"
           width="400px"
           height="150px"
-          bgColor="white"
+          bgColor={container}
           boxShadow="lg"
           rounded="md"
           p="1rem"
@@ -45,7 +49,7 @@ export default function IndexPage() {
             w="100%"
             colorScheme="blue"
           >
-            Sign in
+            Sign In
           </Button>
         </Flex>
       </Box>

diff --git a/apps/frontend/src/pages/posts/index.js b/apps/frontend/src/pages/posts/index.js
@@ -23,6 +23,7 @@ import {
   Tr,
   chakra,
   useToast,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import {
   AutoComplete,
@@ -208,6 +209,12 @@ export default function IndexPage({
   const router = useRouter();
   const toast = useToast();
 
+  const bg = useColorModeValue("gray.200", "gray.700");
+  const filterButton = useColorModeValue("white", "gray.600");
+  const tableHeader = useColorModeValue("gray.100", "gray.600");
+  const tableBody = useColorModeValue("white", "gray.700");
+  const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.600");
+
   const [searchedTags, setSearchedTags] = useState([]);
   const [hasSearchedTags, setHasSearchedTags] = useState(
     queryParams?.tags ? true : false,
@@ -354,16 +361,15 @@ export default function IndexPage({
   };
 
   return (
-    <Box minH="100vh" bgColor="gray.200">
+    <Box minH="100vh" bgColor={bg}>
       <NavMenu user={user} />
-
       <Box ml={{ base: 0, md: "300px" }} px="6">
         <Flex
           alignItems="center"
           minH="20"
           position="sticky"
           top="0"
-          bgColor="gray.200"
+          bgColor={bg}
           zIndex={3}
         >
           <Heading>Posts</Heading>
@@ -385,7 +391,14 @@ export default function IndexPage({
           {isEditor(user) && (
             <>
               <Menu>
-                <FilterButton text={postButtonText[postType]} />
+                <FilterButton
+                  text={postButtonText[postType]}
+                  bgColor={filterButton}
+                  _active={{
+                    bgColor: "white",
+                    color: "black",
+                  }}
+                />
                 <MenuList zIndex={2}>
                   <MenuOptionGroup
                     value={postType}
@@ -417,12 +430,16 @@ export default function IndexPage({
                       variant="outline"
                       placeholder="Filter by Author"
                       value={authorInputText}
-                      backgroundColor="white"
+                      bgColor={filterButton}
                       fontSize="14px"
                       fontWeight="600"
                       onChange={(event) =>
                         handleShallowFilter("author", event.target.value)
                       }
+                      _focus={{
+                        bgColor: "white",
+                        color: "black",
+                      }}
                     />
                     <InputRightElement>
                       <Icon
@@ -459,13 +476,17 @@ export default function IndexPage({
                 <AutoCompleteInput
                   variant="outline"
                   placeholder="Filter by Tag"
+                  bgColor={filterButton}
                   value={tagInputText}
-                  backgroundColor="white"
                   fontSize="14px"
                   fontWeight="600"
                   onChange={(event) => {
                     handleShallowFilter("tags", event.target.value);
                   }}
+                  _focus={{
+                    bgColor: "white",
+                    color: "black",
+                  }}
                 />
                 <InputRightElement>
                   <Icon
@@ -491,7 +512,14 @@ export default function IndexPage({
             </AutoComplete>
           </FormControl>
           <Menu>
-            <FilterButton text={`Sort by: ${sortButtonNames[sortBy]}`} />
+            <FilterButton
+              text={`Sort by: ${sortButtonNames[sortBy]}`}
+              bgColor={filterButton}
+              _active={{
+                bgColor: "white",
+                color: "black",
+              }}
+            />
             <MenuList zIndex={2}>
               <MenuOptionGroup
                 value={sortBy}
@@ -510,15 +538,15 @@ export default function IndexPage({
 
         <Box pb="10">
           <Table boxShadow="md" borderWidth="1px">
-            <Thead bgColor="rgb(243, 244, 246)">
+            <Thead bgColor={tableHeader}>
               <Tr>
                 <Th>Title</Th>
                 <Th w="140px" display={{ base: "none", sm: "table-cell" }}>
                   Status
                 </Th>
               </Tr>
             </Thead>
-            <Tbody bgColor="white">
+            <Tbody bgColor={tableBody}>
               {posts.data.map((post) => {
                 const title = post.attributes.title;
                 const name = post.attributes.author.data.attributes.name;
@@ -539,7 +567,7 @@ export default function IndexPage({
                     display="table-row"
                     key={post.id}
                     _hover={{
-                      bgColor: "rgb(243, 244, 246)",
+                      bgColor: hoverBgColor,
                     }}
                     position="relative"
                   >
@@ -610,6 +638,11 @@ export default function IndexPage({
               <FilterButton
                 text={resultsPerPage}
                 data-testid="results-per-page"
+                bgColor={filterButton}
+                _active={{
+                  bgColor: "white",
+                  color: "black",
+                }}
               />
               <MenuList>
                 <MenuOptionGroup