feat: add colorscheme to user in db (#987)

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import type { PropsWithChildren } from "react";
+import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
+import { createTheme, isMantineColorScheme, MantineProvider } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
+
+export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
+  const manager = useColorSchemeManager();
+
+  return (
+    <MantineProvider
+      defaultColorScheme="auto"
+      colorSchemeManager={manager}
+      theme={createTheme({
+        primaryColor: "red",
+        autoContrast: true,
+      })}
+    >
+      {children}
+    </MantineProvider>
+  );
+};
+
+function useColorSchemeManager(): MantineColorSchemeManager {
+  const key = "homarr-color-scheme";
+  const { data: session } = useSession();
+  const [sessionColorScheme, setSessionColorScheme] = useState<MantineColorScheme | undefined>(
+    session?.user.colorScheme,
+  );
+  const { mutate: mutateColorScheme } = clientApi.user.changeColorScheme.useMutation({
+    onSuccess: (_, variables) => {
+      setSessionColorScheme(variables.colorScheme);
+    },
+  });
+
+  let handleStorageEvent: (event: StorageEvent) => void;
+
+  return {
+    get: (defaultValue) => {
+      if (typeof window === "undefined") {
+        return defaultValue;
+      }
+
+      if (sessionColorScheme) {
+        return sessionColorScheme;
+      }
+
+      try {
+        return (window.localStorage.getItem(key) as MantineColorScheme | undefined) ?? defaultValue;
+      } catch {
+        return defaultValue;
+      }
+    },
+
+    set: (value) => {
+      try {
+        if (session) {
+          mutateColorScheme({ colorScheme: value });
+        }
+        window.localStorage.setItem(key, value);
+      } catch (error) {
+        console.warn("[@mantine/core] Local storage color scheme manager was unable to save color scheme.", error);
+      }
+    },
+
+    subscribe: (onUpdate) => {
+      handleStorageEvent = (event) => {
+        if (session) return; // Ignore updates when session is available as we are using session color scheme
+        if (event.storageArea === window.localStorage && event.key === key && isMantineColorScheme(event.newValue)) {
+          onUpdate(event.newValue);
+        }
+      };
+
+      window.addEventListener("storage", handleStorageEvent);
+    },
+
+    unsubscribe: () => {
+      window.removeEventListener("storage", handleStorageEvent);
+    },
+
+    clear: () => {
+      window.localStorage.removeItem(key);
+    },
+  };
+}

apps/nextjs/src/app/[locale]/layout.tsx

@@ -1,13 +1,11 @@
 import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 
-import "@homarr/ui/styles.css";
 import "@homarr/notifications/styles.css";
 import "@homarr/spotlight/styles.css";
+import "@homarr/ui/styles.css";
 import "~/styles/scroll-area.scss";
 
-import { ColorSchemeScript, createTheme, MantineProvider } from "@mantine/core";
-
 import { env } from "@homarr/auth/env.mjs";
 import { auth } from "@homarr/auth/next";
 import { ModalProvider } from "@homarr/modals";
@@ -15,6 +13,7 @@ import { Notifications } from "@homarr/notifications";
 
 import { Analytics } from "~/components/layout/analytics";
 import { JotaiProvider } from "./_client-providers/jotai";
+import { CustomMantineProvider } from "./_client-providers/mantine";
 import { NextInternationalProvider } from "./_client-providers/next-international";
 import { AuthProvider } from "./_client-providers/session";
 import { TRPCReactProvider } from "./_client-providers/trpc";
@@ -51,34 +50,25 @@ export const viewport: Viewport = {
   ],
 };
 
