add OLED theme support and update theme settings (#611)

App.tsx

@@ -17,7 +17,7 @@ import TrackPlayer, {
 import { CAPABILITIES } from './src/player/constants'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { NavigationContainer } from '@react-navigation/native'
-import { JellifyDarkTheme, JellifyLightTheme } from './src/components/theme'
+import { JellifyDarkTheme, JellifyLightTheme, JellifyOLEDTheme } from './src/components/theme'
 import { requestStoragePermission } from './src/utils/permisson-helpers'
 import ErrorBoundary from './src/components/ErrorBoundary'
 import OTAUpdateScreen from './src/components/OtaUpdates'
@@ -111,7 +111,9 @@ function Container({ playerIsReady }: { playerIsReady: boolean }): React.JSX.Ele
 						: JellifyLightTheme
 					: theme === 'dark'
 						? JellifyDarkTheme
-						: JellifyLightTheme
+						: theme === 'oled'
+							? JellifyOLEDTheme
+							: JellifyLightTheme
 			}
 		>
 			<GestureHandlerRootView>

src/components/Player/components/blurred-background.tsx

@@ -24,7 +24,9 @@ function BlurredBackground({
 
 	// Calculate dark mode
 	const isDarkMode =
-		themeSetting === 'dark' || (themeSetting === 'system' && colorScheme === 'dark')
+		themeSetting === 'dark' ||
+		themeSetting === 'oled' ||
+		(themeSetting === 'system' && colorScheme === 'dark')
 
 	// Get blurhash safely
 	const blurhash = nowPlaying?.item ? getBlurhashFromDto(nowPlaying.item) : null

src/components/Settings/components/preferences-tab.tsx

@@ -31,6 +31,11 @@ export default function PreferencesTab(): React.JSX.Element {
 								<RadioGroupItemWithLabel size='$3' value='system' label='System' />
 								<RadioGroupItemWithLabel size='$3' value='light' label='Light' />
 								<RadioGroupItemWithLabel size='$3' value='dark' label='Dark' />
+								<RadioGroupItemWithLabel
+									size='$3'
+									value='oled'
+									label='OLED (True Black)'
+								/>
 							</RadioGroup>
 						</YStack>
 					),

src/components/theme.ts

@@ -63,3 +63,15 @@ export const JellifyLightTheme = {
 	},
 	fonts: JellifyFonts,
 }
+
+export const JellifyOLEDTheme: ReactNavigation.Theme = {
+	dark: true,
+	colors: {
+		...DarkTheme.colors,
+		card: getTokens().color.$black.val,
+		border: getTokens().color.$neutral.val,
+		background: getTokens().color.$black.val,
+		primary: getTokens().color.$primaryDark.val,
+	},
+	fonts: JellifyFonts,
+}

src/stores/settings/app.ts

@@ -2,7 +2,7 @@ import { stateStorage } from '../../constants/storage'
 import { create } from 'zustand'
 import { createJSONStorage, devtools, persist } from 'zustand/middleware'
 
-export type ThemeSetting = 'system' | 'light' | 'dark'
+export type ThemeSetting = 'system' | 'light' | 'dark' | 'oled'
 
 type AppSettingsStore = {
 	sendMetrics: boolean

tamagui.config.ts

@@ -75,6 +75,26 @@ const jellifyConfig = createTamagui({
 
 			translucent: tokens.color.darkTranslucent,
 		},
+		oled: {
+			// True black OLED theme
+			background: tokens.color.black,
+			background75: tokens.color.black75,
+			background50: tokens.color.black50,
+			background25: tokens.color.black25,
+			backgroundActive: tokens.color.amethyst,
+			backgroundPress: tokens.color.amethyst,
+			backgroundFocus: tokens.color.amethyst,
+			backgroundHover: tokens.color.purpleGray,
+			borderColor: tokens.color.neutral,
+			color: tokens.color.white,
+			success: tokens.color.success,
+			secondary: tokens.color.secondary,
+			primary: tokens.color.primaryDark,
+			danger: tokens.color.danger,
+			neutral: tokens.color.neutral,
+
+			translucent: tokens.color.darkTranslucent,
+		},
 		dark_inverted_purple: {
 			color: tokens.color.purpleDark,
 			borderColor: tokens.color.amethyst,