From 0b72ab156da2ca884ff9383bb3616c6c91dfbfea Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Sat, 8 Mar 2025 16:12:36 +0800 Subject: [PATCH] refactor: move useTheme hook into separate store, also closes #528 (#529) --- apps/readest-app/src/app/auth/page.tsx | 4 +- apps/readest-app/src/app/library/page.tsx | 6 +- .../app/reader/components/FoliateViewer.tsx | 8 +- .../app/reader/components/FootnotePopup.tsx | 4 +- .../src/app/reader/components/Reader.tsx | 4 +- .../src/app/reader/components/ViewMenu.tsx | 15 +-- .../reader/components/notebook/Notebook.tsx | 4 +- .../reader/components/settings/ColorPanel.tsx | 24 ++-- .../reader/components/settings/FontPanel.tsx | 18 ++- .../components/settings/LayoutPanel.tsx | 30 +++-- .../reader/components/settings/MiscPanel.tsx | 4 +- .../reader/components/sidebar/BookCard.tsx | 10 +- .../app/reader/components/sidebar/SideBar.tsx | 4 +- .../src/app/reader/hooks/useBookShortcuts.ts | 8 +- apps/readest-app/src/app/reader/page.tsx | 2 - apps/readest-app/src/hooks/useTheme.ts | 103 +----------------- apps/readest-app/src/store/themeStore.ts | 85 +++++++++++++++ apps/readest-app/src/styles/themes.ts | 1 + apps/readest-app/src/utils/style.ts | 29 ++++- packages/foliate-js | 2 +- 20 files changed, 189 insertions(+), 176 deletions(-) create mode 100644 apps/readest-app/src/store/themeStore.ts diff --git a/apps/readest-app/src/app/auth/page.tsx b/apps/readest-app/src/app/auth/page.tsx index 8f491bd1..c9696fd3 100644 --- a/apps/readest-app/src/app/auth/page.tsx +++ b/apps/readest-app/src/app/auth/page.tsx @@ -12,8 +12,8 @@ import { IoArrowBack } from 'react-icons/io5'; import { useAuth } from '@/context/AuthContext'; import { supabase } from '@/utils/supabase'; -import { useTheme } from '@/hooks/useTheme'; import { useEnv } from '@/context/EnvContext'; +import { useThemeStore } from '@/store/themeStore'; import { useSettingsStore } from '@/store/settingsStore'; import { useTranslation } from '@/hooks/useTranslation'; import { isTauriAppPlatform } from '@/services/environment'; @@ -61,7 +61,7 @@ export default function AuthPage() { const router = useRouter(); const { login } = useAuth(); const { envConfig, appService } = useEnv(); - const { isDarkMode } = useTheme(); + const { isDarkMode } = useThemeStore(); const { settings, setSettings, saveSettings } = useSettingsStore(); const [port, setPort] = useState(null); const isOAuthServerRunning = useRef(false); diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx index e522b799..a647d89a 100644 --- a/apps/readest-app/src/app/library/page.tsx +++ b/apps/readest-app/src/app/library/page.tsx @@ -20,11 +20,12 @@ import { impactFeedback } from '@tauri-apps/plugin-haptics'; import { useEnv } from '@/context/EnvContext'; import { useAuth } from '@/context/AuthContext'; -import { useTheme } from '@/hooks/useTheme'; +import { useThemeStore } from '@/store/themeStore'; import { useTranslation } from '@/hooks/useTranslation'; import { useLibraryStore } from '@/store/libraryStore'; import { useSettingsStore } from '@/store/settingsStore'; import { usePullToRefresh } from '@/hooks/usePullToRefresh'; +import { useTheme } from '@/hooks/useTheme'; import { useDemoBooks } from './hooks/useDemoBooks'; import { useBooksSync } from './hooks/useBooksSync'; import { useScreenWakeLock } from '@/hooks/useScreenWakeLock'; @@ -56,7 +57,8 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP setCheckOpenWithBooks, } = useLibraryStore(); const _ = useTranslation(); - const { updateAppTheme } = useTheme(); + useTheme(); + const { updateAppTheme } = useThemeStore(); const { settings, setSettings, saveSettings } = useSettingsStore(); const [loading, setLoading] = useState(false); const isInitiating = useRef(false); diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index 2a4ad934..96f17aac 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { BookDoc, getDirection } from '@/libs/document'; import { BookConfig } from '@/types/book'; import { FoliateView, wrappedFoliateView } from '@/types/view'; +import { useThemeStore } from '@/store/themeStore'; import { useReaderStore } from '@/store/readerStore'; import { useParallelViewStore } from '@/store/parallelViewStore'; import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents'; @@ -11,7 +12,6 @@ import { useProgressAutoSave } from '../hooks/useProgressAutoSave'; import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar'; import { getStyles, mountAdditionalFonts } from '@/utils/style'; import { getBookDirFromLanguage, getBookDirFromWritingMode } from '@/utils/book'; -import { useTheme } from '@/hooks/useTheme'; import { useUICSS } from '@/hooks/useUICSS'; import { handleKeydown, @@ -36,7 +36,7 @@ const FoliateViewer: React.FC<{ const { getView, setView: setFoliateView, setProgress } = useReaderStore(); const { getViewSettings, setViewSettings } = useReaderStore(); const { getParallels } = useParallelViewStore(); - const { themeCode } = useTheme(); + const { themeCode } = useThemeStore(); const viewSettings = getViewSettings(bookKey)!; const [toastMessage, setToastMessage] = useState(''); @@ -126,7 +126,7 @@ const FoliateViewer: React.FC<{ useEffect(() => { if (viewRef.current && viewRef.current.renderer) { const viewSettings = getViewSettings(bookKey)!; - viewRef.current.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + viewRef.current.renderer.setStyles?.(getStyles(viewSettings)); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [themeCode]); @@ -159,7 +159,7 @@ const FoliateViewer: React.FC<{ viewRef.current = view; setFoliateView(bookKey, view); - view.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view.renderer.setStyles?.(getStyles(viewSettings)); const isScrolled = viewSettings.scrolled!; const marginPx = viewSettings.marginPx!; diff --git a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx index 32069938..d10c9ed6 100644 --- a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx +++ b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useRef, useState } from 'react'; import { BookDoc } from '@/libs/document'; +import { useThemeStore } from '@/store/themeStore'; import { useReaderStore } from '@/store/readerStore'; import { useFoliateEvents } from '../hooks/useFoliateEvents'; -import { useTheme } from '@/hooks/useTheme'; import { getFootnoteStyles, getStyles } from '@/utils/style'; import { getPopupPosition, getPosition, Position } from '@/utils/sel'; import { eventDispatcher } from '@/utils/event'; @@ -27,7 +27,7 @@ const FootnotePopup: React.FC = ({ bookKey, bookDoc }) => { const [popupPosition, setPopupPosition] = useState(); const [showPopup, setShowPopup] = useState(false); const { getView, getViewSettings } = useReaderStore(); - const { themeCode } = useTheme(); + const { themeCode } = useThemeStore(); const view = getView(bookKey); const viewSettings = getViewSettings(bookKey)!; const footnoteHandler = new FootnoteHandler(); diff --git a/apps/readest-app/src/app/reader/components/Reader.tsx b/apps/readest-app/src/app/reader/components/Reader.tsx index a80194eb..6e6e534b 100644 --- a/apps/readest-app/src/app/reader/components/Reader.tsx +++ b/apps/readest-app/src/app/reader/components/Reader.tsx @@ -6,6 +6,7 @@ import { useEffect, Suspense, useRef } from 'react'; import { useEnv } from '@/context/EnvContext'; import { useTheme } from '@/hooks/useTheme'; +import { useThemeStore } from '@/store/themeStore'; import { useLibraryStore } from '@/store/libraryStore'; import { useSettingsStore } from '@/store/settingsStore'; import { useScreenWakeLock } from '@/hooks/useScreenWakeLock'; @@ -19,7 +20,8 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => { const { getVisibleLibrary, setLibrary } = useLibraryStore(); const isInitiating = useRef(false); - const { updateAppTheme } = useTheme(); + const { updateAppTheme } = useThemeStore(); + useTheme(); useScreenWakeLock(settings.screenWakeLock); useEffect(() => { diff --git a/apps/readest-app/src/app/reader/components/ViewMenu.tsx b/apps/readest-app/src/app/reader/components/ViewMenu.tsx index 63a6de20..ae8a92c5 100644 --- a/apps/readest-app/src/app/reader/components/ViewMenu.tsx +++ b/apps/readest-app/src/app/reader/components/ViewMenu.tsx @@ -7,9 +7,10 @@ import { MdZoomOut, MdZoomIn, MdCheck } from 'react-icons/md'; import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_STEP } from '@/services/constants'; import MenuItem from '@/components/MenuItem'; +import { useThemeStore } from '@/store/themeStore'; import { useReaderStore } from '@/store/readerStore'; import { useTranslation } from '@/hooks/useTranslation'; -import { useTheme, ThemeMode } from '@/hooks/useTheme'; +import { ThemeMode } from '@/styles/themes'; import { getStyles } from '@/utils/style'; import { getMaxInlineSize } from '@/utils/config'; @@ -28,7 +29,7 @@ const ViewMenu: React.FC = ({ const { getView, getViews, getViewSettings, setViewSettings } = useReaderStore(); const viewSettings = getViewSettings(bookKey)!; - const { themeMode, isDarkMode, themeCode, updateThemeMode } = useTheme(); + const { themeMode, isDarkMode, themeCode, setThemeMode } = useThemeStore(); const [isScrolledMode, setScrolledMode] = useState(viewSettings!.scrolled); const [isInvertedColors, setInvertedColors] = useState(viewSettings!.invert); const [zoomLevel, setZoomLevel] = useState(viewSettings!.zoomLevel!); @@ -47,12 +48,12 @@ const ViewMenu: React.FC = ({ const cycleThemeMode = () => { const nextMode: ThemeMode = themeMode === 'auto' ? 'light' : themeMode === 'light' ? 'dark' : 'auto'; - updateThemeMode(nextMode); + setThemeMode(nextMode); }; useEffect(() => { getViews().forEach((view) => { - view.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); + view.renderer.setStyles?.(getStyles(viewSettings!)); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [themeCode]); @@ -64,14 +65,14 @@ const ViewMenu: React.FC = ({ 'max-inline-size', `${getMaxInlineSize(viewSettings)}px`, ); - getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); + getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!)); setViewSettings(bookKey, viewSettings!); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isScrolledMode]); useEffect(() => { document.body.classList.toggle('invert', isInvertedColors); - getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); + getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isInvertedColors]); @@ -80,7 +81,7 @@ const ViewMenu: React.FC = ({ if (!view) return; viewSettings!.zoomLevel = zoomLevel; setViewSettings(bookKey, viewSettings!); - view.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); + view.renderer.setStyles?.(getStyles(viewSettings!)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [zoomLevel]); diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx index 847cc9ff..139e52ab 100644 --- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx +++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx @@ -7,7 +7,7 @@ import { useReaderStore } from '@/store/readerStore'; import { useSidebarStore } from '@/store/sidebarStore'; import { useNotebookStore } from '@/store/notebookStore'; import { useTranslation } from '@/hooks/useTranslation'; -import { useTheme } from '@/hooks/useTheme'; +import { useThemeStore } from '@/store/themeStore'; import { useEnv } from '@/context/EnvContext'; import { useDrag } from '@/hooks/useDrag'; import { TextSelection } from '@/utils/sel'; @@ -23,7 +23,7 @@ const MAX_NOTEBOOK_WIDTH = 0.45; const Notebook: React.FC = ({}) => { const _ = useTranslation(); - const { updateAppTheme } = useTheme(); + const { updateAppTheme } = useThemeStore(); const { envConfig, appService } = useEnv(); const { settings } = useSettingsStore(); const { sideBarBookKey } = useSidebarStore(); diff --git a/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx b/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx index f580b497..10396c48 100644 --- a/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx @@ -3,24 +3,24 @@ import { MdOutlineLightMode, MdOutlineDarkMode } from 'react-icons/md'; import { MdRadioButtonUnchecked, MdRadioButtonChecked } from 'react-icons/md'; import { TbSunMoon } from 'react-icons/tb'; -import { useTheme } from '@/hooks/useTheme'; import { themes } from '@/styles/themes'; import { getStyles } from '@/utils/style'; +import { useThemeStore } from '@/store/themeStore'; import { useReaderStore } from '@/store/readerStore'; import { useTranslation } from '@/hooks/useTranslation'; import { useResponsiveSize } from '@/hooks/useResponsiveSize'; const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const _ = useTranslation(); - const { themeMode, themeColor, themeCode, isDarkMode, updateThemeMode, updateThemeColor } = - useTheme(); + const { themeMode, themeColor, themeCode, isDarkMode, setThemeMode, setThemeColor } = + useThemeStore(); const { getViews, getViewSettings } = useReaderStore(); const viewSettings = getViewSettings(bookKey)!; const iconSize24 = useResponsiveSize(24); useEffect(() => { getViews().forEach((view) => { - view.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); + view.renderer.setStyles?.(getStyles(viewSettings!)); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [themeCode]); @@ -29,11 +29,11 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {

{_('Theme Mode')}

-
+
@@ -41,8 +41,8 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
@@ -50,8 +50,8 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
@@ -78,7 +78,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { name='theme' value={name} checked={themeColor === name} - onChange={() => updateThemeColor(name)} + onChange={() => setThemeColor(name)} className='hidden' /> {themeColor === name ? ( diff --git a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx index 8422903f..e66ecc7a 100644 --- a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx @@ -16,7 +16,6 @@ import { import { useReaderStore } from '@/store/readerStore'; import { useSettingsStore } from '@/store/settingsStore'; import { useTranslation } from '@/hooks/useTranslation'; -import { useTheme } from '@/hooks/useTheme'; import { useEnv } from '@/context/EnvContext'; import { getStyles } from '@/utils/style'; import { getOSPlatform } from '@/utils/misc'; @@ -66,7 +65,6 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const { getView, getViewSettings, setViewSettings } = useReaderStore(); const view = getView(bookKey); const viewSettings = getViewSettings(bookKey)!; - const { themeCode } = useTheme(); const fontFamilyOptions = [ { @@ -126,7 +124,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.defaultFont = defaultFont; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultFont]); @@ -137,7 +135,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.defaultFontSize = defaultFontSize; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultFontSize]); @@ -148,7 +146,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.minimumFontSize = minFontSize; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [minFontSize]); @@ -159,7 +157,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.fontWeight = fontWeight; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [fontWeight]); @@ -170,7 +168,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.serifFont = serifFont; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [serifFont]); @@ -181,7 +179,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.sansSerifFont = sansSerifFont; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [sansSerifFont]); @@ -192,7 +190,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.monospaceFont = monospaceFont; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [monospaceFont]); @@ -203,7 +201,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.overrideFont = overrideFont; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [overrideFont]); diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx index ee15a6fc..ef73614a 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -7,7 +7,6 @@ import { useSettingsStore } from '@/store/settingsStore'; import { useReaderStore } from '@/store/readerStore'; import { useBookDataStore } from '@/store/bookDataStore'; import { useTranslation } from '@/hooks/useTranslation'; -import { useTheme } from '@/hooks/useTheme'; import { getStyles } from '@/utils/style'; import { getMaxInlineSize } from '@/utils/config'; import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book'; @@ -21,7 +20,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const view = getView(bookKey); const bookData = getBookData(bookKey)!; const viewSettings = getViewSettings(bookKey)!; - const { themeCode } = useTheme(); const [paragraphMargin, setParagraphMargin] = useState(viewSettings.paragraphMargin!); const [lineHeight, setLineHeight] = useState(viewSettings.lineHeight!); @@ -45,7 +43,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.paragraphMargin = paragraphMargin; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [paragraphMargin]); @@ -56,7 +54,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.lineHeight = lineHeight; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [lineHeight]); @@ -67,7 +65,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.wordSpacing = wordSpacing; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [wordSpacing]); @@ -78,7 +76,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.letterSpacing = letterSpacing; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [letterSpacing]); @@ -89,7 +87,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.textIndent = textIndent; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [textIndent]); @@ -100,7 +98,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.fullJustification = fullJustification; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [fullJustification]); @@ -111,7 +109,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.hyphenation = hyphenation; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hyphenation]); @@ -180,7 +178,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { viewSettings.writingMode = writingMode; setViewSettings(bookKey, viewSettings); if (view) { - view.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view.renderer.setStyles?.(getStyles(viewSettings)); view.book.dir = getBookDirFromWritingMode(writingMode); } if ( @@ -199,7 +197,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.overrideLayout = overrideLayout; setSettings(settings); } - view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [overrideLayout]); @@ -213,10 +211,10 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {

{_('Writing Mode')}

-
+