javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode inconsistencies

Browse Source 
fixes #226
fixes #198
This commit is contained in:
Lei Nelissen
2024-07-22 13:17:26 +02:00
parent 87b08050e4
commit a64f52c4f9
5 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/App.tsx
View File

@@ -3,16 +3,14 @@ import { Provider } from 'react-redux';
import TrackPlayer, { Capability } from 'react-native-track-player';
import { PersistGate } from 'redux-persist/integration/react';
import Routes from '../screens';
import store, { persistedStore, useTypedSelector } from '@/store';
import store, { persistedStore } from '@/store';
import {
NavigationContainer,
DefaultTheme,
DarkTheme as BaseDarkTheme,
} from '@react-navigation/native';
import { ColorSchemeProvider, themes } from './Colors';
import { ColorSchemeProvider, themes, useUserOrSystemScheme } from './Colors';
import DownloadManager from './DownloadManager';
import { useColorScheme } from 'react-native';
import { ColorScheme } from '@/store/settings/types';
const LightTheme = {
...DefaultTheme,
@@ -35,9 +33,7 @@ const DarkTheme = {
* right theme is selected based on OS color scheme settings along with user preferences.
*/
function ThemedNavigationContainer({ children }: PropsWithChildren<{}>) {
const systemScheme = useColorScheme();
const userScheme = useTypedSelector((state) => state.settings.colorScheme);
const scheme = userScheme === ColorScheme.System ? systemScheme : userScheme;
const scheme = useUserOrSystemScheme();
return (
<NavigationContainer

13
src/components/Colors.tsx
View File

@@ -108,14 +108,21 @@ export const themes: Record<'dark' | 'light' | 'dark-highcontrast' | 'light-high
// Create context for supplying the theming information
export const ColorSchemeContext = React.createContext(themes.dark);
/**
* This hook returns the proper color scheme, taking into account potential user overrides.
*/
export function useUserOrSystemScheme() {
const systemScheme = useColorScheme();
const userScheme = useTypedSelector((state) => state.settings.colorScheme);
return userScheme === ColorScheme.System ? systemScheme : userScheme;
}
/**
* This provider contains the logic for settings the right theme on the ColorSchemeContext.
*/
export function ColorSchemeProvider({ children }: PropsWithChildren<{}>) {
const systemScheme = useColorScheme();
const highContrast = useAccessibilitySetting('darkerSystemColors');
const userScheme = useTypedSelector((state) => state.settings.colorScheme);
const scheme = userScheme === ColorScheme.System ? systemScheme : userScheme;
const scheme = useUserOrSystemScheme();
const theme = highContrast
? themes[`${scheme || 'light'}-highcontrast`]
: themes[scheme || 'light'];

11
src/components/CoverImage.tsx
View File

@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import { Dimensions, useColorScheme, ViewProps } from 'react-native';
import { Dimensions, ViewProps } from 'react-native';
import { Canvas, Blur, Image as SkiaImage, useImage, Offset, Mask, RoundedRect, Shadow } from '@shopify/react-native-skia';
import useDefaultStyles from './Colors';
import useDefaultStyles, { useUserOrSystemScheme } from './Colors';
import styled from 'styled-components/native';
const Screen = Dimensions.get('screen');
@@ -45,10 +45,13 @@ function CoverImage({
src,
}: Props) {
const defaultStyles = useDefaultStyles();
const colorScheme = useColorScheme();
const colorScheme = useUserOrSystemScheme();
const image = useImage(src || null);
const fallback = useImage(colorScheme === 'light' ? require('@/assets/images/empty-album-light.png') : require('@/assets/images/empty-album-dark.png'));
const fallback = useImage(colorScheme === 'light'
? require('@/assets/images/empty-album-light.png')
: require('@/assets/images/empty-album-dark.png')
);
const { canvasSize, imageSize } = useMemo(() => {
const imageSize = Screen.width - margin;
const canvasSize = imageSize + blurRadius * 2;