fix(theme): load auto theme config via server function to support runtime environment variables

src/components/theme-switcher.ts

@@ -2,32 +2,36 @@ import { getLocalTimeZone, now } from "@internationalized/date";
 import { useTheme } from "next-themes";
 import { useEffect } from "react";
 import { getTimes } from "suncalc";
+import type { ThemeConfig } from "@/server/theme.ts";
 
-export const LATITUDE = Number(process.env.LATITUDE);
-export const LONGITUDE = Number(process.env.LONGITUDE);
-export const MORNING_START_HOUR = process.env.MORNING_START_HOUR?.trim() ? Number(process.env.MORNING_START_HOUR?.trim()) : undefined;
-
-export function getTimeBasedTheme(): "dark" | "light" {
+export function getTimeBasedTheme(config: ThemeConfig, targetDate?: Date): "dark" | "light" {
+	const { latitude, longitude, morningStartHour } = config;
 	const current = now(getLocalTimeZone());
-	const date = current.toDate();
-	const { sunrise, sunset } = getTimes(date, LATITUDE, LONGITUDE);
+	const date = targetDate ?? current.toDate();
+	const { sunrise, sunset } = getTimes(date, latitude, longitude);
 
 	const isAfterSunrise = Boolean(sunrise && date >= sunrise);
-	const isAfterMorningHour = MORNING_START_HOUR === undefined || current.hour >= MORNING_START_HOUR;
+	const isAfterMorningHour = morningStartHour === undefined || current.hour >= morningStartHour;
 	const isBeforeSunset = Boolean(sunset && date < sunset);
 
 	const isDaytime = isAfterSunrise && isAfterMorningHour && isBeforeSunset;
 
 	return isDaytime ? "light" : "dark";
 }
 
-export function useAutoTheme() {
+export function useAutoTheme(config: ThemeConfig) {
 	const { resolvedTheme, setTheme } = useTheme();
-	const expected = getTimeBasedTheme();
 
 	useEffect(() => {
-		if (resolvedTheme !== expected) {
-			setTheme(expected);
+		function updateTheme() {
+			const expected = getTimeBasedTheme(config);
+			if (resolvedTheme !== expected) {
+				setTheme(expected);
+			}
 		}
-	}, [resolvedTheme, expected, setTheme]);
+
+		updateTheme();
+		const intervalId = setInterval(updateTheme, 60_000);
+		return () => clearInterval(intervalId);
+	}, [resolvedTheme, config, setTheme]);
 }

src/routes/__root.tsx

@@ -5,13 +5,15 @@ import type { ReactNode } from "react";
 import { RouteNotFound } from "@/components/route-not-found.tsx";
 import { useAutoTheme } from "@/components/theme-switcher.ts";
 import { DevtoolsProvider } from "@/providers/DevtoolsProvider.tsx";
+import { fetchThemeConfigServerFn } from "@/server/theme.ts";
 import "@/styles/globals.css";
 
 interface RouterContext {
 	queryClient: QueryClient;
 }
 
 export const Route = createRootRouteWithContext<RouterContext>()({
+	loader: () => fetchThemeConfigServerFn(),
 	component: RootComponent,
 	notFoundComponent: RouteNotFound,
 	head: () => ({
@@ -24,7 +26,8 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });
 
 function AutoTheme() {
-	useAutoTheme();
+	const config = Route.useLoaderData();
+	useAutoTheme(config);
 	return null;
 }
 

src/server/theme.ts

@@ -0,0 +1,24 @@
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
+
+const themeEnvSchema = z.object({
+	LATITUDE: z.coerce.number().min(-90).max(90),
+	LONGITUDE: z.coerce.number().min(-180).max(180),
+	MORNING_START_HOUR: z.coerce.number().int().min(0).max(23).optional(),
+});
+
+export interface ThemeConfig {
+	latitude: number;
+	longitude: number;
+	morningStartHour?: number;
+}
+
+export const fetchThemeConfigServerFn = createServerFn({ method: "GET" }).handler(async (): Promise<ThemeConfig> => {
+	const env = themeEnvSchema.parse(process.env);
+
+	return {
+		latitude: env.LATITUDE,
+		longitude: env.LONGITUDE,
+		morningStartHour: env.MORNING_START_HOUR,
+	};
+});