45 lines
2.3 KiB
TypeScript
45 lines
2.3 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.
|
||
|
|
* Keep the accent variable mix ratios in sync with `accentVars()` in
|
||
|
|
* `src/state/appearance.ts`; this script cannot import application modules.
|
||
|
|
*/
|
||
|
|
const themeInitScript = `(function(){try{var c=JSON.parse(localStorage.getItem('open-design:config')||'{}');var t=c.theme;if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);var a=typeof c.accentColor==='string'&&/^#[0-9a-fA-F]{6}$/.test(c.accentColor.trim())?c.accentColor.trim().toLowerCase():'';if(a){var s=document.documentElement.style;s.setProperty('--accent',a);s.setProperty('--accent-strong','color-mix(in srgb, '+a+' 86%, var(--text-strong))');s.setProperty('--accent-soft','color-mix(in srgb, '+a+' 22%, var(--bg-panel))');s.setProperty('--accent-tint','color-mix(in srgb, '+a+' 12%, var(--bg-panel))');s.setProperty('--accent-hover','color-mix(in srgb, '+a+' 90%, var(--text-strong))');}}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>
|
||
|
|
);
|
||
|
|
}
|