Chrome bookmark bar background with high contrast

Question

When using high contrast mode in Windows 10, Chrome updates the text color of items on the bookmark bar from black to white. More, the background of each item becomes black:

How can I change the background color of bookmarks on the bookmark bar to something other than black? I've tried a few themes that don't have any effect. This appearance is the same in an incognito window. An uninstall/reinstall of Chrome does not effect the background color.

Edit: Can we prevent Chrome from detecting the state of high contrast in Windows?

Edit 2: This may be controlled by a Windows registry key. The problem is present in other applications.

Edit 3: I am using a basic .theme file in Windows to find the registry key that controls this color. I've found that the black text background exists once I add Window and WindowText values to HKCU:\Control Panel\Desktop\Colors.

Solution

If you have found a theme that is almost acceptable but would like to customize it further, this is how you do that in steps.

Step 1 : Allow the viewing of hidden files

1. In the Control Panel, open File Explorer Options.
2. Go to the View tab for a list of advanced settings
3. Under "Hidden files and folders" click "Show hidden files, folders, and drives"
4. Click OK

Step 2 : Find your theme

1. Open Windows Explorer
2. Navigate to C:\Users\[user-name]\AppData\Local\Google\Chrome\User Data\Default\Extensions
3. Sort by date descending the list of folders that have strange names to find your theme (should be the most recent one).

Step 3 : Modify the theme

1. In the folder of the theme (or a sub-folder), open the file manifest.json in a text editor.

2. Find the "colors" section which will look like this:

   "theme": {
     "colors": {
        "bookmark_text": [ 221, 221, 221 ],
   

and also :

    "images": {
     "theme_toolbar": "img/toolbar.png"

3. The color of the bookmarks text is given by "bookmark_text" and the numbers inside the parenthesis contain the RGB values (red, green, blue).
4. Change the number to the color you like. You may use a color-picker for that (picker1 or picker2 or any other).
5. If you wish to change the background color of the header, this is unfortunately specified by an image in "theme_toolbar". You could use the Chrome Theme Creator to build another one.
6. Save your changes and restart Chrome.

I suggest making a copy of the theme's folder before modifying the file manifest.json as a backup.

More information can be found in the articles :

• Google Chrome Theme Tutorial
• How to edit Chrome Themes

Comments

[Ram Chandra Giri]

Only way to avoid this situation for me is to making bookmark objects icon only. Tried searching for answer found nothing.

[Ram Rachum]

Here is the Chrome feature request I created for improving this situation: crbug.com/1231644 Please star it and add your use case in the comments. It'll help the developers justify working on this.

[root]

This addresses the book mark text color and bookmark bar color which does not effect the bookmark text background color in high contrast mode. The color of img/toolbar.png in the mentioned theme (80, 80, 80) is the base layer of color in the bookmark bar behind the text background color (0, 0, 0). Updating this .png will not help with this question. When Chrome detects high contrast in Windows, it applies pure black as the text background over the .png. The strange folder name comes from the extension ID. Also, %AppData% can be accessed without modifying hidden folder settings.

[harrymc]

If I understand right, only the bookmark text background color in high contrast mode is still unsolved?

[harrymc]

You might try to create your own theme using the Chrome Theme Creator.

[root]

Yes, that is the only question from the original post.

[Community]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.