Open simionato-mobisec opened 2 months ago
Haven't confirmed yet, but I think this line is the culprit:
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/theme.ts#L418
function genCssVariables (theme: InternalThemeDefinition) {
// ...
for (const [key, value] of Object.entries(theme.colors)) {
const rgb = parseColor(value)
variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`) // this line is not using the alpha value
if (!key.startsWith('on-')) {
variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`)
}
}
// ...
}
From doing a little bit of testing, parseColor()
calls HexToRGB()
which appears to be correctly converting to rgba but the value rgb.a
is not being used in the string.
Should L418 be updated to this?
variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b},${rgb.a}`)
Haven't confirmed yet, but I think this line is the culprit:
I am glad you opened this request as I too was about to ask the same thing (as I am fond of using transparency in my templates).
I thin what you have suggested is correct in the first instance but there are many places where the alpha component of colors declared in the theme (even after the method you found) are being ignored. For example the CSS styles being generated, prefixed with --v-theme-...
such as --v-theme-primary
in the method you mentioned, are passed directly into CSS attributes like in the following example:
background-color: rgb(var(--v-theme-primary));
Due to the declaration of the color being rgb(
and not rgba(
the alpha component will be stripped from the color declared in the theme even if we made the changes you suggested.
Based on this it appears that the overall update would require updates in at least 500 places throughout the project based on a global search for the syntax rgb(var(--v-theme
. These would need to be updated to rgba(var(--v-theme
.
I'd be happy to open a pull request to try this out if no-one has any objections...
Environment
Vuetify Version: 3.6.8 Vue Version: 3.4.27 Browsers: Firefox 126.0 OS: Ubuntu undefined
Steps to reproduce
Expected Behavior
The focused text field should have a transparent red color.
Actual Behavior
The focused text field has a red color, transparency is ignored.
Reproduction Link
https://play.vuetifyjs.com/#...