Theming

Theming in Kitchn is designed to be straightforward yet powerful, allowing you to customize every aspect of your application's visual style. This guide walks you through defining color palettes, typography, breakpoints, and other design elements to suit your needs.

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.

Name

The name key in your theme object identifies the theme. It's crucial for switching between themes using the KitchnProvider. By default, Kitchn supports switching between light and dark themes.

import { createTheme, KitchnProvider, DefaultTheme } from "kitchn";
 
export const customTheme: DefaultTheme = {
  name: "custom",
  // ... other theme values
};
 
const custom = createTheme(customTheme);
 
const App = ({ Component, pageProps }: AppProps) => {
  return (
    <KitchnProvider
      themes={{
        custom,
      }}
    >
      <Component {...pageProps} />
    </KitchnProvider>
  );
};

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, DefaultTheme } from "kitchn";
 
import "@fontsource/roboto";
import "@fontsource-variable/roboto-mono";
 
export const customTheme: DefaultTheme = {
  name: "custom",
  // ... other theme values
  family: {
    primary: "Roboto, -apple-system, sans-serif",
    monospace: "Roboto Mono, monospace",
  },
};

Size

Customizing the size key in the theme object allows you to define consistent dimensions for various elements in your application.

import { createTheme, DefaultTheme } from "kitchn";
 
export const customTheme: DefaultTheme = {
  name: "custom",
  size: {
    extraTitle: "48px",
    title: "32px",
    large: "24px",
    medium: "18px",
    normal: "16px",
    compact: "14px",
    small: "13px",
    tiny: "11px",
  },
};
 
const custom = createTheme(customTheme);

Adjust the values (extraTitle, title, large, medium, normal, compact, small, tiny) according to your application's design specifications.

⚠️

We recommend using the default values of the size key, as it may break the layout of the components.

Weight

Defining the weight key in the theme object allows you to establish typographic hierarchy and emphasis within your application.

import { createTheme, DefaultTheme } from "kitchn";
 
export const customTheme: DefaultTheme = {
  name: "custom",
  weight: {
    thin: 100,
    extraLight: 200,
    light: 300,
    regular: 400,
    medium: 500,
    semiBold: 600,
    bold: 700,
    extraBold: 800,
    black: 900,
  },
};
 
const custom = createTheme(customTheme);

Modify the numeric values (thin, extraLight, light, regular, medium, semiBold, bold, extraBold, black) to adjust the weight levels according to your design needs.

⚠️

We recommend using the default values of the weight key, as it may break the layout of the components.

Radius

Setting the radius key in the theme object helps in creating consistent and visually appealing rounded corners for elements in your application.

import { createTheme, DefaultTheme } from "kitchn";
 
export const customTheme: DefaultTheme = {
  name: "custom",
  radius: {
    square: "8px",
    round: "99999px",
  },
};
 
const custom = createTheme(customTheme);

Adjust the square and round values to set the desired radius for square and rounded corners respectively.

⚠️

We recommend using the default values of the weight key, as it may break the layout of the components.

We know this principles is not perfect, but we are working on it (opens in a new tab).

Gap

The gap key in the theme object defines the spacing between elements, maintaining consistent visual rhythm and layout structure in your application.

import { createTheme, DefaultTheme } from "kitchn";
 
export const customTheme: DefaultTheme = {
  name: "custom",
  gap: {
    tiny: "5px",
    small: "10px",
    normal: "15px",
    medium: "20px",
    large: "30px",
    extraLarge: "60px",
  },
};
 
const custom = createTheme(customTheme);

Modify the values (tiny, small, normal, medium, large, extraLarge) to adjust the spacing between elements according to your design requirements.

⚠️

We recommend using the default values of the gap key, as it may break the layout of the components.

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, DefaultTheme } from "kitchn";
 
export const customTheme: DefaultTheme = {
  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>
  );
};

Custom Theme and Typescript

💡

This is a work in progress. We are working on a better way to define the theme object and types.

Installation Styling