[Build] Give option to customize colours

build/build.js

@@ -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' ), '*' );

build/helpers/render.js

@@ -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,6 +16,71 @@ const build = ( wallpaper, lockpaper, theme ) => {
             palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ];
         }
 
+        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 ) ) );
+
+        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 ] ];
+
+                    proceedWithBuild( wallpaper, lockpaper, theme, p );
+                } ).catch( e => {
+                    console.error( e );
+                    process.exit( 1 );
+                } );
+            }
+        } ).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 {
@@ -37,10 +104,6 @@ const build = ( wallpaper, lockpaper, theme ) => {
     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 );
-        console.error( '\n=> Failed to load image or retrieve colour palette from it' );
-    } );
 }
 
 /**

build/package.json

@@ -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"

setup

@@ -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 ..