Dynamic color of Starlight SVG logo

[julien-deramond]

Hi there!

Context

I followed the guidelines in Customizing Starlight > Add your logo to set up my logo in the documentation. Additionally, I referred to Customizing Starlight > Light and dark logo variants to implement different renderings for light and dark modes.

Everything works perfectly.

However, since my logo is a simple, single-color SVG, I wanted to use only one SVG file. Using two separate files seemed unnecessary when the color could be changed dynamically via a CSS variable.

I experimented with different methods, such as applying fill: currentColor in my SVG and using CSS to change the color of .site-title to var(--sl-color-text-accent) (for instance). Despite my efforts, the color remained black.

I tried another approach to test feasibility::

<svg viewBox="0 0 100 78" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
  <path d="..." />
</svg>

.site-title {
  filter: brightness(0) saturate(100%) invert(38%) sepia(96%) saturate(2502%) hue-rotate(7deg) brightness(91%) contrast(104%);
  /* Adjust the filter values to match your desired color */
}

This time, the color changed successfully.

Analysis

In the final DOM, the SVG is not declared directly. Instead, it is used as the source of an <img> element:

<img class="astro-m46x6ez3" alt="" src="/@fs/Users/xxx/project/src/assets/logo.svg?origWidth=100&amp;origHeight=78&amp;origFormat=svg" width="100" height="78" data-astro-source-file="/Users/xxx/project/node_modules/@astrojs/starlight/components/SiteTitle.astro" data-astro-source-loc="12:6">

It seems that the filter property can change the color of an SVG when it is loaded via an <img> tag, whereas the color property does not affect it. These properties interact differently with the contents of an image loaded via an <img> tag.

Question

Are you aware of any other techniques to achieve this (maybe I've missed something obvious), or is this approach a dead-end?

If this is not feasible, do you think it would be worthwhile to change how the logo is integrated into the Starlight documentation? For instance, allowing optionally the use of an SVG directly rather than embedding it as a source of an <img>.

It's not a major issue since loading two SVG files for light and dark modes is still possible, but I wanted to discuss this use case.

This is not a high priority. If you don't have time to answer or analyze this, please don't worry about it :)

Thanks for your time, and your work on Starlight 🌟

[HiDeoo]

Thanks for the feedback 🙌

Just for reference, this is a bit related to this discussion.

Sharing only as a workaround, you can now use a component override to replace the built-in <SiteTitle> component to inline your SVG (make sure to run it through a website like SVGOMG to optimize it first) and add a CSS rule to change its fill color in dark mode for example.

---
// src/components/SiteTitle.astro
import type { Props } from '@astrojs/starlight/props'

const { siteTitle, siteTitleHref } = Astro.props;
---

<a href={siteTitleHref} class="site-title sl-flex">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <g fill="#09090b">
      <path d="..." transform="..."/>
      <path d="..." transform="..."/>
    </g>
  </svg>
	<span class="sr-only">
		{siteTitle}
	</span>
</a>

<style>
	.site-title {
		align-items: center;
		gap: var(--sl-nav-gap);
		font-size: var(--sl-text-h4);
		font-weight: 600;
		color: var(--sl-color-text-accent);
		text-decoration: none;
		white-space: nowrap;
	}
  svg {
    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
    width: auto;
    max-width: 100%;
		object-fit: contain;
		object-position: 0 50%;
  }
  /* Change the fill color in dark mode. */
  :global([data-theme='dark']) path {
    fill: #fafafa;
  }
</style>

This approach should work in all browsers (even Safari), for example here is the result in Safari:

demo.mp4

Note that as mentioned by Chris, this approach optimize first site visit, but de-optimize any future navigations which would have benefited from caching the image. However, this could work fine for small SVGs which should compress pretty well with gzip.

[julien-deramond]

Thanks a lot, HiDeoo, for the detailed and prompt reply!

I'm marking this as the answer, as it definitely addresses my main question, as it is not possible by default. I'm still prototyping some things with Starlight to envisage a switch, and I'll keep your workaround in mind (the flexibility and customization options that Starlight offers are really cool!). I'll evaluate whether it's worth the effort and manageable compared to the two-files version, since my website probably won't need such a high level of fine-tuning.

Just for reference, this is a bit related to this #955.
[...]
Note that as #955 (comment) by Chris, this approach optimize first site visit, but de-optimize any future navigations which would have benefited from caching the image.

I had checked this discussion but hadn't read the comments and answers in detail. Indeed, part of my topic is linked to it, and some responses, like the one from Chris, confirm elements such as "they can access document scope, so, for example, you could set a fill using a color-theme-responsive variable and have a single file work in light and dark mode."

My bad for missing those insights initially.