[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,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 {
+        inquirer.prompt( [{
-            fs.mkdir( path.join( __dirname, '/dist' ) );
+            type: 'confirm',
-        } catch ( e ) {
+            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 => {
-        // recursively index files from config directory -> Maybe add a file to each
+                    console.error( e );
-        // directory to indicate whether or not to index files in it?
+                    process.exit( 1 );
-        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 );
             }
-        }
+        } ).catch( e => {
-
+            console.error( e );
-        util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-4.0/gtk.css' ), 'src', 'dist' );
+            process.exit( 1 );
-        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' );
+        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

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