[Build] Give option to customize colours

This commit is contained in:
Janis Hutz 2025-04-26 15:10:26 +02:00
parent b4b8d04e6a
commit 090492ae51
4 changed files with 85 additions and 24 deletions

View File

@ -6,9 +6,6 @@ const os = require( 'os' );
const render = require( './helpers/render' );
const { treeWalker } = require('./helpers/util');
// TODO: Better comments
// TODO: Split up configs and buildables
// TODO: Make user choose if to use borders or not (otherwise border colour = background colour)
// Prompt user to select a wallpaper (if no path is passed as argument)
const wallpapers = treeWalker( path.join( os.homedir(), '/NextCloud/Wallpapers' ), '*' );

View File

@ -4,6 +4,8 @@ const fs = require( 'fs' );
const path = require( 'path' );
const util = require( './util' );
const generateTheme = require( './generateTheme' );
const chalk = require( 'chalk' ).default;
const inquirer = require( 'inquirer' ).default;
const build = ( wallpaper, lockpaper, theme ) => {
console.log( '\n=> Extracting colours' );
@ -14,35 +16,96 @@ const build = ( wallpaper, lockpaper, theme ) => {
palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ];
}
const view = generateTheme.generateTheme( theme, wallpaper, lockpaper, palette );
console.log( 'The following colours will be used based on your wallpaper: ' );
let col = palette[ 0 ];
console.log( ' => Primary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
col = palette[ 1 ];
console.log( ' => Secondary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
col = palette[ 2 ];
console.log( ' => Tertiary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
try {
fs.mkdir( path.join( __dirname, '/dist' ) );
} catch ( e ) {
inquirer.prompt( [{
type: 'confirm',
name: 'confirm-proceed-build',
message: 'Okay to proceed with these colours?'
} ] ).then( answer => {
if ( answer ) proceedWithBuild( wallpaper, lockpaper, theme, palette );
else {
// Have the user pick any other of the extracted colours instead
let counter = -1;
const colourOptions = palette.map( c => {
counter++;
return {
name: chalk.rgb( c[ 0 ], c[ 1 ], c[ 2 ] )( util.renderColourAsHex( c ) ),
value: counter
}
} )
inquirer.prompt( [
{
'type': 'list',
'message': 'Pick the primary accent colour',
'choices': colourOptions,
'name': 'primary'
},
{
'type': 'list',
'message': 'Pick the secondary accent colour',
'choices': colourOptions,
'name': 'secondary'
},
{
'type': 'list',
'message': 'Pick the tertiary accent colour',
'choices': colourOptions,
'name': 'tertiary'
}
] ).then( result => {
const p = [ palette[ result.primary ], palette[ result.secondary ], palette[ result.tertiary ] ];
}
// recursively index files from config directory -> Maybe add a file to each
// directory to indicate whether or not to index files in it?
const fileList = util.treeWalker( path.join( __dirname, '/../../renderable/' ), '*', [ 'node_modules', '@girs', '.gitignore', '.git', 'flavours' ] );
for (let index = 0; index < fileList.length; index++) {
try {
render( fileList[ index ], view );
} catch ( e ) {
console.error( '=> Render failed for ' + fileList[ index ] + ' with error ' + e );
proceedWithBuild( wallpaper, lockpaper, theme, p );
} ).catch( e => {
console.error( e );
process.exit( 1 );
} );
}
}
util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-4.0/gtk.css' ), 'src', 'dist' );
util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-3.0/gtk.css' ), 'src', 'dist' );
render( path.join( __dirname, '/../../gtk-theme/src/colours.css' ), view, 'src', 'dist' );
} ).catch( e => {
console.error( e );
process.exit( 1 );
} );
} ).catch( e => {
console.error( e );
console.error( '\n=> Failed to load image or retrieve colour palette from it' );
process.exit( 1 );
} );
}
const proceedWithBuild = ( wallpaper, lockpaper, theme, palette ) => {
const view = generateTheme.generateTheme( theme, wallpaper, lockpaper, palette );
try {
fs.mkdir( path.join( __dirname, '/dist' ) );
} catch ( e ) {
}
// recursively index files from config directory -> Maybe add a file to each
// directory to indicate whether or not to index files in it?
const fileList = util.treeWalker( path.join( __dirname, '/../../renderable/' ), '*', [ 'node_modules', '@girs', '.gitignore', '.git', 'flavours' ] );
for (let index = 0; index < fileList.length; index++) {
try {
render( fileList[ index ], view );
} catch ( e ) {
console.error( '=> Render failed for ' + fileList[ index ] + ' with error ' + e );
}
}
util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-4.0/gtk.css' ), 'src', 'dist' );
util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-3.0/gtk.css' ), 'src', 'dist' );
render( path.join( __dirname, '/../../gtk-theme/src/colours.css' ), view, 'src', 'dist' );
}
/**
* @param {string} templatePath - absolute path to config directory
* @param {object} view - rendering config passed to mustache

View File

@ -15,6 +15,7 @@
},
"dependencies": {
"@janishutz/colorthief": "^3.0.2",
"chalk": "^5.4.1",
"color-convert": "^3.0.1",
"inquirer": "^12.5.0",
"mustache": "^4.2.0"

2
setup
View File

@ -43,7 +43,7 @@ if [ $regen == "y" ]; then
cd build
node build.js
if [ $? -ne 0 ]; then
echo -e "\nCaught Ctrl+C, exiting...."
echo -e "\nExit signal received, exiting...."
exit 130
fi
cd ..