diff --git a/README.md b/README.md index 2a99648..53c14ed 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,58 @@ -# Welcome to React Router! +
-- 📖 [React Router docs](https://reactrouter.com/dev) +Mantine Themes -## Development +# Mantine [Themes](https://mantine-themes.willpinha.link) -Run the dev server: +*Beautiful Mantine themes using semantic colors* -```shellscript -npm run dev -``` +
-## 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 ( + + {/* Your application here */} + + ); +} +``` -## 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?