Mantine Themes offers you a set of themes that you can use with the Mantine UI library (React). It is also possible to build your own themes in a convenient, simple and fast way
Each theme has primary, secondary and tertiary semantic colors so you can customize your frontend with the colors you prefer
Interested in Mantine Themes? Take a look→
Mantine Theme is under the MIT License
Themes are dynamically generated based on the createMantineTheme function located in the
create-mantine-theme.ts file.
This function contains all the necessary documentation to use it
Just copy this file to your project and create your themes
import { createMantineTheme } from "./create-mantine-theme.ts";
const theme = createMantineTheme({
baseHue: 120,
baseSaturation: 20,
colors: {
primary: [...],
secondary: [...],
tertiary: [...],
}
});
export function App() {
return (
<MantineProvider theme={theme}>
{/* Your application here */}
</MantineProvider>
);
}Mantine Themes-specific themes are located in the app/themes directory. Just copy the color theme that interests you
Just use the createMantineTheme function and follow the instructions in the function documentation
The base colors (text, background, shadow, border, ...) will have great accessibility by default. It is your duty to ensure that the semantic colors (primary, secondary, tertiary) generated with Colors generator have good contrast with the base colors