fix: coping text from dark mode shouldn't keep the colors

client/src/App.jsx

@@ -5,15 +5,20 @@ import * as RadixToast from '@radix-ui/react-toast';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClient, QueryClientProvider, QueryCache } from '@tanstack/react-query';
-import { ScreenshotProvider, ThemeProvider, useApiErrorBoundary } from './hooks';
+import {
+  ScreenshotProvider,
+  ThemeProvider,
+  useApiErrorBoundary,
+  useColorStrippingCopy,
+} from './hooks';
 import { ToastProvider } from './Providers';
 import Toast from './components/ui/Toast';
 import { LiveAnnouncer } from '~/a11y';
 import { router } from './routes';
 
 const App = () => {
   const { setError } = useApiErrorBoundary();
-
+  useColorStrippingCopy();
   const queryClient = new QueryClient({
     queryCache: new QueryCache({
       onError: (error) => {

client/src/hooks/index.ts

@@ -30,3 +30,4 @@ export { default as useSpeechToText } from './Input/useSpeechToText';
 export { default as useTextToSpeech } from './Input/useTextToSpeech';
 export { default as useGenerationsByLatest } from './useGenerationsByLatest';
 export { default as useDocumentTitle } from './useDocumentTitle';
+export { default as useColorStrippingCopy } from './useColorStrippingCopy';

client/src/hooks/useColorStrippingCopy.tsx

@@ -0,0 +1,36 @@
+// useColorStrippingCopy.ts
+import { useEffect } from 'react';
+
+const useColorStrippingCopy = () => {
+  useEffect(() => {
+    const handleCopy = (event: ClipboardEvent) => {
+      const selection = document.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const clonedSelection = range.cloneContents();
+        const div = document.createElement('div');
+        div.appendChild(clonedSelection);
+
+        // Remove color and background-color styles
+        const elements = div.getElementsByTagName('*');
+        Array.from(elements).forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.style.color = '';
+            el.style.backgroundColor = '';
+          }
+        });
+
+        if (event.clipboardData) {
+          event.clipboardData.setData('text/html', div.innerHTML);
+          event.clipboardData.setData('text/plain', div.innerText);
+          event.preventDefault();
+        }
+      }
+    };
+
+    document.addEventListener('copy', handleCopy);
+    return () => document.removeEventListener('copy', handleCopy);
+  }, []);
+};
+
+export default useColorStrippingCopy;