如何在不使用主题定制器中的颜色滑块的情况下更改《二十九》的原色？

时间：2019-05-20 作者：Marjan Venema

刚刚安装了新的2019主题。自定义程序提供“默认”和“自定义”颜色选项。选择“自定义”时，将显示一个滑块来拾取颜色，而不是普通的颜色选择器。

不幸的是，使用该滑块是非常随意的，而且定制程序无法提供输入精确颜色（色调）的方法。

我需要去哪里？我需要做什么才能为这个主题输入精确的颜色？

注意：我不是在寻找输入十六进制颜色值的方法。滑块似乎专注于色调（正如@leymannx answer所证实的），但这只是一种比滑块更精确的方法。

PS：我对数据库和代码不是新手，所以可以派我去那里。

2 个回复

最合适的回答,由SO网友:leymannx 整理而成

这确实是一个有趣的问题。考虑到以下问题（均已关闭，无法修复），我认为不建议使用颜色选择器替换此颜色滑块：

https://github.com/WordPress/twentynineteen/issues/613
https://core.trac.wordpress.org/ticket/45619HSL). 它做到了这一点，以实现最大的可访问性。让用户选择自己的十六进制值会导致在使用不同颜色细微差别的地方（例如悬停和选择状态或覆盖）无法进行颜色组合。
因此，实际上，您最好禁用子主题中的颜色滑块，并从子主题的样式表中完全自定义CSS：
```
function wpse_338301_customize_register( $wp_customize ) {
      $wp_customize->remove_section( \'colors\' );
}
add_action( \'customize_register\', \'wpse_338301_customizer\' );
```
或者——不建议这样做——如上图所示禁用子主题中的颜色滑块，通过将十六进制颜色转换为HSL来覆盖默认值，并通过为需要调整的所有不同值添加过滤器来调整所有不同的颜色细微差别。将问题的ID作为十六进制值#338301 例如，在HSL中hsl(97, 98%, 26%). 我使用了一个随机免费的在线十六进制到HSL颜色转换器。
首先设置色调值：
```
function wpse_338301_init() {
      set_theme_mod( \'primary_color\', \'custom\' );
      set_theme_mod( \'primary_color_hue\', 97 );
}
add_action( \'init\', \'wpse_338301_init\' );
```
接下来设置所有饱和度值：
```
function wpse_338301_saturation() {
      return 98;
}
add_filter( \'twentynineteen_custom_colors_saturation\', \'wpse_338301_saturation\' );
add_filter( \'twentynineteen_custom_colors_saturation_selection\', \'wpse_338301_saturation\' );
```
最后是所有亮度值：
```
function wpse_338301_lightness() {
      return 26;
}
add_filter( \'twentynineteen_custom_colors_lightness\', \'wpse_338301_lightness\' );
add_filter( \'twentynineteen_custom_colors_lightness_hover\', \'wpse_338301_lightness\' );
add_filter( \'twentynineteen_custom_colors_lightness_selection\', \'wpse_338301_lightness\' );
```
欲了解更多信息，请参阅《二十一世纪》inc/color-patterns.php.

SO网友:SuperAtic

另一个选项是用主题样式中的新规则覆盖默认CSS规则。css如下所示。这也允许为不同的元素使用不同的颜色（如果需要）。

/* ---------------- */
/*  3. 2020 Theme Primary colors
/* ---------------- */
.primary-menu a,
/*Arrows in Desktop*/
.primary-menu span.icon,
/*Categories in Single Posts*/
.entry-categories a,
/*The Menus*/
.expanded-menu a,
.mobile-menu a,
.footer-menu a,
/*Widgets*/
.widget-content a,
/*The Drop Cap*/
.has-drop-cap:not(:focus)::first-letter,
/*Latest Posts Block*/
.wp-block-latest-posts a,
/*Archives Block*/
.wp-block-archives a,
/*Categories Block*/
.wp-block-categories a,
/*Latest Comments Block*/
.wp-block-latest-comments a,
/*Calendar Block*/
.wp-block-calendar a,
/*File Block*/
.wp-block-file a,
/*Archive Page Title "Span"*/
.archive-title .color-accent,
/*Links in Single Posts; If we don\'t use P it will affect the buttons*/
.entry-content p a,
/*Pagination in Single Posts*/
.pagination-single a {
    color:#CD2653;
}

/*Social Menu*/
.social-menu a,
/*Groups with accent bg*/
:root .has-accent-background-color,
/*Button Block*/
.wp-block-button__link,
/*Reply Comments*/
.comment-reply-link,
/*Input buttons such us "Post Comment"*/
input#submit,
input.search-submit {
    background-color:#CD2653;
}

/*File Block Button*/
.wp-block-file__button {
    background-color:#CD2653!important;
}

/*Quotes*/
blockquote {
    border-color:#CD2653;
}

。。。并用首选颜色替换默认颜色#CD2653

小码农CODE

如何在不使用主题定制器中的颜色滑块的情况下更改《二十九》的原色？

相关推荐

WooThemes-供应商/预订-允许供应商管理资源