chakra-ui

Meteor + Chakra UI + Dark mode example

Demo deployed on Galaxy:

https://chakraui.meteorapp.com/

Chakra UI

The setup is already done in this project, but if you want to do it in another project you can follow the steps below.

They are pretty much the same as the recommended on the installation page of Chakra UI.

1 - Install npm dependencies

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

2 - Install Chakra UI icons

npm i @chakra-ui/icons

See package.json as example.

3 - Setup Chakra UI Provider + Color Mode

import React from 'react';
import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react';
import { HeroCallToAction } from './HeroCallToAction';
import { Navbar } from './Navbar';

const theme = extendTheme({ config: {
    initialColorMode: 'dark',
    useSystemColorMode: false,
  } });

export const App = () => (
  <>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
    <ChakraProvider theme={theme}>
      <Navbar />
      <HeroCallToAction />
    </ChakraProvider>
  </>
);

See main.js and App.js as example.

Running the example

Install dependencies

meteor npm install

Running

meteor npm run start