fix: new changes

src/app/(main)/server/[server]/page.tsx

@@ -128,7 +128,7 @@ export async function generateMetadata(
 
 export default function ServerPage({ params }: { params: { server: string } }) {
   return (
-    <main>
+    <main style={{ "color-scheme": "dark" } as React.CSSProperties}>
       <ColorProvider server={params.server}>
         <div className={"pt-[300px] xl:px-[100px]"}>
           <Banner server={params.server} />

src/app/(main)/server/[server]/statistics/page.tsx

@@ -97,7 +97,7 @@ export async function generateMetadata(
 
 export default function ServerPage({ params }: { params: { server: string } }) {
   return (
-    <main>
+    <main style={{ "color-scheme": "dark" } as React.CSSProperties}>
       <ColorProvider server={params.server}>
         <div className={"pt-[300px] xl:px-[100px]"}>
           <Banner server={params.server} />

src/components/Banner.tsx

@@ -66,7 +66,7 @@ export default function Banner({ server }: { server: string }) {
               ? bannerURL
               : "wsrv.nl/?url=" + encodeURIComponent(bannerURL) + "?n=-1"
           }
-          className="rounded align-middle block ml-auto mr-auto absolute left-0 z-0 max-h-[400px] w-full object-fill"
+          className="rounded align-middle block ml-auto mr-auto absolute left-0 z-0 w-full object-fill"
           alt="User-provided banner for this server."
           style={
             {

src/components/ThemeProvider.tsx

@@ -33,6 +33,7 @@
 import * as React from "react";
 import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 import { type ThemeProviderProps } from "next-themes";
+import { usePathname } from "next/navigation";
 
 declare global {
   interface Document {
@@ -48,6 +49,7 @@ declare global {
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const [mounted, setMounted] = React.useState(false);
+  const pathname = usePathname();
 
   React.useEffect(() => {
     setMounted(true);
@@ -55,7 +57,14 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 
   if (!mounted) return null;
 
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return (
+    <NextThemesProvider
+      forcedTheme={pathname?.startsWith("/server") ? "dark" : undefined}
+      {...props}
+    >
+      {children}
+    </NextThemesProvider>
+  );
 }
 
 interface UseThemeTransitionResult {

src/components/ThemeSwitcher.tsx

@@ -39,9 +39,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useThemeTransition } from "./ThemeProvider";
+import { usePathname } from "next/navigation";
 
 export function ModeToggle() {
   const { changeTheme } = useThemeTransition();
+  const pathname = usePathname();
 
   return (
     <DropdownMenu>
@@ -53,13 +55,28 @@ export function ModeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => changeTheme("light")}>
+        {pathname?.startsWith("/server") && (
+          <div className="text-sm p-4">
+            For compatibility reasons, <br /> server pages are forced to dark
+            mode
+          </div>
+        )}
+        <DropdownMenuItem
+          onClick={() => changeTheme("light")}
+          disabled={pathname?.startsWith("/server")}
+        >
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => changeTheme("dark")}>
+        <DropdownMenuItem
+          onClick={() => changeTheme("dark")}
+          disabled={pathname?.startsWith("/server")}
+        >
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => changeTheme("system")}>
+        <DropdownMenuItem
+          onClick={() => changeTheme("system")}
+          disabled={pathname?.startsWith("/server")}
+        >
           System
         </DropdownMenuItem>
       </DropdownMenuContent>