Style the components

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

//...
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/widgets";

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 InkeepWidgetBaseSettings } from "@inkeep/widgets";

export const baseSettings: InkeepWidgetBaseSettings = {
  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" },
    linkIndicator: { custom: "path/to/link-indicator.svg" },
    newLine: { custom: "path/to/new-line.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" },
    enter: { custom: "/path/to/enter.svg" },
  },
  // ...rest of baseSettings
};

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

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

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

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