URL bar color contrast on dark theme

[Hill-98]

Captchas

• [X] I have read the instructions.
• [X] I have searched existing issues and avoided creating duplicates.
• [X] I am not filing an enhancement request.

What happened?

The color contrast of Zen Browser’s URL bar is a bit too low in dark mode, causing some accessibility issues and making it look like there’s no URL bar.

Reproducible?

• [X] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.1-a.18

What platform are you seeing the problem on?

Windows

Relevant log output

No response

[dosubot[bot]]

Hello @Hill-98! I'm Dosu, a bot here to help you with bugs, questions, and becoming a contributor. I'm here to assist you with the issue you've encountered.

I found a similar closed issue regarding the low contrast of the URL bar in light mode, which might provide some insights into addressing the dark mode issue as well. The issue was titled "Too low contrast for URLbar selection background in Light Mode" and has been closed with most issues fixed ^[1].

To improve the color contrast of Zen Browser's URL bar in dark mode, you can adjust the --zen-urlbar-background variable in the CSS. Currently, it is set as follows:

--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);

To enhance contrast, you can increase the percentage of var(--zen-primary-color) or use a lighter shade for the background. For example:

--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 10%, rgb(30, 30, 30) 90%);

This change should improve the contrast and make the URL bar more accessible ^[2].

To continue talking to Dosu, mention @dosu.