add support for static background colors

src/app/layout.tsx

@@ -8,7 +8,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { AnimatePresence } from "framer-motion";
 import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
-import BackgroundImage from "../components/background-image";
+import BackgroundCover from "../components/background-cover";
 import DatabaseLoader from "../components/loaders/database-loader";
 import NavBar from "../components/navbar/navbar";
 import { Colors } from "@/common/colors";
@@ -72,7 +72,7 @@ export default function RootLayout({
         <Script defer data-domain="ssr.fascinated.cc" src="https://analytics.fascinated.cc/js/script.js" />
         <DatabaseLoader>
           <Toaster />
-          <BackgroundImage />
+          <BackgroundCover />
           <PreloadResources />
           <TooltipProvider delayDuration={100}>
             <OfflineNetwork>

src/components/background-cover.tsx

@@ -5,7 +5,7 @@ import { config } from "../../config";
 import { getImageUrl } from "@/common/image-utils";
 import useDatabase from "../hooks/use-database";
 
-export default function BackgroundImage() {
+export default function BackgroundCover() {
   const database = useDatabase();
   const settings = useLiveQuery(() => database.getSettings());
 
@@ -25,6 +25,16 @@ export default function BackgroundImage() {
     backgroundImage = config.siteUrl + "/" + backgroundImage;
   }
 
+  // Static background color
+  if (backgroundImage.startsWith("#")) {
+    return (
+      <div
+        className={`fixed -z-50 object-cover w-screen h-screen pointer-events-none select-none`}
+        style={{ backgroundColor: backgroundImage }}
+      />
+    );
+  }
+
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img