Wie ändere ich weltweit die Hintergrundfarbe aller Vuetify3 -Eingangsfelder mit benutzerdefinierten Themen? ⇐ CSS

[Guest]

In VuETify3 versuche ich, den Hintergrund aller Felder zu ändern (Text, textarea, auswählen ...). Ich habe so benutzerdefinierte Themen wie folgt: < /p>
...
const darkTheme: ThemeDefinition = {
dark: true,
colors: {
background: '#111827',
surface: '#1F2937',
primary: '#2563EB',
secondary: '#8B5CF6',
...
},
};

const lightTheme = {
dark: false,
colors: {
...
},
};

export default createVuetify({
theme: {
defaultTheme: 'darkTheme',
themes: {
darkTheme,
lightTheme,
},
variations: {
colors: ['background', 'surface'],
lighten: 5,
darken: 4,
},
},
});
< /code>
Ich habe versucht, meinen Themen einen Variablenabschnitt hinzuzufügen, aber keine der Variablen, die ich ausprobiert habe, hat funktioniert: < /p>
const darkTheme: ThemeDefinition = {
...
variables: {
// none of the following worked...
'--v-field-background-color': '#ff0000'
'--v-input-control-background-color': ...
'--v-input-control-background-color': ...
'input-background': ...
'input-solo-background': ...
'input-filled-background': ...
'input-outlined-background': ...
}
};
< /code>
Ist es die gute Richtung? Ist der Abschnitt der Variablen der gute Weg, dies zu tun? (Ich kann es in der Vuetify -Dokumentation nicht finden)
Ich habe mich gefragt, ob die Tatsache, dass ich Farbvariationen hinzugefügt habe, der Grund sein könnte, warum dies nicht funktioniert ...