Adding Arc Browser Color Sensitivity to WP Admin Bar

Have you tried Arc browser from the Browser Company? I’ve been using it for the past month and find it to be phenomenal. Arc has completely changed how I organize my tabs and work in a browser. In addition to the tab management, it has a gorgeous design, and the color-coded spaces management is beautiful. What if we could incorporate some of these colors into our WordPress app?

With a few lines of css your WordPress app can feel a little more at home inside Arc browser

Arc provides the following color variables:

    --arc-palette-cutoutColor
    --arc-palette-background
    --arc-palette-hover
    --arc-palette-foregroundTertiary
    --arc-palette-subtitle
    --arc-palette-foregroundPrimary
    --arc-palette-title
    --arc-background-gradient-color1
    --arc-background-gradient-color0
    --arc-palette-maxContrastColor
    --arc-palette-backgroundExtra
    --arc-palette-foregroundSecondary
    --arc-palette-minContrastColor
    --arc-palette-focus

By grabbing just four of these variables we can recreate the effect from the video.

div#wpadminbar {
    background-color: var(--arc-palette-foregroundTertiary, black) !important;
    border-bottom: 1px solid var(--arc-palette-foregroundPrimary, black) !important;
}

div#wpadminbar .ab-sub-wrapper,
.ab-top-menu > li.hover > .ab-item,
div#wpadminbar .ab-submenu {
    background-color: var(--arc-palette-foregroundPrimary, black) !important;
    color: var(--arc-palette-minContrastColor, white) !important;
}
div#wpadminbar .ab-sub-wrapper a {
    color: var(--arc-palette-minContrastColor, white) !important;
}

div#wpadminbar .ab-item,
div#wpadminbar #adminbarsearch:before,
div#wpadminbar a,
div#wpadminbar a:before,
div#wpadminbar .ab-icon:before,
div#wpadminbar .ab-label {
    color: var(--arc-palette-maxContrastColor, white) !important;
}

div#wpadminbar .ab-item:hover {
    background-color: var(--arc-palette-foregroundPrimary, black) !important;
    color: var(--arc-palette-minContrastColor, white) !important;
}
div#wpadminbar .ab-item:hover:before {
    color: var(--arc-palette-minContrastColor, white) !important;
}

If you haven’t had a chance to try Arc out yet and would like to give it a try then you can use following invite link (limited to 5)

https://arc.net/gift/ee67572f

Want to stay up-to-date with my latest tutorials and thoughts on the Gutenberg project? Sign up for my newsletter!

Leave a Reply

%d bloggers like this: