Horu NPM | npm.io

Horu

Exports

Provider

import Head from 'next/head'
import { Provider as Horu } from 'horu'

function MyApp({ Component, pageProps }) {
    return (
        <Horu
            defaultTheme={'dark'}
            themes={[
                {
                    name: 'dark',
                    ...
                },
                {
                    name: 'light',
                    ...
                },
                ]}
            >
            <Head>
                <meta
                    name='viewport'
                    content='width=device-width, initial-scale=1.0'
                />
            </Head>
            <Component {...pageProps} />
        </Horu>
    )
}

export default MyApp

useTheme

function Component() {
    const { theme } = useTheme()

    return (
        <>
            <button onClick={() => theme.toggle()}>
                {theme.index}: {theme.name}
            </button>

            <button onClick={() => theme.set('dark')}>
                Turn the lights off
            </button>
        </>
    )
}

For styled, css, globalCss, keyframes, getCssText, config and reset refer to the Stitches API Documentation.