Add automatic theme on the web

front/apps/mobile/app/_layout.tsx

@@ -33,7 +33,7 @@ import {
 	Poppins_400Regular,
 	Poppins_900Black,
 } from "@expo-google-fonts/poppins";
-import { useCallback, useState } from "react";
+import { useCallback, useLayoutEffect, useState } from "react";
 import { useColorScheme } from "react-native";
 import { initReactI18next } from "react-i18next";
 import { useTheme } from "yoshiki/native";
@@ -82,6 +82,11 @@ export default function Root() {
 	const theme = useColorScheme();
 	const [fontsLoaded] = useFonts({ Poppins_300Light, Poppins_400Regular, Poppins_900Black });
 
+	useLayoutEffect(() => {
+		// This does not seems to work on the global scope so why not.
+		SplashScreen.preventAutoHideAsync();
+	})
+
 	const onLayout = useCallback(async () => {
 		if (fontsLoaded) {
 			await SplashScreen.hideAsync();

front/apps/mobile/package.json

@@ -42,7 +42,7 @@
 		"react-native-screens": "~3.18.0",
 		"react-native-svg": "13.4.0",
 		"react-native-video": "alpha",
-		"yoshiki": "0.3.2"
+		"yoshiki": "0.3.3"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.19.3",

front/apps/web/package.json

@@ -36,7 +36,7 @@
 		"react-native-web": "^0.18.10",
 		"solito": "^2.0.5",
 		"superjson": "^1.11.0",
-		"yoshiki": "0.3.2",
+		"yoshiki": "0.3.3",
 		"zod": "^3.19.1"
 	},
 	"devDependencies": {

front/apps/web/src/pages/_app.tsx

@@ -96,8 +96,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 			</Head>
 			<QueryClientProvider client={queryClient}>
 				<Hydrate state={queryState}>
-					{/* TODO: Add theme support */}
-					<ThemeSelector theme="light" font={{ normal: "inherit" }}>
+					<ThemeSelector theme="auto" font={{ normal: "inherit" }}>
 						<GlobalCssTheme />
 						<Layout page={<Component {...props} />} {...layoutProps} />
 					</ThemeSelector>

front/packages/models/src/traits/images.ts

@@ -22,10 +22,9 @@ import { Platform } from "react-native";
 import { z } from "zod";
 
 export const imageFn = (url: string) =>
-	// TODO remove the hardcodded fallback
 	Platform.OS === "web"
 		? `/api/${url}`
-		: (process.env.PUBLIC_BACK_URL ?? "https://beta.sdg.moe") + url;
+		: process.env.PUBLIC_BACK_URL + url;
 
 export const ImagesP = z.object({
 	/**

front/packages/primitives/src/themes/theme.tsx

@@ -20,11 +20,12 @@
 
 import { ReactNode } from "react";
 import { Property } from "csstype";
-import { Theme, ThemeProvider } from "yoshiki";
+import { Theme, ThemeProvider, useAutomaticTheme } from "yoshiki";
 import { useTheme, useYoshiki } from "yoshiki/native";
 import "yoshiki";
 import "yoshiki/native";
 import { catppuccin } from "./catppuccin";
+import { Platform } from "react-native";
 
 type FontList = Partial<
 	Record<
@@ -75,10 +76,14 @@ export type ThemeBuilder = {
 	dark: Omit<Mode, "contrast"> & { default: Variant };
 };
 
-const selectMode = (theme: ThemeBuilder & { font: FontList }, mode: "light" | "dark"): Theme => {
+const selectMode = (
+	theme: ThemeBuilder & { font: FontList },
+	mode: "light" | "dark" | "auto",
+): Theme => {
 	const { light: lightBuilder, dark: darkBuilder, ...options } = theme;
 	const light = { ...lightBuilder, ...lightBuilder.default, contrast: lightBuilder.colors.black };
 	const dark = { ...darkBuilder, ...darkBuilder.default, contrast: darkBuilder.colors.white };
+	if (Platform.OS !== "web" || mode !== "auto") {
 		const value = mode === "light" ? light : dark;
 		const alternate = mode === "light" ? dark : light;
 		return {
@@ -89,6 +94,20 @@ const selectMode = (theme: ThemeBuilder & { font: FontList }, mode: "light" | "d
 			user: value,
 			alternate,
 		};
+	}
+
+	// eslint-disable-next-line react-hooks/rules-of-hooks
+	const auto = useAutomaticTheme({ light, dark });
+	// eslint-disable-next-line react-hooks/rules-of-hooks
+	const alternate = useAutomaticTheme({ dark: light, light: dark });
+	return {
+		...options,
+		...auto,
+		light,
+		dark,
+		user: auto,
+		alternate,
+	};
 };
 
 const switchVariant = (theme: Theme) => {
@@ -112,12 +131,12 @@ export const ThemeSelector = ({
 	font,
 }: {
 	children: ReactNode;
-	theme: "light" | "dark";
+	theme: "light" | "dark" | "auto";
 	font: FontList;
 }) => {
-	return (
-		<ThemeProvider theme={selectMode({ ...catppuccin, font }, theme)}>{children}</ThemeProvider>
-	);
+	const newTheme = selectMode({ ...catppuccin, font }, theme);
+
+	return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;
 };
 
 type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;

front/packages/ui/src/details/show.tsx

@@ -57,7 +57,16 @@ export const ShowDetails: QueryPage<{ slug: string; season: string }> = ({ slug,
 			{...css(
 				[
 					{ bg: (theme) => theme.background },
-					Platform.OS === "web" && { flexGrow: 1, flexShrink: 1, overflow: "overlay" as any },
+					Platform.OS === "web" && {
+						flexGrow: 1,
+						flexShrink: 1,
+						// @ts-ignore Web only property
+						overflow: "auto" as any,
+						// @ts-ignore Web only property
+						overflowX: "hidden",
+						// @ts-ignore Web only property
+						overflowY: "overlay",
+					},
 				],
 				props,
 			)}
@@ -92,4 +101,4 @@ ShowDetails.getFetchUrls = ({ slug, season = 1 }) => [
 	EpisodeList.query(slug, season),
 ];
 
-ShowDetails.getLayout = { Layout: DefaultLayout, props: { transparent: true }};
+ShowDetails.getLayout = { Layout: DefaultLayout, props: { transparent: true } };

front/yarn.lock

@@ -10200,7 +10200,7 @@ __metadata:
     react-native-svg-transformer: ^1.0.0
     react-native-video: alpha
     typescript: ^4.6.3
-    yoshiki: 0.3.2
+    yoshiki: 0.3.3
   languageName: unknown
   linkType: soft
 
@@ -10592,6 +10592,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-hash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "object-hash@npm:3.0.0"
+  checksum: 80b4904bb3857c52cc1bfd0b52c0352532ca12ed3b8a6ff06a90cd209dfda1b95cee059a7625eb9da29537027f68ac4619363491eedb2f5d3dddbba97494fd6c
+  languageName: node
+  linkType: hard
+
 "object-inspect@npm:^1.12.2, object-inspect@npm:^1.9.0":
   version: 1.12.2
   resolution: "object-inspect@npm:1.12.2"
@@ -13925,7 +13932,7 @@ __metadata:
     superjson: ^1.11.0
     typescript: ^4.9.3
     webpack: ^5.75.0
-    yoshiki: 0.3.2
+    yoshiki: 0.3.3
     zod: ^3.19.1
   languageName: unknown
   linkType: soft
@@ -14271,14 +14278,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoshiki@npm:0.3.2":
-  version: 0.3.2
-  resolution: "yoshiki@npm:0.3.2"
+"yoshiki@npm:0.3.3":
+  version: 0.3.3
+  resolution: "yoshiki@npm:0.3.3"
   dependencies:
     "@types/node": 18.x.x
     "@types/react": 18.x.x
     "@types/react-native": ">= 0.70.0"
     inline-style-prefixer: ^7.0.0
+    object-hash: ^3.0.0
   peerDependencies:
     react: "*"
     react-native: "*"
@@ -14288,7 +14296,7 @@ __metadata:
       optional: true
     react-native-web:
       optional: true
-  checksum: a723473e5593e9871d4903cfc9186240c6745cd97ca45ba9f1f0233e7717afefb908c08a0a6e2dc37ac2bbb0c9df269364767db6c885a8f2e19748d295c42a57
+  checksum: 6358f53d28ba419a8783cd5cf785eb7c64878504815ed4c6794fbf81ed86bca83560a7677e5ecfe568f37c0ff714bf07f3a33c11ce6d869f6d758e800bfa58ba
   languageName: node
   linkType: hard