Upgrade reader, preserve selected theme. Resolve #598

zotero · Feb 9, 2025 · 0ee814e · 0ee814e
1 parent 97463ae
commit 0ee814e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 31 deletions.
diff --git a/modules/pdf-reader b/modules/pdf-reader
diff --git a/src/js/component/modal/settings.jsx b/src/js/component/modal/settings.jsx
@@ -26,12 +26,10 @@ const SettingsModal = () => {
 	const isTouchOrSmall = useSelector(state => state.device.isTouchOrSmall);
 	const colorScheme = useSelector(state => state.preferences.colorScheme ?? '');
 	const density = useSelector(state => state.preferences.density ?? '');
-	const useDarkModeForContent = useSelector(state => colorScheme !== 'light' && (state.preferences.useDarkModeForContent ?? true));
 	const isSmall = useSelector(state => state.device.xxs || state.device.xs || state.device.sm);
 	const isOpen = useSelector(state => state.modal.id === SETTINGS);
 	const colorSchemeInputId = useRef(getUniqueId());
 	const densityInputId = useRef(getUniqueId());
-	const useDarkModeForContentInputId = useRef(getUniqueId());
 
 	const handleChange = useCallback(() => true, []);
 
@@ -43,10 +41,6 @@ const SettingsModal = () => {
 		dispatch(preferenceChange('density', newDensity));
 	}, [dispatch]);
 
-	const handleUseDarkModeForContentChange = useCallback((ev) => {
-		dispatch(preferenceChange('useDarkModeForContent', ev.target.checked));
-	}, [dispatch]);
-
 	const handleClose = useCallback(
 		() => dispatch(toggleModal(SETTINGS, false)),
 	[dispatch]);
@@ -123,19 +117,6 @@ const SettingsModal = () => {
 							/>
 						</div>
 					</div>
-					<div className={cx("form-group checkbox", { disabled: colorScheme === 'light' })}>
-						<input
-							checked={colorScheme !== 'light' && useDarkModeForContent}
-							className="col-form-label"
-							disabled={colorScheme === 'light'}
-							id={useDarkModeForContentInputId.current}
-							onChange={handleUseDarkModeForContentChange}
-							type="checkbox"
-						/>
-						<label htmlFor={useDarkModeForContentInputId.current}>
-							Use Dark Mode for Content
-						</label>
-					</div>
 				</div>
 			</div>
 		</Modal>

diff --git a/src/js/component/reader.jsx b/src/js/component/reader.jsx
@@ -185,7 +185,8 @@ const Reader = () => {
 	// TODO: this should be entry-sepcific, but works for now because there is only one entry being fetched by the reader
 	const isFetchingUserLibrarySettings = useSelector(state => state.libraries[userLibraryKey]?.settings?.isFetching);
 	const colorScheme = useSelector(state => state.preferences.colorScheme);
-	const useDarkModeForContent = useSelector(state => colorScheme !== 'light' && (state.preferences.useDarkModeForContent ?? true));
+	const lightTheme = useSelector(state => state.preferences?.readerLightTheme ?? false);
+	const darkTheme = useSelector(state => state.preferences?.readerDarkTheme ?? false);
 	const pdfWorker = useMemo(() => new PDFWorker({ pdfWorkerURL, pdfReaderCMapsURL, pdfReaderStandardFontsURL }), [pdfReaderCMapsURL, pdfReaderStandardFontsURL, pdfWorkerURL]);
 
 	const [state, dispatchState] = useReducer(readerReducer, {
@@ -301,8 +302,9 @@ const Reader = () => {
 				baseURI: new URL('/', window.location).toString()
 			},
 			annotations: [...processedAnnotations, ...state.importedAnnotations],
-			useDarkModeForContent,
 			colorScheme,
+			lightTheme,
+			darkTheme,
 			primaryViewState: readerState,
 			secondaryViewState: null,
 			location,
@@ -347,14 +349,20 @@ const Reader = () => {
 				dispatchState({ type: 'ROTATE_PAGES', pageIndexes, degrees });
 			},
 			onSetDataTransferAnnotations: noop, // n/a in web library, noop prevents errors printed on console from reader
-			// onDeletePages: handleDeletePages
+			// onDeletePages: handleDeletePages,
+			onSetLightTheme: (themeName) => {
+				dispatch(preferenceChange('readerLightTheme', themeName || false));
+			},
+			onSetDarkTheme: (themeName) => {
+				dispatch(preferenceChange('readerDarkTheme', themeName || false));
+			}
 		});
-	}, [annotations, attachmentItem, attachmentKey, colorScheme, currentUserSlug,
-		dispatch, getProcessedAnnotations, handleChangeViewState, handleResizeSidebar,
-		handleToggleSidebar, isGroup, isReadOnly, isReaderSidebarOpen, location,
-		locationValue, readerSidebarWidth, state.data, state.importedAnnotations,
-		useDarkModeForContent]
-	);
+	}, [
+		annotations, attachmentItem, attachmentKey, colorScheme, currentUserSlug, darkTheme, dispatch,
+		getProcessedAnnotations, handleChangeViewState, handleResizeSidebar, handleToggleSidebar, isGroup,
+		isReadOnly, isReaderSidebarOpen, lightTheme, location, locationValue, readerSidebarWidth, state.data,
+		state.importedAnnotations
+	]);
 
 	useEffect(() => {
 		// pdf js stores last page in localStorage but we want to use one from user library settings instead
@@ -364,9 +372,20 @@ const Reader = () => {
 	useEffect(() => {
 		if(reader.current) {
 			reader.current.setColorScheme(colorScheme);
-			reader.current.useDarkModeForContent(useDarkModeForContent);
 		}
-	}, [colorScheme, useDarkModeForContent]);
+	}, [colorScheme]);
+
+	useEffect(() => {
+		if (reader.current) {
+			reader.current.setLightTheme(lightTheme);
+		}
+	}, [lightTheme]);
+
+	useEffect(() => {
+		if (reader.current) {
+			reader.current.setDarkTheme(darkTheme);
+		}
+	}, [darkTheme]);
 
 	// fetch attachment item details or redirect if invalid URL
 	useEffect(() => {