LoginSignup
1

More than 1 year has passed since last update.

Nuxt + Vuetifyで背景色をSASS変数の上書きで変更したいとき

Posted at

概要

今回は、いつも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はこちらです↓

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1