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