added theme switcher

src/components/pages/Homepage.tsx

@@ -5,13 +5,19 @@ import Header from '../shared/Header'
 import Body from '../shared/Body'
 import NavBar from '../shared/NavBar'
 import '../../sass/pages/homepage.scss'
+import useStore from '../store/store'
 
 const Homepage: React.FC = function () {
   const [isNavOpened, setIsNavOpened] = useState(false)
   const [isSideBarHidden, setIsSideBarHidden] = useState(false)
+  const theme = useStore(state => state.theme())
 
   return (
-    <div className="homepage" data-is_side_bar_hidden={isSideBarHidden}>
+    <div
+      className="homepage"
+      data-theme={theme}
+      data-is_side_bar_hidden={isSideBarHidden}
+    >
       <Header isNavOpened={isNavOpened} setIsNavOpened={setIsNavOpened} />
       <NavBar
         isNavOpened={isNavOpened}

src/components/shared/Body.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
 import { AnimatePresence, motion } from 'framer-motion'
 import { nanoid } from 'nanoid'
@@ -16,11 +16,12 @@ const Body: React.FC<{
 }> = function ({ setIsSideBarHidden }) {
   const currentBoard = useStore(state => state.currentBoard())
   const modalType = useStore(state => state.modalType)
+  const colorTheme = useStore(state => state.theme())
+
+  console.log(colorTheme)
+
   return (
-    <motion.main
-      layout // transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-      className="body"
-    >
+    <motion.main layout className="body">
       {!currentBoard.status.every(el => !el.tasks.length) && (
         <motion.div layout className="body__boards">
           {currentBoard.status

src/components/shared/NavBar.tsx

@@ -19,7 +19,7 @@ const NavBar: React.FC<{
   const currentBoard = useStore(state => state.currentBoard())
   const setCurrentBoard = useStore(state => state.setCurrentBoard)
   const [theme, toggleTheme] = useStore(state => [
-    state.theme,
+    state.theme(),
     state.toggleTheme,
   ])
   const setModalType = useStore(state => state.setModalType)
@@ -90,7 +90,7 @@ const NavBar: React.FC<{
         <div className="navbar__theme">
           <img src={lightTheme} alt="light-theme" />
           <div
-            data-ison={theme === 'light'}
+            data-ison={theme === 'dark'}
             className="navbar__theme-toggler"
             onClick={toggleTheme}
           >

src/components/store/store.tsx

@@ -32,7 +32,7 @@ type Board = {
 }
 type State = {
   boards: Board[]
-  theme: 'light' | 'dark'
+  theme: () => 'light' | 'dark' | 'normal'
   currentBoard: () => Board
   modalType: Modal
   createBoard: (boardName: string, boardColumns: string[]) => void
@@ -63,7 +63,6 @@ type State = {
 type Action = {
   toggleTheme: () => void
 }
-
 const useStore = create<State & Action>((set, get) => ({
   boards: [
     {
@@ -283,7 +282,11 @@ const useStore = create<State & Action>((set, get) => ({
       ],
     },
   ],
-  theme: window.getComputedStyle(document.body).content as 'light' | 'dark',
+  theme: () =>
+    JSON.parse(window.getComputedStyle(document.body).content) as
+      | 'light'
+      | 'dark'
+      | 'normal',
   createTask: function (title, description, subtasks, status, boardId) {
     const otherBoards = get().boards.filter(board => board.id !== boardId)
     const currentBoard = get().boards.find(board => board.id === boardId)
@@ -409,9 +412,8 @@ const useStore = create<State & Action>((set, get) => ({
   currentBoard: () => get().boards[0],
   toggleTheme: function () {
     set(() => {
-      console.log(get())
-      if (get().theme === 'light') return { theme: 'dark' }
-      return { theme: 'light' }
+      if (get().theme() === 'light') return { theme: () => 'dark' }
+      return { theme: () => 'light' }
     })
   },
   setCurrentBoard: function (id) {

src/sass/pages/homepage.scss

@@ -5,6 +5,7 @@
 //   grid-template-rows: 68px 1fr;
 //   min-height: 100vh;
 // }
+
 .homepage {
   @include screen(700) {
     display: grid;
@@ -66,4 +67,55 @@
       }
     }
   }
+  &[data-theme='dark'] {
+    .body {
+      background-color: $dark-300;
+
+      &__add-board {
+        background: linear-gradient(
+          180deg,
+          rgba(43, 44, 55, 0.25) 0%,
+          rgba(43, 44, 55, 0.125) 100%
+        );
+      }
+    }
+    .board__task {
+      background-color: $dark-200;
+      box-shadow: 0px 4px 6px rgba(54, 78, 126, 0.101545);
+
+      p:first-child {
+        color: $white;
+      }
+      p:last-child {
+        color: $gray-200;
+      }
+    }
+    .header {
+      background-color: $dark-200;
+
+      &__title {
+        color: $white;
+      }
+      &__sidebar-hidden {
+        p {
+          color: $white;
+        }
+      }
+      &::after {
+        background-color: rgba($gray-200, 0.5);
+      }
+    }
+    .navbar {
+      background-color: $dark-200;
+      &__container {
+        background-color: $dark-200;
+      }
+      &__header p {
+        color: $white;
+      }
+      &__theme {
+        background-color: $dark-300;
+      }
+    }
+  }
 }