Add better theme support and update marketing page layout

The theme property was added to the RootProvider component. This allows the application to initially load the theme stored in the user's cookies. The marketing page layout has been updated: images were resized, a billing section was added, and heading styles were adjusted. Text strings were also revised for clarity.
This commit is contained in:
giancarlo
2024-04-15 15:50:24 +08:00
parent cb4d89c473
commit cb690ec317
6 changed files with 103 additions and 20 deletions

View File

@@ -24,22 +24,23 @@ export default async function RootLayout({
children: React.ReactNode;
}) {
const { language } = await createI18nServerInstance();
const theme = getTheme();
return (
<html lang={language} className={getClassName()}>
<html lang={language} className={getClassName(theme)}>
<CsrfTokenMeta />
<body>
<RootProviders lang={language}>{children}</RootProviders>
<RootProviders theme={theme} lang={language}>
{children}
</RootProviders>
<Toaster richColors={false} />
</body>
</html>
);
}
function getClassName() {
const themeCookie = cookies().get('theme')?.value;
const theme = themeCookie ?? appConfig.theme;
function getClassName(theme?: string) {
const dark = theme === 'dark';
return cn(
@@ -51,6 +52,10 @@ function getClassName() {
);
}
function getTheme() {
return cookies().get('theme')?.value;
}
export const metadata = {
title: appConfig.name,
description: appConfig.description,