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 (
<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 />