Theming

The theme object is where you define your application's color palette, font stacks, breakpoints, border radius values, and more.

Design Principles

Kitchn is designed with the following principles in mind:

Accessible: Accessible to all users.
Consistent: Consistent design language that is easy to understand.
Customizable: Easily customizable to fit your design.
Responsive: Work on all devices and screen sizes.
Performance: Performant and fast.
Dark First: Designed with dark mode in mind, so the dark key in dark mode means it will be light in light mode.

Colors

Kitchn provides a sensible default theme inspired by Tonight Pass (opens in a new tab) and Hiven (opens in a new tab), but you can customize it to fit your design.

💡

Remind that the dark key in dark mode means it will be light in light mode.

Layout

Darkest

var(--kc-colors-layout-darkest, rgb(17, 17, 17))

Darker

var(--kc-colors-layout-darker, rgb(25, 25, 27))

Dark

var(--kc-colors-layout-dark, rgb(34, 34, 36))

Light

var(--kc-colors-layout-light, rgb(150, 150, 150))

Lighter

var(--kc-colors-layout-lighter, rgb(175, 175, 176))

Lightest

var(--kc-colors-layout-lightest, rgb(255, 255, 255))

Text

Lightest

var(--kc-colors-text-lightest, rgb(255, 255, 255))

Lighter

var(--kc-colors-text-lighter, rgb(200, 200, 200))

Light

var(--kc-colors-text-light, rgb(175, 175, 175))

Dark

var(--kc-colors-text-dark, rgb(160, 160, 160))

Darker

var(--kc-colors-text-darker, rgb(125, 125, 125))

Darkest

var(--kc-colors-text-darkest, rgb(50, 51, 52))

Accent

Primary

var(--kc-colors-accent-primary, rgb(80, 60, 245))

Secondary

var(--kc-colors-accent-secondary, rgb(70,38,228))

Success

var(--kc-colors-accent-success, rgb(46, 204, 113))

Warning

var(--kc-colors-accent-warning, rgb(241, 196, 15))

Danger

var(--kc-colors-accent-danger, rgb(231, 76, 60))

Info

var(--kc-colors-accent-info, rgb(52, 152, 219))

Light

var(--kc-colors-accent-light, rgb(255, 255, 255))

Dark

var(--kc-colors-accent-dark, rgb(0, 0, 0))

Fonts

The default font stack is Figtree from Fontsource (opens in a new tab). You can change the font stack by providing a font key in the theme object.

import { createTheme, KitchnProvider, Theme } from "kitchn";
 
import "@fontsource/roboto";
import "@fontsource-variable/roboto-mono";
 
export const customTheme: Theme = {
  name: "custom",
  // ... other theme values
  family: {
    primary: "Roboto, -apple-system, sans-serif",
    monospace: "Roboto Mono, monospace",
  },
};

Build your theme

You can build your theme using the createTheme function. This function takes a theme object and returns a theme object with the default theme values merged with your custom theme values.

import { createTheme, KitchnProvider, Theme } from "kitchn";
 
export const customTheme: Theme = {
  name: "custom",
  colors: {
    layout: {
      darkest: "rgb(5, 21, 39)",
      darker: "rgb(6, 25, 46)",
      dark: "rgb(52, 68, 111)",
      light: "rgb(130, 137, 147)",
      lighter: "rgb(155, 155, 156)",
      lightest: "rgb(255, 255, 255)",
    },
    text: {
      lightest: "rgb(255, 255, 255)",
      lighter: "rgb(200, 200, 200)",
      light: "rgb(150, 150, 150)",
      dark: "rgb(135, 135, 135)",
      darker: "rgb(100, 100, 100)",
      darkest: "rgb(30, 31, 32)",
    },
    accent: {
      primary: "rgb(176, 36, 241)",
      secondary: "rgb(176, 96, 241)",
      success: "rgb(46, 204, 113)",
      warning: "rgb(241, 196, 15)",
      danger: "rgb(231, 76, 60)",
      info: "rgb(52, 152, 219)",
      light: "rgb(255, 255, 255)",
      dark: "rgb(0, 0, 0)",
    },
  },
};
 
const custom = createTheme(customTheme);
 
const App = ({ Component, pageProps }: AppProps) => {
  return (
    <KitchnProvider
      themes={{
        custom,
      }}
    >
      <Component {...pageProps} />
    </KitchnProvider>
  );
};

Installation Playground