メモ的に。

VuerifyのSASSでちょっと変更したい場合。

例えば、disabledの時の文字色が薄すぎて何書いてあるか分からないみたいな場合に、どうにか濃くしたい。

StackoverFlowとかだと例えば

https://stackoverflow.com/questions/49450065/how-to-change-override-the-default-color-for-disabled-fields-in-vuetify-js

こういう解決方法もあるんだけど、小手先じゃなくて、ちゃんとCSS側の定義として対応をしたい。

そういう時はSASS変数とか、

https://vuetifyjs.com/ja/features/sass-variables/

グローバル設定とか、

https://vuetifyjs.com/ja/features/global-configuration/

でやるのが良く出てくるんだけど、前述のDisableを濃くしたいとかの場合、本体のSass変数を一律でいじりたかったりする。

この場合は、本体のSASS変数はThemeの中で定義されてるので、そっちを変更する。

customeThemeでやってる事になると思うので、plugin内のvutify.tsなんかで、下記の感じで変数の上書き指定をやる。

const customTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: colors.blue.base,
  },
  variables: {
    "disabled-opacity": 1.0, // この辺の感じ。
  },
};

disabledの文字あたりを濃くしたい場合は"disabled-opacity"を変更。

どんな変数があるかは下記参照

https://vuetifyjs.com/en/features/theme/#javascript