danieljecu · danieljecu · Jul 2, 2026
diff --git a/.claude/launch.json b/.claude/launch.json
@@ -0,0 +1,13 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "ui-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["start"],
+      "port": 3000,
+      "autoPort": true,
+      "cwd": "ui"
+    }
+  ]
+}
diff --git a/ui/src/components/layout/navigation/header-bar/index.tsx b/ui/src/components/layout/navigation/header-bar/index.tsx
@@ -11,6 +11,9 @@ import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { useColorMode } from "providers/app-provider";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 
@@ -21,6 +24,7 @@ import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
 
 const NewResponsiveHeader = () => {
+  const { mode, toggleColorMode } = useColorMode();
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
     null
   );
@@ -105,6 +109,13 @@ const NewResponsiveHeader = () => {
           <Box sx={{ flexGrow: 1 }} />
 
           <SearchBar />
+          <IconButton
+            onClick={toggleColorMode}
+            color="inherit"
+            aria-label="toggle dark mode"
+          >
+            {mode === "dark" ? <Brightness7Icon /> : <Brightness4Icon />}
+          </IconButton>
           <UserStatus />
         </Toolbar>
       </Container>

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -3,8 +3,7 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  background-color: #f4f6f8;
-  color: #20262b;
+  /* background/text colors come from the MUI theme via CssBaseline */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

diff --git a/ui/src/pages/Home/ProjectsView/components/SideBar.tsx b/ui/src/pages/Home/ProjectsView/components/SideBar.tsx
@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import React from "react";
-import Theme from "styles/theme";
 
 export const SideBar = (props: any) => (
   <SideBarView>
@@ -16,7 +15,7 @@ export const SideBar = (props: any) => (
 
 const SideBarView = styled.header`
   float: left;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin-bottom: 25px;
   padding-right: 10px;
   overflow: hidden;
@@ -26,13 +25,13 @@ const Menu = styled.header`
   text-align: center;
   padding-right: 10px;
   header & div {
-    background-color: ${Theme.colors.pageBg};
+    background-color: ${({ theme }) => theme.colors.pageBg};
     padding: 8px;
     margin-top: 7px;
 
     display: block;
     width: 100%;
-    color: ${Theme.colors.textPrimary};
+    color: ${({ theme }) => theme.colors.textPrimary};
   }
 `;
 

diff --git a/ui/src/pages/Home/ProjectsView/components/styled.ts b/ui/src/pages/Home/ProjectsView/components/styled.ts
@@ -1,10 +1,9 @@
 import styled from "@emotion/styled";
-import Theme from "styles/theme";
 
 const ProjectCardContainer = styled.div`
   width: 30vmax;
   border-radius: 4px;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin: 1.5rem 0.5rem 1.5rem 0.5rem;
   overflow: hidden;
 `;

diff --git a/ui/src/pages/Home/TasklistsView/components/styled.ts b/ui/src/pages/Home/TasklistsView/components/styled.ts
@@ -1,16 +1,15 @@
 import styled from "@emotion/styled";
-import Theme from "styles/theme";
 
 const TasklistCardContainer = styled.div`
   width: 100%;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   border-radius: 4px;
   margin: 1.5rem 0.5rem 1.5rem 0.5rem;
   overflow: hidden;
 `;
 
 const CardTitle = styled.div`
-  background-color: ${Theme.colors.cardHeader};
+  background-color: ${({ theme }) => theme.colors.cardHeader};
   padding: 0.33rem 1rem 0.33rem 1rem;
   border-bottom: 1px solid;
 `;

diff --git a/ui/src/pages/Home/TasksView/components/SimpleTaskCard/SimpleTaskCard.styled.ts b/ui/src/pages/Home/TasksView/components/SimpleTaskCard/SimpleTaskCard.styled.ts
@@ -1,20 +1,19 @@
 import styled from "@emotion/styled/macro";
-import Theme from "styles/theme";
 // import styled from "@emotion/styled";
 // import { MyThemeType } from "styles/theme";
 // import { styled, alpha } from "@mui/material/styles";
 // import { styled } from "@mui/system";
 
 const ProjectCardContainer = styled.div`
   width: 30vmax;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin: 1.5rem 0.5rem 1.5rem 0.5rem;
   overflow: hidden;
 `;
 
 const TasklistCardContainer = styled.div`
   width: 30vmax;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin: 1.5rem 0.5rem 1.5rem 0.5rem;
   overflow: hidden;
 `;
@@ -40,7 +39,7 @@ const CardTitle = styled.div`
 const CardCreateTitle = styled.div`
   display: flex;
   flex-direction: column;
-  background-color: ${Theme.colors.cardHeader};
+  background-color: ${({ theme }) => theme.colors.cardHeader};
   padding: 0.33rem 0 0.33rem 1rem;
   border-bottom: 1px solid;
 `;

diff --git a/ui/src/pages/Home/TasksView/components/SimpleTaskCard/index.tsx b/ui/src/pages/Home/TasksView/components/SimpleTaskCard/index.tsx
@@ -11,7 +11,6 @@ import { Delete, Build, Save } from "@mui/icons-material";
 import { Paper, Card } from "@mui/material";
 
 import Typography from "@mui/material/Typography";
-import Theme from "styles/theme";
 
 // interface TaskProps {
 //   id: number;
@@ -76,8 +75,9 @@ export const SimpleTaskCard = ({
   return (
     <Card
       elevation={3}
-      style={{
-        border: `2px solid ${Theme.colors.border}`,
+      sx={{
+        border: "2px solid",
+        borderColor: "divider",
         borderRadius: "4px",
         margin: "0.5rem 0.2rem",
         overflow: "hidden",

diff --git a/ui/src/pages/Home/TasksView/tasks.page.tsx b/ui/src/pages/Home/TasksView/tasks.page.tsx
@@ -6,7 +6,6 @@ import { TaskCard } from "pages/Home/components/TaskCard";
 import { NewTaskCard } from "pages/Home/components/NewTaskCard";
 
 import styled from "@emotion/styled/macro";
-import Theme from "styles/theme";
 import { useParams } from "react-router-dom";
 import { IProjectDetails, ITaskDetails } from "interfaces";
 import { Link as ReactLink } from "react-router-dom";
@@ -227,25 +226,29 @@ const ColumnContainer = styled.div`
   min-width: 400px;
   max-width: 600px;
   margin: 8px;
-  border: 1px solid ${Theme.colors.border};
-  background-color: ${Theme.colors.surface};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  background-color: ${({ theme }) => theme.colors.surface};
   border-radius: 2px;
 `;
 
 interface StyledDivProps {
   isDragging?: boolean;
 }
 const TaskContainer = styled.div<StyledDivProps>`
-  border: 1px solid ${Theme.colors.border};
+  border: 1px solid ${({ theme }) => theme.colors.border};
   padding: 8px;
   margin-bottom: 8px;
 
-  background-color: ${(props) =>
-    props.isDragging ? Theme.colors.grassGreenLight : Theme.colors.surface};
+  background-color: ${({ theme, isDragging }) =>
+    isDragging
+      ? theme.palette.mode === "dark"
+        ? theme.colors.grassGreenDark
+        : theme.colors.grassGreenLight
+      : theme.colors.surface};
 
   &:focus {
     outline: none;
-    border-color: ${Theme.colors.ocean};
+    border-color: ${({ theme }) => theme.colors.ocean};
   }
 `;
 
@@ -277,7 +280,7 @@ const ColumnsRowContainer = styled.div`
 `;
 
 const CardTitle = styled.div`
-  background-color: ${Theme.colors.cardHeader};
+  background-color: ${({ theme }) => theme.colors.cardHeader};
   padding: 0.33rem 0 0.33rem 1rem;
   border-bottom: 1px solid;
 `;
diff --git a/ui/src/pages/Home/components/GenericCard.tsx b/ui/src/pages/Home/components/GenericCard.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { Link as ReactLink } from "react-router-dom";
 import Link from "@mui/material/Link";
 import styled from "@emotion/styled/macro";
-import Theme from "styles/theme";
 
 interface CardProps {
   id: number;
@@ -42,13 +41,13 @@ export const GenericCard: React.FC<CardProps> = ({
 
 const CardContainer = styled.div`
   width: 30vmax;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin: 1.5rem 0.5rem 1.5rem 0.5rem;
   overflow: hidden;
 `;
 
 const CardTitle = styled.div`
-  background-color: ${Theme.colors.cardHeader};
+  background-color: ${({ theme }) => theme.colors.cardHeader};
   padding: 0.33rem 0 0.33rem 1rem;
   border-bottom: 1px solid;
 `;

diff --git a/ui/src/pages/Home/components/NewTaskCard.tsx b/ui/src/pages/Home/components/NewTaskCard.tsx
@@ -11,7 +11,6 @@ import { Delete, Build, Save } from "@mui/icons-material";
 import { Paper, Card } from "@mui/material";
 
 import Typography from "@mui/material/Typography";
-import Theme from "styles/theme";
 
 interface TaskProps {
   id: number;
@@ -77,8 +76,9 @@ export const ViewTaskCard = ({
   return (
     <Card
       elevation={3}
-      style={{
-        border: `2px solid ${Theme.colors.border}`,
+      sx={{
+        border: "2px solid",
+        borderColor: "divider",
         borderRadius: "4px",
         margin: "0.5rem 0.2rem",
         overflow: "hidden",

diff --git a/ui/src/pages/Home/components/TaskCard.tsx b/ui/src/pages/Home/components/TaskCard.tsx
@@ -11,7 +11,6 @@ import { Delete, Build, Save } from "@mui/icons-material";
 import { Paper, Card } from "@mui/material";
 
 import Typography from "@mui/material/Typography";
-import Theme from "styles/theme";
 
 interface TaskProps {
   id: number;
@@ -77,8 +76,9 @@ export const ViewTaskCard = ({
   return (
     <Card
       elevation={3}
-      style={{
-        border: `2px solid ${Theme.colors.border}`,
+      sx={{
+        border: "2px solid",
+        borderColor: "divider",
         borderRadius: "4px",
         margin: "0.5rem 0.2rem",
         overflow: "hidden",

diff --git a/ui/src/pages/Home/components/styled.ts b/ui/src/pages/Home/components/styled.ts
@@ -1,23 +1,22 @@
 import styled from "@emotion/styled/macro";
-import Theme from "styles/theme";
 
 const ProjectCardContainer = styled.div`
   width: 30vmax;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin: 1.5rem 0.5rem 1.5rem 0.5rem;
   overflow: hidden;
 `;
 
 const TasklistCardContainer = styled.div`
   width: 30vmax;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin: 1.5rem 0.5rem 1.5rem 0.5rem;
   overflow: hidden;
 `;
 
 const TaskContainer = styled.div`
   width: 30vmax;
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   border-radius: 4px;
   margin: 0.5rem 0.2rem;
   overflow: hidden;
@@ -31,7 +30,7 @@ const CardTitle = styled.div`
 const CardCreateTitle = styled.div`
   display: flex;
   flex-direction: column;
-  background-color: ${Theme.colors.cardHeader};
+  background-color: ${({ theme }) => theme.colors.cardHeader};
   padding: 0.33rem 0 0.33rem 1rem;
   border-bottom: 1px solid;
 `;

diff --git a/ui/src/pages/Home/home.style.tsx b/ui/src/pages/Home/home.style.tsx
@@ -1,15 +1,14 @@
 import styled from "@emotion/styled";
-import Theme from "styles/theme";
 
 export const MainWrapper = styled.main`
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin-bottom: 25px;
   padding-right: 10px;
   overflow: hidden;
 `;
 
 export const MainContent = styled.main`
-  border: 2px solid ${Theme.colors.border};
+  border: 2px solid ${({ theme }) => theme.colors.border};
   margin-bottom: 25px;
   padding-right: 10px;
   overflow: hidden;

diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx
@@ -7,6 +7,7 @@ import { Logo } from "../../components/logo";
 import { Spinner, FormGroup, CircleButton } from "../../components/lib";
 import { TextField } from "@mui/material";
 import { display } from "@mui/system";
+import { useTheme } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import { AxiosResponse } from "axios";
 import { IUserSession } from "interfaces/users";
@@ -79,9 +80,18 @@ interface LoginPropsInterface {
 }
 
 export const Login = ({ login, register }: LoginPropsInterface) => {
+  const theme = useTheme();
   const [openModal, setOpenModal] = React.useState("none");
   const [error, setError] = React.useState("");
 
+  // @reach/dialog ships a fixed white background — inline style wins the
+  // cascade, so theme the dialog surface here for dark mode support.
+  const dialogStyle: React.CSSProperties = {
+    borderRadius: "4px",
+    background: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+  };
+
   const handleLogin = (formData: UserCredentialsFormDataType) => {
     console.log("login", formData);
     const loginToastId = toast.loading("Please wait...", {
@@ -175,7 +185,7 @@ export const Login = ({ login, register }: LoginPropsInterface) => {
       </div>
       {openModal === "login" && (
         <Dialog
-          style={{ borderRadius: "4px" }}
+          style={dialogStyle}
           aria-label="login form"
           isOpen={openModal === "login"}
         >
@@ -191,7 +201,7 @@ export const Login = ({ login, register }: LoginPropsInterface) => {
       )}
       {openModal === "register" && (
         <Dialog
-          style={{ borderRadius: "4px" }}
+          style={dialogStyle}
           aria-label="register form"
           isOpen={openModal === "register"}
         >