Skip to content

[V2] Color of menu arrow in dark mode #1878

@nicholasgcoles

Description

@nicholasgcoles

🐛 Bug Report

This is a TINY bug. The color of the menu link arrows in dark mode is black.

Have you read the Contributing Guidelines on issues?

Yes

Screenshot

image

Expected behavior

The colour should be the same as if it was in light mode.

Actual behavior

This is caused because of the black background and the transparency in the arrow svg fill (rgba(0,0,0,0.5))

.menu .menu__link.menu__link--sublist:after {
    background-image: url('data:image/svg+xml;utf8,<svg alt="Arrow" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>);
    background-size: 2rem 2rem;
    background-position: 50%;
    content: " ";
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
}

Possible solution

Instead of using an rgba value use an explicit rgb value (e.g. #8a8a8a or rgb(138, 138, 138))

Metadata

Metadata

Assignees

Labels

bugAn error in the Docusaurus core causing instability or issues with its execution

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions