Chrome/Chromium custom theme colors

KrazyLurt · Feb 4, 2024

I use my own custom theme, loaded as an extension. I was wondering if the black colors shown in the image below can be changed? It's the top left button, the G search button, and user icon on the far right.
And the most important, the bottom line separator from the toolbar and the webpage. I want the line removed or the same color as the main toolbar.

My manifest.json is as follows:

Code:

{
   "author": "Krazy",
   "description": "Krazy",
   "manifest_version": 3,
   "name": "Krazy Slight Blue Tint",
   "theme": {
      "colors": {
         "bookmark_text": [ 193, 194, 199 ],
         "frame": [ 40, 41, 43 ],
         "frame_inactive": [ 40, 41, 43 ],
         "frame_incognito": [ 40, 41, 43 ],
         "frame_incognito_inactive": [ 40, 41, 43 ],
         "ntp_background": [ 23, 24, 26 ],
         "ntp_header": [ 45, 46, 48 ],
         "ntp_text": [ 205, 217, 229 ],
         "omnibox_background": [ 40, 41, 43 ],
         "omnibox_text": [ 205, 217, 229 ],
         "tab_background_text": [ 193, 194, 199 ],
         "tab_background_text_inactive": [ 193, 194, 199 ],
         "tab_background_text_incognito": [ 193, 194, 199 ],
         "tab_background_text_incognito_inactive": [ 193, 194, 199 ],
         "tab_text": [ 223, 224, 229 ],
         "toolbar": [ 0, 0, 0 ],
         "toolbar_button_icon": [ 193, 194, 199 ]
      },
      "images": {
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame.png",
         "theme_toolbar": "images/theme_toolbar.png"
      },
      "tints": {
         "background_tab": [ -1.0, -1.0, -1.0 ],
         "buttons": [ -1.0, -1.0, -1.0 ],
         "frame": [ -1.0, -1.0, -1.0 ],
         "frame_inactive": [ -1.0, -1.0, -1.0 ],
         "frame_incognito": [ -1.0, -1.0, -1.0 ],
         "frame_incognito_inactive": [ -1.0, -1.0, -1.0 ]
      }
   },
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "1.0.2"
}

Hopachi · Feb 6, 2024

That pretty much covers what you can customize in theme manifest file. Mostly limited to colors and images, UI icons cannot be altered there so it seems.

KrazyLurt said:
It's the top left button, the G search button, and user icon on the far right.

The G button is search engine specific, in this case Google. Other search engines will use different icons, some will look out of place with the theme colors.
The user icon, if you are logged in in the browser will be obvious from your profile. The not-signed-in icon seems to be a resource image from the browser, not modifiable through the theme unfortunately .

And the most important, the bottom line separator from the toolbar and the webpage. I want the line removed or the same color as the main toolbar.

Trial and error:
It might be from your 'theme_toolbar.png' at the lower end, check the image just in case.
That can also be from theme's background to foreground colors combinations but not sure which elements affect this other than toolbar.
Once I got a glitch there and re-installing the theme or updating/restarting the browser fixed it.

KrazyLurt · Feb 6, 2024

Hopachi said:
Trial and error:
It might be from your 'theme_toolbar.png' at the lower end, check the image just in case.
That can also be from theme's background to foreground colors combinations but not sure which elements affect this other than toolbar.
Once I got a glitch there and re-installing the theme or updating/restarting the browser fixed it.

Thanks for the reply!
I checked if "theme_toolbar" color had any impact to that line, sadly it didn't. Neither did "theme_frame.png".

Hopachi · Feb 12, 2024

I see.
Now I begin to ask myself if it is like this by design?
For instance like a safe guard if the toolbar and page background use the same color, a 'divider' added explicitly to split the two.
Your theme is a good example.

I didn't pay much attention to it lately but I do seem to see a faint line separator there in most themes I used.
And in my main theme I use, the toolbar has a different color than the page background so it passed unnoticed. But there is a faint line between.

From my own experience on the used theme, there is no line added by me anywhere.
Then it might just be like this by design, as other aspects we cannot change in the manifest.

And there were some slight theme modifications along the years as Chrome advanced in version numbers.
If a line was added there at some point, I honestly don't know, but it does look like it.

KrazyLurt · Feb 13, 2024

Yeah it's definitely by design, it's all over the place, from iOS to Windows 11 to always have a contrast line between objects. I just hoped that it could be edited because I rarely think this fashion style looks good.
These things ebs and flows, from everything sharp and square, to all rounded corners for example.