refactor: remove next-theme

packages/ui/package.json

@@ -64,7 +64,6 @@
     "i18next-http-backend": "^2.6.2",
     "i18next-locales-sync": "^2.1.0",
     "nanoid": "^4.0.1",
-    "next-themes": "^0.2.1",
     "pretty-bytes": "^6.1.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

packages/ui/src/App.tsx

@@ -8,6 +8,7 @@ import { Loader } from './components/Loader/Loader';
 import { Menu } from './components/Menu/Menu';
 import { Title } from './components/Title/Title';
 import { useConfirm } from './hooks/useConfirm';
+import { useDarkMode } from './hooks/useDarkMode';
 import { useLanguageWatch } from './hooks/useLanguageWatch';
 import { useQueues } from './hooks/useQueues';
 import { useScrollTopOnNav } from './hooks/useScrollTopOnNav';
@@ -31,6 +32,7 @@ export const App = () => {
   const { actions: queueActions } = useQueues();
   const { confirmProps } = useConfirm();
   useLanguageWatch();
+  useDarkMode();
 
   useEffect(() => {
     queueActions.updateQueues();

packages/ui/src/components/SettingsModal/SettingsModal.tsx

@@ -7,7 +7,6 @@ import { SelectField } from '../Form/SelectField/SelectField';
 import { SwitchField } from '../Form/SwitchField/SwitchField';
 import { Modal } from '../Modal/Modal';
 import { availableJobTabs } from '../../hooks/useDetailsTabs';
-import { useTheme } from 'next-themes';
 
 export interface SettingsModalProps {
   open: boolean;
@@ -17,7 +16,7 @@ export interface SettingsModalProps {
 
 const pollingIntervals = [-1, 3, 5, 10, 20, 60, 60 * 5, 60 * 15];
 const languages = ['en-US', 'fr-FR', 'pt-BR', 'zh-CN', 'es-ES'];
-const maxJobsPerPage = 300
+const maxJobsPerPage = 300;
 
 export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
   const {
@@ -31,11 +30,11 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
     collapseJobOptions,
     collapseJobError,
     defaultJobTab,
+    darkMode,
     setSettings,
   } = useSettingsStore((state) => state);
   const { pollingInterval: uiConfigPollingInterval } = useUIConfig();
   const { t, i18n } = useTranslation();
-  const { theme, setTheme } = useTheme();
 
   return (
     <Modal width="small" open={open} onClose={onClose} title={t('SETTINGS.TITLE')}>
@@ -128,8 +127,8 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
       <SwitchField
         label={t('SETTINGS.DARK_MODE')}
         id="dark-mode"
-        checked={theme === 'dark'}
-        onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
+        checked={darkMode}
+        onCheckedChange={(checked) => setSettings({ darkMode: checked })}
       />
     </Modal>
   );

packages/ui/src/hooks/useDarkMode.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useSettingsStore } from './useSettings';
+
+export function useDarkMode() {
+  const { darkMode } = useSettingsStore();
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+    }
+  }, [darkMode]);
+}

packages/ui/src/hooks/useSettings.ts

@@ -12,6 +12,7 @@ interface SettingsState {
   collapseJobData: boolean;
   collapseJobOptions: boolean;
   collapseJobError: boolean;
+  darkMode: boolean;
   defaultJobTab: TabsType;
   setSettings: (settings: Partial<Omit<SettingsState, 'setSettings'>>) => void;
 }
@@ -28,6 +29,7 @@ export const useSettingsStore = create<SettingsState>()(
       collapseJobData: false,
       collapseJobOptions: false,
       collapseJobError: false,
+      darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
       defaultJobTab: 'Data',
       setSettings: (settings) => set(() => settings),
     }),

packages/ui/src/index.css

@@ -57,7 +57,7 @@
   --text-color: #454b52;
 }
 
-[data-theme='dark'] {
+.dark-mode {
   --background-bg: #181d24;
   --button-basic-active-bg: #2d3748;
   --button-basic-active-box-shadow: 0 0 0 1px #ffffff33 inset, 0 1px 4px 0 #00000026 inset;

yarn.lock

@@ -9624,11 +9624,6 @@ [email protected]:
   dependencies:
     type-fest "^2.5.1"
 
-next-themes@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
-  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
-
 node-abort-controller@^3.0.1, node-abort-controller@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"