Make outline/border color of input fields configurable with a SCSS variable

[ivanjaros]

The default outline is grey and I want to change it but I see no suitable variable for it in the list https://quasar.dev/style/sass-scss-variables

[yusufkandemir]

It's hardcoded

quasar/ui/src/components/field/QField.sass

Lines 262 to 269 in 29a3421

	&--outlined
	.q-field__control
	border-radius: $generic-border-radius
	padding: 0 12px
	&:before
	border: 1px solid rgba(0,0,0,.24)

So, you will have to use CSS to override it. Example:

.my-input.q-field--outlined .q-field__control:before {
  border-color: var(--q-accent); /* use the accent color instead of that grey */
}
/* q-input class="my-input" outlined */

This was for the outlined design. You can adjust it to other designs as needed.

I am changing this to a feature request so that it can be configured through a variable in the future.