custom color config for WordPress

color-config.json

{
    "brand": "#D71F21",
    "primary": "#152F52",
    "secondary": "#C5A259",
    "body": "#000",
    "link": "#1372CA",
    "border": "#D5D5D5",
    "off": "#DBD4C6",
    "background": "#F2F2F2",
    "base": "#fff"
}

color-picker.js

const fs = require('fs');
const ejs = require('ejs');

//テンプレ作成
let template = "$theme-colors: (<%- editor_colors -%>);";

//color_config.jsonを読み込み
const colors_json = JSON.parse(fs.readFileSync('./color-config.json', 'utf8'));
const colors_obj = Object.keys(colors_json);//objectに変換
let editor_colors_txt = "";

colors_obj.forEach((key) => {
    const color =  key + ' : ' + colors_json[key] + ',';
    console.log(color);
    editor_colors_txt += color;
});

let scss = ejs.render(template,{editor_colors: editor_colors_txt});
fs.writeFileSync('./src/scss/_color_config.scss',scss);

console.log(colors_obj.length + 'color has been set.');

editor-style.scss

//生成された_color_config.scssを読み込みます
@import "color_config";

functions_part.php

<?php
//前略

// カスタムカラーをエディターに反映. 自作テーマの場合.
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );
$colors = get_custom_color();
add_theme_support( 'editor-color-palette', $colors );

// カスタムカラーをエディターに反映. Snow Monkeyの場合（in plugin)
function my_editor_style_setup() {
	add_theme_support( 'editor-styles' );
	// テーマからの相対パスで指定.
	add_editor_style( '/../../plugins/your-snow-monkey-customizer/build/editor-style.css' );
}
add_action( 'after_setup_theme', 'my_editor_style_setup' );
$colors = get_custom_color();
add_filter(
	'snow_monkey_editor_color_palette',
	function () use ( $colors ) {
		return $colors;
	}
);

/**
 * 外部JSONからカスタムカラーを取得する.　YOUR_THEME_PATHをいい感じに設定してください。
 */
function get_custom_color() {
	$url        = YOUR_THEME_PATH . '/color-config.json';
	$colors     = $this->get_json_data( $url );
	$arr_colors = array();
	foreach ( $colors as $slug => $color ) {
		$this_color   = array(
			'name'  => $slug,
			'slug'  => $slug,
			'color' => $color,
		);
		$arr_colors[] = $this_color;
	}
	return $arr_colors;
}

/**
* 外部JSONを指定して配列を返す.
*/
function get_json_data( $url ) {
	$json = file_get_contents( $url );
	$arr  = json_decode( $json, true );
	return $arr;
}

package_part.json

{
// 前略
   "scripts": {
        // 中略
        "color_config": "node theme_color_pick.js"
    },
    "dependencies": {
        "ejs": "^3.0.1"
    }
// 後略
}