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)
Leave a Reply