janishutz/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

[Setup] Improve color extraction

Browse Source
This commit is contained in:
Janis Hutz
2026-01-09 16:23:30 +01:00
parent 11767c3009
commit 4024b9e830
9 changed files with 165 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build/helpers/render.js
View File

@@ -10,7 +10,7 @@ const inquirer = require( 'inquirer' ).default;
const build = ( wallpaper, lockpaper, theme ) => {
console.log( '\n=> Extracting colours' );
// Extract colour palette from chosen wallpaper using Color-Thief
colorThief.getPalette( wallpaper ).then( palette => {
colorThief.getPalette( wallpaper, 20 ).then( palette => {
palette = util.removeUselessColours( palette );
// Define view options (for rendering with mustache)
if ( theme === 'test' ) {

128
build/helpers/util.js
View File

@@ -1,5 +1,7 @@
const convert = require( 'color-convert' );
const fs = require( 'fs' );
const path = require( 'path' );
/**
@@ -8,15 +10,21 @@ const path = require( 'path' );
* @param {string} extension The file extension to look for
* @returns {string[]} returns a list of html files with their full path
*/
const treeWalker = ( dir, extension, ignoreList ) => {
const treeWalker = (
dir, extension, ignoreList
) => {
const ls = fs.readdirSync( dir );
const fileList = [];
for ( let file in ls ) {
if ( fs.statSync( path.join( dir, ls[ file ] ) ).isDirectory() ) {
// Filter ignored directories
if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
const newFiles = treeWalker( path.join( dir, ls[ file ] ), extension, ignoreList );
for (let file = 0; file < newFiles.length; file++) {
const newFiles = treeWalker(
path.join( dir, ls[ file ] ), extension, ignoreList
);
for ( let file = 0; file < newFiles.length; file++ ) {
fileList.push( newFiles[ file ] );
}
}
@@ -28,56 +36,75 @@ const treeWalker = ( dir, extension, ignoreList ) => {
}
return fileList;
}
};
const renderColourAsHex = ( colour ) => {
return '#' + convert.default.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
}
const renderColourAsHex = colour => {
return '#' + convert.default.rgb.hex(
colour[ 0 ], colour[ 1 ], colour[ 2 ]
);
};
const renderColourAsRGB = ( colour ) => {
return `rgb(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] })`
}
const renderColourAsRGB = colour => {
return `rgb(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] })`;
};
const renderColourAsRGBA = ( colour, ambiance ) => {
return `rgba(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance })`
}
return `rgba(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance })`;
};
const renderColourAsRGBHex = ( colour ) => {
const hexCol = convert.default.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
return `rgb(${hexCol})`.toLowerCase();
}
const renderColourAsRGBHex = colour => {
const hexCol = convert.default.rgb.hex(
colour[ 0 ], colour[ 1 ], colour[ 2 ]
);
function decimalToHex(decimal) {
const hexValue = Math.round(decimal * 255);
return hexValue.toString(16).padStart(2, '0');
return `rgb(${ hexCol })`.toLowerCase();
};
function decimalToHex ( decimal ) {
const hexValue = Math.round( decimal * 255 );
return hexValue.toString( 16 ).padStart( 2, '0' );
}
const renderColourAsRGBAHex = ( colour, ambiance ) => {
const hexCol = convert.default.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
return `rgba(${hexCol}${decimalToHex(ambiance)})`.toLowerCase();
}
const hexCol = convert.default.rgb.hex(
colour[ 0 ], colour[ 1 ], colour[ 2 ]
);
const removeUselessColours = ( palette ) => {
return `rgba(${ hexCol }${ decimalToHex( ambiance ) })`.toLowerCase();
};
const removeUselessColours = palette => {
const p = [];
for ( let i = 0; i < palette.length; i++ ) {
const el = palette[ i ];
const luminance = calculateLuminance( palette[ i ] );
if ( luminance < 215 && luminance > 40 ) {
if ( luminance < 210 && luminance > 40 ) {
p.push( palette[ i ] );
}
for ( let j = 0; j < el.length; j++ ) {
if ( el[j] > 70 ) {
p.push( palette[ i ] );
break;
}
}
}
return p;
}
};
const calculateLuminance = ( colour ) => {
const calculateLuminance = colour => {
return colour[ 0 ] + colour[ 1 ] + colour[ 2 ] / 3;
}
};
/*
* Replace the colours with variable names
*/
const replacements = {
const replacements = {
'#0f1011': '@bg',
'rgba(9, 9, 10, 0.9)': '@bg_rgba_07',
'rgba(26, 28, 30, 0.3)': '@bg_rgba_05',
@@ -129,33 +156,54 @@ const replacements = {
'rgba(158, 158, 158, 0.2)': '@fg_rgba_02',
'rgba(158, 158, 158, 0.1168)': '@fg_rgba_01'
};
const themePreProcessor = ( file, replacement, out ) => {
const themePreProcessor = (
file, replacement, out
) => {
const colours = Object.keys( replacements );
let data = '' + fs.readFileSync( file );
for (let index = 0; index < colours.length; index++) {
for ( let index = 0; index < colours.length; index++ ) {
const colour = colours[index];
data = data.replaceAll(colour, replacements[ colour ]);
data = data.replaceAll( colour, replacements[ colour ] );
}
const outPath = file.replace( replacement, out );
try {
fs.mkdirSync( path.dirname( outPath ), {
recursive: true,
'recursive': true,
} );
} catch ( e ) {
console.error( e );
}
fs.writeFileSync( outPath, data );
}
};
const getGradientColour = ( colour, index, multiplier ) => {
const getGradientColour = (
colour, index, multiplier
) => {
if ( index === 0 ) {
return [ colour[ 0 ] * multiplier, colour[ 1 ] * multiplier, colour[ 2 ] * multiplier ];
return [
colour[ 0 ] * multiplier,
colour[ 1 ] * multiplier,
colour[ 2 ] * multiplier
];
}
const gradient = getGradientColour( colour, index - 1, multiplier );
return [ Math.min( 255, gradient[ 0 ] * multiplier ), Math.min( 255, gradient[ 1 ] * multiplier ), Math.min( 255, gradient[ 2 ] * multiplier ) ];
}
const gradient = getGradientColour(
colour, index - 1, multiplier
);
return [
Math.min( 255, gradient[ 0 ] * multiplier ),
Math.min( 255, gradient[ 1 ] * multiplier ),
Math.min( 255, gradient[ 2 ] * multiplier )
];
};
module.exports = {
treeWalker,
@@ -167,4 +215,4 @@ module.exports = {
themePreProcessor,
getGradientColour,
removeUselessColours
}
};