README

此模块提供了一个主题颜色选择器。它允许CMS用户调整网站不同区域的颜色，而无需开发人员干预。

安装

要安装此模块，您可以使用Composer

composer require silverstripe/theme-colorpicker

使用

启用

默认情况下，主题颜色选择器是禁用的，要启用它，您可以通过调整YAML配置来实现。例如，在app/_config/config.yml

SilverStripe\SiteConfig\SiteConfig:
  enable_theme_color_picker: true

调整/添加颜色

颜色选择器已由Watea和Bambusa主题支持，并且将直接工作。

主题颜色都是可配置的，因此您可以通过YAML配置来调整现有颜色或向主题颜色选择器添加新颜色。有关默认颜色列表，请参阅ColorpickerSiteConfigExtension.theme_colors。

SilverStripe\SiteConfig\SiteConfig:
  enable_theme_color_picker: true
  theme_colors:
    # Edit existing pink color
    pink:
      Color: '#C12099'
    # Add new brown color
    brown:
      Title: 'Brown'
      CSSClass: 'brown'
      Color: '#594116'

现在您可以将匹配的颜色添加到您的SCSS中。假设您的项目使用一个自定义主题，该主题导入Wātea的main.scss文件，创建一个$custom-theme-colors如下所示

// themes/customtheme/scss/main.scss

// Ensure this variable is set before importing watea scss
$custom-theme-colors: (
  'pink': #C12099, // Adjusting existing pink color
  'brown': #594116 // Adding new brown color
);

@import '../../../watea/src/scss/main';

有关在Wātea主题中使用可自定义主题颜色的更多信息，请参阅CWP开发者文档：使用Wātea主题。

在自己的主题中使用

首先，请确保您的模板中有一个HTML class，该class表示CSS的主题变体。以下是一个默认实现，您也会在Bambusa和Watea主题中找到。

<body class="$ClassName
        <% if $SiteConfig.HeaderBackground %>theme-header-{$SiteConfig.HeaderBackground}<% end_if %>
        <% if $SiteConfig.NavigationBarBackground %>theme-nav-{$SiteConfig.NavigationBarBackground}<% end_if %>
        <% if $SiteConfig.CarouselBackground %>theme-carousel-{$SiteConfig.CarouselBackground}<% end_if %>
        <% if $SiteConfig.FooterBackground %>theme-footer-{$SiteConfig.FooterBackground}<% end_if %>
        <% if $SiteConfig.AccentColor %>theme-accent-{$SiteConfig.AccentColor}<% end_if %>
        <% if $SiteConfig.TextLinkColor %>theme-link-{$SiteConfig.TextLinkColor}<% end_if %>
        <% if $SiteConfig.BannerBlockBackground %>theme-banner-block-{$SiteConfig.BannerBlockBackground}<% end_if %>">

现在，您可以在CSS中手动生成颜色变体（类名后缀），或者您可以在Bambusa或Watea主题的src/scss文件夹中搜索如何使用SCSS中的@mixin来自动实现。

版本管理

此库遵循Semver。根据Semver，您将能够升级到此库的任何次要或补丁版本，而无需对公共API进行任何破坏性更改。Semver还要求我们明确定义此库的公共API。

所有具有public可见性的方法都是公共API的一部分。所有其他方法都不是公共API的一部分。尽可能，我们将在次要/补丁版本中尝试保持protected方法的向后兼容性，但如果您正在重写方法，请在升级之前测试您的工作。

silverstripe / theme-colorpicker

维护者

详细信息

README

安装

使用

启用

调整/添加颜色

在自己的主题中使用

版本管理