admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fusion_plating_shopfloor): finish-dialog text readable in dark mode (real fix)

Browse Source 
Root cause (verified against the live compiled bundle): Odoo's backend
CSS never DEFINES --bs-body-color / --bs-secondary-color / --bs-*-bg as
custom properties (0 definitions; they're only referenced). So every
color: var(--bs-body-color, #1d1d1f) — and the earlier --bs-secondary-color
swap — resolved to the dark hex fallback in BOTH light and dark mode.
That's why the prior swaps never worked. Backend dark mode here is runtime
[data-bs-theme=dark] + SCSS literals, not those vars.

Fix: the finish-block dialog text now INHERITS the modal's theme-correct
colour (same as the readable title + "Count the Parts" list items) — the
broken line was the only one setting an explicit var() colour. Tinted
banners use translucent rgba() instead of color-mix-with-undefined-var.
Verified in the served bundle: o_fp_finish_block_msg{font-weight:500;}
(no colour override).

CLAUDE.md dark-mode guidance corrected (it had wrongly recommended those
undefined vars).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-06-02 02:31:09 -04:00
parent 0499a1ad2e
commit 319de06ca6
2 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
fusion_plating/fusion_plating_shopfloor/static/src/scss/job_workspace.scss
View File

@@ -806,24 +806,24 @@ $_ws-text-hex: #1d1d1f;
gap: 1rem;
}
// NOTE: Odoo's backend CSS does NOT define --bs-body-color /
// --bs-secondary-color / --bs-*-bg as custom properties (verified: 0
// definitions in the compiled bundle — they're SCSS literals + two
// bundles + [data-bs-theme]). So var(--bs-body-color, #hex) ALWAYS
// resolves to the dark #hex fallback, in light AND dark mode. The fix
// for dialog text is to INHERIT the modal's theme-correct colour (the
// dialog title and the "Count the Parts" list items do exactly this and
// are readable in both modes). Tinted boxes use translucent rgba() so
// they work over whatever the live theme background is.
.o_fp_finish_block_step {
font-size: 1.1rem;
color: var(--bs-body-color);
// Amber wash over the live theme bg — pale in light mode, dark-amber
// in dark mode (the -bg-subtle/-text-emphasis BS vars aren't defined
// in Odoo's bootstrap, so color-mix is the dark-aware path).
background-color: color-mix(in srgb, #f59e0b 14%, var(--bs-body-bg));
background-color: rgba(245, 158, 11, 0.16);
padding: 0.7rem 1rem;
border-radius: 6px;
border-left: 4px solid #f59e0b;
}
.o_fp_finish_block_msg {
// Primary instruction line ("N required input(s)…") — use the FULL
// body text colour, not --bs-secondary-color. Secondary is muted/
// low-opacity and read as "still dark" on the dark dialog. body-color
// is high-contrast in both light and dark.
color: var(--bs-body-color, #1d1d1f);
font-weight: 500;
}
@@ -839,9 +839,9 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_finish_block_action_note {
color: var(--bs-secondary-color, #555);
// Inherit text colour; translucent neutral box works in both themes.
font-style: italic;
padding: 0.6rem 0.8rem;
background: var(--bs-tertiary-bg, #f3f4f6);
background: rgba(128, 128, 128, 0.12);
border-radius: 4px;
}