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/widget/composables/specs/useDarkMode.spec.js

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useDarkMode } from '../useDarkMode';
+import { useMapGetter } from 'dashboard/composables/store';
+
+vi.mock('dashboard/composables/store', () => ({
+  useMapGetter: vi.fn(),
+}));
+
+describe('useDarkMode', () => {
+  let mockDarkMode;
+
+  beforeEach(() => {
+    mockDarkMode = { value: 'light' };
+    vi.mocked(useMapGetter).mockReturnValue(mockDarkMode);
+  });
+
+  it('returns darkMode, prefersDarkMode, and getThemeClass', () => {
+    const result = useDarkMode();
+    expect(result).toHaveProperty('darkMode');
+    expect(result).toHaveProperty('prefersDarkMode');
+    expect(result).toHaveProperty('getThemeClass');
+  });
+
+  describe('prefersDarkMode', () => {
+    it('returns false when darkMode is light', () => {
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(false);
+    });
+
+    it('returns true when darkMode is dark', () => {
+      mockDarkMode.value = 'dark';
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(true);
+    });
+
+    it('returns true when darkMode is auto and OS prefers dark mode', () => {
+      mockDarkMode.value = 'auto';
+      vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: true });
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(true);
+    });
+
+    it('returns false when darkMode is auto and OS prefers light mode', () => {
+      mockDarkMode.value = 'auto';
+      vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: false });
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(false);
+    });
+  });
+
+  describe('getThemeClass', () => {
+    it('returns light class when darkMode is light', () => {
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe('light-class');
+    });
+
+    it('returns dark class when darkMode is dark', () => {
+      mockDarkMode.value = 'dark';
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe('dark-class');
+    });
+
+    it('returns both classes when darkMode is auto', () => {
+      mockDarkMode.value = 'auto';
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe(
+        'light-class dark-class'
+      );
+    });
+  });
+});

app/javascript/widget/composables/useDarkMode.js

@@ -0,0 +1,39 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const isDarkModeAuto = mode => mode === 'auto';
+const isDarkMode = mode => mode === 'dark';
+
+const getSystemPreference = () =>
+  window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+
+const calculatePrefersDarkMode = (mode, systemPreference) =>
+  isDarkModeAuto(mode) ? systemPreference : isDarkMode(mode);
+
+const calculateThemeClass = (mode, light, dark) => {
+  if (isDarkModeAuto(mode)) return `${light} ${dark}`;
+  return isDarkMode(mode) ? dark : light;
+};
+
+/**
+ * Composable for handling dark mode.
+ * @returns {Object} An object containing computed properties and methods for dark mode.
+ */
+export function useDarkMode() {
+  const darkMode = useMapGetter('appConfig/darkMode');
+
+  const systemPreference = computed(getSystemPreference);
+
+  const prefersDarkMode = computed(() =>
+    calculatePrefersDarkMode(darkMode.value, systemPreference.value)
+  );
+
+  const getThemeClass = (light, dark) =>
+    calculateThemeClass(darkMode.value, light, dark);
+
+  return {
+    darkMode,
+    prefersDarkMode,
+    getThemeClass,
+  };
+}