diff --git a/lib/features/workspace/pages/desktop/workspace_desktop.dart b/lib/features/workspace/pages/desktop/workspace_desktop.dart
index 482ec5e..469a461 100644
--- a/lib/features/workspace/pages/desktop/workspace_desktop.dart
+++ b/lib/features/workspace/pages/desktop/workspace_desktop.dart
@@ -37,7 +37,7 @@ class WorkspaceDesktop extends StatelessWidget {
               const WorkspaceDrawer(),
               SizedBox(width: 20.w),
               Positioned(top: 0, left: 0.21.sw, child: UndoRedoButton(su: suprovider,)),
-              Positioned(top: 0, right: 0.001.sw, child: ExportProjectButton()),
+              Positioned(top: 0, right: 0.001.sw, child: ExportProjectButton(su: suprovider,)),
 
               Positioned(right: 0, top: 0.10.sh, child: ToolBar()),
 
diff --git a/lib/features/workspace/pages/mobile/workspace_mobile.dart b/lib/features/workspace/pages/mobile/workspace_mobile.dart
index 68cc14c..1551ca1 100644
--- a/lib/features/workspace/pages/mobile/workspace_mobile.dart
+++ b/lib/features/workspace/pages/mobile/workspace_mobile.dart
@@ -26,8 +26,8 @@ class WorkspaceMobile extends StatelessWidget {
   Widget build(BuildContext context) {
     rh.DeviceType device = rh.ResponsiveLayoutHelper.getDeviceType(context);
 
-    return Consumer2<WorkspaceProvider,SupabaseService>(
-      builder: (context, provider,suprovider, child) {
+    return Consumer2<WorkspaceProvider, SupabaseService>(
+      builder: (context, provider, suprovider, child) {
         return Scaffold(
           backgroundColor: provider.currentWorkspaceColor,
           body: Padding(
@@ -37,7 +37,11 @@ class WorkspaceMobile extends StatelessWidget {
               children: [
                 const CanvasPage(),
                 workspaceDrawerMob(device),
-                Positioned(top: 120.h, right: 0.h, child: UndoRedoButton(su: suprovider,)),
+                Positioned(
+                  top: 120.h,
+                  right: 0.h,
+                  child: UndoRedoButton(su: suprovider),
+                ),
                 Padding(
                   padding: EdgeInsets.only(bottom: 40.h),
                   child: Align(
@@ -103,9 +107,9 @@ class WorkspaceMobile extends StatelessWidget {
   }
 }
 
-Widget workspaceDrawerMob(rh.DeviceType device,) {
-  return Consumer<WorkspaceProvider>(
-    builder: (context, provider, child) {
+Widget workspaceDrawerMob(rh.DeviceType device) {
+  return Consumer2<WorkspaceProvider, SupabaseService>(
+    builder: (context, provider, suprovider, child) {
       Color defaultBorderColor = const Color(0xFFD9D9D9);
 
       // Check if currentWorkspace is set before accessing its properties
@@ -172,7 +176,7 @@ Widget workspaceDrawerMob(rh.DeviceType device,) {
                   onPressed: () {
                     showDialog(
                       context: context,
-                      builder: (context) => ExportDialog(),
+                      builder: (context) => ExportDialog(su: suprovider),
                     );
                   },
                   style: ElevatedButton.styleFrom(
diff --git a/lib/features/workspace/pages/tablet/workspace_tablet.dart b/lib/features/workspace/pages/tablet/workspace_tablet.dart
index 37f557b..46d404d 100644
--- a/lib/features/workspace/pages/tablet/workspace_tablet.dart
+++ b/lib/features/workspace/pages/tablet/workspace_tablet.dart
@@ -39,7 +39,7 @@ class WorkspaceTablet extends StatelessWidget {
                 Positioned(
                   top: 0,
                   right: 0.001.sw,
-                  child: ExportProjectButton(),
+                  child: ExportProjectButton(su: suprovider,),
                 ),
 
                 // Container(
diff --git a/lib/features/workspace/widgets/export_dialog.dart b/lib/features/workspace/widgets/export_dialog.dart
index 93eb5ae..5ba3811 100644
--- a/lib/features/workspace/widgets/export_dialog.dart
+++ b/lib/features/workspace/widgets/export_dialog.dart
@@ -1,10 +1,12 @@
+import 'package:cookethflow/core/providers/supabase_provider.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:phosphor_flutter/phosphor_flutter.dart';
 import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
 
 class ExportDialog extends StatefulWidget {
-  const ExportDialog({super.key});
+  final SupabaseService su;
+  const ExportDialog({super.key, required this.su});
 
   @override
   State<ExportDialog> createState() => _ExportDialogState();
@@ -24,7 +26,8 @@ class _ExportDialogState extends State<ExportDialog> {
         width: 320.w,
         padding: EdgeInsets.all(24.r),
         decoration: BoxDecoration(
-          color: Colors.white,
+          color:
+              widget.su.isDark ? Color.fromRGBO(48, 48, 48, 1) : Colors.white,
           borderRadius: BorderRadius.circular(16.r),
           boxShadow: [
             BoxShadow(
@@ -52,14 +55,26 @@ class _ExportDialogState extends State<ExportDialog> {
                             ? 22.sp
                             : 60.sp,
                     fontWeight: FontWeight.w600,
-                    color: const Color(0xFF111827),
+                    color:
+                        widget.su.isDark
+                            ? Colors.white
+                            : const Color(0xFF111827),
                   ),
                 ),
                 IconButton(
-                  icon: Icon(PhosphorIconsRegular.x, size:device == rh.DeviceType.desktop ? 24.sp : device == rh.DeviceType.tab ? 24.sp : 55.sp),
+                  icon: Icon(
+                    PhosphorIconsRegular.x,
+                    size:
+                        device == rh.DeviceType.desktop
+                            ? 24.sp
+                            : device == rh.DeviceType.tab
+                            ? 24.sp
+                            : 55.sp,
+                  ),
                   onPressed: () => Navigator.of(context).pop(),
                   padding: EdgeInsets.zero,
                   constraints: const BoxConstraints(),
+                  color: widget.su.isDark ? Colors.white : Colors.black,
                 ),
               ],
             ),
@@ -71,7 +86,15 @@ class _ExportDialogState extends State<ExportDialog> {
               children: [
                 Text(
                   'Export as',
-                  style: TextStyle(fontSize:device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp, color: Colors.grey[700]),
+                  style: TextStyle(
+                    fontSize:
+                        device == rh.DeviceType.desktop
+                            ? 16.sp
+                            : device == rh.DeviceType.tab
+                            ? 16.sp
+                            : 45.sp,
+                    color: widget.su.isDark ? Colors.white : Colors.grey[700],
+                  ),
                 ),
                 Container(
                   padding: EdgeInsets.symmetric(horizontal: 12.w),
@@ -82,7 +105,15 @@ class _ExportDialogState extends State<ExportDialog> {
                   child: DropdownButton<String>(
                     value: _selectedFormat,
                     underline: const SizedBox.shrink(),
-                    icon: Icon(PhosphorIconsRegular.caretDown, size:device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp),
+                    icon: Icon(
+                      PhosphorIconsRegular.caretDown,
+                      size:
+                          device == rh.DeviceType.desktop
+                              ? 16.sp
+                              : device == rh.DeviceType.tab
+                              ? 16.sp
+                              : 45.sp,
+                    ),
                     onChanged: (String? newValue) {
                       if (newValue != null) {
                         setState(() {
@@ -96,7 +127,18 @@ class _ExportDialogState extends State<ExportDialog> {
                             value: value,
                             child: Text(
                               value,
-                              style: TextStyle(fontSize: device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp),
+                              style: TextStyle(
+                                fontSize:
+                                    device == rh.DeviceType.desktop
+                                        ? 16.sp
+                                        : device == rh.DeviceType.tab
+                                        ? 16.sp
+                                        : 45.sp,
+                                color:
+                                    widget.su.isDark
+                                        ? Colors.white
+                                        : Colors.black,
+                              ),
                             ),
                           );
                         }).toList(),
@@ -127,7 +169,12 @@ class _ExportDialogState extends State<ExportDialog> {
                 child: Text(
                   'Export Flowchart',
                   style: TextStyle(
-                    fontSize:device == rh.DeviceType.desktop ? 16.sp : device == rh.DeviceType.tab ? 16.sp : 45.sp,
+                    fontSize:
+                        device == rh.DeviceType.desktop
+                            ? 16.sp
+                            : device == rh.DeviceType.tab
+                            ? 16.sp
+                            : 45.sp,
                     fontWeight: FontWeight.w600,
                   ),
                 ),
diff --git a/lib/features/workspace/widgets/export_project_button.dart b/lib/features/workspace/widgets/export_project_button.dart
index 6848099..82f4b25 100644
--- a/lib/features/workspace/widgets/export_project_button.dart
+++ b/lib/features/workspace/widgets/export_project_button.dart
@@ -1,4 +1,5 @@
 import 'package:cookethflow/core/helpers/responsive_layout.helper.dart' as rh;
+import 'package:cookethflow/core/providers/supabase_provider.dart';
 import 'package:cookethflow/core/theme/colors.dart';
 import 'package:cookethflow/features/workspace/widgets/export_dialog.dart';
 import 'package:flutter/material.dart';
@@ -6,14 +7,15 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:phosphor_flutter/phosphor_flutter.dart';
 
 class ExportProjectButton extends StatelessWidget {
-  const ExportProjectButton({super.key});
+  final SupabaseService su;
+  const ExportProjectButton({super.key, required this.su});
 
   @override
   Widget build(BuildContext context) {
-      final device = rh.ResponsiveLayoutHelper.getDeviceType(context);
+    final device = rh.ResponsiveLayoutHelper.getDeviceType(context);
     return ElevatedButton(
       onPressed: () {
-        showDialog(context: context, builder: (context) => ExportDialog(),);
+        showDialog(context: context, builder: (context) => ExportDialog(su: su,));
       },
       style: ElevatedButton.styleFrom(
         elevation: 0,
@@ -30,13 +32,17 @@ class ExportProjectButton extends StatelessWidget {
             'Export Flowchart',
             style: TextStyle(
               fontFamily: 'Fredrik',
-              fontSize:device == rh.DeviceType.desktop? 18.sp : 25.sp,
+              fontSize: device == rh.DeviceType.desktop ? 18.sp : 25.sp,
               color: Colors.white,
               fontWeight: FontWeight.w500,
             ),
           ),
           SizedBox(width: 16.w),
-          Icon(PhosphorIconsRegular.export, color: Colors.white, size:device == rh.DeviceType.desktop? 24.sp : 40.sp),
+          Icon(
+            PhosphorIconsRegular.export,
+            color: Colors.white,
+            size: device == rh.DeviceType.desktop ? 24.sp : 40.sp,
+          ),
         ],
       ),
     );
diff --git a/lib/features/workspace/widgets/node_colour.dart b/lib/features/workspace/widgets/node_colour.dart
index 34b3e7b..8b8771f 100644
--- a/lib/features/workspace/widgets/node_colour.dart
+++ b/lib/features/workspace/widgets/node_colour.dart
@@ -1,5 +1,7 @@
+import 'package:cookethflow/core/providers/supabase_provider.dart';
 import 'package:cookethflow/core/theme/colors.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class NodeColourPicker extends StatelessWidget {
   final ValueChanged<Color> onColorSelected;
@@ -13,16 +15,14 @@ class NodeColourPicker extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final su = context.read<SupabaseService>();
     return Dialog(
-      insetPadding: const EdgeInsets.symmetric(
-        horizontal: 20,
-        vertical: 20,
-      ),
+      insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
       child: Container(
         width: 320, // Adjusted width as mode buttons are removed
         padding: const EdgeInsets.all(20),
         decoration: BoxDecoration(
-          color: Colors.white,
+          color:su.isDark?Color.fromRGBO(48, 48, 48, 1): Colors.white,
           borderRadius: BorderRadius.circular(12),
           border: Border.all(color: const Color(0xFFE0E0E0), width: 1),
         ),
@@ -34,18 +34,15 @@ class NodeColourPicker extends StatelessWidget {
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                const Text(
+                 Text(
                   'Change Color',
-                  style: TextStyle(
-                    fontSize: 18,
-                    fontWeight: FontWeight.w600,
-                  ),
+                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: su.isDark?Colors.white:Colors.black),
                 ),
                 IconButton(
-                  icon: const Icon(
+                  icon:  Icon(
                     Icons.close,
                     size: 24,
-                    color: Colors.black54,
+                    color:su.isDark?Colors.white: Colors.black54,
                   ),
                   onPressed: () => Navigator.pop(context),
                   padding: EdgeInsets.zero,
@@ -62,25 +59,29 @@ class NodeColourPicker extends StatelessWidget {
                 Wrap(
                   spacing: 12, // Horizontal gap between color boxes
                   runSpacing: 12, // Vertical gap between rows
-                  children: secondaryColors
-                      .map((color) => _buildColorBox(
-                            color,
-                            isSelected: initialColor?.value == color.value,
-                          ))
-                      .toList(),
+                  children:
+                      secondaryColors
+                          .map(
+                            (color) => _buildColorBox(
+                              color,
+                              isSelected: initialColor?.value == color.value,
+                            ),
+                          )
+                          .toList(),
                 ),
                 const SizedBox(height: 12),
                 // Bottom row
                 Wrap(
                   spacing: 12, // Horizontal gap between color boxes
                   runSpacing: 12,
-                  children: tertiaryColors.asMap().entries.map((entry) {
-                    Color color = entry.value;
-                    return _buildColorBox(
-                      color,
-                      isSelected: initialColor?.value == color.value,
-                    );
-                  }).toList(),
+                  children:
+                      tertiaryColors.asMap().entries.map((entry) {
+                        Color color = entry.value;
+                        return _buildColorBox(
+                          color,
+                          isSelected: initialColor?.value == color.value,
+                        );
+                      }).toList(),
                 ),
               ],
             ),
@@ -90,10 +91,7 @@ class NodeColourPicker extends StatelessWidget {
     );
   }
 
-  Widget _buildColorBox(
-    Color color, {
-    bool isSelected = false,
-  }) {
+  Widget _buildColorBox(Color color, {bool isSelected = false}) {
     return GestureDetector(
       onTap: () {
         onColorSelected(color);
@@ -104,14 +102,16 @@ class NodeColourPicker extends StatelessWidget {
         decoration: BoxDecoration(
           color: color,
           borderRadius: BorderRadius.circular(4), // Added border radius
-          border: isSelected
-              ? Border.all(
-                  color: Colors.blue,
-                  width: 2.5,
-                  strokeAlign: BorderSide.strokeAlignOutside)
-              : Border.all(color: Colors.grey.shade300, width: 1),
+          border:
+              isSelected
+                  ? Border.all(
+                    color: Colors.blue,
+                    width: 2.5,
+                    strokeAlign: BorderSide.strokeAlignOutside,
+                  )
+                  : Border.all(color: Colors.grey.shade300, width: 1),
         ),
       ),
     );
   }
-}
\ No newline at end of file
+}
diff --git a/lib/features/workspace/widgets/node_editing_toolbox.dart b/lib/features/workspace/widgets/node_editing_toolbox.dart
index 13abe93..2bc5ce9 100644
--- a/lib/features/workspace/widgets/node_editing_toolbox.dart
+++ b/lib/features/workspace/widgets/node_editing_toolbox.dart
@@ -30,11 +30,12 @@ class NodeEditingToolbox extends StatelessWidget {
     required VoidCallback onPressed,
     required String tooltip,
     Color? color,
+    required SupabaseService su,
   }) {
     return IconButton(
       icon: Icon(icon, size: 22),
       onPressed: onPressed,
-      color: color ?? Colors.black87,
+      color: color ??(su.isDark?Colors.white: Colors.black87),
       splashRadius: 20,
       tooltip: tooltip,
       padding: const EdgeInsets.all(8),
@@ -76,9 +77,11 @@ class NodeEditingToolbox extends StatelessWidget {
                     },
                     su: provider2,
                   ),
+                  
             );
           },
           tooltip: 'Change Shape',
+          su: provider2
         ),
       );
       buttons.add(_buildDivider());
@@ -106,6 +109,7 @@ class NodeEditingToolbox extends StatelessWidget {
             );
           },
           tooltip: 'Change Color',
+          su: provider2
         ),
       );
       buttons.add(_buildDivider());
@@ -121,6 +125,7 @@ class NodeEditingToolbox extends StatelessWidget {
         },
         tooltip: 'Delete Object',
         color: Colors.redAccent,
+        su: provider2
       ),
     );
 
@@ -129,7 +134,8 @@ class NodeEditingToolbox extends StatelessWidget {
       child: Container(
         padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
         decoration: BoxDecoration(
-          color: Colors.white,
+          color:
+              provider2.isDark ? Color.fromRGBO(48, 48, 48, 1) : Colors.white,
           borderRadius: BorderRadius.circular(10),
           border: Border.all(color: Colors.grey.shade300),
           boxShadow: [
diff --git a/lib/features/workspace/widgets/object_text_editor.dart b/lib/features/workspace/widgets/object_text_editor.dart
index 798f77c..a264359 100644
--- a/lib/features/workspace/widgets/object_text_editor.dart
+++ b/lib/features/workspace/widgets/object_text_editor.dart
@@ -1,5 +1,6 @@
 // lib/features/workspace/widgets/object_text_editor.dart
 
+import 'package:cookethflow/core/providers/supabase_provider.dart';
 import 'package:cookethflow/core/utils/enums.dart';
 import 'package:cookethflow/features/workspace/providers/canvas_provider.dart';
 import 'package:cookethflow/features/workspace/providers/workspace_provider.dart';
@@ -47,12 +48,13 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
   @override
   Widget build(BuildContext context) {
     final device = rh.ResponsiveLayoutHelper.getDeviceType(context);
-    return Consumer2<WorkspaceProvider, CanvasProvider>(
-      builder: (context, workspaceProvider, canvasProvider, child) {
+    return Consumer3<WorkspaceProvider, CanvasProvider, SupabaseService>(
+      builder: (context, workspaceProvider, canvasProvider, suprovider, child) {
         final selectedObjectId = workspaceProvider.currentlySelectedObjectId;
-        final selectedObject = selectedObjectId != null
-            ? workspaceProvider.canvasObjects[selectedObjectId]
-            : null;
+        final selectedObject =
+            selectedObjectId != null
+                ? workspaceProvider.canvasObjects[selectedObjectId]
+                : null;
 
         if (workspaceProvider.interactionMode != InteractionMode.editingText ||
             selectedObject == null) {
@@ -66,8 +68,7 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
         });
 
         final Rect objectBounds = selectedObject.getBounds();
-        final Matrix4 transform =
-            canvasProvider.transformationController.value;
+        final Matrix4 transform = canvasProvider.transformationController.value;
         final vc.Vector3 transformedTopLeft = transform.transform3(
           vc.Vector3(objectBounds.topLeft.dx, objectBounds.topLeft.dy, 0),
         );
@@ -83,8 +84,7 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
           Offset(transformedBottomRight.x, transformedBottomRight.y),
         );
 
-        final quillController =
-            workspaceProvider.selectedObjectQuillController;
+        final quillController = workspaceProvider.selectedObjectQuillController;
 
         return Positioned(
           left: visibleRect.left,
@@ -98,7 +98,10 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
                   key: _toolbarKey,
                   width: visibleRect.width < 350.w ? 350.w : visibleRect.width,
                   decoration: BoxDecoration(
-                    color: Colors.white,
+                    color:
+                        suprovider.isDark
+                            ? Color.fromRGBO(48, 48, 48, 1)
+                            : Colors.white,
                     borderRadius: BorderRadius.circular(8.r),
                     boxShadow: [
                       BoxShadow(
@@ -138,10 +141,7 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
                   decoration: BoxDecoration(
                     // The editor background is transparent to see the object behind it.
                     color: Colors.transparent,
-                    border: Border.all(
-                      color: Colors.blue.shade400,
-                      width: 2.0,
-                    ),
+                    border: Border.all(color: Colors.blue.shade400, width: 2.0),
                     borderRadius: BorderRadius.circular(4.r),
                   ),
                   child: QuillEditor.basic(
@@ -180,4 +180,4 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
       },
     );
   }
-}
\ No newline at end of file
+}