vuetify 2.2.6

v2.2.6

on Node.js NPM

Notes from the Author

To help bring the framework styles better in line with what Material Design dictates, the default application background color for both light and dark variants has been fixed. In addition, multiple components were updated to properly match the dark theme specification.

Affected styles:

Light Theme

• application background color - #FAFAFA -> #FFFFFF

Dark Theme

• application background color - #303030 -> #121212
• v-app-bar - #212121 -> #272727
• v-bottom-navigation - #424242 -> #2E2E2E
• v-card - #424242 -> #2E2E2E
• v-navigation-drawer - #424242 -> #363636
• v-toolbar - #212121 -> #272727

You can revert to the previous values by setting up a SASS Variables variables.s(a|c)ss file with the following snippet:

// styles/variables.scss

$material-dark: (
  'app-bar': #212121,
  'bottom-navigation': #424242,
  'background': #303030,
  'cards': #424242,
  'navigation-drawer': #424242,
  'toolbar': #212121
);

$material-light: ('background': #FAFAFA);

There is also a new SASS variable that contains the color value for each elevation outlined on the Material Design Specification for dark variants.

$material-dark-elevation-colors: (
  '0': #000000,
  '1': #1E1E1E,
  '2': #222222,
  '3': #252525,
  '4': #272727,
  '6': #2C2C2C,
  '8': #2E2E2E,
  '12': #333333,
  '16': #363636,
  '24': #373737
);

If you have any additional questions, please reach out to me in the Release Migration channel of the community.

🔧 Bug Fixes

• theme: apply correct material theme for dark variants (24c95f4)
• theme: resolve more dark variant inconsistences (07a285f)