Skip to content

Latest commit

 

History

History
67 lines (44 loc) · 2.12 KB

README.md

File metadata and controls

67 lines (44 loc) · 2.12 KB
Raw
Mantine Themes

Mantine Themes

Beautiful Mantine themes using semantic colors

About

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→

License

Mantine Theme is under the MIT License

Documentation

1. How it works?

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

2. How to use a specific theme?

Mantine Themes-specific themes are located in the app/themes directory. Just copy the color theme that interests you

3. How do I create my own themes?

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