From b378799d5517fde30e344a067280485a7a8592b2 Mon Sep 17 00:00:00 2001
From: skalthoff <32023561+skalthoff@users.noreply.github.com>
Date: Tue, 28 Oct 2025 22:42:36 -0700
Subject: [PATCH] add OLED theme support and update theme settings (#611)

---
 App.tsx                                       |  6 ++++--
 .../Player/components/blurred-background.tsx  |  4 +++-
 .../Settings/components/preferences-tab.tsx   |  5 +++++
 src/components/theme.ts                       | 12 +++++++++++
 src/stores/settings/app.ts                    |  2 +-
 tamagui.config.ts                             | 20 +++++++++++++++++++
 6 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/App.tsx b/App.tsx
index d9532a8d..3789a94c 100644
--- a/App.tsx
+++ b/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>
diff --git a/src/components/Player/components/blurred-background.tsx b/src/components/Player/components/blurred-background.tsx
index 73f2d36b..ed65160d 100644
--- a/src/components/Player/components/blurred-background.tsx
+++ b/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
diff --git a/src/components/Settings/components/preferences-tab.tsx b/src/components/Settings/components/preferences-tab.tsx
index e1d31255..02087a86 100644
--- a/src/components/Settings/components/preferences-tab.tsx
+++ b/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>
 					),
diff --git a/src/components/theme.ts b/src/components/theme.ts
index 50ab8bf0..ed4d140d 100644
--- a/src/components/theme.ts
+++ b/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,
+}
diff --git a/src/stores/settings/app.ts b/src/stores/settings/app.ts
index 4bdbbd6f..eeb764bf 100644
--- a/src/stores/settings/app.ts
+++ b/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
diff --git a/tamagui.config.ts b/tamagui.config.ts
index 413cfdc9..cef29e97 100644
--- a/tamagui.config.ts
+++ b/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,