-export default function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
-  const colorScheme = "dark";
+export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
+  const session = await auth();
+  const colorScheme = session?.user.colorScheme;
 
   const StackedProvider = composeWrappers([
-    async (innerProps) => {
-      const session = await auth();
+    (innerProps) => {
       return <AuthProvider session={session} logoutUrl={env.AUTH_LOGOUT_REDIRECT_URL} {...innerProps} />;
     },
     (innerProps) => <JotaiProvider {...innerProps} />,
     (innerProps) => <TRPCReactProvider {...innerProps} />,
     (innerProps) => <NextInternationalProvider {...innerProps} locale={props.params.locale} />,
-    (innerProps) => (
-      <MantineProvider
-        {...innerProps}
-        defaultColorScheme="dark"
-        theme={createTheme({
-          primaryColor: "red",
-          autoContrast: true,
-        })}
-      />
-    ),
+    (innerProps) => <CustomMantineProvider {...innerProps} />,
     (innerProps) => <ModalProvider {...innerProps} />,
   ]);
 
   return (
-    <html lang="en" suppressHydrationWarning>
+    // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
+    <html lang="en" data-mantine-color-scheme={colorScheme} suppressHydrationWarning>
       <head>
-        <ColorSchemeScript defaultColorScheme={colorScheme} />
         <Analytics />
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>

packages/api/src/router/test/board.spec.ts

@@ -30,6 +30,7 @@ const defaultSession = {
   user: {
     id: defaultCreatorId,
     permissions: [],
+    colorScheme: "light",
   },
   expires: new Date().toISOString(),
 } satisfies Session;
@@ -87,6 +88,7 @@ describe("getAllBoards should return all boards accessable to the current user",
         user: {
           id: defaultCreatorId,
           permissions: ["board-view-all"],
+          colorScheme: "light",
         },
         expires: new Date().toISOString(),
       },

packages/api/src/router/test/docker/docker-router.spec.ts

@@ -29,6 +29,7 @@ const createSessionWithPermissions = (...permissions: GroupPermissionKey[]) =>
     user: {
       id: "1",
       permissions,
+      colorScheme: "light",
     },
     expires: new Date().toISOString(),
   }) satisfies Session;

packages/api/src/router/test/group.spec.ts

@@ -12,6 +12,7 @@ const defaultSession = {
   user: {
     id: defaultOwnerId,
     permissions: [],
+    colorScheme: "light",
   },
   expires: new Date().toISOString(),
 } satisfies Session;

packages/api/src/router/test/integration/integration-router.spec.ts

@@ -17,6 +17,7 @@ const defaultSessionWithPermissions = (permissions: GroupPermissionKey[] = []) =
     user: {
       id: defaultUserId,
       permissions,
+      colorScheme: "light",
     },
     expires: new Date().toISOString(),
   }) satisfies Session;

packages/api/src/router/test/invite.spec.ts

@@ -12,6 +12,7 @@ const defaultSession = {
   user: {
     id: createId(),
     permissions: [],
+    colorScheme: "light",
   },
   expires: new Date().toISOString(),
 } satisfies Session;

packages/api/src/router/test/serverSettings.spec.ts

@@ -16,6 +16,7 @@ const defaultSession = {
   user: {
     id: createId(),
     permissions: [],
+    colorScheme: "light",
   },
   expires: new Date().toISOString(),
 } satisfies Session;

packages/api/src/router/test/user.spec.ts

@@ -246,6 +246,7 @@ describe("editProfile shoud update user", () => {
       image: null,
       homeBoardId: null,
       provider: "credentials",
+      colorScheme: "auto",
     });
   });
 
@@ -287,6 +288,7 @@ describe("editProfile shoud update user", () => {
       image: null,
       homeBoardId: null,
       provider: "credentials",
+      colorScheme: "auto",
     });
   });
 });
