Skip to content

Theme switcher refactor #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CD-Z wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Theme switcher refactor #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eafa545
Use novel refactor (#1838)
CD-Z May 6, 2026
4b8fd5e
use new ids
CD-Z May 7, 2026
3c204ed
refactor in appearance settings
CD-Z Apr 5, 2026
6c64f92
fix lint
CD-Z Apr 5, 2026
296123a
remove setThemeMode from handleThemeSelect
CD-Z Apr 5, 2026
93309c3
fix type logic
CD-Z Apr 5, 2026
53614f9
use context for theme
CD-Z May 6, 2026
9fb7f8b
shorten animation
CD-Z May 7, 2026
bcdc987
adjusted LanguagePickerModal
CD-Z May 7, 2026
695e702
Fix Accent Color picker
CD-Z May 7, 2026
8ef83cc
fix bottom navigation coloring
CD-Z May 7, 2026
8a043be
log error instead of crashing when no theme context is available
CD-Z May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import AppErrorBoundary, {
import Main from './src/navigators/Main';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { useInitDatabase } from '@database/db';
import { ThemeProvider } from '@hooks/persisted/useTheme';

Notifications.setNotificationHandler({
handleNotification: async () => {
Expand Down Expand Up @@ -49,12 +50,14 @@ const App = () => {
<GestureHandlerRootView style={styles.flex}>
<AppErrorBoundary>
<SafeAreaProvider>
<PaperProvider>
<BottomSheetModalProvider>
<StatusBar translucent={true} backgroundColor="transparent" />
<Main />
</BottomSheetModalProvider>
</PaperProvider>
<ThemeProvider>
<PaperProvider>
<BottomSheetModalProvider>
<StatusBar translucent={true} backgroundColor="transparent" />
<Main />
</BottomSheetModalProvider>
</PaperProvider>
</ThemeProvider>
</SafeAreaProvider>
</AppErrorBoundary>
</GestureHandlerRootView>
Expand Down
3 changes: 3 additions & 0 deletions __mocks__/database.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
jest.mock('@database/queries/NovelQueries', () => ({
getNovelById: jest.fn(),
getNovelByPath: jest.fn(),
deleteCachedNovels: jest.fn(),
getCachedNovels: jest.fn(),
Expand Down Expand Up @@ -30,7 +31,9 @@ jest.mock('@database/queries/ChapterQueries', () => ({
insertChapters: jest.fn(),
getCustomPages: jest.fn(),
getChapterCount: jest.fn(),
getChapterCountSync: jest.fn(),
getPageChaptersBatched: jest.fn(),
getNovelChaptersSync: jest.fn(),
getFirstUnreadChapter: jest.fn(),
updateChapterProgress: jest.fn(),
}));
Expand Down
13 changes: 8 additions & 5 deletions __tests-modules__/test-utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Provider as PaperProvider } from 'react-native-paper';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { ThemeProvider } from '@hooks/persisted/useTheme';

import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
import { NovelContextProvider } from '@screens/novel/NovelContext';
Expand All @@ -13,11 +14,13 @@ const AllTheProviders = ({ children }: { children: React.ReactElement }) => {
return (
<GestureHandlerRootView>
<SafeAreaProvider>
<PaperProvider>
<BottomSheetModalProvider>
<AppErrorBoundary>{children}</AppErrorBoundary>
</BottomSheetModalProvider>
</PaperProvider>
<ThemeProvider>
<PaperProvider>
<BottomSheetModalProvider>
<AppErrorBoundary>{children}</AppErrorBoundary>
</BottomSheetModalProvider>
</PaperProvider>
</ThemeProvider>
</SafeAreaProvider>
</GestureHandlerRootView>
);
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,14 @@
"react-native-screens": "^4.24.0",
"react-native-shimmer-placeholder": "^2.0.9",
"react-native-tab-view": "^4.3.0",
"react-native-theme-switch-animation": "^0.8.0",
"react-native-url-polyfill": "^3.0.0",
"react-native-webview": "^13.16.1",
"react-native-worklets": "^0.8.1",
"react-native-zip-archive": "^7.0.2",
"sanitize-html": "^2.17.2",
"urlencode": "^2.0.0"
"urlencode": "^2.0.0",
"zustand": "^5.0.12"
},
"devDependencies": {
"@babel/core": "^7.29.0",
Expand All @@ -145,7 +147,7 @@
"@typescript-eslint/parser": "^8.58.0",
"babel-plugin-module-resolver": "^5.0.3",
"babel-plugin-react-compiler": "^1.0.0",
"better-sqlite3": "^12.8.0",
"better-sqlite3": "^12.9.0",
"drizzle-kit": "1.0.0-beta.20",
"eslint": "^8.57.1",
"eslint-plugin-eslint-comments": "^3.2.0",
Expand Down
57 changes: 49 additions & 8 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion src/components/BottomTabBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Pressable, View, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';
import { ThemeColors } from '@theme/types';
import Animated from 'react-native-reanimated';
import Color from 'color';

interface CustomBottomTabBarProps extends BottomTabBarProps {
theme: ThemeColors;
Expand All @@ -27,6 +28,7 @@ function CustomBottomTabBar({
showLabelsInNav,
renderIcon,
}: CustomBottomTabBarProps) {
const transparentBg = Color(theme.primaryContainer).fade(1).rgb().toString();
const getLabelText = useCallback(
(route: any) => {
if (!showLabelsInNav && route.name !== state.routeNames[state.index]) {
Expand Down Expand Up @@ -103,7 +105,7 @@ function CustomBottomTabBar({
width: isFocused ? 64 : 32,
backgroundColor: isFocused
? theme.primaryContainer
: 'transparent',
: transparentBg,
},
]}
>
Expand Down
17 changes: 15 additions & 2 deletions src/components/ColorPickerModal/ColorPickerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ import React, { useState } from 'react';
import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';

import { Portal, TextInput } from 'react-native-paper';
import { Modal } from '@components';
import { Button, Modal } from '@components';
import { ThemeColors } from '../../theme/types';
import { Row } from '@components/Common';
import { getString } from '@strings/translations';

interface ColorPickerModalProps {
visible: boolean;
title: string;
color: string;
onSubmit: (val: string) => void;
onSubmit: (val: string | undefined) => void;
closeModal: () => void;
theme: ThemeColors;
showAccentColors?: boolean;
Expand Down Expand Up @@ -47,6 +49,10 @@ const ColorPickerModal: React.FC<ColorPickerModalProps> = ({
setError('Enter a valid hex color code');
}
};
const onReset = () => {
onSubmit(undefined);
closeModal();
};
Comment on lines +52 to +55
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

onReset leaves stale local state behind.

text is initialized once from the color prop (Line 29) and the modal stays mounted across visibility toggles. After Reset the parent receives undefined, but the local text/error are untouched — so the next time the modal opens the input still shows the previously-typed (possibly invalid) value and any prior error message remains. Reset should clear both.

🛠️ Proposed fix 
   const onReset = () => {
     onSubmit(undefined);
+    setText('');
+    setError(null);
     closeModal();
   };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const onReset = () => {
onSubmit(undefined);
closeModal();
};
const onReset = () => {
onSubmit(undefined);
setText('');
setError(null);
closeModal();
};
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ColorPickerModal/ColorPickerModal.tsx` around lines 52 - 55,
onReset currently calls onSubmit(undefined) and closeModal() but leaves the
component's local state (text and error) intact, so the next open shows stale
input and errors; update onReset (the handler in ColorPickerModal) to also reset
the local state by calling the state setters (e.g., setText('') or setText(color
?? '') as desired and setError(undefined or '') ) so both text and error are
cleared when Reset is invoked, then call onSubmit(undefined) and closeModal().


const accentColors = [
'#EF5350',
Expand Down Expand Up @@ -112,6 +118,10 @@ const ColorPickerModal: React.FC<ColorPickerModalProps> = ({
error={Boolean(error)}
/>
<Text style={styles.errorText}>{error}</Text>
<Row style={styles.row}>
<Button title={getString('common.reset')} onPress={onReset} />
<Button title={getString('common.save')} onPress={onSubmitEditing} />
</Row>
</Modal>
</Portal>
);
Expand Down Expand Up @@ -139,4 +149,7 @@ const styles = StyleSheet.create({
},
flex: { flex: 1 },
marginBottom: { marginBottom: 8 },
row: {
justifyContent: 'flex-end',
},
});
11 changes: 7 additions & 4 deletions src/components/List/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import MaterialIcon from '@react-native-vector-icons/material-design-icons';

import { List as PaperList, Divider as PaperDivider } from 'react-native-paper';
import { ThemeColors } from '../../theme/types';
import { ColorInstance } from 'color';

interface ListItemProps {
title: string;
Expand Down Expand Up @@ -126,12 +127,12 @@ const Icon = ({ icon, theme }: { icon: string; theme: ThemeColors }) => (

interface ColorItemProps {
title: string;
description: string;
color: ColorInstance;
theme: ThemeColors;
onPress: () => void;
}

const ColorItem = ({ title, description, theme, onPress }: ColorItemProps) => (
const ColorItem = ({ title, color, theme, onPress }: ColorItemProps) => (
<Pressable
style={styles.pressable}
android_ripple={{ color: theme.rippleColor }}
Expand All @@ -141,12 +142,14 @@ const ColorItem = ({ title, description, theme, onPress }: ColorItemProps) => (
<Text style={[{ color: theme.onSurface }, styles.fontSize16]}>
{title}
</Text>
<Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
<Text style={{ color: theme.onSurfaceVariant }}>
{color.rgb().toString().toUpperCase()}
</Text>
</View>
<View
style={[
{
backgroundColor: description,
backgroundColor: color.hex(),
},
styles.descriptionView,
]}
Comment on lines 149 to 155
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add an outline to keep light swatches visible.

At Line 152, very light colors can visually disappear against the background. Add a thin border so every swatch remains visible.

💡 Suggested patch 
     <View
       style={[
         {
           backgroundColor: color.hex(),
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.outlineVariant,
         },
         styles.descriptionView,
       ]}
     />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<View
style={[
{
backgroundColor: description,
backgroundColor: color.hex(),
},
styles.descriptionView,
]}
<View
style={[
{
backgroundColor: color.hex(),
borderWidth: StyleSheet.hairlineWidth,
borderColor: theme.outlineVariant,
},
styles.descriptionView,
]}
/>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/List/List.tsx` around lines 149 - 155, The swatch View that
sets backgroundColor: color.hex() can disappear for very light colors; update
the View's style (the JSX block rendering the swatch) or styles.descriptionView
to add a thin border (e.g., borderWidth: 1) and a subtle contrasting borderColor
(for example rgba(0,0,0,0.12) or use a computed darker/lighter border based on
color.isLight()) so every swatch remains visible against the page background.
Ensure you update the style where the View with backgroundColor: color.hex() is
defined.

Expand Down
12 changes: 9 additions & 3 deletions src/components/SegmentedControl/SegmentedControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import {
View,
Text,
StyleSheet,
Pressable,
GestureResponderEvent,
} from 'react-native';
import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
import { ThemeColors } from '@theme/types';

Expand All @@ -12,7 +18,7 @@ export interface SegmentedControlOption<T extends string = string> {
export interface SegmentedControlProps<T extends string = string> {
options: SegmentedControlOption<T>[];
value: T;
onChange: (value: T) => void;
onChange: (value: T, event: GestureResponderEvent) => void;
theme: ThemeColors;
showCheckIcon?: boolean;
}
Expand Down Expand Up @@ -52,7 +58,7 @@ export function SegmentedControl<T extends string = string>({
<View key={option.value} style={buttonStyles}>
<Pressable
style={styles.segmentPressable}
onPress={() => onChange(option.value)}
onPress={e => onChange(option.value, e)}
android_ripple={{
color: theme.rippleColor,
borderless: false,
Expand Down
Loading
Loading