fix: misc

apps/www/src/components/feat/server-page/motd/motd-row.tsx

@@ -150,7 +150,7 @@ export const CodeHighlight = ({
 	const language = match ? match[1] : undefined;
 
 	return (
-		<ShikiHighlighter language={language} theme="poimandres" {...props}>
+		<ShikiHighlighter language={language?.toLocaleLowerCase()} theme="poimandres" {...props}>
 			{String(children)}
 		</ShikiHighlighter>
 	);

apps/www/src/components/feat/server-page/server-editor/customizations/server-color-mode-box.tsx

@@ -27,21 +27,25 @@ export function ServerColorModeBox({
 	const [colorMode, setColorMode] = useState("light");
 
 	useEffect(() => {
-	setColorModeEnabled(serverData.server?.customizationData.colorMode !== undefined);
+		setColorModeEnabled(
+			serverData.server?.customizationData.colorMode !== null,
+		);
 		setColorMode(serverData.server?.customizationData.colorMode ?? "light");
-  }, [serverData])
+	}, [serverData]);
 
 	useEffect(() => {
 		if (colorMode === "idc") {
 			setColorModeEnabled(false);
 			setColorMode("light");
 		}
+		if (colorModeEnabled) {
 			if (colorMode === "dark") 
 				window.dispatchEvent(new Event("force-dark-mode"));
 
 			if (colorMode === "light")
 				window.dispatchEvent(new Event("force-light-mode"));
-  }, [colorMode]);
+		} else window.dispatchEvent(new Event("force-no-mode"));
+	}, [colorMode, colorModeEnabled]);
 
 	useEffect(() => {
 		update();
@@ -49,7 +53,7 @@ export function ServerColorModeBox({
 
 	const update = debounce(async () => {
 		await fetch(
-      `/api/v1/server/get/${minehutData._id}/settings/change-color-mode${colorModeEnabled !== false ? `?colorMode=${colorMode}` : ""}`
+			`/api/v1/server/get/${minehutData._id}/settings/change-color-mode${colorModeEnabled !== false ? `?colorMode=${colorMode}` : ""}`,
 		);
 	}, 500);
 

apps/www/src/components/feat/server-page/server-page.tsx

@@ -8,6 +8,7 @@ import { ServerPageButtons } from "./server-page-buttons";
 import type { useMHSFServer } from "@/lib/hooks/use-mhsf-server";
 import { cn } from "@/lib/utils";
 import { useEffect } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 export function ServerMainPage({
 	server,
@@ -17,7 +18,7 @@ export function ServerMainPage({
 	mhsfData: ReturnType<typeof useMHSFServer>;
 }) {
 	useEffect(() => {
-    if (mhsfData.server?.customizationData.colorMode !== undefined) {
+		if (mhsfData.server?.customizationData.colorMode !== null) {
 			if (mhsfData.server?.customizationData.colorMode === "dark")
 				window.dispatchEvent(new Event("force-dark-mode"));
 			if (mhsfData.server?.customizationData.colorMode === "light")
@@ -31,7 +32,7 @@ export function ServerMainPage({
 				"xl:px-[100px]",
 				mhsfData.server?.customizationData.banner === undefined
 					? "pt-[150px]"
-          : "pt-[300px]"
+					: "pt-[300px]",
 			)}
 		>
 			{mhsfData.server?.customizationData.banner && (
@@ -51,7 +52,16 @@ export function ServerMainPage({
 				</div>
 				<p className="w-full">
 					<div className="lg:flex justify-between w-full">
-            <h1 className="text-2xl font-bold">{server.name}</h1>
+						<h1 className="text-2xl font-bold flex items-center gap-1 ml-2">
+							<Avatar className="h-[32px] w-[32px]">
+								<AvatarImage
+									src={mhsfData.server?.customizationData.userProfilePicture ?? ""}
+									alt="Server Owner Image"
+								/>
+								<AvatarFallback>{server.name[0]}</AvatarFallback>
+							</Avatar>
+							{server.name}
+						</h1>
 						<span>
 							<ServerPageButtons server={server} mhsfData={mhsfData} />
 						</span>

apps/www/src/components/ui/avatar.tsx

@@ -0,0 +1,79 @@
+/*
+ * MHSF, Minehut Server List
+ * All external content is rather licensed under the ECA Agreement
+ * located here: https://mhsf.app/docs/legal/external-content-agreement
+ *
+ * All code under MHSF is licensed under the MIT License
+ * by open source contributors
+ *
+ * Copyright (c) 2025 dvelo
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

apps/www/src/components/util/theme-provider.tsx

@@ -49,6 +49,9 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     window.addEventListener("force-light-mode", () => {
       setForcedTheme('light');
     });
+    window.addEventListener("force-no-mode", () => {
+      setForcedTheme(undefined);
+    });
   });
 
   React.useEffect(() => {

apps/www/src/lib/types/data.ts

@@ -36,7 +36,7 @@ export type ActualCustomization = {
 	/** @version 1 @deprecated Use `colorMode` instead */
 	colorScheme: string | undefined;
 	/** @version 2 */
-	colorMode: "dark" | "light" | undefined;
+	colorMode: "dark" | "light" | null;
 	customizationVersion: number | undefined;
 } & (
 	| {