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

114
build/helpers/util.js
View File

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

10
config/astal/util/colours.scss
View File

@@ -1,6 +1,6 @@
$fg-color: #C8DCFF; $fg-color: #E6E6E6;
$bg-color: #0A0A0F; $bg-color: #141414;
$accent-color: #465B4E; $accent-color: #EBC405;
$accent-color-2: #324E12; $accent-color-2: #B81C15;
$shadow-color: rgba(0, 0, 2, 0.3); $shadow-color: rgba(40, 40, 40, 0.3);
$monospace-font: Source Code Pro $monospace-font: Source Code Pro

6
config/hypr/hyprland/colors.conf
View File

@@ -4,15 +4,15 @@
# ╰────────────────────────────────────────────────╯ # ╰────────────────────────────────────────────────╯
# ──────────────────────────────────────────────────────────────────── # ────────────────────────────────────────────────────────────────────
exec = swaybg -m fill -i /home/janis/NextCloud/Wallpapers/hypercar/peugeot_9x8.jpg exec = swaybg -m fill -i /home/janis/NextCloud/Wallpapers/hypercar/ferrari_499p.jpg
general { general {
col.active_border = rgba(465b4ecc) rgba(324e12cc) rgba(19301ecc) 45deg col.active_border = rgba(ebc405cc) rgba(b81c15cc) rgba(673722cc) 45deg
col.inactive_border = rgb(000000) col.inactive_border = rgb(000000)
} }
decoration { decoration {
shadow { shadow {
color = rgb(000002) color = rgb(282828)
} }
} }

2
config/hypr/hyprlock.conf
View File