@@ -312,6 +314,7 @@ describe("delete should delete user", () => {
         salt: null,
         homeBoardId: null,
         provider: "ldap" as const,
+        colorScheme: "auto" as const,
       },
       {
         id: userToDelete,
@@ -322,6 +325,7 @@ describe("delete should delete user", () => {
         password: null,
         salt: null,
         homeBoardId: null,
+        colorScheme: "auto" as const,
       },
       {
         id: createId(),
@@ -333,6 +337,7 @@ describe("delete should delete user", () => {
         salt: null,
         homeBoardId: null,
         provider: "oidc" as const,
+        colorScheme: "auto" as const,
       },
     ];
 

packages/api/src/router/user.ts

@@ -317,6 +317,14 @@ export const userRouter = createTRPCRouter({
         })
         .where(eq(users.id, input.userId));
     }),
+  changeColorScheme: protectedProcedure.input(validation.user.changeColorScheme).mutation(async ({ input, ctx }) => {
+    await ctx.db
+      .update(users)
+      .set({
+        colorScheme: input.colorScheme,
+      })
+      .where(eq(users.id, ctx.session.user.id));
+  }),
 });
 
 const createUserAsync = async (db: Database, input: z.infer<typeof validation.user.create>) => {

packages/auth/callbacks.ts

@@ -4,7 +4,7 @@ import type { NextAuthConfig } from "next-auth";
 
 import type { Database } from "@homarr/db";
 import { eq, inArray } from "@homarr/db";
-import { groupMembers, groupPermissions } from "@homarr/db/schema/sqlite";
+import { groupMembers, groupPermissions, users } from "@homarr/db/schema/sqlite";
 import { getPermissionsWithChildren } from "@homarr/definitions";
 
 import { env } from "./env.mjs";
@@ -31,10 +31,18 @@ export const getCurrentUserPermissionsAsync = async (db: Database, userId: strin
 
 export const createSessionCallback = (db: Database): NextAuthCallbackOf<"session"> => {
   return async ({ session, user }) => {
+    const additionalProperties = await db.query.users.findFirst({
+      where: eq(users.id, user.id),
+      columns: {
+        colorScheme: true,
+      },
+    });
+
     return {
       ...session,
       user: {
         ...session.user,
+        ...additionalProperties,
         id: user.id,
         name: user.name,
         permissions: await getCurrentUserPermissionsAsync(db, user.id),

packages/auth/index.ts

@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
 import type { DefaultSession } from "@auth/core/types";
 
-import type { GroupPermissionKey } from "@homarr/definitions";
+import type { ColorScheme, GroupPermissionKey } from "@homarr/definitions";
 
 import { createConfiguration } from "./configuration";
 
@@ -12,6 +12,7 @@ declare module "next-auth" {
     user: {
       id: string;
       permissions: GroupPermissionKey[];
+      colorScheme: ColorScheme;
     } & DefaultSession["user"];
   }
 }

packages/auth/permissions/test/board-permissions.spec.ts

@@ -20,6 +20,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "1",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -47,6 +48,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: getPermissionsWithChildren(["board-full-all"]),
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -74,6 +76,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: getPermissionsWithChildren(["board-modify-all"]),
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -102,6 +105,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -129,6 +133,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -156,6 +161,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: getPermissionsWithChildren(["board-view-all"]),
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -183,6 +189,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -210,6 +217,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -237,6 +245,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -264,6 +273,7 @@ describe("constructBoardPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;

packages/auth/permissions/test/integration-permissions.spec.ts

@@ -16,6 +16,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: getPermissionsWithChildren(["integration-full-all"]),
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -39,6 +40,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: getPermissionsWithChildren(["integration-interact-all"]),
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -62,6 +64,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -85,6 +88,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -108,6 +112,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: getPermissionsWithChildren(["integration-use-all"]),
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -131,6 +136,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -154,6 +160,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -177,6 +184,7 @@ describe("constructIntegrationPermissions", () => {
       user: {
         id: "2",
         permissions: [],
+        colorScheme: "light",
       },
       expires: new Date().toISOString(),
     } satisfies Session;
@@ -190,40 +198,3 @@ describe("constructIntegrationPermissions", () => {
     expect(result.hasUseAccess).toBe(false);
   });
 });
-/*
-  
-
-  
-  
-  
-  
-  
-
-  test("should return hasViewAccess as true when board is public", () => {
-    // Arrange
-    const board = {
-      creator: {
-        id: "1",
-      },
-      userPermissions: [],
-      groupPermissions: [],
-      isPublic: true,
-    };
-    const session = {
-      user: {
-        id: "2",
-        permissions: [],
-      },
-      expires: new Date().toISOString(),
-    } satisfies Session;
-
-    // Act
-    const result = constructBoardPermissions(board, session);
-
-    // Assert
-    expect(result.hasFullAccess).toBe(false);
-    expect(result.hasChangeAccess).toBe(false);
-    expect(result.hasViewAccess).toBe(true);
-  });
-});
-*/

packages/auth/permissions/test/integration-query-permissions.spec.ts

@@ -20,6 +20,7 @@ const createSession = (user: Partial<Session["user"]>): Session => ({
   user: {
     id: "1",
     permissions: [],
+    colorScheme: "light",
     ...user,
   },
   expires: new Date().toISOString(),

packages/auth/session.ts

@@ -32,6 +32,7 @@ export const getSessionFromTokenAsync = async (db: Database, token: string | und
           name: true,
           email: true,
           image: true,
+          colorScheme: true,
         },
       },
     },

packages/auth/test/callbacks.spec.ts

@@ -101,6 +101,7 @@ describe("session callback", () => {
           email: "no-email",
           emailVerified: new Date("2023-01-13"),
           permissions: [],
+          colorScheme: "dark",
         },
         expires: "2023-01-13" as Date & string,
         sessionToken: "token",

packages/db/migrations/mysql/0007_boring_nocturne.sql

@@ -0,0 +1 @@
+ALTER TABLE `user` ADD `colorScheme` varchar(5) DEFAULT 'auto' NOT NULL;

packages/db/migrations/mysql/meta/_journal.json

@@ -50,6 +50,13 @@
       "when": 1722517058725,
       "tag": "0006_young_micromax",
       "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "5",
+      "when": 1723749320706,
+      "tag": "0007_boring_nocturne",
+      "breakpoints": true
     }
   ]
 }

packages/db/migrations/sqlite/0007_known_ultragirl.sql

@@ -0,0 +1 @@
+ALTER TABLE `user` ADD `colorScheme` text DEFAULT 'auto' NOT NULL;

packages/db/migrations/sqlite/meta/_journal.json

@@ -50,6 +50,13 @@
       "when": 1722517033483,
       "tag": "0006_windy_doctor_faustus",
       "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "6",
+      "when": 1723746828385,
+      "tag": "0007_known_ultragirl",
+      "breakpoints": true
     }
   ]
 }

