vulncheck/vulncheck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): dark-theme remaps for opacity/arbitrary-value classes

Browse Source 
Tester (dark theme): dashboard widget headers ('Recent Critical CVEs' …)
and the sticky vulnerabilities list header stayed light-gray under light
text. Cause: opacity and arbitrary-value utilities are their OWN class
names — bg-gray-50/50, bg-[#F3F4F6]/95, bg-white/50 — which the plain
.bg-gray-50/.bg-white remaps never touch.

Add escaped-selector remaps for those, kill the pastel indigo gradient on
the AI widgets (background-image none + dark surface) with matching
indigo text/border/badge tints, bg-base-200, and the group-hover blue
tint on the sticky actions column. Dark-theme autofill now carries
!important + caret-color so it actually beats the light-scheme autofill
rule (which is !important). Verified via computed styles in the browser:
all previously-light classes resolve to dark surfaces in mid/dark.
This commit is contained in:
vulncheck
2026-07-24 12:02:33 +02:00
parent 7941d0403f
commit f7f627ee5c
1 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/globals.css
+32 -2
View File
@@ -165,8 +165,10 @@ html[data-theme="mid"] textarea, html[data-theme="dark"] textarea {
html[data-theme="mid"] input::placeholder, html[data-theme="dark"] input::placeholder,
html[data-theme="mid"] textarea::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--tv-text-muted); }
html[data-theme="mid"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--tv-surface-2) inset;
-webkit-text-fill-color: var(--tv-text);
/* !important needed: the light-scheme autofill rule above uses it too */
-webkit-box-shadow: 0 0 0 1000px var(--tv-surface-2) inset !important;
-webkit-text-fill-color: var(--tv-text) !important;
caret-color: var(--tv-text);
}
/* ---- tinted badges: pastel fills → translucent dark tints ---- */
@@ -216,3 +218,31 @@ html[data-theme="mid"] .scroll-visible-x::-webkit-scrollbar-thumb, html[data-the
background: var(--tv-border);
border-color: var(--tv-surface-2);
}
/* ---- opacity / arbitrary-value variants (own class names, missed by the
* plain remaps above — tester: widget headers + sticky list header stayed
* light-gray under light text) ---- */
html[data-theme="mid"] .bg-gray-50\/50, html[data-theme="dark"] .bg-gray-50\/50 { background-color: var(--tv-surface-2); }
html[data-theme="mid"] .bg-white\/50, html[data-theme="dark"] .bg-white\/50 { background-color: var(--tv-surface-3); }
/* vulnerabilities list: sticky header band uses an arbitrary value of the
* light page background (#F3F4F6 at 95%) */
html[data-theme="mid"] .bg-\[\#F3F4F6\]\/95, html[data-theme="dark"] .bg-\[\#F3F4F6\]\/95 { background-color: var(--tv-bg); }
html[data-theme="mid"] .group:hover .group-hover\:bg-blue-50\/30, html[data-theme="dark"] .group:hover .group-hover\:bg-blue-50\/30 { background-color: var(--tv-surface-3); }
/* ---- indigo family (AI widgets: pastel gradient + indigo text) ---- */
html[data-theme="mid"] .bg-gradient-to-br, html[data-theme="dark"] .bg-gradient-to-br {
background-image: none;
background-color: var(--tv-surface);
}
html[data-theme="mid"] .bg-indigo-50, html[data-theme="dark"] .bg-indigo-50,
html[data-theme="mid"] .hover\:bg-indigo-50:hover, html[data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.14); }
html[data-theme="mid"] .bg-indigo-100, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,.22); }
html[data-theme="mid"] .text-indigo-700, html[data-theme="dark"] .text-indigo-700,
html[data-theme="mid"] .text-indigo-800, html[data-theme="dark"] .text-indigo-800,
html[data-theme="mid"] .text-indigo-900, html[data-theme="dark"] .text-indigo-900 { color: #a5b4fc; }
html[data-theme="mid"] .hover\:text-indigo-800:hover, html[data-theme="dark"] .hover\:text-indigo-800:hover { color: #c7d2fe; }
html[data-theme="mid"] .border-indigo-100, html[data-theme="dark"] .border-indigo-100,
html[data-theme="mid"] .border-indigo-200, html[data-theme="dark"] .border-indigo-200 { border-color: rgba(99,102,241,.35); }
/* daisyui base-200 (used by a few shells) */
html[data-theme="mid"] .bg-base-200, html[data-theme="dark"] .bg-base-200 { background-color: var(--tv-surface-2); }