Manage More Themes

@import "./themes/default";
@import "./themes/dark";

import { ThemeProvider } from "@/ui/themes/ThemeContext";
 
const THEME_STORAGE_KEY = "devie-theme";
const DEFAULT_THEME = "theme-default";
const ALLOWED_THEMES = ["theme-default", "theme-dark"];
const themeBootScript = `(function () {
  try {
    var allowedThemes = new Set(${JSON.stringify(ALLOWED_THEMES)});
    var storedTheme = localStorage.getItem("devie-theme");
    document.documentElement.dataset.devieTheme =
      allowedThemes.has(storedTheme) ? storedTheme : "theme-default";
  } catch {
    document.documentElement.dataset.devieTheme = "theme-default";
  }
})();`;
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" data-devie-theme={DEFAULT_THEME} suppressHydrationWarning>
      <head>
        <script id="theme-boot">{themeBootScript}</script>
      </head>
      <body>
        <ThemeProvider defaultTheme={DEFAULT_THEME}>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}