Theme

The theme section within the KigoContext allows you to customize the visual appearance of your application. This includes defining the color palette, typography, and other styling options to ensure your application aligns with your brand's design guidelines.

Defaults

The code below illustrates setting the KigoContext with the default values for theme:

const kigoContext = {
  theme: {
    palette: {
      primary: "#4B55FD",
      secondary: "#CCFFFE",
    },
    typography: {
      fontFamily: "Inter, sans-serif",
    },
  },
};

Properties

palette

The palette property allows you to define the primary and secondary colors used throughout your application.

• primary - The primary color of your application.

  • Default: "#4B55FD" - A shade of blue.
  • Valid values: string (A valid CSS color value, such as hex, rgb, or named color)
  • Example:
    JavaScript

    theme: {
      palette: {
        primary: "#FF5733", // A custom shade of orange
      },
    },
    

• secondary - The secondary color of your application.

  • Default: "#CCFFFE" - A light cyan.
  • Valid values: string (A valid CSS color value, such as hex, rgb, or named color)
  • Example:
    JavaScript

    theme: {
      palette: {
        secondary: "#28B463", // A custom shade of green
      },
    },
    

typography

The typography property allows you to specify the font family used in your application.

• fontFamily - The font family for your application’s text.

  • Default: "Inter, sans-serif" - A modern, sans-serif font.
  • Valid values: string (A valid CSS font-family value)
  • Example:
    JavaScript

    theme: {
      typography: {
        fontFamily: "Roboto, sans-serif", // A custom font family
      },
    },
    

  Note: If you specify a custom font that isn't included by default in browsers, you must ensure that the font is properly loaded in your application. This can be done by importing the font in your CSS or using a service like Google Fonts. Here's an example:

  CSS

  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
  

  Or, include the font link in your HTML:

  HTML

  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

Customizing the Theme

The theme settings can be customized within the KigoContext to better align with your brand’s design language. Below is an example of how you might set a custom theme:

const customTheme = {
  palette: {
    primary: "#FF5733", // Custom primary color
    secondary: "#28B463", // Custom secondary color
  },
  typography: {
    fontFamily: "Roboto, sans-serif", // Custom font family
  },
};

const kigoContext = {
  theme: customTheme,
};

By providing a custom theme, you can ensure that the application's appearance is consistent with your brand guidelines. If you are using a custom font, remember to load the font in your application as described above.