Improve context menu theming for light and dark mode

[theEquinoxDev]

This PR updates the context menu styling to better align with the existing theme variables.

Context

While reviewing tooltips and context menus as part of the recent dark mode work, I noticed that the right-click context menu was still using hard-coded colors and that disabled items had low contrast. This behavior exists in both light and dark mode, but is more noticeable in dark mode.

What changed

• Context menu background and border now use existing theme variables (--bg-primary, --border-color)
• Disabled context menu items use the existing --text-secondary variable to preserve the disabled appearance
• Hover and interaction behavior remains unchanged

Screenshots

Light mode
(Earlier PR)

(Latest PR)

Dark mode
(Earlier PR)

(Latest PR)

Could you please let me know if this level of contrast matches what you had in mind, or if you'd prefer it to be adjusted further?
Happy to iterate based on feedback.

here's the screenshot of the contrast ratio -

[valscion]

@theEquinoxDev thanks! The disabled option isn't really different enough from the available one, at least in the screenshot you gave. Can you check that?

[theEquinoxDev]

Thanks for the feedback!
I agree, the disabled state might not be distinct enough from the enabled one. I'll tweak it further and and make it more clearly differentiated and update the PR with new screenshots.

[theEquinoxDev]

I updated the disabled styling to make it more visually distinct and replaced the screenshots with the latest version. Could you please take another look?

[valscion]

Ah sorry, were the menu buttons always disabled? I thought that some parts of the menu would be clickable while others weren't but was it so that all these menu buttons in your screenshots have always been disabled?

You could use some a11y contrast tool, maybe Silktide https://silktide.com/toolbar/ or the browser native color contrast tools to verify if they have at least 4.5:1 color contrast to be readable enough.

[theEquinoxDev]

Thanks for checking! from what i noticed, these buttons were always disabled. I tried clicking them, but it was disabled from the start.
I'll also run the colors through a contrast checker as suggested and report back if any adjustments seems necessary.

[valscion]

Huh... I wonder how this feature used to work. Maybe it was tied to the checkboxes in the side navigation somehow? 😅

[theEquinoxDev]

I haven't touched the enable/disable logic at all, only the styling.
From my testing, the options shown in the screenshots are disabled based on the current selection state, and I wasn't able to find a scenario where those particular items become enabled.
It's possible they were intended to be tied more closely to sidebar selection or checkboxes earlier on, but I didn’t dig into historical behavior beyond what;s currently observable.
Though, if you could guide me, I can take a look upon this. let me know what exactly do i need to check.

[theEquinoxDev]

I checked the contrast using the browser contrast tools and it says - the disabled menu items have a contrast ratio of 6.37:1,

From an accessibility standpoint this should be readable enough but if you'd still prefer the disabled state to be visually more emphasized beyond that, I'm happy to adjust the styling further. I've also attached the screenshot of the contrast ratio. you can have a look at that.