Metrics not displaying properly

I found the problem.

The CSS for the Gauge is looking at the browser's `prefers-color-scheme` which comes from the computer setting. On my Mac, I have Dark mode set as preference. But the Drupal Olivero theme is a Light theme. So the gauge text is being shown white-on-white.

Not sure what the correct resolution of this would be. The gauges need to use the colors provided by the Drupal theme and not from the desktop or browser color theme.

hi, here is the patch for this situation. Let me know how it goes :)

@ashish.verma85 before I try it please explain your approach to the problem so that I can test it with the right expectations. From looking at your patch it is not immediately clear to me.

@jurriaanroelofs - So the issue was, on jin theme and on dark mode, the results wasnt visible, i was able to reproduce the issue and was able to fix it, now it should work fine on jin theme and/or on dark mode,

@ashish.verma85 I see you modified 2 blocks of CSS:

1. A block specifically targeting dark-mode-preference browser setting, what is now the purpose of this CSS? Previously this CSS was causing problems in themes not supporting dark mode. Did you modify it so that it either
A: Makes the UI component dark but ensuring visibility in themes that are light
B: Disable CSS designed to make the component work on a dark background (in that case why keep this block at all)

2. A block specifically targeting GIN dark mode. The issue did not indicate any bug with Gin theme, did you modify this CSS because you found a bug in Gin theme as well, if so please provide screenshots and steps to reproduce this bug.

@jurriaanroelofs - here is another patch, which doesnt have gin theme changes.
This patch covers
1. Modified the css for dark-mode-preference, i have modified prefers-color-scheme: dark, earlier it was set to #fff thats why @mpotter wasnt seeing the lines and matrix, now it works fine and shows up
2. i have skipped gin code - so all good here.

let me know if that sounds good to you, or you want further modifications, we might have to jump on a call if your expectations are different, because this thread at least says about dark mode of browser/laptop and that fix solves it.

@ashish.verma85 if we are not using the @dark-mode-preference block to support dark mode through the browser preference, might it be better to just delete the code block? Otherwise it might confuse developers who think the component is going to adapt based on dark mode user preference. Let me know your thought.

@jurriaanroelofs - thats even better solution just to get rid of @dark-mode-preference code from the css file, that solves the purpose.