📜 Description
The Problem:
Currently, when the application is toggled to dark mode, there is a visual disconnect between the main background and the elevated containers (such as the Tracker input section, the "No Data Found" box, and the Contributor cards).
The main body background uses a cool, blue-tinted dark shade, while the cards and containers use a flat, desaturated dark gray/black. This breaks color harmony, making the boxes look artificially pasted onto the background rather than naturally elevated above it.
The Proposed Solution:
I propose updating the background-color of these elevated containers in the dark mode theme.
Instead of using a mismatched pure black/gray, we should use a slightly lighter shade of the main background's base color .
Alternatively, we can apply a semi-transparent white overlay to the base background color for these cards to create a natural elevation effect.
I will also ensure the borders subtly match this new elevation to keep the edges crisp.
I would love to be assigned to this issue and can submit a PR with the CSS adjustments shortly!
What browsers are you seeing the problem on?
Chrome
📃 Relevant Screenshots (Links)
No response
📜 Description
The Problem:
Currently, when the application is toggled to dark mode, there is a visual disconnect between the main background and the elevated containers (such as the Tracker input section, the "No Data Found" box, and the Contributor cards).
The main body background uses a cool, blue-tinted dark shade, while the cards and containers use a flat, desaturated dark gray/black. This breaks color harmony, making the boxes look artificially pasted onto the background rather than naturally elevated above it.
The Proposed Solution:
I propose updating the background-color of these elevated containers in the dark mode theme.
Instead of using a mismatched pure black/gray, we should use a slightly lighter shade of the main background's base color .
Alternatively, we can apply a semi-transparent white overlay to the base background color for these cards to create a natural elevation effect.
I will also ensure the borders subtly match this new elevation to keep the edges crisp.
I would love to be assigned to this issue and can submit a PR with the CSS adjustments shortly!
What browsers are you seeing the problem on?
Chrome
📃 Relevant Screenshots (Links)
No response