mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add build-custom-theme script
This commit is contained in:
parent
8bdba9178a
commit
b9b900e908
109
scripts/build-custom-theme.js
Normal file
109
scripts/build-custom-theme.js
Normal file
@ -0,0 +1,109 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
// This script can be used to build custom colour-scheme css files.
|
||||
//
|
||||
// 1. Create a copy of packages/node_modules/@node-red/editor-client/src/sass/colors.scss
|
||||
// and change the values to the desired colours.
|
||||
//
|
||||
// 2. Run this script, providing the path to the custom file using the --in option
|
||||
//
|
||||
// 3. Save the output of the script to a file - either redirect its output,
|
||||
// or use the --out option.
|
||||
//
|
||||
// 4. Edit your settings file to set the theme:
|
||||
// editorTheme: {
|
||||
// page: {
|
||||
// css: "/path/to/file/generated/by/this/script"
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// 5. Restart Node-RED
|
||||
//
|
||||
|
||||
|
||||
|
||||
const nopt = require("nopt");
|
||||
const path = require("path");
|
||||
const fs = require("fs")
|
||||
const sass = require("node-sass");
|
||||
|
||||
const knownOpts = {
|
||||
"help": Boolean,
|
||||
"in": [path],
|
||||
"out": [path]
|
||||
};
|
||||
const shortHands = {
|
||||
"?":["--help"]
|
||||
};
|
||||
nopt.invalidHandler = function(k,v,t) {}
|
||||
|
||||
const parsedArgs = nopt(knownOpts,shortHands,process.argv,2)
|
||||
|
||||
if (parsedArgs.help) {
|
||||
console.log("Usage: build-custom-theme [-?] [--in FILE] [--out FILE]");
|
||||
console.log("");
|
||||
console.log("Options:");
|
||||
console.log(" --in FILE Custom colors sass file");
|
||||
console.log(" --out FILE Where you write the result");
|
||||
console.log(" -?, --help show this help");
|
||||
console.log("");
|
||||
process.exit();
|
||||
}
|
||||
|
||||
|
||||
const ruleRegex = /(\$.*?) *: *(\S[\S\s]*?);/g;
|
||||
var match;
|
||||
|
||||
const customColors = {};
|
||||
|
||||
if (parsedArgs.in && fs.existsSync(parsedArgs.in)) {
|
||||
let customColorsFile = fs.readFileSync(parsedArgs.in,"utf-8");
|
||||
while((match = ruleRegex.exec(customColorsFile)) !== null) {
|
||||
customColors[match[1]] = match[2];
|
||||
}
|
||||
}
|
||||
|
||||
// Load base colours
|
||||
|
||||
let colorsFile = fs.readFileSync(path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/colors.scss"),"utf-8")
|
||||
let updatedColors = [];
|
||||
|
||||
while((match = ruleRegex.exec(colorsFile)) !== null) {
|
||||
updatedColors.push(match[1]+": "+(customColors[match[1]]||match[2])+";")
|
||||
}
|
||||
|
||||
const result = sass.renderSync({
|
||||
outputStyle: "expanded",
|
||||
file: path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/style.scss"),
|
||||
importer: function(url, prev, done){
|
||||
if (url === 'colors') {
|
||||
return {
|
||||
contents: updatedColors.join("\n")
|
||||
}
|
||||
}
|
||||
return {file:"/Users/nol/code/node-red/node-red/packages/node_modules/@node-red/editor-client/src/sass/"+url+".scss"}
|
||||
}
|
||||
});
|
||||
|
||||
const css = result.css.toString()
|
||||
const lines = css.split("\n");
|
||||
const colorCSS = []
|
||||
const nonColorCSS = [];
|
||||
|
||||
lines.forEach(l => {
|
||||
if (!/^ /.test(l)) {
|
||||
colorCSS.push(l);
|
||||
nonColorCSS.push(l);
|
||||
} else if (/color|border|background|fill|stroke|outline|box-shadow/.test(l)) {
|
||||
colorCSS.push(l);
|
||||
} else {
|
||||
nonColorCSS.push(l);
|
||||
}
|
||||
});
|
||||
|
||||
var output = sass.renderSync({outputStyle: "compressed",data:colorCSS.join("\n")});
|
||||
if (parsedArgs.out) {
|
||||
fs.writeFileSync(parsedArgs.out,output.css);
|
||||
} else {
|
||||
console.log(output.css.toString());
|
||||
}
|
Loading…
Reference in New Issue
Block a user