chore: Replace darkmode mixin with useDarkMode composable [CW-3474] (#9949)

# Pull Request Template

## Description

Replaces darkModeMixin with the new useDarkMode composable and replaces
wll usages of mixin the the composable in components and pages

Fixes
https://linear.app/chatwoot/issue/CW-3474/rewrite-darkmodemixin-mixin-to-a-composable

## Type of change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
@@ -11,7 +11,6 @@ export default {
     Spinner,
     FluentIcon,
   },
-  mixins: [darkModeMixin],
   props: {
     messageContentAttributes: {
       type: Object,
@@ -22,6 +21,10 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       email: '',
@@ -44,8 +47,8 @@ export default {
       return !(this.selectedRating && this.feedback);
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
     },
     textColor() {
       return getContrastingTextColor(this.widgetColor);
@@ -105,10 +108,13 @@ export default {
 <template>
   <div
     class="customer-satisfaction"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
     :style="{ borderColor: widgetColor }"
   >
-    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
+    <h6
+      class="title"
+      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
+    >
       {{ title }}
     </h6>
     <div class="ratings">