[BUG] The color configuration of the sidebar is out of sync with the theme

[qianxuanyon]

Describe the bug

The color configuration of the sidebar is out of sync with the theme

Steps To Reproduce

The theme of the sidebar does not match the specified theme The sidebar does not change synchronously after modifying the color parameter in the example customization-theme-mui I used the default mui theme Settings but the sidebar was not applied

customization-theme-mui/src/contexts/index.tsx

import React, {
    PropsWithChildren,
    createContext,
    useEffect,
    useState,
} from "react";
import { ThemeProvider } from "@pankod/refine-mui";
import { DarkTheme } from "@pankod/refine-mui";

import { createTheme } from "@mui/material";

const LightTheme = createTheme({

    components: {
        MuiAppBar: {
            styleOverrides: {
                colorDefault: {
                    backgroundColor: "#4f3cc9",
                },
            },
        },
    
        MuiTypography: {
            styleOverrides: {
                h5: {
                    fontWeight: 800,
                    lineHeight: "2rem",
                },
            },
        },
    },
});


type ColorModeContextType = {
    mode: string;
    setMode: () => void;
};

export const ColorModeContext = createContext<ColorModeContextType>(
    {} as ColorModeContextType,
);

export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
    children,
}) => {
    const colorModeFromLocalStorage = localStorage.getItem("colorMode");
    const isSystemPreferenceDark = window?.matchMedia(
        "(prefers-color-scheme: dark)",
    ).matches;

    const systemPreference = isSystemPreferenceDark ? "dark" : "light";
    const [mode, setMode] = useState(
        colorModeFromLocalStorage || systemPreference,
    );

    useEffect(() => {
        window.localStorage.setItem("colorMode", mode);
    }, [mode]);

    const setColorMode = () => {
        if (mode === "light") {
            setMode("dark");
        } else {
            setMode("light");
        }
    };

    return (
        <ColorModeContext.Provider
            value={{
                setMode: setColorMode,
                mode,
            }}
        >
            <ThemeProvider theme={mode === "light" ? LightTheme : DarkTheme}>
                {children}
            </ThemeProvider>
        </ColorModeContext.Provider>
    );
};

Expected behavior

Expect the theme of the sidebar to match the theme configuration

For example, I want to change the sidebar to black text on a white background

There is currently no way to adjust the color of the sidebar font

Screenshot

Desktop

No response

Mobile

No response

Additional Context

No response

[qianxuanyon]

You can refer to https://bareynol.github.io/mui-theme-creator/# The theme fonts color in the sidebar are consistent with the whole thing

[omeraplak]

Hey @qianxuanyon , Thank you for contacting us! We will investigate and resolve the issue as soon as possible.

[yildirayunlu]

Hey @qianxuanyon

refine has default color palettes for dark and light. It is used in the whole project. If these are not defined mui shows strange colors 😅

You can extend or customize it all.

import { DarkTheme, createTheme } from "@pankod/refine-mui";

const custom = createTheme({
    palette: {
        ...LightTheme.palette,
    },
    components: {
        MuiAppBar: {
            styleOverrides: {
                colorDefault: {
                    backgroundColor: "#4f3cc9",
                },
            },
        },
    },
});

[qianxuanyon]

@yildirayunlu I have found the problem and solved it The color configuration is explicitly specified in the sidebar component of the refine layout I used the custom layout in the document and removed the color configuration that was specified in it so that it was consistent with the overall configuration so that it would apply to the global configuration

The two colors should not be the same configuration for example

I've already used this extension code and I see in the DarkTheme source code that the font in the sidebar specifies a certain color in the palette because the component originally has its own font color and when the display specifies a certain accent color it causes a conflict when configuring the global color

import { DarkTheme, createTheme } from "@pankod/refine-mui";

const custom = createTheme({
    palette: {
        ...LightTheme.palette,
    },
    components: {
        MuiAppBar: {
            styleOverrides: {
                colorDefault: {
                    backgroundColor: "#4f3cc9",
                },
            },
        },
    },
});

And then we'll now change this font color to black and it's available on the button But you can't see it against the dark background of the sidebar

So you should remove the color configuration specified in the sidebar and use the global configuration

These should all be removed

[yildirayunlu]

Hey @qianxuanyon Thank you for the detailed explanation. We will review it and release an update 🚀

[yildirayunlu]

This is the theme that is prepared with refine colors by default for the MUI. We support personalized theme. You can check here for details.