From 4024b9e8301176050c7f01112d928b16e9ff11d5 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Fri, 9 Jan 2026 16:23:30 +0100
Subject: [PATCH] [Setup] Improve color extraction

---
 build/helpers/render.js          |   2 +-
 build/helpers/util.js            | 128 +++++++++++++++++++++----------
 config/astal/util/colours.scss   |  10 +--
 config/hypr/hyprland/colors.conf |   6 +-
 config/hypr/hyprlock.conf        |   2 +-
 config/rofi/style.rasi           |  12 +--
 config/wlogout/style.css         |   8 +-
 config/yazi/theme.toml           |   4 +-
 gtk-theme/dist/colours.css       | 110 +++++++++++++-------------
 9 files changed, 165 insertions(+), 117 deletions(-)

diff --git a/build/helpers/render.js b/build/helpers/render.js
index 4e5fd0d..670bb94 100644
--- a/build/helpers/render.js
+++ b/build/helpers/render.js
@@ -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' ) {
diff --git a/build/helpers/util.js b/build/helpers/util.js
index c47fd3a..2933f7b 100644
--- a/build/helpers/util.js
+++ b/build/helpers/util.js
@@ -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
-}
+};
diff --git a/config/astal/util/colours.scss b/config/astal/util/colours.scss
index 223bde7..056d5f6 100644
--- a/config/astal/util/colours.scss
+++ b/config/astal/util/colours.scss
@@ -1,6 +1,6 @@
-$fg-color: #C8DCFF;
-$bg-color: #0A0A0F;
-$accent-color: #465B4E;
-$accent-color-2: #324E12;
-$shadow-color: rgba(0, 0, 2, 0.3);
+$fg-color: #E6E6E6;
+$bg-color: #141414;
+$accent-color: #EBC405;
+$accent-color-2: #B81C15;
+$shadow-color: rgba(40, 40, 40, 0.3);
 $monospace-font: Source Code Pro
diff --git a/config/hypr/hyprland/colors.conf b/config/hypr/hyprland/colors.conf
index 3291769..226a0da 100644
--- a/config/hypr/hyprland/colors.conf
+++ b/config/hypr/hyprland/colors.conf
@@ -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 {
-    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)
 }
 
 decoration {
     shadow {
-        color = rgb(000002)
+        color = rgb(282828)
     }
 }
