updated examples: astro, nextjs, remix, bun, node

app/src/ui/Admin.tsx

@@ -63,7 +63,7 @@ const Skeleton = ({ theme = "light" }: { theme?: string }) => {
                className="flex flex-row w-full h-16 gap-2.5 border-muted border-b justify-start bg-muted/10"
             >
                <div className="max-h-full flex hover:bg-primary/5 link p-2.5 w-[134px] outline-none">
-                  <Logo />
+                  <Logo theme={theme} />
                </div>
                <nav className="hidden md:flex flex-row gap-2.5 pl-0 p-2.5 items-center">
                   {[...new Array(5)].map((item, key) => (

app/src/ui/components/wouter/Link.tsx

@@ -42,7 +42,11 @@ const useLocationFromRouter = (router) => {
    ];
 };
 
-export function Link({ className, ...props }: { className?: string } & LinkProps) {
+export function Link({
+   className,
+   native,
+   ...props
+}: { className?: string; native?: boolean } & LinkProps) {
    const router = useRouter();
    const [path, navigate] = useLocationFromRouter(router);
 
@@ -55,8 +59,6 @@ export function Link({ className, ...props }: { className?: string } & LinkProps
       return false;
    }
 
-   function handleClick(e) {}
-
    const _href = props.href ?? props.to;
    const href = router
       .hrefs(
@@ -72,6 +74,10 @@ export function Link({ className, ...props }: { className?: string } & LinkProps
    /*if (active) {
       console.log("link", { a, path, absPath, href, to, active, router });
    }*/
+   if (native) {
+      return <a className={`${active ? "active " : ""}${className}`} {...props} />;
+   }
+
    return (
       // @ts-expect-error className is not typed on WouterLink
       <WouterLink className={`${active ? "active " : ""}${className}`} {...props} />

app/src/ui/layouts/AppShell/Header.tsx

@@ -116,7 +116,7 @@ function SidebarToggler() {
 export function Header({ hasSidebar = true }) {
    //const logoReturnPath = "";
    const { app } = useBknd();
-   const logoReturnPath = app.getAdminConfig().logo_return_path ?? "/";
+   const { logo_return_path = "/", color_scheme = "light" } = app.getAdminConfig();
 
    return (
       <header
@@ -124,11 +124,11 @@ export function Header({ hasSidebar = true }) {
          className="flex flex-row w-full h-16 gap-2.5 border-muted border-b justify-start bg-muted/10"
       >
          <Link
-            href={logoReturnPath}
-            replace
+            href={logo_return_path}
+            native={logo_return_path !== "/"}
             className="max-h-full flex hover:bg-primary/5 link p-2.5 w-[134px] outline-none"
          >
-            <Logo />
+            <Logo theme={color_scheme} />
          </Link>
          <HeaderNavigation />
          <div className="flex flex-grow" />