Pandore/homarr
Public Access
1
0 Fork 0
Code Actions Activity

fix(ui): restore pre-v9 light variant colors with v8CssVariablesResolver

Browse Source 
Mantine v9 changed the light variant to use solid colors instead of
transparent ones, altering the visual appearance of the primary red
across NavLinks, badges, and other light-variant components. Apply
v8CssVariablesResolver to both MantineProvider instances to restore
the original Homarr color rendering.
This commit is contained in:
Thomas Camlong committed 2026-06-02 23:33:17 +02:00
1 parent 63d8fa8c26
commit adef3aff65
2 files changed
+4 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
+2 -2
View File
@@ -2,7 +2,7 @@
import type { PropsWithChildren } from "react";
import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
import { DirectionProvider, MantineProvider } from "@mantine/core";
import { DirectionProvider, MantineProvider, v8CssVariablesResolver } from "@mantine/core";
import dayjs from "dayjs";
import { clientApi } from "@homarr/api/client";
@@ -18,7 +18,7 @@ export const CustomMantineProvider = ({
const manager = useColorSchemeManager();
return (
<DirectionProvider>
<MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme}>
<MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme} cssVariablesResolver={v8CssVariablesResolver}>
{children}
</MantineProvider>
</DirectionProvider>
apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
+2 -2
View File
@@ -2,7 +2,7 @@
import type { PropsWithChildren } from "react";
import type { MantineColorsTuple } from "@mantine/core";
import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";
import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem, v8CssVariablesResolver } from "@mantine/core";
import { useRequiredBoard } from "@homarr/boards/context";
import type { ColorScheme } from "@homarr/definitions";
@@ -33,7 +33,7 @@ export const BoardMantineProvider = ({
});
return (
<MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
<MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager} cssVariablesResolver={v8CssVariablesResolver}>
{children}
</MantineProvider>
);