jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: prevent flickering by removing auto color scheme and default background color (#1299)

Browse Source 
* fix: prevent flickering by removing auto color scheme and default background color

* fix: typecheck issue
This commit is contained in:
Meier Lukas
2024-10-16 21:44:53 +02:00
committed by GitHub
parent e99fd64882
commit cd77acdfab
6 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
return ( return (
<DirectionProvider> <DirectionProvider>
<MantineProvider <MantineProvider
defaultColorScheme="auto" defaultColorScheme="dark"
colorSchemeManager={manager} colorSchemeManager={manager}
theme={createTheme({ theme={createTheme({
primaryColor: "red", primaryColor: "red",
@@ -62,6 +62,7 @@ function useColorSchemeManager(): MantineColorSchemeManager {
}, },
set: (value) => { set: (value) => {
if (value === "auto") return;
try { try {
if (session) { if (session) {
mutateColorScheme({ colorScheme: value }); mutateColorScheme({ colorScheme: value });

12
apps/nextjs/src/app/[locale]/layout.tsx
View File

@@ -56,7 +56,7 @@ export const viewport: Viewport = {
export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) { export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
const session = await auth(); 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 tCommon = await getScopedI18n("common");
const direction = tCommon("direction"); const direction = tCommon("direction");
@@ -73,7 +73,15 @@ export default async function Layout(props: { children: React.ReactNode; params:
return ( return (
// Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
<html lang="en" dir={direction} data-mantine-color-scheme={colorScheme} suppressHydrationWarning> <html
lang="en"
dir={direction}
data-mantine-color-scheme={colorScheme}
style={{
backgroundColor: colorScheme === "dark" ? "#242424" : "#fff",
}}
suppressHydrationWarning
>
<head> <head>
<Analytics /> <Analytics />
<SearchEngineOptimization /> <SearchEngineOptimization />

2
packages/auth/callbacks.ts
View File

@@ -36,7 +36,7 @@ export const createSessionAsync = async (
...user, ...user,
email: user.email ?? "", email: user.email ?? "",
permissions: await getCurrentUserPermissionsAsync(db, user.id), permissions: await getCurrentUserPermissionsAsync(db, user.id),
colorScheme: "auto", colorScheme: "dark",
}, },
} as Session; } as Session;
}; };

2
packages/db/schema/mysql.ts
View File

@@ -43,7 +43,7 @@ export const users = mysqlTable("user", {
homeBoardId: varchar("homeBoardId", { length: 64 }).references((): AnyMySqlColumn => boards.id, { homeBoardId: varchar("homeBoardId", { length: 64 }).references((): AnyMySqlColumn => boards.id, {
onDelete: "set null", onDelete: "set null",
}), }),
colorScheme: varchar("colorScheme", { length: 5 }).$type<ColorScheme>().default("auto").notNull(), colorScheme: varchar("colorScheme", { length: 5 }).$type<ColorScheme>().default("dark").notNull(),
firstDayOfWeek: tinyint("firstDayOfWeek").$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday firstDayOfWeek: tinyint("firstDayOfWeek").$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday
pingIconsEnabled: boolean("pingIconsEnabled").default(false).notNull(), pingIconsEnabled: boolean("pingIconsEnabled").default(false).notNull(),
}); });

2
packages/db/schema/sqlite.ts
View File

@@ -44,7 +44,7 @@ export const users = sqliteTable("user", {
homeBoardId: text("homeBoardId").references((): AnySQLiteColumn => boards.id, { homeBoardId: text("homeBoardId").references((): AnySQLiteColumn => boards.id, {
onDelete: "set null", onDelete: "set null",
}), }),
colorScheme: text("colorScheme").$type<ColorScheme>().default("auto").notNull(), colorScheme: text("colorScheme").$type<ColorScheme>().default("dark").notNull(),
firstDayOfWeek: int("firstDayOfWeek").$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday firstDayOfWeek: int("firstDayOfWeek").$type<DayOfWeek>().default(1).notNull(), // Defaults to Monday
pingIconsEnabled: int("pingIconsEnabled", { mode: "boolean" }).default(false).notNull(), pingIconsEnabled: int("pingIconsEnabled", { mode: "boolean" }).default(false).notNull(),
}); });

2
packages/definitions/src/user.ts
View File

@@ -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]; export type ColorScheme = (typeof colorSchemes)[number];