packages/db/schema/mysql.ts

@@ -8,6 +8,7 @@ import type {
   BackgroundImageRepeat,
   BackgroundImageSize,
   BoardPermission,
+  ColorScheme,
   GroupPermissionKey,
   IntegrationKind,
   IntegrationPermission,
@@ -30,6 +31,7 @@ export const users = mysqlTable("user", {
   homeBoardId: varchar("homeBoardId", { length: 64 }).references((): AnyMySqlColumn => boards.id, {
     onDelete: "set null",
   }),
+  colorScheme: varchar("colorScheme", { length: 5 }).$type<ColorScheme>().default("auto").notNull(),
 });
 
 export const accounts = mysqlTable(

packages/db/schema/sqlite.ts

@@ -10,6 +10,7 @@ import type {
   BackgroundImageRepeat,
   BackgroundImageSize,
   BoardPermission,
+  ColorScheme,
   GroupPermissionKey,
   IntegrationKind,
   IntegrationPermission,
@@ -31,6 +32,7 @@ export const users = sqliteTable("user", {
   homeBoardId: text("homeBoardId").references((): AnySQLiteColumn => boards.id, {
     onDelete: "set null",
   }),
+  colorScheme: text("colorScheme").$type<ColorScheme>().default("auto").notNull(),
 });
 
 export const accounts = sqliteTable(

packages/definitions/src/index.ts

@@ -5,3 +5,4 @@ export * from "./widget";
 export * from "./permissions";
 export * from "./docker";
 export * from "./auth";
+export * from "./user";

packages/definitions/src/user.ts

@@ -0,0 +1,2 @@
+export const colorSchemes = ["light", "dark", "auto"] as const;
+export type ColorScheme = (typeof colorSchemes)[number];

packages/validation/src/user.ts

@@ -1,7 +1,9 @@
 import { z } from "zod";
 
+import { colorSchemes } from "@homarr/definitions";
 import type { TranslationObject } from "@homarr/translation";
 
+import { zodEnumFromArray } from "./enums";
 import { createCustomErrorParams } from "./form/i18n";
 
 const usernameSchema = z.string().min(3).max(255);
@@ -98,6 +100,10 @@ const changeHomeBoardSchema = z.object({
   homeBoardId: z.string().min(1),
 });
 
+const changeColorSchemeSchema = z.object({
+  colorScheme: zodEnumFromArray(colorSchemes),
+});
+
 export const userSchemas = {
   signIn: signInSchema,
   registration: registrationSchema,
@@ -109,4 +115,5 @@ export const userSchemas = {
   changePassword: changePasswordSchema,
   changeHomeBoard: changeHomeBoardSchema,
   changePasswordApi: changePasswordApiSchema,
+  changeColorScheme: changeColorSchemeSchema,
 };