Files
open-design/apps/web/app/layout.tsx
T
Zakaria a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
first-commit
2026-05-04 14:58:14 -04:00

43 lines
1.6 KiB
TypeScript

import type { Metadata, Viewport } from 'next';
import type { ReactNode } from 'react';
import { I18nProvider } from '../src/i18n';
import '../src/index.css';
export const metadata: Metadata = {
title: 'Open Design',
icons: {
icon: '/app-icon.svg',
// Safari pinned-tab mask icon — Next.js's Metadata API doesn't have a
// dedicated `mask` field, so we surface it via the generic `other`
// bucket which renders as a raw <link rel="mask-icon" ...>.
other: [{ rel: 'mask-icon', url: '/app-icon.svg', color: '#363636' }],
},
};
export const viewport: Viewport = {
themeColor: '#F4EFE6',
};
/**
* Inline script that runs before React hydrates to apply the saved theme
* preference without a flash of unstyled content. It reads the same
* localStorage key used by `state/config.ts` and sets `data-theme` on
* `<html>` immediately — before any CSS or React paint.
*/
const themeInitScript = `(function(){try{var t=JSON.parse(localStorage.getItem('open-design:config')||'{}').theme;if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);}catch(e){}})();`;
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang='en' suppressHydrationWarning>
{/* eslint-disable-next-line @next/next/no-sync-scripts */}
<head>
{/* biome-ignore lint/security/noDangerouslySetInnerHtml: intentional theme-init inline script to prevent FOUC */}
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
</head>
<body suppressHydrationWarning>
<I18nProvider>{children}</I18nProvider>
</body>
</html>
);
}