openhands
a98b194386
- Add theme_scopes and theme_scope_values database tables for scoped themes - Implement theme resolver engine with inheritance: global > site > module > route - Add module detection for 20+ routes (shop, guilds, radio, news, etc.) - Create admin UI at /admin/theme-builder with scope tree and color editor - Add ScopedThemeVars component for injecting scoped CSS via data-attributes - Add ThemeScopeDetector client component for runtime module/route detection - Add site-resolver for multi-site domain detection - Add /api/themes/export endpoint (JSON, CSS, variables formats) - Add /api/themes/export/embed.js for external integration widget - Add server actions for full CRUD on scopes and theme values - Add admin nav link and EN/NL translations
30 lines
714 B
TypeScript
30 lines
714 B
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect } from "react";
|
|
import { detectModule } from "@/lib/theme-modules";
|
|
|
|
/**
|
|
* Sets data-theme-module and data-theme-route attributes on <html>
|
|
* based on the current pathname. This enables scoped CSS overrides
|
|
* from ScopedThemeVars.
|
|
*/
|
|
export function ThemeScopeDetector() {
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
const moduleId = detectModule(pathname);
|
|
const html = document.documentElement;
|
|
|
|
if (moduleId) {
|
|
html.setAttribute("data-theme-module", moduleId);
|
|
} else {
|
|
html.removeAttribute("data-theme-module");
|
|
}
|
|
|
|
html.setAttribute("data-theme-route", pathname);
|
|
}, [pathname]);
|
|
|
|
return null;
|
|
}
|