Init template

src/App.tsx

@@ -0,0 +1,14 @@
+import "@mantine/core/styles.css";
+import { MantineProvider } from "@mantine/core";
+import { theme } from "./theme";
+import { Welcome } from "./Welcome/Welcome";
+import { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle";
+
+export default function App() {
+  return (
+    <MantineProvider theme={theme}>
+      <Welcome />
+      <ColorSchemeToggle />
+    </MantineProvider>
+  );
+}

src/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,13 @@
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+
+export function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group justify="center" mt="xl">
+      <Button onClick={() => setColorScheme('light')}>Light</Button>
+      <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+      <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+    </Group>
+  );
+}

src/Welcome/Welcome.css.ts

@@ -0,0 +1,22 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "../theme";
+import { rem } from "@mantine/core";
+
+export const title = style({
+  color: vars.colors.black,
+  fontSize: rem(100),
+  fontWeight: 900,
+  letterSpacing: rem(-2),
+
+  selectors: {
+    [vars.darkSelector]: {
+      color: vars.colors.white,
+    },
+  },
+
+  "@media": {
+    [vars.smallerThan("md")]: {
+      fontSize: rem(50),
+    },
+  },
+});

src/Welcome/Welcome.tsx

@@ -0,0 +1,28 @@
+import { Title, Text, Anchor } from "@mantine/core";
+import * as classes from "./Welcome.css";
+
+export function Welcome() {
+  return (
+    <>
+      <Title className={classes.title} ta="center" mt={100}>
+        Welcome to{" "}
+        <Text
+          inherit
+          variant="gradient"
+          component="span"
+          gradient={{ from: "pink", to: "yellow" }}
+        >
+          Mantine
+        </Text>
+      </Title>
+      <Text color="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
+        This starter Vite project includes a minimal setup, if you want to learn
+        more on Mantine + Vite integration follow{" "}
+        <Anchor href="https://mantine.dev/guides/vite/" size="lg">
+          this guide
+        </Anchor>
+        . To get started edit pages/Home.page.tsx file.
+      </Text>
+    </>
+  );
+}

src/main.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/theme.ts

@@ -0,0 +1,5 @@
+import { createTheme } from "@mantine/core";
+import { themeToVars } from "@mantine/vanilla-extract";
+
+export const theme = createTheme({});
+export const vars = themeToVars(theme);

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />