Styling

Set CSS variables to customize the plugin’s components.

src/styles/custom.css

:root {
  /* Code blocks */
  --spi-codeblock-icon-size: 1.2rem;
  --spi-codeblock-icon-gap-right: 0.5rem;
  --spi-codeblock-icon-gap-left: 0.5rem;

  /* Sidebar */
  --spi-sidebar-icon-size: 1.25rem;
  --spi-sidebar-icon-gap: 0.25rem;

  /* File tree */
  --spi-filetree-icon-size: 1.05rem;
  --spi-filetree-icon-gap: 0.375rem;

  /* IconLink */
  --spi-iconlink-width: 9rem;
  --spi-iconlink-height: 8rem;
  --spi-iconlink-gap: 0.5rem;
  --spi-iconlink-icon-size: 3rem;
  --spi-iconlink-pad: 1rem;
  --spi-iconlink-radius: 0.5rem;

  /* Card */
  --spi-card-icon-size: 1em;
  --spi-card-icon-wrapper-pad: 0.25em;
}