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

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