Skip to content
next-ignite Logo

Theming the Website

ignite provides two ways to theme:

  • Customize the colors => CSS variables
  • Customize the component used to render arbitrary HTML elements => MDX

Color Theming

ignite is uses tailwind so changing the colors for you website is super simple. All you have to do is set some CSS variables and ignite will use those colors.

Available Colors:

  • primary (100-900) - The primary color for your app
  • gray (100-1000) - A gray that compliments the primary color

Add a style block to your pages/_document.js that sets your desired colors.

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <style>{`
            :root {
              --color-primary-100: #F3E6ED;
              --color-primary-200: #E1BFD1;
              /* ETC */
            }
          `}</style>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <style>{`
            :root {
              --color-primary-100: #F3E6ED;
              --color-primary-200: #E1BFD1;
              /* ETC */
            }
          `}</style>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

If you're having trouble creating the full color ranges try out this tool I made. You can enter a primary 500 color and it will generate a range for the primary and a complimentary gray.

Component Theming

ignite is uses mdx so it's incredibly simple to customize any component!

Theming the Base Elements

All you need to do is open up your _app.js and the your components to the MDXProvider.

See the full list of base elements.

import React from "react";
import App from "next/app";
import { MDXProvider } from "@mdx-js/react";
import { igniteComponents } from "next-ignite";

// Import the css to style the docs
import "ignite/dist/main.css";

import { Anchor } from "../components/anchor";
import { H1 } from "../components/h1";

const components = {
  ...igniteComponents,
  // Easily override and base HTML component
  h1: H1,
  a: Anchor,
};

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <MDXProvider components={components}>
        <Component {...pageProps} />
      </MDXProvider>
    );
  }
}

export default MyApp;
import React from "react";
import App from "next/app";
import { MDXProvider } from "@mdx-js/react";
import { igniteComponents } from "next-ignite";

// Import the css to style the docs
import "ignite/dist/main.css";

import { Anchor } from "../components/anchor";
import { H1 } from "../components/h1";

const components = {
  ...igniteComponents,
  // Easily override and base HTML component
  h1: H1,
  a: Anchor,
};

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <MDXProvider components={components}>
        <Component {...pageProps} />
      </MDXProvider>
    );
  }
}

export default MyApp;

Making a component

When you are creating these component overrides, it is important to do this the right way. Two things you should consider are:

  1. Applying the className properly
  2. Spreading the rest of the props

Example h1 Component:

import React from "react";
import makeClass from "clsx";

const h1 = ({ className, ...props }) => (
  <h1
    // Use props.className if you are using it yourself
    className={makeClass(
      className,
      "text-primary-900 mb-8 dark:text-primary-100"
    )}
    // Spread the rest of the props
    {...props}
  />
);
import React from "react";
import makeClass from "clsx";

const h1 = ({ className, ...props }) => (
  <h1
    // Use props.className if you are using it yourself
    className={makeClass(
      className,
      "text-primary-900 mb-8 dark:text-primary-100"
    )}
    // Spread the rest of the props
    {...props}
  />
);

Theming the rest

In addition to being able to theme all the base components, ignite lets you theme all the components provided by ignite!

This includes all the components that compose:

  • Sidebar
  • Navigation Bar

Full list of themeable ignite components:

  • Logo
  • NavBarWrapper
  • NavBar
  • NavBarItem
  • SearchInput
  • MobileMenuButton
  • Sidebar
  • SidebarItemWrapper
  • SidebarLink
  • SidebarTitle
  • SidebarDivider
  • SidebarList

When overriding these components please refer to base implementations for available props.