Style the components

//...
baseSettings: {
  //...
  theme: {
    tokens: {
      fonts: {
        heading: "'Space Grotesk'",
        body: "'Inter'",
        mono: "'Space Mono', monospace",
      },
    },
  }
}

//...
baseSettings: {
  //...
  theme: {
    tokens: {
      fontSizes: {
        '3xs': '0.45rem',
        '2xs': '0.625rem',
        xs: '0.75rem',
        sm: '0.875rem',
        md: '1rem',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '3.75rem',
        '7xl': '4.5rem',
        '8xl': '6rem',
        '9xl': '8rem',
      },
    },
  }
}

//...
baseSettings: {
  //...
  theme: {
    tokens: {
      colors: {
        // grays for light mode
        'gray.50': '#f8f9fa',
        'gray.100': '#f1f3f5',
        'gray.200': '#eceef0',
        'gray.300': '#e6e8eb',
        'gray.400': '#dfe3e6',
        'gray.500': '#BDC2C7',
        'gray.600': '#889096',
        'gray.700': '#687076',
        'gray.800': '#36424A',
        'gray.900': '#11181c',
        // grays for dark mode
        'grayDark.50': '#ededed',
        'grayDark.100': '#a0a0a0',
        'grayDark.200': '#7e7e7e',
        'grayDark.300': '#707070',
        'grayDark.400': '#505050',
        'grayDark.500': '#3e3e3e',
        'grayDark.600': '#343434',
        'grayDark.700': '#2e2e2e',
        'grayDark.800': '#282828',
        'grayDark.900': '#1c1c1c',
      },
    },
    primaryColors: {  // by default, derived from primaryBrandColor
      textColorOnPrimary: '#11181c',
      textBold: '#141d20',
      textSubtle: '#354a51',
      lighter: '#e5feff',
      light: '#85f0ff',
      lightSubtle: '#f1f8fa',
      medium: '#26d6ff', // primaryBrandColor
      strong: '#00b5dd',
      stronger: '#006881',
      hitContentPreview: '#00b5dd',
      hitContentPreviewHover: '#006881',
      textColorOnPrimary: 'white',
    },
  }
}

//...
baseSettings: {
  //...
  theme: {
    tokens: {
      zIndex: {
        hide: -1,
        auto: 'auto',
        base: 0,
        docked: 10,
        dropdown: 1000,
        sticky: 1100,
        banner: 1200,
        overlay: 1300,
        modal: 1400,
        popover: 1500,
        skipLink: 1600,
        toast: 1700,
        tooltip: 1800,
      },
    }
  }
}

//...
baseSettings: {
  //...
  theme: {
    components: {
      SearchBarTrigger: {
        defaultProps: {
          size: 'expand', // 'expand' 'compact' 'shrink' 'medium'
          variant: 'emphasized', // 'emphasized' 'subtle'
        },
      },
    }
  }
}

//...
baseSettings: {
  //...
  theme: {
    components: {
      AIChatPageWrapper: {
        defaultProps: {
          size: 'shrink-vertically', // 'shrink-vertically' 'expand', 'default', 'full-viewport'
          variant: 'no-shadow', // 'no-shadow' or 'container-with-shadow'
        },
      },
    }
  }
}

import { themes } from "prism-react-renderer";

const inkeepProps = {
  theme: {
    syntaxHighlighter: {
      lightTheme: themes.dracula, // theme used in light mode
      darkTheme: themes.dracula, // theme used in dark mode
    },
  },
};

//..
baseSettings: {
  // ...
  colorMode: {
    forcedColorMode: 'dark', // options: 'light' or dark'
  }
}

 baseSettings: {
  //...
  colorMode: {
      enableSystem: true,
    }
  }

import { type InkeepAIChatSettings } from "@inkeep/uikit";

export const aiChatSettings: InkeepAIChatSettings = {
  botAvatarSrcUrl: "http://example.com/bot-avatar.png",
  botAvatarDarkSrcUrl: "http://example.com/bot-avatar-dark-mode.png",
  userAvatarSrcUrl: "http://example.com/user-avatar.png",
  // ...rest of aiChatSettings
};

import { type InkeepBaseSettings } from "@inkeep/uikit";

export const baseSettings: InkeepBaseSettings = {
  customIcons: {
    search: { builtIn: "IoSearch" }, // ex. using builtIn
    thumbsUp: { custom: "/path/to/thumbs-up.svg" }, // ex. using custom
    thumbsDown: { custom: "/path/to/thumbs-down.svg" },
    messageCopy: { custom: "/path/to/message-copy.svg" },
    codeCopy: { custom: "/path/to/code-copy.svg" },
    openLinkInNewTab: { custom: "path/to/open-link-in-new-tab.svg" },
    openLinkInSameTab: { custom: "path/to/open-link-in-same-tab.svg" },
    breadcrumbSeparator: { custom: "path/to/breadcrumb-separator.svg" },
    switchToSearch: { custom: "/path/to/switch-to-search.svg" },
    switchToChat: { custom: "/path/to/switch-to-chat.svg" },
    chatSubmit: { custom: "/path/to/chat-submit.svg" },
    close: { custom: "/path/to/close.svg" },
    info: { custom: "/path/to/info.svg" },
    command: { custom: "/path/to/command.svg" },
  },
  // ...rest of baseSettings
};

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  baseSettings: {
    // ... typeof InkeepBaseSettings
    theme: {
      stylesheetUrls: ["cdn.com/path-to-stylesheet.css"],
    },
  },
  //...
};

const inkeepStyleString = ".ikp-floating-button { color:  #000000; }";
const encodedStyles = encodeURIComponent(inkeepStyleString);
const stylesheetLink = `data:text/css;charset=UTF-8,${encodedStyles}`;

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  baseSettings: {
    // ... typeof InkeepBaseSettings
    theme: {
      stylesheetUrls: [stylesheetLink],
    },
  },
  //...
};

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  baseSettings: {
    // ... typeof InkeepBaseSettings
    theme: {
      stylesheets: [
        <link
          key="my-stylesheet-key"
          rel="stylesheet"
          href="cdn.com/path-to-stylesheet.css"
        />,
      ],
    },
  },
  //...
};

const styleOverrides = `
  .ikp-floating-button {
    color:  #000000;
  }
`;

// be sure to provide a unique key
const styleTag = <style key="style-tag-1">{styleOverrides}</style>;

const inkeepEmbeddedChatProps: InkeepEmbeddedChatProps = {
  baseSettings: {
    // ... typeof InkeepBaseSettings
    theme: {
      stylesheets: [styleTag],
    },
  },
  //...
};

.ikp-floating-button {
  background: var(--ikp-colors-inkeep-primary-medium);
}

[data-theme="dark"] .ikp-floating-button {
  background: #353e52;
}