diff --git a/config/hypr/hyprlock.conf b/config/hypr/hyprlock.conf
index 728b1a1..67c417c 100644
--- a/config/hypr/hyprlock.conf
+++ b/config/hypr/hyprlock.conf
@@ -29,7 +29,7 @@ input-field {
     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_center = false
-    outer_color = rgb(70, 91, 78)
+    outer_color = rgb(235, 196, 5)
     inner_color = rgb(200, 200, 200)
     font_color = rgb(10, 10, 10)
     fade_on_empty = true
diff --git a/config/rofi/style.rasi b/config/rofi/style.rasi
index 5a9fa65..b0b358f 100644
--- a/config/rofi/style.rasi
+++ b/config/rofi/style.rasi
@@ -1,10 +1,10 @@
 * {
-    background: #0A0A0F;
-    background-selected: #141419;
-    foreground: #C8DCFF;
-    accent: #465B4E;
-    accent-two: #324E12;
-    // border-color: #19301E;
+    background: #141414;
+    background-selected: #1E1E1E;
+    foreground: #E6E6E6;
+    accent: #EBC405;
+    accent-two: #B81C15;
+    // border-color: #673722;
     inactive: #C8C8C8;
     spacing: 2;
     width: 30em;
diff --git a/config/wlogout/style.css b/config/wlogout/style.css
index 6bd2a90..0cba83e 100644
--- a/config/wlogout/style.css
+++ b/config/wlogout/style.css
@@ -7,7 +7,7 @@ window {
     font-family: monospace;
     font-size: 14pt;
     color: #ffffff; /* text */
-    background-color: rgba(10, 10, 15, 0.5);
+    background-color: rgba(20, 20, 20, 0.5);
 }
 
 button {
@@ -22,12 +22,12 @@ button {
 }
 
 button:hover {
-    background-color: rgba(50, 78, 18, 0.5);
+    background-color: rgba(184, 28, 21, 0.5);
 }
 
 button:focus {
-    background-color: rgb(50, 78, 18);
-    color: rgb(200, 220, 255);
+    background-color: rgb(184, 28, 21);
+    color: rgb(230, 230, 230);
 }
 
 #lock {
diff --git a/config/yazi/theme.toml b/config/yazi/theme.toml
index 9f4e33c..fc762b5 100644
--- a/config/yazi/theme.toml
+++ b/config/yazi/theme.toml
@@ -1,3 +1,3 @@
 [flavor]
-dark = "tokyo-night"
-light = "tokyo-night"
+dark = "vscode-dark-modern"
+light = "vscode-dark-modern"
diff --git a/gtk-theme/dist/colours.css b/gtk-theme/dist/colours.css
index b1b0a7e..aada4c5 100644
--- a/gtk-theme/dist/colours.css
+++ b/gtk-theme/dist/colours.css
@@ -19,13 +19,13 @@
 /*
  * ── Foreground color, main interface text colour ─────────────────────
 */
-@define-color fg #C8DCFF;
-@define-color fg_rgba_07 rgba(200, 220, 255, 0.7);
-@define-color fg_rgba_06 rgba(200, 220, 255, 0.6);
-@define-color fg_rgba_05 rgba(200, 220, 255, 0.5);
-@define-color fg_rgba_03 rgba(200, 220, 255, 0.3);
-@define-color fg_rgba_02 rgba(200, 220, 255, 0.2);
-@define-color fg_rgba_01 rgba(200, 220, 255, 0.1);
+@define-color fg #E6E6E6;
+@define-color fg_rgba_07 rgba(230, 230, 230, 0.7);
+@define-color fg_rgba_06 rgba(230, 230, 230, 0.6);
+@define-color fg_rgba_05 rgba(230, 230, 230, 0.5);
+@define-color fg_rgba_03 rgba(230, 230, 230, 0.3);
+@define-color fg_rgba_02 rgba(230, 230, 230, 0.2);
+@define-color fg_rgba_01 rgba(230, 230, 230, 0.1);
 
 /*
  * ── Foreground accent, usually brighter or darker than default ───────
@@ -40,40 +40,40 @@
 /*
  * ── Accent colour ────────────────────────────────────────────────────
 */
-@define-color accent #465B4E;
-@define-color accent_rgba_05 rgba(70, 91, 78, 0.5);
-@define-color accent_rgba_03 rgba(70, 91, 78, 0.3);
-@define-color accent_rgba_02 rgba(70, 91, 78, 0.2);
-@define-color accent_rgba_015 rgba(70, 91, 78, 0.15);
-@define-color accent_rgba_011 rgba(70, 91, 78, 0.11);
-@define-color accent_rgba_007 rgba(70, 91, 78, 0.07);
+@define-color accent #EBC405;
+@define-color accent_rgba_05 rgba(235, 196, 5, 0.5);
+@define-color accent_rgba_03 rgba(235, 196, 5, 0.3);
+@define-color accent_rgba_02 rgba(235, 196, 5, 0.2);
+@define-color accent_rgba_015 rgba(235, 196, 5, 0.15);
+@define-color accent_rgba_011 rgba(235, 196, 5, 0.11);
+@define-color accent_rgba_007 rgba(235, 196, 5, 0.07);
 
 /*
  * ── Accent Gradient ──────────────────────────────────────────────────
 */
-@define-color accent_gradient_1 #394A3F;
-@define-color accent_gradient_2 #334239;
-@define-color accent_gradient_3 #2E3C33;
-@define-color accent_gradient_4 #29362E;
-@define-color accent_gradient_5 #253029;
-@define-color accent_gradient_inverse_1 #567060;
-@define-color accent_gradient_inverse_2 #567060;
-@define-color accent_gradient_inverse_3 #567060;
+@define-color accent_gradient_1 #967D03;
+@define-color accent_gradient_2 #786403;
+@define-color accent_gradient_3 #605002;
+@define-color accent_gradient_4 #4D4002;
+@define-color accent_gradient_5 #3E3301;
+@define-color accent_gradient_inverse_1 #FFFF08;
+@define-color accent_gradient_inverse_2 #FFFF08;
+@define-color accent_gradient_inverse_3 #FFFF08;
 
 /*
  * ── Secondary accent colour ──────────────────────────────────────────
 */
-@define-color accent2 #324E12;
-@define-color accent2_rgba_05 rgba(50, 78, 18, 0.5);
-@define-color accent2_rgba_03 rgba(50, 78, 18, 0.3);
-@define-color accent2_rgba_02 rgba(50, 78, 18, 0.2);
-@define-color accent2_rgba_015 rgba(50, 78, 18, 0.15);
-@define-color accent2_rgba_01 rgba(50, 78, 18, 0.1);
+@define-color accent2 #B81C15;
+@define-color accent2_rgba_05 rgba(184, 28, 21, 0.5);
+@define-color accent2_rgba_03 rgba(184, 28, 21, 0.3);
+@define-color accent2_rgba_02 rgba(184, 28, 21, 0.2);
+@define-color accent2_rgba_015 rgba(184, 28, 21, 0.15);
+@define-color accent2_rgba_01 rgba(184, 28, 21, 0.1);
 
 /*
  * ── Tertiary accent colour ───────────────────────────────────────────
 */
-@define-color accent3 #19301E;
+@define-color accent3 #673722;
 
 /*
  * ── Inactive Colour ──────────────────────────────────────────────────
@@ -97,33 +97,33 @@
 /*
  * ── Background color, main interface background ──────────────────────
 */
-@define-color bg #0A0A0F;
-@define-color bg_rgba_07 rgba(10, 10, 15, 0.7);
-@define-color bg_rgba_05 rgba(10, 10, 15, 0.5);
-@define-color bg_rgba_03 rgba(10, 10, 15, 0.3);
-@define-color bg_rgba_02 rgba(10, 10, 15, 0.2);
-@define-color bg_rgba_015 rgba(10, 10, 15, 0.15);
-@define-color bg_rgba_011 rgba(10, 10, 15, 0.11);
+@define-color bg #141414;
+@define-color bg_rgba_07 rgba(20, 20, 20, 0.7);
+@define-color bg_rgba_05 rgba(20, 20, 20, 0.5);
+@define-color bg_rgba_03 rgba(20, 20, 20, 0.3);
+@define-color bg_rgba_02 rgba(20, 20, 20, 0.2);
+@define-color bg_rgba_015 rgba(20, 20, 20, 0.15);
+@define-color bg_rgba_011 rgba(20, 20, 20, 0.11);
 
 /*
  * ── Accent background color ──────────────────────────────────────────
 */
-@define-color bg_accent #141419;
-@define-color bg_accent_rgba_07 rgba(20, 20, 25, 0.7);
-@define-color bg_accent_rgba_06 rgba(20, 20, 25, 0.6);
-@define-color bg_accent_rgba_05 rgba(20, 20, 25, 0.5);
-@define-color bg_accent_rgba_04 rgba(20, 20, 25, 0.4);
-@define-color bg_accent_rgba_03 rgba(20, 20, 25, 0.3);
-@define-color bg_accent_rgba_02 rgba(20, 20, 25, 0.2);
-@define-color bg_accent_rgba_015 rgba(20, 20, 25, 0.15);
-@define-color bg_accent_rgba_01 rgba(20, 20, 25, 0.1);
+@define-color bg_accent #1E1E1E;
+@define-color bg_accent_rgba_07 rgba(30, 30, 30, 0.7);
+@define-color bg_accent_rgba_06 rgba(30, 30, 30, 0.6);
+@define-color bg_accent_rgba_05 rgba(30, 30, 30, 0.5);
+@define-color bg_accent_rgba_04 rgba(30, 30, 30, 0.4);
+@define-color bg_accent_rgba_03 rgba(30, 30, 30, 0.3);
+@define-color bg_accent_rgba_02 rgba(30, 30, 30, 0.2);
+@define-color bg_accent_rgba_015 rgba(30, 30, 30, 0.15);
+@define-color bg_accent_rgba_01 rgba(30, 30, 30, 0.1);
 
 /*
  * ── Tertiary background colour ───────────────────────────────────────
 */
-@define-color bg_tertiary #000000;
-@define-color bg_tertiary_rgba_05 rgba(0, 0, 0, 0.5);
-@define-color bg_tertiary_rgba_02 rgba(0, 0, 0, 0.2);
+@define-color bg_tertiary #2D2D2D;
+@define-color bg_tertiary_rgba_05 rgba(45, 45, 45, 0.5);
+@define-color bg_tertiary_rgba_02 rgba(45, 45, 45, 0.2);
 
 /*
  * ── Inactive background colour ───────────────────────────────────────
@@ -140,10 +140,10 @@
 /*
  * ── Shadow colours ───────────────────────────────────────────────────
 */
-@define-color shadow #000002;
-@define-color shadow_rgba_07 rgba(0, 0, 2, 0.7);
-@define-color shadow_rgba_05 rgba(0, 0, 2, 0.5);
-@define-color shadow_rgba_03 rgba(0, 0, 2, 0.3);
-@define-color shadow_rgba_02 rgba(0, 0, 2, 0.2);
-@define-color shadow_rgba_015 rgba(0, 0, 2, 0.15);
-@define-color shadow_rgba_011 rgba(0, 0, 2, 0.11);
+@define-color shadow #282828;
+@define-color shadow_rgba_07 rgba(40, 40, 40, 0.7);
+@define-color shadow_rgba_05 rgba(40, 40, 40, 0.5);
+@define-color shadow_rgba_03 rgba(40, 40, 40, 0.3);
+@define-color shadow_rgba_02 rgba(40, 40, 40, 0.2);
+@define-color shadow_rgba_015 rgba(40, 40, 40, 0.15);
+@define-color shadow_rgba_011 rgba(40, 40, 40, 0.11);