@@ -29,7 +29,7 @@ input-field {
dots_size = 0.33 # Scale of input-field height, 0.2 - 0.8 dots_size = 0.33 # Scale of input-field height, 0.2 - 0.8
dots_spacing = 0.15 # Scale of dots' absolute size, 0.0 - 1.0 dots_spacing = 0.15 # Scale of dots' absolute size, 0.0 - 1.0
dots_center = false dots_center = false
outer_color = rgb(70, 91, 78) outer_color = rgb(235, 196, 5)
inner_color = rgb(200, 200, 200) inner_color = rgb(200, 200, 200)
font_color = rgb(10, 10, 10) font_color = rgb(10, 10, 10)
fade_on_empty = true fade_on_empty = true

12
config/rofi/style.rasi
View File

@@ -1,10 +1,10 @@
* { * {
background: #0A0A0F; background: #141414;
background-selected: #141419; background-selected: #1E1E1E;
foreground: #C8DCFF; foreground: #E6E6E6;
accent: #465B4E; accent: #EBC405;
accent-two: #324E12; accent-two: #B81C15;
// border-color: #19301E; // border-color: #673722;
inactive: #C8C8C8; inactive: #C8C8C8;
spacing: 2; spacing: 2;
width: 30em; width: 30em;

8
config/wlogout/style.css
View File

@@ -7,7 +7,7 @@ window {
font-family: monospace; font-family: monospace;
font-size: 14pt; font-size: 14pt;
color: #ffffff; /* text */ color: #ffffff; /* text */
background-color: rgba(10, 10, 15, 0.5); background-color: rgba(20, 20, 20, 0.5);
} }
button { button {
@@ -22,12 +22,12 @@ button {
} }
button:hover { button:hover {
background-color: rgba(50, 78, 18, 0.5); background-color: rgba(184, 28, 21, 0.5);
} }
button:focus { button:focus {
background-color: rgb(50, 78, 18); background-color: rgb(184, 28, 21);
color: rgb(200, 220, 255); color: rgb(230, 230, 230);
} }
#lock { #lock {

4
config/yazi/theme.toml
View File

@@ -1,3 +1,3 @@
[flavor] [flavor]
dark = "tokyo-night" dark = "vscode-dark-modern"
light = "tokyo-night" light = "vscode-dark-modern"

110
gtk-theme/dist/colours.css vendored
View File

@@ -19,13 +19,13 @@
/* /*
* ── Foreground color, main interface text colour ───────────────────── * ── Foreground color, main interface text colour ─────────────────────
*/ */
@define-color fg #C8DCFF; @define-color fg #E6E6E6;
@define-color fg_rgba_07 rgba(200, 220, 255, 0.7); @define-color fg_rgba_07 rgba(230, 230, 230, 0.7);
@define-color fg_rgba_06 rgba(200, 220, 255, 0.6); @define-color fg_rgba_06 rgba(230, 230, 230, 0.6);
@define-color fg_rgba_05 rgba(200, 220, 255, 0.5); @define-color fg_rgba_05 rgba(230, 230, 230, 0.5);
@define-color fg_rgba_03 rgba(200, 220, 255, 0.3); @define-color fg_rgba_03 rgba(230, 230, 230, 0.3);
@define-color fg_rgba_02 rgba(200, 220, 255, 0.2); @define-color fg_rgba_02 rgba(230, 230, 230, 0.2);
@define-color fg_rgba_01 rgba(200, 220, 255, 0.1); @define-color fg_rgba_01 rgba(230, 230, 230, 0.1);
/* /*
* ── Foreground accent, usually brighter or darker than default ─────── * ── Foreground accent, usually brighter or darker than default ───────
@@ -40,40 +40,40 @@
/* /*
* ── Accent colour ──────────────────────────────────────────────────── * ── Accent colour ────────────────────────────────────────────────────
*/ */
@define-color accent #465B4E; @define-color accent #EBC405;
@define-color accent_rgba_05 rgba(70, 91, 78, 0.5); @define-color accent_rgba_05 rgba(235, 196, 5, 0.5);
@define-color accent_rgba_03 rgba(70, 91, 78, 0.3); @define-color accent_rgba_03 rgba(235, 196, 5, 0.3);
@define-color accent_rgba_02 rgba(70, 91, 78, 0.2); @define-color accent_rgba_02 rgba(235, 196, 5, 0.2);
@define-color accent_rgba_015 rgba(70, 91, 78, 0.15); @define-color accent_rgba_015 rgba(235, 196, 5, 0.15);
@define-color accent_rgba_011 rgba(70, 91, 78, 0.11); @define-color accent_rgba_011 rgba(235, 196, 5, 0.11);
@define-color accent_rgba_007 rgba(70, 91, 78, 0.07); @define-color accent_rgba_007 rgba(235, 196, 5, 0.07);
/* /*
* ── Accent Gradient ────────────────────────────────────────────────── * ── Accent Gradient ──────────────────────────────────────────────────
*/ */
@define-color accent_gradient_1 #394A3F; @define-color accent_gradient_1 #967D03;
@define-color accent_gradient_2 #334239; @define-color accent_gradient_2 #786403;
@define-color accent_gradient_3 #2E3C33; @define-color accent_gradient_3 #605002;
@define-color accent_gradient_4 #29362E; @define-color accent_gradient_4 #4D4002;
@define-color accent_gradient_5 #253029; @define-color accent_gradient_5 #3E3301;
@define-color accent_gradient_inverse_1 #567060; @define-color accent_gradient_inverse_1 #FFFF08;
@define-color accent_gradient_inverse_2 #567060; @define-color accent_gradient_inverse_2 #FFFF08;
@define-color accent_gradient_inverse_3 #567060; @define-color accent_gradient_inverse_3 #FFFF08;
/* /*
* ── Secondary accent colour ────────────────────────────────────────── * ── Secondary accent colour ──────────────────────────────────────────
*/ */
@define-color accent2 #324E12; @define-color accent2 #B81C15;
@define-color accent2_rgba_05 rgba(50, 78, 18, 0.5); @define-color accent2_rgba_05 rgba(184, 28, 21, 0.5);
@define-color accent2_rgba_03 rgba(50, 78, 18, 0.3); @define-color accent2_rgba_03 rgba(184, 28, 21, 0.3);
@define-color accent2_rgba_02 rgba(50, 78, 18, 0.2); @define-color accent2_rgba_02 rgba(184, 28, 21, 0.2);
@define-color accent2_rgba_015 rgba(50, 78, 18, 0.15); @define-color accent2_rgba_015 rgba(184, 28, 21, 0.15);
@define-color accent2_rgba_01 rgba(50, 78, 18, 0.1); @define-color accent2_rgba_01 rgba(184, 28, 21, 0.1);
/* /*
* ── Tertiary accent colour ─────────────────────────────────────────── * ── Tertiary accent colour ───────────────────────────────────────────
*/ */
@define-color accent3 #19301E; @define-color accent3 #673722;
/* /*
* ── Inactive Colour ────────────────────────────────────────────────── * ── Inactive Colour ──────────────────────────────────────────────────
@@ -97,33 +97,33 @@
/* /*
* ── Background color, main interface background ────────────────────── * ── Background color, main interface background ──────────────────────
*/ */
@define-color bg #0A0A0F; @define-color bg #141414;
@define-color bg_rgba_07 rgba(10, 10, 15, 0.7); @define-color bg_rgba_07 rgba(20, 20, 20, 0.7);
@define-color bg_rgba_05 rgba(10, 10, 15, 0.5); @define-color bg_rgba_05 rgba(20, 20, 20, 0.5);
@define-color bg_rgba_03 rgba(10, 10, 15, 0.3); @define-color bg_rgba_03 rgba(20, 20, 20, 0.3);
@define-color bg_rgba_02 rgba(10, 10, 15, 0.2); @define-color bg_rgba_02 rgba(20, 20, 20, 0.2);
@define-color bg_rgba_015 rgba(10, 10, 15, 0.15); @define-color bg_rgba_015 rgba(20, 20, 20, 0.15);
@define-color bg_rgba_011 rgba(10, 10, 15, 0.11); @define-color bg_rgba_011 rgba(20, 20, 20, 0.11);
/* /*
* ── Accent background color ────────────────────────────────────────── * ── Accent background color ──────────────────────────────────────────
*/ */
@define-color bg_accent #141419; @define-color bg_accent #1E1E1E;
@define-color bg_accent_rgba_07 rgba(20, 20, 25, 0.7); @define-color bg_accent_rgba_07 rgba(30, 30, 30, 0.7);
@define-color bg_accent_rgba_06 rgba(20, 20, 25, 0.6); @define-color bg_accent_rgba_06 rgba(30, 30, 30, 0.6);
@define-color bg_accent_rgba_05 rgba(20, 20, 25, 0.5); @define-color bg_accent_rgba_05 rgba(30, 30, 30, 0.5);
@define-color bg_accent_rgba_04 rgba(20, 20, 25, 0.4); @define-color bg_accent_rgba_04 rgba(30, 30, 30, 0.4);
@define-color bg_accent_rgba_03 rgba(20, 20, 25, 0.3); @define-color bg_accent_rgba_03 rgba(30, 30, 30, 0.3);
@define-color bg_accent_rgba_02 rgba(20, 20, 25, 0.2); @define-color bg_accent_rgba_02 rgba(30, 30, 30, 0.2);
@define-color bg_accent_rgba_015 rgba(20, 20, 25, 0.15); @define-color bg_accent_rgba_015 rgba(30, 30, 30, 0.15);
@define-color bg_accent_rgba_01 rgba(20, 20, 25, 0.1); @define-color bg_accent_rgba_01 rgba(30, 30, 30, 0.1);
/* /*
* ── Tertiary background colour ─────────────────────────────────────── * ── Tertiary background colour ───────────────────────────────────────
*/ */
@define-color bg_tertiary #000000; @define-color bg_tertiary #2D2D2D;
@define-color bg_tertiary_rgba_05 rgba(0, 0, 0, 0.5); @define-color bg_tertiary_rgba_05 rgba(45, 45, 45, 0.5);
@define-color bg_tertiary_rgba_02 rgba(0, 0, 0, 0.2); @define-color bg_tertiary_rgba_02 rgba(45, 45, 45, 0.2);
/* /*
* ── Inactive background colour ─────────────────────────────────────── * ── Inactive background colour ───────────────────────────────────────
@@ -140,10 +140,10 @@
/* /*
* ── Shadow colours ─────────────────────────────────────────────────── * ── Shadow colours ───────────────────────────────────────────────────
*/ */
@define-color shadow #000002; @define-color shadow #282828;
@define-color shadow_rgba_07 rgba(0, 0, 2, 0.7); @define-color shadow_rgba_07 rgba(40, 40, 40, 0.7);
@define-color shadow_rgba_05 rgba(0, 0, 2, 0.5); @define-color shadow_rgba_05 rgba(40, 40, 40, 0.5);
@define-color shadow_rgba_03 rgba(0, 0, 2, 0.3); @define-color shadow_rgba_03 rgba(40, 40, 40, 0.3);
@define-color shadow_rgba_02 rgba(0, 0, 2, 0.2); @define-color shadow_rgba_02 rgba(40, 40, 40, 0.2);
@define-color shadow_rgba_015 rgba(0, 0, 2, 0.15); @define-color shadow_rgba_015 rgba(40, 40, 40, 0.15);
@define-color shadow_rgba_011 rgba(0, 0, 2, 0.11); @define-color shadow_rgba_011 rgba(40, 40, 40, 0.11);