Seth Rubenstein

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?

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