adds sepia theme

package.json

@@ -21,6 +21,7 @@
     "@mantine/hooks": "^7.3.2",
     "@prisma/client": "^5.9.1",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-use-escape-keydown": "^1.0.3",
     "@storybook/manager-api": "^7.5.1",
     "@storybook/theming": "^7.5.1",
     "@uidotdev/usehooks": "^2.4.1",

src/_pages/ReaderPage/chapterContent/renderChapterContent/ChapterContentComponents.tsx

@@ -31,7 +31,7 @@ export const JesusWords = ({ children }: { children: ReactNode }) => {
 	return (
 		<span
 			data-component="JesusWords"
-			className={cx(showRedLetters && css({ color: 'fg.jesus_words' }))}
+			className={cx(showRedLetters && css({ color: 'fg.jesusWords' }))}
 		>
 			{children}
 		</span>

src/app/layout.tsx

@@ -1,8 +1,11 @@
 import '~/index.css'
 
 import { type Viewport } from 'next'
+import { cookies } from 'next/headers'
 import { token } from 'styled-system/tokens'
 
+import { THEME } from '~/state'
+
 export { RootLayout as default } from '~/layouts'
 
 export const metadata = {
@@ -14,21 +17,30 @@ export const metadata = {
 	title: 'The Good Book',
 }
 
-export const viewport = (): Viewport => ({
-	initialScale: 1,
-	maximumScale: 1,
-	minimumScale: 1,
-	userScalable: false,
-	viewportFit: 'cover',
-	width: 'device-width',
-	themeColor: [
-		{
-			media: '(prefers-color-scheme: light)',
-			color: token('colors.white'),
-		},
-		{
-			media: '(prefers-color-scheme: dark)',
-			color: token('colors.neutral.800'),
-		},
-	],
-})
+export const viewport = (): Viewport => {
+	const cookieStore = cookies()
+	const theme = cookieStore.get('theme')?.value as THEME
+
+	const isSepiaTheme = theme === THEME.Sepia
+
+	return {
+		initialScale: 1,
+		maximumScale: 1,
+		minimumScale: 1,
+		userScalable: false,
+		viewportFit: 'cover',
+		width: 'device-width',
+		themeColor: [
+			{
+				media: '(prefers-color-scheme: light)',
+				color: isSepiaTheme ? token('colors.sepia.100') : token('colors.white'),
+			},
+			{
+				media: '(prefers-color-scheme: dark)',
+				color: isSepiaTheme
+					? token('colors.sepia.950')
+					: token('colors.neutral.800'),
+			},
+		],
+	}
+}

src/helpers/index.ts

@@ -1,3 +1,4 @@
+export * from './steppedRange'
 export * from './withCache'
 export * from './withCopyToClipboard'
 export * from './withPerformanceLog'

src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useRangeInput'
+export * from './useSetupClientState'

src/hooks/useSetupClientState.tsx

@@ -0,0 +1,31 @@
+import { usePrevious } from '@mantine/hooks'
+import { type PrimitiveAtom, useAtom } from 'jotai/index'
+import { useHydrateAtoms } from 'jotai/utils'
+import { useEffect } from 'react'
+
+import { setCookie } from '~/app/action'
+
+export const useSetupClientState = <T,>(
+	atom: PrimitiveAtom<T>,
+	savedValue: T,
+	cookieName: string,
+) => {
+	const [value, setValue] = useAtom(atom)
+
+	useEffect(() => {
+		setValue(savedValue)
+	}, [savedValue, setValue])
+
+	const prevValue = usePrevious(value)
+
+	useEffect(() => {
+		if (prevValue !== value) {
+			void setCookie(
+				cookieName,
+				typeof value === 'string' ? value : JSON.stringify(value),
+			)
+		}
+	}, [cookieName, prevValue, value])
+
+	useHydrateAtoms([[atom, savedValue]])
+}

src/layouts/RootLayout/GlobalBackdrop.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import { AnimatePresence, motion } from 'framer-motion'
-import { useAtom } from 'jotai'
+import { useAtomValue } from 'jotai'
 import { css } from 'styled-system/css'
 
 import { showBackdropAtom } from '~/state'
 
 export const GlobalBackdrop = () => {
-	const [show, setShow] = useAtom(showBackdropAtom)
+	const show = useAtomValue(showBackdropAtom)
 
 	return (
 		<AnimatePresence>
@@ -23,7 +23,6 @@ export const GlobalBackdrop = () => {
 						inset: 0,
 						bg: 'bg.canvas',
 					})}
-					onClick={() => setShow(false)}
 				/>
 			)}
 		</AnimatePresence>

src/layouts/RootLayout/Root.layout.tsx

@@ -1,21 +1,21 @@
-import {
-	Inter,
-	Lexend,
-	Roboto_Condensed,
-	Source_Serif_4,
-} from 'next/font/google'
-import localFont from 'next/font/local'
 import { cookies } from 'next/headers'
 import { type ReactNode } from 'react'
 import { cx } from 'styled-system/css'
 import { macrogrid } from 'styled-system/patterns'
 
 import { SafeAreaBottom } from '~/components'
 import { getBookListWithCache } from '~/db'
-import { GlobalBackdrop } from '~/layouts/RootLayout/GlobalBackdrop'
+import {
+	fontClean,
+	fontCondensed,
+	fontDyslexic,
+	fontMono,
+	fontOldStyle,
+	fontSans,
+} from '~/layouts/RootLayout/fonts'
 import {
 	BottomToolbar,
-	SetUpPreferencesMenuState,
+	SetUpPersistedState,
 	TopToolbar,
 	VerseDetailsMenuRoot,
 } from '~/organisms'
@@ -36,70 +36,18 @@ import {
 	showVerseDetailsDefaultValue,
 	type TFont,
 	type TFontSizeOffset,
+	type THEME,
+	THEME_COOKIE,
+	themeDefaultValue,
 	type TLeading,
 	VERSE_BREAKS_LINE_COOKIE,
 	verseBreaksLineDefaultValue,
 } from '~/state'
 
+import { GlobalBackdrop } from './GlobalBackdrop'
 import { RootProviders } from './RootProviders'
 import { UseLockBodyScroll } from './UseLockBodyScroll'
 
-const fontSans = localFont({
-	src: [
-		{ path: './fonts/Geist-Regular.woff2', weight: '400' },
-		{
-			path: './fonts/Geist-Regular.otf',
-			weight: '400',
-		},
-		{ path: './fonts/Geist-Bold.woff2', weight: '700' },
-		{ path: './fonts/Geist-Bold.otf', weight: '700' },
-	],
-	variable: '--font-sans',
-})
-
-const fontMono = localFont({
-	src: [
-		{ path: './fonts/GeistMono-Regular.woff2', weight: '400' },
-		{
-			path: './fonts/GeistMono-Regular.otf',
-			weight: '400',
-		},
-		{ path: './fonts/GeistMono-UltraBlack.woff2', weight: '700' },
-		{ path: './fonts/GeistMono-UltraBlack.otf', weight: '700' },
-	],
-	variable: '--font-mono',
-})
-
-const fontClean = Inter({
-	weight: ['400', '700'],
-	style: ['normal'],
-	display: 'swap',
-	variable: '--font-clean',
-	subsets: ['latin', 'latin-ext'],
-})
-
-const fontDyslexic = Lexend({
-	weight: ['400', '700'],
-	display: 'swap',
-	variable: '--font-dyslexic',
-	subsets: ['latin', 'latin-ext'],
-})
-
-const fontCondensed = Roboto_Condensed({
-	weight: ['400', '700'],
-	style: ['normal'],
-	display: 'swap',
-	variable: '--font-condensed',
-	subsets: ['latin', 'latin-ext'],
-})
-
-const fontOldStyle = Source_Serif_4({
-	weight: ['400', '700'],
-	display: 'swap',
-	variable: '--font-old-style',
-	subsets: ['latin', 'latin-ext'],
-})
-
 const getBooleanCookieValue = (
 	cookieValue: string | undefined,
 	fallback: boolean,
@@ -110,6 +58,7 @@ export const RootLayout = async ({ children }: { children: ReactNode }) => {
 
 	const cookieStore = cookies()
 
+	const savedTheme = cookieStore.get(THEME_COOKIE)?.value ?? themeDefaultValue
 	const savedFontSizeOffset =
 		cookieStore.get(FONT_SIZE_OFFSET_COOKIE)?.value ??
 		fontSizeOffsetDefaultValue
@@ -128,7 +77,8 @@ export const RootLayout = async ({ children }: { children: ReactNode }) => {
 
 	return (
 		<RootProviders>
-			<SetUpPreferencesMenuState
+			<SetUpPersistedState
+				savedTheme={savedTheme as THEME}
 				savedFontSizeOffset={Number(savedFontSizeOffset) as TFontSizeOffset}
 				savedLeading={Number(savedLeading) as TLeading}
 				savedFont={savedFont as TFont}
@@ -166,6 +116,7 @@ export const RootLayout = async ({ children }: { children: ReactNode }) => {
 				)}
 			>
 				<body
+					data-theme={savedTheme}
 					className={macrogrid({
 						gridTemplateRows: 'min-content 1fr min-content',
 						minH: '100dvh',

src/layouts/RootLayout/fonts.ts

@@ -0,0 +1,63 @@
+import {
+	Inter,
+	Lexend,
+	Roboto_Condensed,
+	Source_Serif_4,
+} from 'next/font/google'
+import localFont from 'next/font/local'
+
+export const fontSans = localFont({
+	src: [
+		{ path: './fonts/Geist-Regular.woff2', weight: '400' },
+		{
+			path: './fonts/Geist-Regular.otf',
+			weight: '400',
+		},
+		{ path: './fonts/Geist-Bold.woff2', weight: '700' },
+		{ path: './fonts/Geist-Bold.otf', weight: '700' },
+	],
+	variable: '--font-sans',
+})
+
+export const fontMono = localFont({
+	src: [
+		{ path: './fonts/GeistMono-Regular.woff2', weight: '400' },
+		{
+			path: './fonts/GeistMono-Regular.otf',
+			weight: '400',
+		},
+		{ path: './fonts/GeistMono-UltraBlack.woff2', weight: '700' },
+		{ path: './fonts/GeistMono-UltraBlack.otf', weight: '700' },
+	],
+	variable: '--font-mono',
+})
+
+export const fontClean = Inter({
+	weight: ['400', '700'],
+	style: ['normal'],
+	display: 'swap',
+	variable: '--font-clean',
+	subsets: ['latin', 'latin-ext'],
+})
+
+export const fontDyslexic = Lexend({
+	weight: ['400', '700'],
+	display: 'swap',
+	variable: '--font-dyslexic',
+	subsets: ['latin', 'latin-ext'],
+})
+
+export const fontCondensed = Roboto_Condensed({
+	weight: ['400', '700'],
+	style: ['normal'],
+	display: 'swap',
+	variable: '--font-condensed',
+	subsets: ['latin', 'latin-ext'],
+})
+
+export const fontOldStyle = Source_Serif_4({
+	weight: ['400', '700'],
+	display: 'swap',
+	variable: '--font-old-style',
+	subsets: ['latin', 'latin-ext'],
+})

src/layouts/RootLayout/index.ts

@@ -1 +1,7 @@
 export * from './Root.layout'
+export { fontOldStyle } from '~/layouts/RootLayout/fonts'
+export { fontCondensed } from '~/layouts/RootLayout/fonts'
+export { fontDyslexic } from '~/layouts/RootLayout/fonts'
+export { fontClean } from '~/layouts/RootLayout/fonts'
+export { fontMono } from '~/layouts/RootLayout/fonts'
+export { fontSans } from '~/layouts/RootLayout/fonts'