Change the Theme Color in PWA Mode（space-script）

Tricks & Techniques
1

I used this theme, but in PWA mode on iOS, the top fill color seemed unchangeable. With the help of ChatGPT, I came up with this script, which works great for me. I’m not sure if there’s a better way to make this change, but I hope this helps those who need it.

(async () => {
  const themeColor = "#f1efec"; // Fixed color setting
  let metaThemeColor = document.querySelector('meta[name="theme-color"]');
  if (!metaThemeColor) {
    metaThemeColor = document.createElement('meta');
    metaThemeColor.name = "theme-color";
    document.head.appendChild(metaThemeColor);
  }
  metaThemeColor.content = themeColor;
  console.log(`Theme color set to ${themeColor}!`);
})();

I really love Silverbullet. Even though I don’t understand code, with the help of AI, I can make simple modifications and customizations, which is really fun. I hope the space script functionality can become even more powerful.

I often just throw the space script or page description to ChatGPT and tell it my requirements. I wonder, if there were an AI specifically based on this project, equipped with all the necessary syntax and rule knowledge, we non-programmers who love to tinker would be very happy.

2

For style changes I think that you’d have better results with Space Style, see examples there

3

image

What I want to modify is this part. I gave the instructions for space style to AI, but AI told me that space style can only modify CSS and cannot directly modify HTML.

Haha, I really don’t understand it well, so basically, I’m just following AI’s instructions and trying again and again.