@catppuccin/starlight/styles/shared.css

<h3 align="center"> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transp

@layer starlight, catppuccin;

@layer catppuccin {
  /* align with style guide for main body copy -> `text` */
  :root {
    --sl-color-text: var(--sl-color-white);
  }

  /* increase contrast of ToC in the right sidebar */
  .right-sidebar-panel a:not(:hover):not([aria-current="true"]) {
    color: var(--sl-color-gray-2);
  }

  header,
  .right-sidebar,
  .content-panel {
    border-color: var(--sl-color-hairline-light);
  }

  site-search kbd {
    background-color: var(--sl-color-gray-5);
  }

  .sl-link-card:hover {
    background-color: var(--sl-color-gray-6);
  }

  .expressive-code pre {
    --code-background: var(--sl-color-gray-6);
  }

  .starlight-aside--tip {
    --sl-color-asides-text-accent: var(--sl-color-green-high);
    --sl-color-asides-border: var(--sl-color-green);
    background-color: var(--sl-color-green-low);
  }
}