Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: themes

Browse Source
This commit is contained in:
David Nguyen
2025-02-18 15:17:13 +11:00
parent fb16214dc5
commit dd602a7e1c
4 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/remix/app/entry.client.tsx
View File

@ -5,10 +5,17 @@ import { detect, fromHtmlTag } from '@lingui/detect-locale';
import { I18nProvider } from '@lingui/react';
import { hydrateRoot } from 'react-dom/client';
import { HydratedRouter } from 'react-router/dom';
import { Theme, ThemeProvider } from 'remix-themes';
import { match } from 'ts-pattern';
import { dynamicActivate } from '@documenso/lib/utils/i18n';
async function main() {
const theme = match(document.documentElement.getAttribute('data-theme'))
.with('dark', () => Theme.DARK)
.with('light', () => Theme.LIGHT)
.otherwise(() => null);
const locale = detect(fromHtmlTag('lang')) || 'en';
await dynamicActivate(locale);
@ -18,7 +25,9 @@ async function main() {
document,
<StrictMode>
<I18nProvider i18n={i18n}>
<HydratedRouter />
<ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
<HydratedRouter />
</ThemeProvider>
</I18nProvider>
</StrictMode>,
);

10
apps/remix/app/entry.server.tsx
View File

@ -7,11 +7,13 @@ import type { RenderToPipeableStreamOptions } from 'react-dom/server';
import { renderToPipeableStream } from 'react-dom/server';
import type { AppLoadContext, EntryContext } from 'react-router';
import { ServerRouter } from 'react-router';
import { ThemeProvider } from 'remix-themes';
import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
import { dynamicActivate, extractLocaleData } from '@documenso/lib/utils/i18n';
import { langCookie } from './storage/lang-cookie.server';
import { themeSessionResolver } from './storage/theme-session.server';
export const streamTimeout = 5_000;
@ -30,6 +32,10 @@ export default async function handleRequest(
await dynamicActivate(language);
const { getTheme } = await themeSessionResolver(request);
const theme = getTheme();
return new Promise((resolve, reject) => {
let shellRendered = false;
const userAgent = request.headers.get('user-agent');
@ -41,7 +47,9 @@ export default async function handleRequest(
const { pipe, abort } = renderToPipeableStream(
<I18nProvider i18n={i18n}>
<ServerRouter context={routerContext} url={request.url} />
<ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
<ServerRouter context={routerContext} url={request.url} />
</ThemeProvider>
</I18nProvider>,
{
[readyOption]() {

40
apps/remix/app/root.tsx
View File

@ -12,7 +12,7 @@ import {
useLoaderData,
useLocation,
} from 'react-router';
import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes';
import { PreventFlashOnWrongTheme, useTheme } from 'remix-themes';
import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
import { SessionProvider } from '@documenso/lib/client-only/providers/session';
@ -105,13 +105,21 @@ export async function loader({ request }: Route.LoaderArgs) {
);
}
export function App() {
export function Layout({ children }: { children: React.ReactNode }) {
const { publicEnv, lang, session, ...data } = useLoaderData<typeof loader>() || {};
const [theme] = useTheme();
const location = useLocation();
useEffect(() => {
if (env('NODE_ENV') === 'production') {
trackPageview();
}
}, [location.pathname]);
return (
<html translate="no" lang={lang} className={theme ?? ''}>
<html translate="no" lang={lang} data-theme={theme} className={theme ?? ''}>
<head>
<meta charSet="utf-8" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@ -136,7 +144,8 @@ export function App() {
<SessionProvider initialSession={session}>
<TooltipProvider>
<TrpcProvider>
<Outlet />
{children}
<Toaster />
</TrpcProvider>
</TooltipProvider>
@ -157,27 +166,8 @@ export function App() {
);
}
/**
* We have this weird setup with:
* - No root layout
* - AppWithTheme
*
* To handle remix-themes.
*/
export default function AppWithTheme({ loaderData }: Route.ComponentProps) {
const location = useLocation();
useEffect(() => {
if (env('NODE_ENV') === 'production') {
trackPageview();
}
}, [location.pathname]);
return (
<ThemeProvider specifiedTheme={loaderData.theme} themeAction="/api/theme">
<App />
</ThemeProvider>
);
export default function App() {
return <Outlet />;
}
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

2
packages/lib/utils/env.ts
View File

@ -13,7 +13,7 @@ export const env = (variable: EnvironmentVariable | (string & object)): string |
return window.__ENV__[variable];
}
return process?.env?.[variable];
return typeof process !== 'undefined' ? process?.env?.[variable] : undefined;
};
export const createPublicEnv = () =>