mantine-nord-theme

A Mantine theme object based on the Nord palette. (Light・Dark)

Installation

# With yarn
yarn add mantine-nord-theme
# With npm
npm install mantine-nord-theme

Usage

Basic usage

import { MantineProvider } from "@mantine/core";
import { theme } from "mantine-nord-theme";

function Demo() {
  return (
    <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Additional styles can be provided under the MantineProvider

import { MantineProvider } from "@mantine/core";
import { theme, Scrollbar, TextSelection } from "mantine-nord-theme";

function Demo() {
  return (
    <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
      <Scrollbar />
      <TextSelection />
      <App />
    </MantineProvider>
  );
}

With a custom colorScheme and ColorSchemeProvider

import { useState } from "react";
import { MantineProvider, ColorSchemeProvider, ColorScheme } from "@mantine/core";
import { theme } from "mantine-nord-theme";

function Demo() {
  const [colorScheme, setColorScheme] = useState<ColorScheme>("light");

  const toggleColorScheme = (value?: ColorScheme) =>
    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));

  return (
    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
      <MantineProvider theme={{ ...theme, colorScheme }} withGlobalStyles withNormalizeCSS>
        <App />
      </MantineProvider>
    </ColorSchemeProvider>
  );
}

License

MIT