feat: Add the option to toggle the dark/light color-scheme (#7662)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/helper/specs/themeHelper.spec.js

@@ -0,0 +1,76 @@
+import { setColorTheme } from 'dashboard/helper/themeHelper.js';
+import { LocalStorage } from 'shared/helpers/localStorage';
+
+jest.mock('shared/helpers/localStorage');
+
+describe('setColorTheme', () => {
+  it('should set body class to dark if selectedColorScheme is dark', () => {
+    LocalStorage.get.mockReturnValue('dark');
+    setColorTheme(true);
+    expect(document.body.classList.contains('dark')).toBe(true);
+  });
+
+  it('should set body class to dark if selectedColorScheme is auto and isOSOnDarkMode is true', () => {
+    LocalStorage.get.mockReturnValue('auto');
+    setColorTheme(true);
+    expect(document.body.classList.contains('dark')).toBe(true);
+  });
+
+  it('should not set body class to dark if selectedColorScheme is auto and isOSOnDarkMode is false', () => {
+    LocalStorage.get.mockReturnValue('auto');
+    setColorTheme(false);
+    expect(document.body.classList.contains('dark')).toBe(false);
+  });
+
+  it('should not set body class to dark if selectedColorScheme is light', () => {
+    LocalStorage.get.mockReturnValue('light');
+    setColorTheme(true);
+    expect(document.body.classList.contains('dark')).toBe(false);
+  });
+
+  it('should not set body class to dark if selectedColorScheme is undefined', () => {
+    LocalStorage.get.mockReturnValue(undefined);
+    setColorTheme(true);
+    expect(document.body.classList.contains('dark')).toBe(true);
+  });
+
+  it('should set documentElement style to dark if selectedColorScheme is dark', () => {
+    LocalStorage.get.mockReturnValue('dark');
+    setColorTheme(true);
+    expect(document.documentElement.getAttribute('style')).toBe(
+      'color-scheme: dark;'
+    );
+  });
+
+  it('should set documentElement style to dark if selectedColorScheme is auto and isOSOnDarkMode is true', () => {
+    LocalStorage.get.mockReturnValue('auto');
+    setColorTheme(true);
+    expect(document.documentElement.getAttribute('style')).toBe(
+      'color-scheme: dark;'
+    );
+  });
+
+  it('should set documentElement style to light if selectedColorScheme is auto and isOSOnDarkMode is false', () => {
+    LocalStorage.get.mockReturnValue('auto');
+    setColorTheme(false);
+    expect(document.documentElement.getAttribute('style')).toBe(
+      'color-scheme: light;'
+    );
+  });
+
+  it('should set documentElement style to light if selectedColorScheme is light', () => {
+    LocalStorage.get.mockReturnValue('light');
+    setColorTheme(true);
+    expect(document.documentElement.getAttribute('style')).toBe(
+      'color-scheme: light;'
+    );
+  });
+
+  it('should set documentElement style to light if selectedColorScheme is undefined', () => {
+    LocalStorage.get.mockReturnValue(undefined);
+    setColorTheme(true);
+    expect(document.documentElement.getAttribute('style')).toBe(
+      'color-scheme: dark;'
+    );
+  });
+});

app/javascript/dashboard/helper/themeHelper.js

@@ -0,0 +1,17 @@
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+
+export const setColorTheme = isOSOnDarkMode => {
+  const selectedColorScheme =
+    LocalStorage.get(LOCAL_STORAGE_KEYS.COLOR_SCHEME) || 'auto';
+  if (
+    (selectedColorScheme === 'auto' && isOSOnDarkMode) ||
+    selectedColorScheme === 'dark'
+  ) {
+    document.body.classList.add('dark');
+    document.documentElement.setAttribute('style', 'color-scheme: dark;');
+  } else {
+    document.body.classList.remove('dark');
+    document.documentElement.setAttribute('style', 'color-scheme: light;');
+  }
+};