feat: Added auto setting to dark mode

src/settings/DarkModeSetting/DarkModeSetting.tsx

@@ -4,7 +4,7 @@ import { Configs } from '@bluebase/core/dist/Configs';
 import React, { useState } from 'react';
 
 const ModeName: { [key: string]: string } = {
-	auto: 'Light',
+	auto: 'Auto',
 	dark: 'Dark',
 	light: 'Light',
 };
@@ -19,17 +19,35 @@ export const DarkModeSetting = () => {
 
 	const changeModeSetting = (mode: Configs['theme.mode']) => () => changeMode(mode);
 
+	let title = 'User Preferences';
+	let description = 'Appearance is detected automatically based on your device settings.';
+
+	if (themeMode === 'dark') {
+		title = 'Dark Mode';
+		description = 'Dark mode is always on.';
+	}
+
+	if (themeMode === 'light') {
+		title = 'Light Mode';
+		description = 'Light mode is always on.';
+	}
+
 	return (
 		<React.Fragment>
 			<List.Item
 				left={<List.Icon name="brightness-3" />}
-				title={ModeName[themeMode] === 'Dark' ? __('Dark Mode') : __('Light Mode')}
-				description={__(ModeName[themeMode])}
+				title={__(title)}
+				description={__(description)}
 				onPress={toggle}
 			/>
 			<Dialog dismissable visible={visible} onDismiss={toggle}>
 				<List.Subheader>{__('Mode')}</List.Subheader>
 				<Divider />
+				<List.Item
+					title={__(ModeName.auto)}
+					onPress={changeModeSetting('auto')}
+					selected={themeMode === 'auto'}
+				/>
 				<List.Item
 					title={__(ModeName.light)}
 					onPress={changeModeSetting('light')}