概要

今回は、いつもVuetifyばかり使ってデザインをさぼっていると、
デフォルトテーマカラーに飽きてしまって、イメチェンしたい！と思ったら意外と時間がかかってしまったので、誰かの為に書いておこうと思います！

Before

変更後はこちらです

リポジトリ

バージョン

	Version
Mac OS	Catalina 10.15.7
Node	15.4.0
npm	7.10.0
Nuxt	2.15.4
Vuetify	2.4.9

まずはVuetifyの設定

今回はダークテーマですが、もちろんライトテーマでも可能なので、環境に合わせてみてください
眩しいのでいつもダークテーマにしてしまいます。

nuxt.config.js

export default {
  vuetify: {
    customVariables: ['~/assets/variables.scss'], // なければ追加、このファイルでSASS変数を上書きしていきます
    treeShake: true, // これを追加

    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },
}

treeShake: trueが無いと開発環境では変数が上書きできないみたいです。
詳しくはリンクを参照してみてください。

SASS変数の上書き

Vuetifyの設定が完了したら、下のダークテーマのデフォルト値を確認しながら、いい感じに色を決めていくと反映されるはずです！
僕の場合は、6個ぐらいの変更で基本的なイメチェンはできました。あとはお好みで。

~/assets/variables.scss

$material-dark: (
  'background': #12151d,
  'app-bar': #13151a,
  'toolbar': #152535,
  'navigation-drawer': #141720,
  'cards': #152535,
  'bg-color': #2c3e4f,
);

※ npx cerate-nuxt-appでVuetifyを選択していた場合は~/assets/variables.scssがあるはずです。なければ作成すれば大丈夫なはずです！

ダークテーマのデフォルト値

もちろんlightモード用の変数や、各コンポーネント用の変数もあるので、公式で変数一覧を確認してみてください。
大体コンポーネントの名前になってるので、分かりやすいと思います。

$material-dark

map-deep-merge(
  (
    'status-bar': (
      'regular': map-get($shades, 'black'),
      'lights-out': rgba(map-get($shades, 'black'), 0.2)
    ),
    'app-bar': map-get($material-dark-elevation-colors, '4'),
    'background': #121212,
    'bottom-navigation': map-get($material-dark-elevation-colors, '8'),
    'surface': #121212,
    'calendar': (
      'background-color': #303030,
      'outside-background-color': #202020,
      'weeknumber-background-color': #202020,
      'line-color': map-get($grey, 'base'),
      'interval-color': map-get($grey, 'lighten-3'),
      'interval-line-color': map-get($grey, 'darken-2'),
      'text-color': map-get($shades, 'white'),
      'past-color': rgba(map-get($shades, 'white'), .50)
      ),
    'cards': map-get($material-dark-elevation-colors, '1'),
    'chips': #555,
    'dividers': rgba(map-get($shades, 'white'), 0.12),
    'text': (
      'theme': map-get($shades, 'white'),
      'primary': map-get($shades, 'white'),
      'secondary': rgba(map-get($shades, 'white'), 0.7),
      'disabled': rgba(map-get($shades, 'white'), 0.5),
      'link': map-get($blue, 'accent-1'),
      'link-hover': map-get($grey, 'lighten-3')
    ),
    'icons': (
      'active': map-get($shades, 'white'),
      'inactive': rgba(map-get($shades, 'white'), 0.5)
    ),
    'inputs': (
      'box': map-get($shades, 'white'),
      'solo-inverted': rgba(map-get($shades, 'white'), 0.16),
      'solo-inverted-focused': map-get($shades, 'white'),
      'solo-inverted-focused-label': rgba(map-get($shades, 'black'), .6),
      'solo-inverted-focused-placeholder': rgba(map-get($shades, 'black'), 0.38),
      'solo-inverted-focused-text': rgba(map-get($shades, 'black'), 0.87)
    ),
    'buttons': (
      'disabled': rgba(map-get($shades, 'white'), 0.3),
      'focused': rgba(map-get($shades, 'white'), 0.12),
      'focused-alt': rgba(map-get($shades, 'white'), 0.1),
      'pressed': rgba(#ccc, 0.25)
    ),
    'expansion-panels': (
      'focus': #494949
    ),
    'navigation-drawer': map-get($material-dark-elevation-colors, '16'),
    'selection-controls': (
      'disabled': rgba(map-get($shades, 'white'), 0.3),
      'thumb': (
        'inactive': map-get($grey, 'lighten-1'),
        'disabled': map-get($grey, 'darken-3')
      ),
      'track': (
        'inactive': rgba(map-get($shades, 'white'), 0.3),
        'disabled': rgba(map-get($shades, 'white'), 0.1)
      )
    ),
    'slider': (
      'active': rgba(map-get($shades, 'white'), 0.3),
      'inactive': rgba(map-get($shades, 'white'), 0.2),
      'disabled': rgba(map-get($shades, 'white'), 0.2),
      'discrete': map-get($shades, 'white')
    ),
    'skeleton': linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)),
    'states': (
      'hover': 0.08,
      'focus': 0.24,
      'selected': 0.16,
      'activated': 0.24,
      'pressed': 0.32,
      'dragged': 0.16
    ),
    'tabs': rgba(map-get($shades, 'white'), 0.6),
    'toggle-buttons': (
      'color': map-get($shades, 'white')
    ),
    'text-fields': (
      'filled': rgba(map-get($shades, 'white'), 0.08),
      'filled-hover': rgba(map-get($shades, 'white'), 0.16),
      'outlined': rgba(map-get($shades, 'white'), 0.24),
      'outlined-disabled': rgba(map-get($shades, 'white'), 0.16),
      'outlined-hover': map-get($shades, 'white')
    ),
    'input-bottom-line': rgba(map-get($shades, 'white'), 0.7),
    'stepper': (
      'active': rgba(map-get($shades, 'white'), 1),
      'completed': rgba(map-get($shades, 'white'), 0.87),
      'hover': rgba(map-get($shades, 'white'), 0.75)
    ),
    'table': (
      'active': #505050,
      'hover': map-get($grey, 'darken-2'),
      'group': map-get($grey, 'darken-2')
    ),
    'toolbar': map-get($material-dark-elevation-colors, '4'),
    'picker': (
      'body': map-get($grey, 'darken-3'),
      'clock': map-get($grey, 'darken-2'),
      'indeterminateTime': map-get($grey, 'darken-1'),
      'title': map-get($grey, 'darken-2')
    ),
    'color-picker': (
      'checkerboard': rgba(map-get($shades, 'white'), 0.12)
    ),
    'bg-color': #303030,
    'fg-color': map-get($shades, 'white'),
    'text-color': map-get($shades, 'white'),
    'primary-text-percent': 1,
    'secondary-text-percent': 0.7,
    'disabledORhints-text-percent': 0.5,
    'divider-percent': 0.12,
    'active-icon-percent': 1,
    'inactive-icon-percent': 0.5
  ),
  $material-dark
);

自己紹介

日々Webアプリを開発している25歳です。
今後も気になったことや、技術情報などを書いていこうと思っております！
ブログは初めて書くので、お手柔らかにお願いします笑

Nuxtjs + graphQL(GitHubAPIv4)を活用した半自動ポートフォリオを開発しました！
このポートフォリオを見ていただくと今まで開発したものを全て見ることができます！

GitHubはこちらです↓