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>;
};