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

**URL:** <https://community.silverbullet.md/t/change-the-theme-color-in-pwa-mode-space-script/688>\
**Category:** Tricks & Techniques\
**Created:** [July 19, 2024, 6:12am UTC](https://community.silverbullet.md/t/change-the-theme-color-in-pwa-mode-space-script/688 "2024-07-19T06:12:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![daydaya](https://community.silverbullet.md/user_avatar/community.silverbullet.md/daydaya/32/284_2.png) [@daydaya](https://community.silverbullet.md/u/daydaya)\
**Post date:** [July 19, 2024, 6:12am UTC](https://community.silverbullet.md/t/change-the-theme-color-in-pwa-mode-space-script/688/1 "2024-07-19T06:12:19Z")

</div>

> [@Tiniri: a theme for SilverBullet (well, a CSS hack really)](https://community.silverbullet.md/t/tiniri-a-theme-for-silverbullet-well-a-css-hack-really/336):
>
> Happy I found SilverBullet! So I found no “themes” or “color schemes” for SilverBullet. So I thought I’d hack my own. I maintain a set of themes called Tiniri, and I wanted to apply the same style to SB. Here’s how I did it: installed a browser extension called “User JavaScript and CSS”: [https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld](https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld) applied this CSS code: [silverbullet.md Tiniri theme · GitHub](https://gist.github.com/vladstudio/749becce3470082292a066fc617f1904) I paid attention to reuse CSS variables as …

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.

```space-script
(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.

---

<div class="post-metadata">

**Author:** ![Maarrk](https://community.silverbullet.md/user_avatar/community.silverbullet.md/maarrk/32/56_2.png) [@Maarrk](https://community.silverbullet.md/u/Maarrk)\
**Post date:** [July 19, 2024, 6:23am UTC](https://community.silverbullet.md/t/change-the-theme-color-in-pwa-mode-space-script/688/2 "2024-07-19T06:23:17Z")

</div>

For style changes I think that you’d have better results with [Space Style](https://silverbullet.md/Space%20Style), see examples there

---

<div class="post-metadata">

**Author:** ![daydaya](https://community.silverbullet.md/user_avatar/community.silverbullet.md/daydaya/32/284_2.png) [@daydaya](https://community.silverbullet.md/u/daydaya)\
**Post date:** [July 19, 2024, 6:54am UTC](https://community.silverbullet.md/t/change-the-theme-color-in-pwa-mode-space-script/688/3 "2024-07-19T06:54:52Z")

</div>

![image](https://community.silverbullet.md/uploads/default/original/1X/ff9217df17c082a84832f8dbb0f0a85f612e1b1b.png)

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.