mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 03:20:46 +02:00
James BruntonandGitHub
8ab060a4be
# Description of Changes When I added Prettier formatting in #6052, my aim was to use just the default settings in Prettier. Turns out, Prettier looks _really hard_ for any config files if it's not explicitly given one, which means that if a developer has some sort of Prettier config file lying around on their system, Prettier might find it and use it. Also, Prettier changes its defaults based on stuff in `.editorconfig` without any good way of disabling that behaviour explicitly in its config file. To solve both of these issues, I've introduced a `.prettierrc` file which sets Prettier's defaults explicitly, and then reformatted all our code _again_ in Prettier's actual default settings. This should achieve the aim of #6052 and remove the possibility for it breaking on different dev computers.
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { createContext, useContext, ReactNode } from "react";
|
|
import { MantineProvider } from "@mantine/core";
|
|
import { useRainbowTheme } from "@app/hooks/useRainbowTheme";
|
|
import { mantineTheme } from "@app/theme/mantineTheme";
|
|
import rainbowStyles from "@app/styles/rainbow.module.css";
|
|
import { ToastProvider } from "@app/components/toast";
|
|
import ToastRenderer from "@app/components/toast/ToastRenderer";
|
|
import { ToastPortalBinder } from "@app/components/toast";
|
|
import type { ThemeMode } from "@app/constants/theme";
|
|
|
|
interface RainbowThemeContextType {
|
|
themeMode: ThemeMode;
|
|
isRainbowMode: boolean;
|
|
isToggleDisabled: boolean;
|
|
toggleTheme: () => void;
|
|
activateRainbow: () => void;
|
|
deactivateRainbow: () => void;
|
|
}
|
|
|
|
const RainbowThemeContext = createContext<RainbowThemeContextType | null>(null);
|
|
|
|
export function useRainbowThemeContext() {
|
|
const context = useContext(RainbowThemeContext);
|
|
if (!context) {
|
|
throw new Error(
|
|
"useRainbowThemeContext must be used within RainbowThemeProvider",
|
|
);
|
|
}
|
|
return context;
|
|
}
|
|
|
|
interface RainbowThemeProviderProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
|
|
const rainbowTheme = useRainbowTheme();
|
|
|
|
// Determine the Mantine color scheme
|
|
const mantineColorScheme =
|
|
rainbowTheme.themeMode === "rainbow" ? "dark" : rainbowTheme.themeMode;
|
|
|
|
return (
|
|
<RainbowThemeContext.Provider value={rainbowTheme}>
|
|
<MantineProvider
|
|
theme={mantineTheme}
|
|
defaultColorScheme={mantineColorScheme}
|
|
forceColorScheme={mantineColorScheme}
|
|
>
|
|
<div
|
|
className={
|
|
rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ""
|
|
}
|
|
style={{ minHeight: "100vh" }}
|
|
>
|
|
<ToastProvider>
|
|
<ToastPortalBinder />
|
|
{children}
|
|
<ToastRenderer />
|
|
</ToastProvider>
|
|
</div>
|
|
</MantineProvider>
|
|
</RainbowThemeContext.Provider>
|
|
);
|
|
}
|