URL bar color change

[aljustiet]

How do I change the url bar's color?
I feel the high contrast between the url bar and the overall theme.

[dosubot[bot]]

Hey there, @aljustiet! I'm here to help you with any bugs, questions, or contributions you have. Let's get this issue sorted out together!

To change the URL bar's color to better match the overall theme, you can modify the --zen-urlbar-background variable in the CSS file. This variable controls the background color of the URL bar. Here's a code snippet you can adjust:

--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%);

You can change the color-mix function parameters to adjust the color. For example, increase the percentage of var(--zen-primary-color) to make the URL bar color closer to the primary theme color, or change the second color (#f4f4f4) to another color that better matches your theme.

Additionally, you can directly modify the background-color property in the identity-block.css file. For example:

background-color: light-dark(#cecece, rgb(66, 65, 77));

This allows you to customize the URL bar's appearance based on the theme's light or dark mode settings ^[1][2].

To continue talking to Dosu, mention @dosu.