Chore: Refactor useThemeMode in favor of userPreferences

apps/meteor/app/lib/server/startup/settings.ts

@@ -375,6 +375,25 @@ settingsRegistry.addGroup('Accounts', function () {
 			public: true,
 			i18nLabel: 'Group_by_Type',
 		});
+		this.add('Accounts_Default_User_Preferences_themeAppearence', 'auto', {
+			type: 'select',
+			values: [
+				{
+					key: 'auto',
+					i18nLabel: 'Theme_match_system',
+				},
+				{
+					key: 'light',
+					i18nLabel: 'Theme_light',
+				},
+				{
+					key: 'dark',
+					i18nLabel: 'Theme_dark',
+				},
+			],
+			public: true,
+			i18nLabel: 'Theme_Appearence',
+		});
 		this.add('Accounts_Default_User_Preferences_sidebarViewMode', 'medium', {
 			type: 'select',
 			values: [

apps/meteor/client/sidebar/header/UserDropdown.tsx

@@ -192,21 +192,21 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => {
 				<OptionIcon name='sun' />
 				<OptionContent>{t('Theme_light')}</OptionContent>
 				<OptionColumn>
-					<RadioButton checked={selectedTheme === 'light'} onChange={(): void => setTheme('light')} m='x4' />
+					<RadioButton checked={selectedTheme === 'light'} onChange={setTheme('light')} m='x4' />
 				</OptionColumn>
 			</Option>
 			<Option>
 				<OptionIcon name='moon' />
 				<OptionContent>{t('Theme_dark')}</OptionContent>
 				<OptionColumn>
-					<RadioButton checked={selectedTheme === 'dark'} onChange={(): void => setTheme('dark')} m='x4' />
+					<RadioButton checked={selectedTheme === 'dark'} onChange={setTheme('dark')} m='x4' />
 				</OptionColumn>
 			</Option>
 			<Option>
 				<OptionIcon name='desktop' />
 				<OptionContent>{t('Theme_match_system')}</OptionContent>
 				<OptionColumn>
-					<RadioButton checked={selectedTheme === 'auto'} onChange={(): void => setTheme('auto')} m='x4' />
+					<RadioButton checked={selectedTheme === 'auto'} onChange={setTheme('auto')} m='x4' />
 				</OptionColumn>
 			</Option>
 			<OptionDivider />

apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx

@@ -1,5 +1,5 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Accordion, Field, FieldGroup, MultiSelect } from '@rocket.chat/fuselage';
+import { Select, Accordion, Field, FieldGroup, MultiSelect } from '@rocket.chat/fuselage';
 import { useUserPreference, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
@@ -11,6 +11,7 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }: FormSection
 	const t = useTranslation();
 
 	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList');
+	const themePreference = useUserPreference<'light' | 'dark' | 'auto'>('themeAppearence');
 
 	const options = useMemo(
 		() => (userDontAskAgainList || []).map(({ action, label }) => [action, label]) as SelectOption[],
@@ -22,18 +23,26 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }: FormSection
 	const { values, handlers, commit } = useForm(
 		{
 			dontAskAgainList: selectedOptions,
+			themeAppearence: themePreference,
 		},
 		onChange,
 	);
 
-	const { dontAskAgainList } = values as {
+	const { dontAskAgainList, themeAppearence } = values as {
 		dontAskAgainList: string[];
+		themeAppearence: string;
 	};
 
-	const { handleDontAskAgainList } = handlers;
+	const { handleDontAskAgainList, handleThemeAppearence } = handlers;
 
 	commitRef.current.global = commit;
 
+	const themeOptions: SelectOption[] = [
+		['auto', t('Theme_match_system')],
+		['light', t('Theme_light')],
+		['dark', t('Theme_dark')],
+	];
+
 	return (
 		<Accordion.Item title={t('Global')} {...props}>
 			<FieldGroup>
@@ -48,6 +57,12 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }: FormSection
 						/>
 					</Field.Row>
 				</Field>
+				<Field>
+					<Field.Label>{t('Theme_Appearence')}</Field.Label>
+					<Field.Row>
+						<Select value={themeAppearence} onChange={handleThemeAppearence} options={themeOptions} />
+					</Field.Row>
+				</Field>
 			</FieldGroup>
 		</Accordion.Item>
 	);

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -5643,5 +5643,6 @@
   "cloud.RegisterWorkspace_Token_Step_One": "1. Go to: <1>cloud.rocket.chat > Workspaces</1> and click <3>'Register self-managed'</3>.",
   "cloud.RegisterWorkspace_Setup_Terms_Privacy": "I agree with <1>Terms and Conditions</1> and <3>Privacy Policy</3>",
   "Larger_amounts_of_active_connections": "For larger amounts of active connections you can consider our",
-  "multiple_instance_solutions": "multiple instance solutions"
+  "multiple_instance_solutions": "multiple instance solutions",
+  "Theme_Appearence": "Theme Appearence"
 }

ee/packages/ui-theming/src/hooks/useThemeMode.ts

@@ -1,5 +1,6 @@
-import { useDarkMode, useSessionStorage } from '@rocket.chat/fuselage-hooks';
-import type { Dispatch, SetStateAction } from 'react';
+import { useDarkMode } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
 
 type ThemeMode = 'light' | 'dark' | 'auto';
 
@@ -9,8 +10,13 @@ type ThemeMode = 'light' | 'dark' | 'auto';
  * @returns [currentThemeMode, setThemeMode, resolvedThemeMode]
  */
 
-export const useThemeMode = (value: ThemeMode = 'auto'): [ThemeMode, Dispatch<SetStateAction<ThemeMode>>, 'light' | 'dark'] => {
-	const [theme, setTheme] = useSessionStorage<ThemeMode>(`rcx-theme`, value);
+export const useThemeMode = (): [ThemeMode, (value: ThemeMode) => () => void, 'light' | 'dark'] => {
+	const theme = useUserPreference<ThemeMode>('themeAppearence') || 'auto';
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+
+	const setTheme = (value: ThemeMode): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { themeAppearence: value } }), [value]);
 
 	return [theme, setTheme, useDarkMode(theme === 'auto' ? undefined : theme === 'dark') ? 'dark' : 'light'];
 };

packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts

@@ -38,6 +38,7 @@ export type UsersSetPreferencesParamsPOST = {
 		sidebarGroupByType?: boolean;
 		muteFocusedConversations?: boolean;
 		dontAskAgainList?: Array<{ action: string; label: string }>;
+		themeAppearence?: 'auto' | 'light' | 'dark';
 		receiveLoginDetectionEmail?: boolean;
 		idleTimeLimit?: number;
 		omnichannelTranscriptEmail?: boolean;
@@ -190,6 +191,10 @@ const UsersSetPreferencesParamsPostSchema = {
 					},
 					nullable: true,
 				},
+				themeAppearence: {
+					type: 'string',
+					nullable: true,
+				},
 				receiveLoginDetectionEmail: {
 					type: 'boolean',
 					nullable: true,

packages/ui-contexts/src/ServerContext/methods/saveUserPreferences.ts

@@ -29,6 +29,7 @@ type UserPreferences = {
 	sidebarGroupByType: boolean;
 	muteFocusedConversations: boolean;
 	dontAskAgainList: { action: string; label: string }[];
+	themeAppearence: 'auto' | 'light' | 'dark';
 	receiveLoginDetectionEmail: boolean;
 };