npm 包 garygary 使用教程

#npm 包 garygary 使用教程

简介

garygary 是一个能够帮助前端开发者快速生成网站主题颜色的 npm 包。该 npm 包提供了一个非常方便的自动化工具，它能够生成优美且协调统一的颜色组合。

安装

首先，使用 npm 安装 garygary：

npm i garygary --save-dev

使用

在项目中引入 garygary：

const garygary = require('garygary')

现在，我们可以使用 garygary 函数来生成主题颜色：

const theme = garygary('#ffffff')

这里，garygary 函数返回一个对象，它包含了一系列的颜色值：

{
  primary: '#8c32ae',
  secondary: '#ae328d',
  tertiary: '#8dae32'
}

我们可以使用这些颜色值来设置我们网站的主题颜色。

深入了解 garygary

函数的参数

garygary 函数可以接受两个参数：

garygary(bgColor, options)

其中：

• bgColor：表示背景颜色，可以是字符串或颜色对象。
• options：可选参数。

可选参数

garygary 还提供了一些可选的参数，它们可以帮助我们在生成主题颜色时更加灵活：

{
  tintRatio: 0.5,     // 淡化的比例，默认为 0.5
  shadeRatio: 0.2,    // 加深的比例，默认为 0.2
  saturation: 0.5,    // 饱和度，默认为 0.5
  lightness: 0.5,     // 亮度，默认为 0.5
  shadowOpacity: 0.2, // 阴影透明度，默认为 0.2
  shadowBlur: 15      // 阴影模糊程度，默认为 15
}

实例

const theme = garygary('#ffffff', {
  tintRatio: 0.6,
  shadeRatio: 0.3,
  saturation: 0.3,
  lightness: 0.7,
  shadowOpacity: 0.1,
  shadowBlur: 10
});

总结

garygary 是一个非常优秀的 npm 包，它能够帮助我们快速生成网站主题颜色，让我们在主题颜色的选择上更加协调统一。在开发过程中，我们只需要简单地调用 garygary 函数就能够生成各种协调统一的颜色组合。如果您还没有使用 garygary，建议您在今后的项目中尝试使用它。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055be381e8991b448d98bd