nuxt.js 全局 js_使用nuxt js在vuetify js中进行高级颜色管理

nuxt.js 全局 js

Vuetify.js is a Material Design component framework that can be easily customized. It allows you to change the colors of all it’s components using a theme. Apart from changing the basic colors, it’s also possible to define new colors, customize each individual color’s lighter / darker variants and change the theme dynamically at runtime.

Vuetify.js是可以轻松自定义的Material Design组件框架。 它允许您使用主题更改其所有组件的颜色。 除了更改基本颜色之外，还可以定义新颜色，自定义每种颜色的较浅/较深变体并在运行时动态更改主题。

In this example we will be using Nuxt.js — a meta-framework for Vue.js. However, very similar techniques can be applied to vanilla Vuetify.js.

在这个例子中，我们将使用Nuxt.js -超常框架Vue.js 。 但是，可以将非常相似的技术应用于原始Vuetify.js。

TL;DR — go straight to the final code:

TL; DR —直接转到最终代码：

演示地址

You probably already know that it’s possible to chose between a light and dark theme and set the basic colors in the nuxt.config.js file vuetify section (see documentation):

您可能已经知道，可以在浅色和深色主题之间进行选择并在nuxt.config.js文件的vuetify部分中设置基本颜色(请参阅文档 )：

vuetify: {
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#4caf50',
        secondary: '#ff8c00',
        accent: '#9c27b0'
      }
    }
  }
},

However, did you know that you can also define your own custom colors:

但是，您是否知道还可以定义自己的自定义颜色：

vuetify: {
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#4caf50',
        secondary: '#ff8c00',
        tertiary: '#4682bf',
        accent: '#9c27b0'
      }
    }
  }
},

You can use these colors the same way as a default color — you can can apply them to the background or to the text and lighten / darken variants work as expected:

您可以使用与默认颜色相同的方式使用这些颜色-您可以将它们应用到背景或文本上，使变体变亮/变暗按预期工作：

<span class="tertiary--text">
  Color
</span>
...
<v-sheet color="tertiary lighten-3 pa-4 ma-3">
  Tertiary Light
</v-sheet>
<v-sheet color="tertiary pa-4 ma-3">
  Tertiary
</v-sheet>
<v-sheet color="tertiary darken-3 pa-4 ma-3">
  Tertiary Dark
</v-sheet>

Interestingly, it’s even possible to define individual light and dark variants for each color instead of relying on automatically generated ones:

有趣的是，甚至有可能为每种颜色定义单独的明暗变化，而不必依靠自动生成的颜色：

vuetify: {
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: '#4caf50',
          secondary: {
            base: '#ff8c00',
            lighten3: '#ffb700',
            darken3: '#ff6200'
          },
          tertiary: {
            base: '#4682bf',
            lighten3: '#4696bf',
            darken3: '#466ebf'
          },
          accent: '#9c27b0'
        }
      }
    }
  },

I was happy to discover this when developing an application based on detailed Zeplin mock-ups, containing a very specific color palette prepared by a UX/UI designer.

在基于详细的Zeplin模型开发应用程序时，我很高兴发现这一点，其中包含由UX / UI设计人员准备的非常特定的调色板。

Bonus — you can also change the theme and its colors dynamically at runtime via $vuetify instance conveniently injected into each Vue component:

奖励-您还可以在运行时通过方便地注入每个Vue组件的$vuetify实例动态更改主题及其颜色：

this.$vuetify.theme.isDark 
this.$vuetify.theme.themes.dark.primary = '#

You can find an example code for this article in this repository:

您可以在此存储库中找到本文的示例代码：

About us: Untitled Factory Studio is a boutique web agency based in Montmartre, Paris, France. Give us a shout to chat about your next webapp, PWA or website.

关于我们： Untitled Factory Studio 是一家精品网络代理商，总部位于法国巴黎蒙马特。 给我们留言，聊聊您的下一个Web应用程序，PWA或网站。

Edit: See also my related article about changing the background color.

编辑：另请参阅 有关更改背景颜色的相关文章 。

翻译自: https://medium.com/untitled-factory/advanced-color-management-in-vuetify-js-with-nuxt-js-6e20d26e37c6

nuxt.js 全局 js