fix: correct dark theme support for the generation timeline

Author: yaroslav8765

custom/conversation_area/ProcessingTimeline.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="ToolOrReasoningParts.length > 0 || isResponseInProgress || showFakeThinkingMessage">
     <div 
-      class="ml-2 px-4 flex items-center gap-1 cursor-pointer select-none hover:opacity-80 tracking-wide font-medium text-sm"
+      class="ml-2 px-4 flex items-center gap-1 cursor-pointer select-none hover:opacity-80 tracking-wide font-medium text-sm text-listTableHeadingText dark:text-darkListTableHeadingText"
       @click="isExpanded = !isExpanded"
     >
       Thoughts
@@ -20,7 +20,7 @@
         v-show="isExpanded"
         class="mask-y"
       >
-        <ol class="ml-8 relative border-l border-l-2 border-black border-default">
+        <ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
           <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
             <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
             <ToolsGroup v-else :toolGroup="groupToolCallParts(message, part)" />

custom/conversation_area/ReasoningRenderer.vue

@@ -1,11 +1,11 @@
 <template>
-  <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+  <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
     <div class="w-5 h-5 rounded-full flex items-center justify-center">
       <IconBrainOutline class="w-4 h-4" />
     </div>
   </span>
   <h3 
-    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80"      
+    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
     @click="isExpanded = !isExpanded"
   >
     <span class="font-semibold">{{ reasoningTitle }}</span>

custom/conversation_area/ThreeDotsAnimation.vue

@@ -1,7 +1,7 @@
 <template>
-  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary"></span>
-  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary"></span>
-  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary"></span>
+  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
+  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
+  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
 </template>
 
 <style scoped>

custom/conversation_area/ToolRenderer.vue

@@ -19,7 +19,7 @@
       class="flex items-center gap-1 cursor-pointer"     
       @click="toggleInputOutput()"
     >
-      <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/70 dark:bg-blue-700/20">
+      <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-lightNavbar dark:bg-darkNavbar">
         <Spinner v-if="isRunning" class="h-4 w-4" />
         <IconCheckOutline v-else class="h-4 w-4 text-lightPrimary dark:text-darkPrimary" />
       </div>

custom/conversation_area/ToolsGroup.vue

@@ -1,12 +1,12 @@
 <template >
   <template v-if="toolGroup.length > 0">
-    <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+    <span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
       <div class="w-5 h-5 rounded-full flex items-center justify-center">
         <IconWrenchSolid class="w-4 h-4" />
       </div>
     </span>
     <h3 
-      class="flex items-center mb-1 text-sm my-2 ml-3 gap-1"      
+      class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"      
     >
       <span class="font-semibold select-none ">Call tools</span>
     </h3>