Is there a way to keep brand color same in dark/llight in atlaskit?

Atlassian Developer Tools
, ,
1

Hi, I have setup a ThemeContext to control dark/light themes for Atlaskit, which also sets up a brand color. It works fine, however, Atlaskit switches the brand color to a lighter version of the colour (in accordance with the design token) when switching to Dark mode. Is there a way to ensure that brand color tokens remain the same in dark and light modes?

import { setGlobalTheme, ThemeColorModes } from "@atlaskit/tokens";

const BRAND_PRIMARY_COLOUR = "#5514b4";

interface ThemeContextType {
    theme: ThemeColorModes;
    toggleTheme: () => void;
    brandColor: string; // Add brandColor to the context type
}

const ThemeContext = createContext<ThemeContextType | null>(null);

export const useTheme = (): ThemeContextType => {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error("useTheme must be used within a ThemeProvider");
    }
    return context;
};

export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
    const [theme, setTheme] = useState<ThemeColorModes>(
        (localStorage.getItem("theme") as "light" | "dark" | "auto") || "light"
    );

    useEffect(() => {
        localStorage.setItem("theme", theme);
        setGlobalTheme({
            dark: 'dark',
            colorMode: theme,
            UNSAFE_themeOptions: {
                brandColor: BRAND_PRIMARY_COLOUR,
            },
        });
    }, [theme]);

    const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
    };

    const contextValue: ThemeContextType = {
        theme,
        toggleTheme,
        brandColor: BRAND_PRIMARY_COLOUR, // Provide the brand color in the context
    };

    return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
};