From c154329f565eca15362817d70e1a6f7e1294430c Mon Sep 17 00:00:00 2001
From: andrewbell-ai <andrew.bell@gmail.com>
Date: Tue, 24 Mar 2026 13:14:32 -0700
Subject: [PATCH] dark mode

---
 src/App.jsx                                   | 43 ++++++++++++++++---
 src/features/lists/components/ListAddTask.jsx |  8 ++--
 src/features/lists/components/TaskBoard.jsx   | 28 ++++++------
 .../lists/components/TaskListConfig.jsx       | 24 +++++------
 src/features/tags/components/TagManager.jsx   | 22 +++++-----
 .../tasks/components/GlobalTaskForm.jsx       | 16 +++----
 src/features/tasks/components/TaskItem.jsx    | 16 +++----
 src/features/tasks/components/TaskList.jsx    |  4 +-
 src/index.css                                 |  6 +++
 9 files changed, 102 insertions(+), 65 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 8c97719..45f0912 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { PlusIcon } from '@heroicons/react/24/outline';
+import { PlusIcon, MoonIcon, SunIcon } from '@heroicons/react/24/outline';
 
 import { TaskProvider } from './context/TaskContext';
 import { TagProvider } from './context/TagContext';
@@ -11,23 +11,54 @@ import TaskBoard from './features/lists/components/TaskBoard';
 
 function App() {
   const [showInput, setShowInput] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+
+    const storedTheme = window.localStorage.getItem('task-dashboard.theme');
+    if (storedTheme) {
+      return storedTheme === 'dark';
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.documentElement.classList.toggle('dark', isDarkMode);
+    }
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('task-dashboard.theme', isDarkMode ? 'dark' : 'light');
+    }
+  }, [isDarkMode]);
 
   return (
     <TaskProvider>
       <TagProvider>
         <ListProvider>
-          <div className="App min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 flex flex-col items-center py-12 px-4" data-testid="app">
+          <div className="App min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-neutral-950 dark:via-slate-950 dark:to-neutral-900 flex flex-col items-center py-12 px-4 transition-colors duration-300" data-testid="app">
             <div className="w-full max-w-6xl">
               <motion.div 
-                className="mb-6 bg-white rounded-2xl shadow-soft p-6"
+                className="mb-6 bg-white dark:bg-neutral-900 dark:border dark:border-neutral-800 rounded-2xl shadow-soft p-6 transition-colors duration-300"
                 initial={{ opacity: 0, y: -20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5 }}
                 data-testid="app-header"
               >
                 <div className="flex justify-between items-center mb-6">
-                  <h1 className="text-3xl font-bold text-neutral-800 tracking-tight">Task Dashboard</h1>
-                  {/* Stats will be displayed from TaskContext */}
+                  <h1 className="text-3xl font-bold text-neutral-800 dark:text-neutral-100 tracking-tight">Task Dashboard</h1>
+                  <button
+                    type="button"
+                    className="inline-flex items-center gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white/70 dark:bg-neutral-800 px-3 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
+                    onClick={() => setIsDarkMode(prev => !prev)}
+                    data-testid="theme-toggle-button"
+                    aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+                  >
+                    {isDarkMode ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
+                    {isDarkMode ? 'Light' : 'Dark'}
+                  </button>
                 </div>
                 
                 <AnimatePresence>
diff --git a/src/features/lists/components/ListAddTask.jsx b/src/features/lists/components/ListAddTask.jsx
index 03d8cb2..eb34d2c 100644
--- a/src/features/lists/components/ListAddTask.jsx
+++ b/src/features/lists/components/ListAddTask.jsx
@@ -48,7 +48,7 @@ function ListAddTask({ onCancel, listFilters }) {
           placeholder="Add a task to this list..."
           value={text}
           onChange={(e) => setText(e.target.value)}
-          className="w-full py-2 px-4 pr-20 text-sm text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
+          className="w-full py-2 px-4 pr-20 text-sm text-neutral-800 dark:text-neutral-100 dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
           autoComplete="off"
           data-testid="list-task-input"
         />
@@ -56,7 +56,7 @@ function ListAddTask({ onCancel, listFilters }) {
           <motion.button
             type="button"
             onClick={onCancel}
-            className="p-1.5 text-neutral-500 hover:text-neutral-700 rounded-full hover:bg-neutral-100 transition-colors"
+            className="p-1.5 text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-neutral-100 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors"
             whileTap={{ scale: 0.9 }}
             data-testid="list-cancel-button"
           >
@@ -81,7 +81,7 @@ function ListAddTask({ onCancel, listFilters }) {
       {/* Show tags that will be automatically applied */}
       {getTagFilters().length > 0 && (
         <div className="mt-2 mb-1 px-1" data-testid="auto-applied-tags">
-          <p className="text-xs text-neutral-500">
+          <p className="text-xs text-neutral-500 dark:text-neutral-400">
             Will be tagged with: 
             <span className="font-medium ml-1 text-primary-600">
               {getTagFilters().join(', ')}
@@ -93,4 +93,4 @@ function ListAddTask({ onCancel, listFilters }) {
   );
 }
 
-export default ListAddTask;
\ No newline at end of file
+export default ListAddTask;
diff --git a/src/features/lists/components/TaskBoard.jsx b/src/features/lists/components/TaskBoard.jsx
index abebd8f..00d9708 100644
--- a/src/features/lists/components/TaskBoard.jsx
+++ b/src/features/lists/components/TaskBoard.jsx
@@ -74,10 +74,10 @@ function TaskBoard() {
   return (
     <div className="task-board" data-testid="task-board">
       <div className="mb-4 flex justify-between items-center">
-        <h2 className="font-semibold text-lg text-neutral-700">Task Lists</h2>
+        <h2 className="font-semibold text-lg text-neutral-700 dark:text-neutral-200">Task Lists</h2>
         <button 
           type="button"
-          className="flex items-center text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors px-3 py-1.5 hover:bg-primary-50 rounded-lg"
+          className="flex items-center text-sm font-medium text-primary-600 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200 transition-colors px-3 py-1.5 hover:bg-primary-50 dark:hover:bg-neutral-800 rounded-lg"
           onClick={handleManageTags}
           data-testid="manage-tags-button"
         >
@@ -120,7 +120,7 @@ function TaskBoard() {
           return (
             <div 
               key={list.id} 
-              className="task-list-container bg-white rounded-xl shadow-soft w-full flex flex-col"
+              className="task-list-container bg-white dark:bg-neutral-900 dark:border dark:border-neutral-800 rounded-xl shadow-soft w-full flex flex-col transition-colors duration-300"
               data-testid={`task-list-${list.id}`}
             >
               {editingListId === list.id ? (
@@ -131,18 +131,18 @@ function TaskBoard() {
                 />
               ) : (
                 <>
-                  <div className="list-header p-4 border-b border-neutral-100 flex justify-between items-center">
-                    <h2 className="font-medium text-lg" data-testid={`list-title-${list.id}`}>{list.title}</h2>
+                  <div className="list-header p-4 border-b border-neutral-100 dark:border-neutral-800 flex justify-between items-center">
+                    <h2 className="font-medium text-lg text-neutral-800 dark:text-neutral-100" data-testid={`list-title-${list.id}`}>{list.title}</h2>
                     <div className="flex items-center gap-2">
                       <span 
-                        className="text-xs font-medium text-neutral-500 bg-neutral-100 px-2 py-0.5 rounded-xs"
+                        className="text-xs font-medium text-neutral-500 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-xs"
                         data-testid={`task-count-${list.id}`}
                       >
                         {completedTasksCount}/{filteredTasks.length}
                       </span>
                       <button 
                         type="button"
-                        className="text-sm text-neutral-500 hover:text-neutral-700 px-2 py-1 hover:bg-neutral-100 rounded-xs"
+                          className="text-sm text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-neutral-100 px-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xs"
                         onClick={() => handleEditTaskList(list.id)}
                         data-testid={`edit-list-${list.id}`}
                       >
@@ -151,7 +151,7 @@ function TaskBoard() {
                       {list.id !== 'default' && (
                         <button 
                           type="button"
-                          className="text-sm text-rose-500 hover:text-rose-700 px-2 py-1 hover:bg-rose-50 rounded-xs"
+                          className="text-sm text-rose-500 hover:text-rose-700 px-2 py-1 hover:bg-rose-50 dark:hover:bg-rose-950/40 rounded-xs"
                           onClick={() => deleteTaskList(list.id)}
                           data-testid={`delete-list-${list.id}`}
                         >
@@ -174,7 +174,7 @@ function TaskBoard() {
                       <button
                         type="button"
                         onClick={() => handleAddTaskToList(list.id)}
-                        className="mb-3 w-full py-2 px-3 flex items-center justify-center text-sm text-neutral-600 hover:text-primary-600 bg-neutral-50 hover:bg-neutral-100 rounded-lg border border-dashed border-neutral-300 hover:border-primary-300 transition-colors"
+                        className="mb-3 w-full py-2 px-3 flex items-center justify-center text-sm text-neutral-600 dark:text-neutral-300 hover:text-primary-600 dark:hover:text-primary-300 bg-neutral-50 dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 hover:border-primary-300 transition-colors"
                         data-testid={`add-task-to-list-${list.id}`}
                       >
                         <PlusIcon className="h-4 w-4 mr-1.5" />
@@ -187,11 +187,11 @@ function TaskBoard() {
                   
                   {/* List action buttons */}
                   {filteredTasks.length > 0 && (
-                    <div className="list-actions p-3 border-t border-neutral-100 flex justify-between">
+                    <div className="list-actions p-3 border-t border-neutral-100 dark:border-neutral-800 flex justify-between">
                       <motion.button 
                         type="button"
                         onClick={() => handleCompleteListTasks(list.id)} 
-                        className="flex items-center text-xs font-medium text-primary-600 hover:text-primary-800 transition-colors px-2 py-1 hover:bg-primary-50 rounded-lg"
+                        className="flex items-center text-xs font-medium text-primary-600 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200 transition-colors px-2 py-1 hover:bg-primary-50 dark:hover:bg-neutral-800 rounded-lg"
                         disabled={allTasksCompleted}
                         whileHover={{ scale: allTasksCompleted ? 1 : 1.02 }}
                         whileTap={{ scale: allTasksCompleted ? 1 : 0.98 }}
@@ -204,7 +204,7 @@ function TaskBoard() {
                       <motion.button 
                         type="button"
                         onClick={() => handleDeleteListCompletedTasks(list.id)} 
-                        className="flex items-center text-xs font-medium text-rose-500 hover:text-rose-700 transition-colors px-2 py-1 hover:bg-rose-50 rounded-lg"
+                        className="flex items-center text-xs font-medium text-rose-500 hover:text-rose-700 transition-colors px-2 py-1 hover:bg-rose-50 dark:hover:bg-rose-950/40 rounded-lg"
                         disabled={!hasCompletedTasks}
                         whileHover={{ scale: !hasCompletedTasks ? 1 : 1.02 }}
                         whileTap={{ scale: !hasCompletedTasks ? 1 : 0.98 }}
@@ -224,7 +224,7 @@ function TaskBoard() {
         {/* Add new task list button */}
         <motion.button
           type="button"
-          className="add-list-button h-48 rounded-xl border-2 border-dashed border-neutral-200 flex flex-col items-center justify-center text-neutral-400 hover:text-primary-600 hover:border-primary-300 transition-colors"
+          className="add-list-button h-48 rounded-xl border-2 border-dashed border-neutral-200 dark:border-neutral-700 flex flex-col items-center justify-center text-neutral-400 dark:text-neutral-500 hover:text-primary-600 dark:hover:text-primary-300 hover:border-primary-300 transition-colors"
           onClick={addTaskList}
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
@@ -238,4 +238,4 @@ function TaskBoard() {
   );
 }
 
-export default TaskBoard;
\ No newline at end of file
+export default TaskBoard;
diff --git a/src/features/lists/components/TaskListConfig.jsx b/src/features/lists/components/TaskListConfig.jsx
index ccc3b08..b25fc73 100644
--- a/src/features/lists/components/TaskListConfig.jsx
+++ b/src/features/lists/components/TaskListConfig.jsx
@@ -36,17 +36,17 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
 
   return (
     <div className="task-list-config p-4" data-testid="task-list-config">
-      <h3 className="font-medium text-lg mb-4">Configure List</h3>
+      <h3 className="font-medium text-lg mb-4 text-neutral-800 dark:text-neutral-100">Configure List</h3>
       
       {/* List title input */}
       <div className="mb-4">
-        <label className="block text-sm font-medium text-neutral-700 mb-1" htmlFor="list-title">List Title</label>
+        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1" htmlFor="list-title">List Title</label>
         <input
           id="list-title"
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-hidden focus:ring-1 focus:ring-primary-500"
+          className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 rounded-md focus:outline-hidden focus:ring-1 focus:ring-primary-500"
           placeholder="Enter list title"
           data-testid="list-title-input"
         />
@@ -54,14 +54,14 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
       
       {/* Current filters */}
       <div className="mb-4">
-        <label className="block text-sm font-medium text-neutral-700 mb-1">Current Filters</label>
+        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Current Filters</label>
         
         {filters.length === 0 ? (
-          <p className="text-sm text-neutral-500" data-testid="no-filters-message">No filters applied. This list will show all tasks.</p>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400" data-testid="no-filters-message">No filters applied. This list will show all tasks.</p>
         ) : (
           <div className="flex flex-wrap gap-2" data-testid="filter-list">
             {filters.map((filter, index) => (
-              <div key={index} className="inline-flex items-center bg-neutral-100 px-3 py-1 rounded-full text-sm" data-testid={`filter-item-${index}`}>
+              <div key={index} className="inline-flex items-center bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 px-3 py-1 rounded-full text-sm" data-testid={`filter-item-${index}`}>
                 {filter.type === 'tag' && (
                   <span>Tag: {filter.value}</span>
                 )}
@@ -71,7 +71,7 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
                 <button 
                   type="button"
                   onClick={() => removeFilter(index)}
-                  className="ml-1 text-neutral-500 hover:text-neutral-700"
+                  className="ml-1 text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
                   data-testid={`remove-filter-${index}`}
                 >
                   <XMarkIcon className="h-4 w-4" />
@@ -84,9 +84,9 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
       
       {/* Add tag filter */}
       <div className="mb-4">
-        <label className="block text-sm font-medium text-neutral-700 mb-1">Filter by Tag</label>
+        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Filter by Tag</label>
         {tags.length === 0 ? (
-          <p className="text-sm text-neutral-500" data-testid="no-tags-available-message">No tags available. Add tags to tasks first.</p>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400" data-testid="no-tags-available-message">No tags available. Add tags to tasks first.</p>
         ) : (
           <div className="flex flex-wrap gap-2" data-testid="available-tags">
             {tags.map((tag) => (
@@ -112,7 +112,7 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
       
       {/* Add completion filter */}
       <div className="mb-6">
-        <label className="block text-sm font-medium text-neutral-700 mb-1">Filter by Status</label>
+        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Filter by Status</label>
         <div className="flex gap-2">
           <button
             type="button"
@@ -148,7 +148,7 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
         <button
           type="button"
           onClick={onCancel}
-          className="px-4 py-2 border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50"
+          className="px-4 py-2 border border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-200 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-800"
           data-testid="cancel-config"
         >
           Cancel
@@ -166,4 +166,4 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
   );
 }
 
-export default TaskListConfig;
\ No newline at end of file
+export default TaskListConfig;
diff --git a/src/features/tags/components/TagManager.jsx b/src/features/tags/components/TagManager.jsx
index aa54507..5a22bee 100644
--- a/src/features/tags/components/TagManager.jsx
+++ b/src/features/tags/components/TagManager.jsx
@@ -42,11 +42,11 @@ function TagManager({ onClose }) {
   };
 
   return (
-    <div className="tag-manager bg-white rounded-xl shadow-lg p-5" data-testid="tag-manager">
+    <div className="tag-manager bg-white dark:bg-neutral-900 dark:border dark:border-neutral-800 rounded-xl shadow-lg p-5 transition-colors duration-300" data-testid="tag-manager">
       <div className="flex justify-between items-center mb-4">
-        <h3 className="text-lg font-medium text-neutral-800">Manage Tags</h3>
+        <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-100">Manage Tags</h3>
         <button
-          className="p-2 text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 rounded-full transition-colors"
+          className="p-2 text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full transition-colors"
           onClick={onClose}
           data-testid="close-tag-manager"
         >
@@ -59,14 +59,14 @@ function TagManager({ onClose }) {
         <div className="flex gap-2">
           <div className="relative grow">
             <div className="absolute left-3 top-1/2 -translate-y-1/2">
-              <TagIcon className="h-4 w-4 text-neutral-500" />
+              <TagIcon className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
             </div>
             <input
               type="text"
               placeholder="Add a new tag"
               value={newTagName}
               onChange={(e) => setNewTagName(e.target.value)}
-              className="w-full py-2 px-4 pl-9 text-sm text-neutral-800 rounded-lg border border-neutral-300 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
+              className="w-full py-2 px-4 pl-9 text-sm text-neutral-800 dark:text-neutral-100 dark:bg-neutral-800 rounded-lg border border-neutral-300 dark:border-neutral-700 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
               data-testid="new-tag-input"
             />
           </div>
@@ -89,12 +89,12 @@ function TagManager({ onClose }) {
       {/* Tag list */}
       <div className="flex flex-col gap-2 max-h-64 overflow-y-auto" data-testid="tag-list">
         {tags.length === 0 ? (
-          <p className="text-center text-neutral-500 py-3" data-testid="no-tags-message">No tags yet</p>
+          <p className="text-center text-neutral-500 dark:text-neutral-400 py-3" data-testid="no-tags-message">No tags yet</p>
         ) : (
           tags.map((tag, index) => (
             <div 
               key={index} 
-              className="flex items-center justify-between p-2 bg-neutral-50 hover:bg-neutral-100 rounded-lg transition-colors"
+              className="flex items-center justify-between p-2 bg-neutral-50 dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors"
               data-testid={`tag-item-${tag}`}
             >
               {editingTag === tag ? (
@@ -102,14 +102,14 @@ function TagManager({ onClose }) {
                   type="text"
                   value={editedTagName}
                   onChange={(e) => setEditedTagName(e.target.value)}
-                  className="w-full py-1 px-2 text-sm border border-primary-300 rounded-xs focus:outline-hidden focus:ring-1 focus:ring-primary-500"
+                  className="w-full py-1 px-2 text-sm border border-primary-300 dark:bg-neutral-900 dark:text-neutral-100 rounded-xs focus:outline-hidden focus:ring-1 focus:ring-primary-500"
                   autoFocus
                   data-testid="edit-tag-input"
                 />
               ) : (
                 <div className="flex items-center">
                   <TagIcon className="h-4 w-4 text-primary-600 mr-2" />
-                  <span className="text-neutral-800">{tag}</span>
+                  <span className="text-neutral-800 dark:text-neutral-100">{tag}</span>
                 </div>
               )}
               
@@ -125,7 +125,7 @@ function TagManager({ onClose }) {
                       <CheckIcon className="h-4 w-4" />
                     </motion.button>
                     <motion.button
-                      className="p-1.5 text-neutral-500 hover:bg-neutral-200 rounded-full"
+                      className="p-1.5 text-neutral-500 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-full"
                       onClick={() => setEditingTag(null)}
                       whileTap={{ scale: 0.9 }}
                       data-testid="cancel-tag-edit"
@@ -162,4 +162,4 @@ function TagManager({ onClose }) {
   );
 }
 
-export default TagManager;
\ No newline at end of file
+export default TagManager;
diff --git a/src/features/tasks/components/GlobalTaskForm.jsx b/src/features/tasks/components/GlobalTaskForm.jsx
index a22f707..9cbf2c2 100644
--- a/src/features/tasks/components/GlobalTaskForm.jsx
+++ b/src/features/tasks/components/GlobalTaskForm.jsx
@@ -80,7 +80,7 @@ function GlobalTaskForm({ onCancel }) {
           placeholder="What needs to be done?"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full py-3 px-4 pr-24 text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-2 focus:ring-primary-200 outline-hidden transition-all"
+          className="w-full py-3 px-4 pr-24 text-neutral-800 dark:text-neutral-100 dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 focus:border-primary-400 focus:ring-2 focus:ring-primary-200 outline-hidden transition-all"
           autoComplete="off"
           data-testid="task-input"
         />
@@ -88,7 +88,7 @@ function GlobalTaskForm({ onCancel }) {
           <motion.button
             type="button"
             onClick={onCancel}
-            className="p-2 text-neutral-500 hover:text-neutral-700 rounded-full hover:bg-neutral-100 transition-colors"
+            className="p-2 text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-neutral-100 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors"
             whileTap={{ scale: 0.9 }}
             data-testid="cancel-button"
           >
@@ -114,7 +114,7 @@ function GlobalTaskForm({ onCancel }) {
       <div className="mb-3">
         <div className="relative">
           <div className="absolute left-3 top-1/2 -translate-y-1/2">
-            <TagIcon className="h-4 w-4 text-neutral-500" />
+            <TagIcon className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
           </div>
           <input
             type="text"
@@ -122,7 +122,7 @@ function GlobalTaskForm({ onCancel }) {
             value={newTagInput}
             onChange={(e) => setNewTagInput(e.target.value)}
             onKeyDown={handleTagKeyDown}
-            className="w-full py-3 px-4 pl-9 text-sm text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
+            className="w-full py-3 px-4 pl-9 text-sm text-neutral-800 dark:text-neutral-100 dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
             autoComplete="off"
             data-testid="tag-input"
           />
@@ -143,7 +143,7 @@ function GlobalTaskForm({ onCancel }) {
         {/* Matching tag suggestions - only shown when input matches existing tags */}
         {getMatchingTags().length > 0 && (
           <div className="mt-2" data-testid="tag-suggestions">
-            <p className="text-xs font-medium text-neutral-500 mb-1.5">Select matching tag:</p>
+            <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1.5">Select matching tag:</p>
             <div className="flex flex-wrap gap-2">
               {getMatchingTags().map((tag, index) => (
                 <button
@@ -165,8 +165,8 @@ function GlobalTaskForm({ onCancel }) {
       {/* Selected tags display */}
       {selectedTags.length > 0 && (
         <div className="mb-1" data-testid="selected-tags">
-          <p className="text-xs font-medium text-neutral-500 mb-2">Selected tags:</p>
-          <div className="flex flex-wrap gap-2 p-2 bg-neutral-50 rounded-lg">
+          <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-2">Selected tags:</p>
+          <div className="flex flex-wrap gap-2 p-2 bg-neutral-50 dark:bg-neutral-800 rounded-lg">
             {selectedTags.map((tag, index) => (
               <div 
                 key={index} 
@@ -195,4 +195,4 @@ function GlobalTaskForm({ onCancel }) {
   );
 }
 
-export default GlobalTaskForm;
\ No newline at end of file
+export default GlobalTaskForm;
diff --git a/src/features/tasks/components/TaskItem.jsx b/src/features/tasks/components/TaskItem.jsx
index 7e5516b..77b384c 100644
--- a/src/features/tasks/components/TaskItem.jsx
+++ b/src/features/tasks/components/TaskItem.jsx
@@ -10,8 +10,8 @@ function TaskItem({ task }) {
     <div 
       className={`task-transition rounded-xl border ${
         task.isCompleted 
-          ? 'border-green-100 bg-green-50' 
-          : 'border-neutral-100 hover:border-primary-100 bg-white hover:bg-primary-50/30'
+          ? 'border-green-100 bg-green-50 dark:border-green-900/60 dark:bg-green-950/30' 
+          : 'border-neutral-100 hover:border-primary-100 bg-white dark:bg-neutral-900 dark:border-neutral-800 hover:bg-primary-50/30 dark:hover:bg-neutral-800'
       } p-4 shadow-xs hover:shadow-md transition-all duration-200`}
     >
       <div className="flex items-center justify-between">
@@ -30,8 +30,8 @@ function TaskItem({ task }) {
           <p 
             className={`text-left text-base cursor-pointer ${
               task.isCompleted 
-                ? 'line-through text-neutral-500' 
-                : 'text-neutral-800'
+                ? 'line-through text-neutral-500 dark:text-neutral-400' 
+                : 'text-neutral-800 dark:text-neutral-100'
             }`}
             onClick={() => toggleTask(task.id)}
             data-testid={`task-text-${task.id}`}
@@ -43,8 +43,8 @@ function TaskItem({ task }) {
         <motion.button
           className={`delete-btn p-2 rounded-full ${
             task.isCompleted 
-              ? 'bg-rose-100 text-rose-600 hover:bg-rose-200' 
-              : 'bg-transparent text-neutral-400 hover:bg-neutral-100'
+              ? 'bg-rose-100 text-rose-600 hover:bg-rose-200 dark:bg-rose-950/40 dark:hover:bg-rose-900/50' 
+              : 'bg-transparent text-neutral-400 dark:text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800'
           } transition-colors`}
           onClick={() => deleteTask(task.id)}
           whileHover={{ scale: 1.05 }}
@@ -61,7 +61,7 @@ function TaskItem({ task }) {
           {task.tags.map((tag, index) => (
             <div 
               key={index} 
-              className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-800"
+              className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-950/50 dark:text-primary-200"
             >
               <TagIcon className="h-3 w-3 mr-1" />
               {tag}
@@ -73,4 +73,4 @@ function TaskItem({ task }) {
   );
 }
 
-export default TaskItem;
\ No newline at end of file
+export default TaskItem;
diff --git a/src/features/tasks/components/TaskList.jsx b/src/features/tasks/components/TaskList.jsx
index 85416a5..08a169a 100644
--- a/src/features/tasks/components/TaskList.jsx
+++ b/src/features/tasks/components/TaskList.jsx
@@ -23,7 +23,7 @@ function TaskList({ tasks }) {
           <motion.p 
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
-            className="text-center text-neutral-500 py-4 font-medium"
+            className="text-center text-neutral-500 dark:text-neutral-400 py-4 font-medium"
             data-testid="empty-task-message"
           >
             All tasks are complete!
@@ -34,4 +34,4 @@ function TaskList({ tasks }) {
   );
 }
 
-export default TaskList;
\ No newline at end of file
+export default TaskList;
diff --git a/src/index.css b/src/index.css
index 2ae1d71..979411e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -106,6 +106,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: #f8fafc;
   color: #334155;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.dark body {
+  background-color: #0a0a0f;
+  color: #e4e4e7;
 }
 
 code {