Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-26 16:30:57 +01:00
Code Issues 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 (
<DirectionProvider>
<MantineProvider
defaultColorScheme="auto"
defaultColorScheme="dark"
colorSchemeManager={manager}
theme={createTheme({
primaryColor: "red",
@@ -62,6 +62,7 @@ function useColorSchemeManager(): MantineColorSchemeManager {
},
set: (value) => {
if (value === "auto") return;
try {
if (session) {
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 } }) {
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
<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>
<Analytics />
<SearchEngineOptimization />

2
packages/auth/callbacks.ts
View File

@@ -36,7 +36,7 @@ export const createSessionAsync = async (
...user,
email: user.email ?? "",
permissions: await getCurrentUserPermissionsAsync(db, user.id),
colorScheme: "auto",
colorScheme: "dark",
},
} 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, {
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
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, {
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
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];