#astro/starlight head.astro dynamic favicon

10 messages · Page 1 of 1 (latest)

jovial adder
#

what would be the correct way to do this? ( i figure there is a more astro way i am not able to do?)

---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Head.astro';
---

<script>
// const input = document.documentElement.dataset.theme;
const input = document.documentElement.getAttribute('data-theme');
console.log(input);

var test = `./public/favicon-${input}.svg`;

console.log(input, test);

// must use the html base, mine is /astro-starlight/ , and not the file path ./public/ since the latter only works in dev mode

if (input == 'light') {
    var test = "/astro-starlight/favicon-primary-light.svg";
}
else if (input == 'dark') {
    var test = "/astro-starlight/favicon-primary-dark.svg";
}
else {
    var test = "/astro-starlight/favicon-blue.svg";
}

console.log(input, test);

var link = document.querySelector("link[rel*='icon']") || document.createElement('link');

console.log(link);

link.id = 'favicon';
(link as HTMLLinkElement).type = 'image/png';
(link as HTMLLinkElement).rel = 'shortcut icon';
(link as HTMLLinkElement).href = `${test}`;
document.getElementsByTagName('head')[0].appendChild(link);

console.log(link);

</script>

<Default {...Astro.props} ></Default>
limpid token
#

You actually don’t even need JS for this at all! Just a CSS and media query inside your SVG.

# 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/>
  <path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/>
  <style>
    path { fill:#000 }
    @media (prefers-color-scheme:dark) {
      path { fill:#fff }
    }
  </style>
</svg>
jovial adder
#

second time you hit me with the css as a soltuion

jovial adder
#

does this method use the browser/dekstop colour scheme and not the website ?

#

i think that was also another mistake, the js method is using the website but this made me realise i need to be thinking about the browser theme

limpid token
#

Yeah, this will change with the system preference

jovial adder
#

i promise, before i ask my next question, i'll check to see if i can do it in css first.