Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
willpinha authored Oct 16, 2024
1 parent 3bd83e2 commit d4261c1
Showing 1 changed file with 42 additions and 24 deletions.
66 changes: 42 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,58 @@
# Welcome to React Router!
<div align="center">

- 📖 [React Router docs](https://reactrouter.com/dev)
<img alt="Mantine Themes" width="120" src="https://github.com/user-attachments/assets/b3d0a9d2-6d86-44cc-b698-b3f80266cf6c" />

## Development
# Mantine [Themes](https://mantine-themes.willpinha.link)

Run the dev server:
*Beautiful Mantine themes using semantic colors*

```shellscript
npm run dev
```
</div>

## Deployment
## About

First, build your app for production:
**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

```sh
npm run build
```
Each theme has primary, secondary and tertiary semantic colors so you can customize your frontend with the colors you prefer

Then run the app in production mode:
Interested in Mantine Themes? [Take a look→]()

```sh
npm start
```
## License

Mantine Theme is under the [MIT License](LICENSE)

Now you'll need to pick a host to deploy it to.
## Documentation

### DIY
### 1. How it works?

If you're familiar with deploying Node applications, the built-in app server is production-ready.
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

Make sure to deploy the output of `npm run build`
Just copy this file to your project and create your themes

- `build/server`
- `build/client`
```tsx
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>
);
}
```

## Styling
### 2. How to use a specific theme?

This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
### 3. How do I create my own themes?

0 comments on commit d4261c1

Please sign in to comment.