From f429cc845403d539631f8fb125fbabd82557afd3 Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Tue, 15 Oct 2024 21:03:31 +0200 Subject: [PATCH 1/2] fix: prevent flickering by removing auto color scheme and default background color --- .../src/app/[locale]/_client-providers/mantine.tsx | 3 ++- apps/nextjs/src/app/[locale]/layout.tsx | 12 ++++++++++-- packages/db/schema/mysql.ts | 2 +- packages/db/schema/sqlite.ts | 2 +- packages/definitions/src/user.ts | 2 +- 5 files changed, 15 insertions(+), 6 deletions(-) diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx index e5e867815..b5b4a5b34 100644 --- a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx +++ b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx @@ -16,7 +16,7 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => { return ( { + if (value === "auto") return; try { if (session) { mutateColorScheme({ colorScheme: value }); diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx index 6adc5aaef..3ea3e2ea5 100644 --- a/apps/nextjs/src/app/[locale]/layout.tsx +++ b/apps/nextjs/src/app/[locale]/layout.tsx @@ -56,7 +56,7 @@ export const viewport: Viewport = { export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) { const session = await auth(); - const colorScheme = cookies().get("homarr-color-scheme")?.value ?? "light"; + const colorScheme = cookies().get("homarr-color-scheme")?.value ?? "dark"; const tCommon = await getScopedI18n("common"); const direction = tCommon("direction"); @@ -73,7 +73,15 @@ export default async function Layout(props: { children: React.ReactNode; params: return ( // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering - + diff --git a/packages/db/schema/mysql.ts b/packages/db/schema/mysql.ts index ec92ee53b..510ddaf89 100644 --- a/packages/db/schema/mysql.ts +++ b/packages/db/schema/mysql.ts @@ -43,7 +43,7 @@ export const users = mysqlTable("user", { homeBoardId: varchar("homeBoardId", { length: 64 }).references((): AnyMySqlColumn => boards.id, { onDelete: "set null", }), - colorScheme: varchar("colorScheme", { length: 5 }).$type().default("auto").notNull(), + colorScheme: varchar("colorScheme", { length: 5 }).$type().default("dark").notNull(), firstDayOfWeek: tinyint("firstDayOfWeek").$type().default(1).notNull(), // Defaults to Monday pingIconsEnabled: boolean("pingIconsEnabled").default(false).notNull(), }); diff --git a/packages/db/schema/sqlite.ts b/packages/db/schema/sqlite.ts index 2b593b9d5..f0d1a52e4 100644 --- a/packages/db/schema/sqlite.ts +++ b/packages/db/schema/sqlite.ts @@ -44,7 +44,7 @@ export const users = sqliteTable("user", { homeBoardId: text("homeBoardId").references((): AnySQLiteColumn => boards.id, { onDelete: "set null", }), - colorScheme: text("colorScheme").$type().default("auto").notNull(), + colorScheme: text("colorScheme").$type().default("dark").notNull(), firstDayOfWeek: int("firstDayOfWeek").$type().default(1).notNull(), // Defaults to Monday pingIconsEnabled: int("pingIconsEnabled", { mode: "boolean" }).default(false).notNull(), }); diff --git a/packages/definitions/src/user.ts b/packages/definitions/src/user.ts index 28f24ae7b..77d8d4138 100644 --- a/packages/definitions/src/user.ts +++ b/packages/definitions/src/user.ts @@ -1,2 +1,2 @@ -export const colorSchemes = ["light", "dark", "auto"] as const; +export const colorSchemes = ["light", "dark"] as const; export type ColorScheme = (typeof colorSchemes)[number]; From ef2a96495d7034bee225003203c7da4882ece5a9 Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Wed, 16 Oct 2024 15:50:20 +0200 Subject: [PATCH 2/2] fix: typecheck issue --- packages/auth/callbacks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/auth/callbacks.ts b/packages/auth/callbacks.ts index 6a381f57a..d5fac0b7a 100644 --- a/packages/auth/callbacks.ts +++ b/packages/auth/callbacks.ts @@ -36,7 +36,7 @@ export const createSessionAsync = async ( ...user, email: user.email ?? "", permissions: await getCurrentUserPermissionsAsync(db, user.id), - colorScheme: "auto", + colorScheme: "dark", }, } as Session; };