https://github.com/willpinha/mantine-themes
Beautiful Mantine themes using semantic colors
https://github.com/willpinha/mantine-themes
color-theme mantine react react-router react-router-v7 themes
Last synced: 8 months ago
JSON representation
Beautiful Mantine themes using semantic colors
- Host: GitHub
- URL: https://github.com/willpinha/mantine-themes
- Owner: willpinha
- License: mit
- Archived: true
- Created: 2024-10-10T22:41:02.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-28T20:36:04.000Z (11 months ago)
- Last Synced: 2025-04-28T21:37:37.073Z (11 months ago)
- Topics: color-theme, mantine, react, react-router, react-router-v7, themes
- Language: TypeScript
- Homepage:
- Size: 181 KB
- Stars: 23
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> [!WARNING]
> This project was developed with Mantine v7.13 and is no longer being maintained
# Mantine Themes
*Beautiful Mantine themes using semantic colors*
## About
**Mantine Themes** offers you a set of themes that you can use with the [Mantine](https://mantine.dev) 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? Run it locally with the following command:
```
npm run dev
```
## License
Mantine Theme is under the [MIT License](LICENSE)
## Documentation
### 1. How it works?
Themes are dynamically generated based on the `createMantineTheme` function located in the
[create-mantine-theme.ts](https://github.com/willpinha/mantine-themes/blob/master/app/lib/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
```tsx
import { createMantineTheme } from "./create-mantine-theme.ts";
const theme = createMantineTheme({
baseHue: 120,
baseSaturation: 20,
colors: {
primary: [...],
secondary: [...],
tertiary: [...],
}
});
export function App() {
return (
{/* Your application here */}
);
}
```
### 2. How to use a specific theme?
Mantine Themes-specific themes are located in the [app/themes](https://github.com/willpinha/mantine-themes/tree/master/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](https://mantine.dev/colors-generator) have good contrast with the base colors