README

• 简介
• 要求
• 安装
• 配置
• 维护者

简介

颜色方案 UI 模块通过相关的 CSS 选择器相关颜色选择器扩展了 Drupal 的功能，用于更改您网站的色彩方案。因此，您可以定义一些基础色彩区域（例如，网站背景色、页脚背景色、内容字体颜色等），并让特定用户角色轻松定义它们。您将获得一个 颜色选择器，因此非开发者用户可以更改您网站的颜色。颜色将被编译成位于您网站文件文件夹中的 SCSS（用于定义颜色变量）和 CSS 文件。

将 color_schema_ui.scss 文件放入您的活动主题中，以进行初始颜色设置。如果没有，模块中有一个默认的 SCSS 文件。

要求

此模块不依赖于 Drupal 核心以外的任何 Drupal 模块。此模块基于的库

• scssphp：用 PHP 编写的 SCSS 编译器
• vanilla-picker：一个简单、易于使用的纯 JavaScript（无依赖项）颜色选择器，具有透明度选择。
• invert-color：生成给定颜色的反向版本。（<1KB）

在 color_schema_ui/js/package.json 中查看所有 JavaScript 库依赖项。所有 PHP 库依赖项都包含在 color_schema_ui/composer.json 中。

安装

• 按照您通常安装贡献的 Drupal 模块的方式安装颜色方案 UI 模块。有关更多信息，请访问 https://www.drupal.org/node/1897420。

如果您已对 JavaScript 代码进行了任何更改，您必须重新编译 JavaScript 代码。

1. 切换到文件夹 cd color_schema/js
2. 确保已安装 NPM 和 NVM
3. 运行 nvm use
4. 运行 npm install
5. 运行 npm run build（编译生产环境的资源）

要运行 dev 模式，可以运行

npm run build-dev

这将启动 webpack 并带有源映射编译资源。

升级

假设您正在运行启用的 color_schema_ui 模块。

• 更新 color_schema_ui 模块和您的主题代码
• 运行 drush 命令 drush color_schema_ui:migrate，这将
  • 查找您之前 docroot/sites/default/files/color_schema_ui.scss 的 docroot
  • 从此文件中提取颜色变量
  • 查找 nrw_base_theme/source/sass/color_schema_ui.scss 中的模板
  • 使用提取的颜色和新模板重新构建 docroot/sites/default/files/color_schema_ui.(s)css

导出颜色

要导出颜色，请使用 drush color_schema_ui:exportColors。

这将从 docroot/sites/default/files/color_schema_ui.scss 读取颜色并在控制台中显示它们。例如

$ drush color_schema_ui:exportColors
(
    [site-background-color] => rgba(109,215,50,1)
    [peripheral-color-primary] => #233755
    [font-contrast-color-primary] => rgb(234,239,246)
    [peripheral-color-secondary] => #3C506E
    [font-contrast-color-secondary] => rgba(193,21,229,1)
    [header-background-color] => rgb(234, 239, 246)
    [content-background-color] => rgba(139,246,207,1)
    [paragraphs-header-background-color] => rgba(91,130,184,1)
    [font-content-color] => #233755
    [font-header-color] => rgba(220,221,192,1)
    [font-footer-color] => rgba(28,176,91,1)
)

如果出现错误，您可以重新启用模块并使用这些颜色值在 UI 中恢复您的颜色方案。

配置

1. Navigate to Administration > Extend and enable the module.
2. Navigate to Administration > Configuration > System > Color Schema UI to edit the possible colors. After the
   colors are configured, mind the SCSS definitions to propagate color picker settings to the theme.
3. Visit any node and pick your color by the local task tab menu item. Color Schema UI is visible on nodes only.

如果您想使用更明亮的辅助/次要颜色，您可以在配置页面（admin/color-schema-ui/settings）中添加以下内容以启用非白色对比颜色

font_contrast_color_primary: 'Primary contrast'
peripheral_color_secondary: Peripheral color secondary

已知问题

# Does not work with some release of quickedit < 8.7.10
drush pm-uninstall quickedit -y
drush en -y color_schema_ui

维护者

• Peter Majmesku - https://www.drupal.org/u/peter-majmesku

支持组织

• publicplan GmbH - https://www.drupal.org/publicplan-gmbh