From 722be458ec2e919edd65e95b0c8ff47d8623e715 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 25 Apr 2025 08:52:52 +0200 Subject: [PATCH] [Gtk-Theme] First setup --- build/render.js | 41 +++++++++++--- gtk-theme/src/gtk-3.0/gtk.css | 100 ++++++++++++++++++++++++++++++++++ gtk-theme/src/gtk-4.0/gtk.css | 100 ++++++++++++++++++++++++++++++++++ gtk-theme/src/index.theme | 8 +++ system/environment | 9 ++- 5 files changed, 244 insertions(+), 14 deletions(-) create mode 100644 gtk-theme/src/gtk-3.0/gtk.css create mode 100644 gtk-theme/src/gtk-4.0/gtk.css create mode 100644 gtk-theme/src/index.theme diff --git a/build/render.js b/build/render.js index 2814ad1..a96ccfc 100644 --- a/build/render.js +++ b/build/render.js @@ -20,6 +20,7 @@ const build = ( wallpaper, lockpaper, theme ) => { // Colours 'colour-foreground-hex': renderColourAsHex( palette[ 0 ] ), 'colour-foreground-rgb': renderColourAsRGB( palette[ 0 ] ), + 'colour-foreground-rgb': renderColourAsRGBA( palette[ 0 ], 0.5 ), 'colour-accent-hex': renderColourAsHex( palette[ 1 ] ), 'colour-accent-rgb': renderColourAsRGB( palette[ 1 ] ), 'colour-accent-rgba': renderColourAsRGBA( palette[ 1 ], 0.3 ), @@ -30,10 +31,15 @@ const build = ( wallpaper, lockpaper, theme ) => { 'colour-background-hex': renderColourAsHex( colours.background[ theme ] ), 'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ), 'colour-background-rgba': renderColourAsRGBA( colours.background[ theme ], 0.5 ), + 'colour-background-alternative-hex': renderColourAsHex( colours[ 'background-alternative' ][ theme ] ), + 'colour-background-alternative-hex': renderColourAsRGB( colours[ 'background-alternative' ][ theme ] ), 'colour-shadow-hex': renderColourAsHex( colours.shadow[ theme ] ), 'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ), + 'colour-shadow-rgba': renderColourAsRGBA( colours.shadow[ theme ], 0.3 ), 'colour-inavtive-hex': renderColourAsHex( colours.inactive[ theme ] ), 'colour-inavtive-rgb': renderColourAsRGB( colours.inactive[ theme ] ), + 'colour-inavtive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ), + 'colour-inavtive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ), // Fonts 'font-primary': fonts.primary[ theme ], @@ -62,8 +68,6 @@ const build = ( wallpaper, lockpaper, theme ) => { // 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' ] ); - // TODO: Copy missing files over directly - console.log( fileList ); for (let index = 0; index < fileList.length; index++) { try { render( fileList[ index ], view ); @@ -71,6 +75,10 @@ const build = ( wallpaper, lockpaper, theme ) => { console.error( '=> Render failed for ' + fileList[ index ] + ' with error ' + e ); } } + + render( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), view, 'src', 'dist' ); + render( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), view, 'src', 'dist' ); + // TODO: Copy over to /usr/share/themes/Adaptive-Theme/ } ).catch( e => { console.error( e ); console.error( '\n=> Failed to load image or retrieve colour palette from it' ); @@ -79,12 +87,19 @@ const build = ( wallpaper, lockpaper, theme ) => { const colours = { background: { - 'nordic': [ 10, 0, 60 ], + 'nordic': [ 10, 0, 50 ], 'deep-dark': [ 20, 20, 20 ], 'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator 'light': [ 230, 230, 230 ], 'bright': [ 255, 255, 255 ] }, + 'background-alternative': { + 'nordic': [ 15, 5, 60 ], + 'deep-dark': [ 30, 30, 30 ], + 'material': [ 40, 40, 40 ], // TODO: Will be calculated by material theme generator + 'light': [ 210, 210, 210 ], + 'bright': [ 230, 230, 230 ] + }, shadow: { 'nordic': [ 10, 0, 60 ], 'deep-dark': [ 20, 20, 20 ], @@ -98,6 +113,13 @@ const colours = { 'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator 'light': [ 65, 65, 65 ], 'bright': [ 60, 60, 60 ] + }, + 'inactive-background': { + 'nordic': [ 0, 0, 0 ], + 'deep-dark': [ 0, 0, 0 ], + 'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator + 'light': [ 200, 200, 200 ], + 'bright': [ 60, 60, 60 ] } } @@ -125,7 +147,6 @@ const fonts = { } } -// TODO const yaziThemes = { 'nordic': 'tokyo-night', 'deep-dark': 'vscode-dark-modern', @@ -136,14 +157,16 @@ const yaziThemes = { /** - * @param {string} templatePath - Path relative to config root - * @param {object} view - View rendering config + * @param {string} templatePath - absolute path to config directory + * @param {object} view - rendering config passed to mustache + * @param {string} originalDir - The original directory, defaults to renderable + * @param {string} newDir - the output directory override, defaults to config */ -const render = ( templatePath, view ) => { - // Load template from disk (all can be found in /config) +const render = ( templatePath, view, originalDir = 'renderable', newDir = 'config' ) => { + // Load template from disk (all can be found in /renderable) // TODO: Make exclusion better plus copy other files maybe? const template = '' + fs.readFileSync( templatePath ); - const outPath = path.join( templatePath.replace( 'config', 'dist' ) ); + const outPath = path.join( templatePath.replace( originalDir, newDir ) ); console.log( '=> Rendering to ' + outPath ); try { fs.mkdirSync( path.dirname( outPath ), { diff --git a/gtk-theme/src/gtk-3.0/gtk.css b/gtk-theme/src/gtk-3.0/gtk.css new file mode 100644 index 0000000..cf65183 --- /dev/null +++ b/gtk-theme/src/gtk-3.0/gtk.css @@ -0,0 +1,100 @@ +/* + * ╭───────────────────────────────────────────────╮ + * │ GTK NAMED COLORS │ + * ╰───────────────────────────────────────────────╯ +*/ + +/* + * ── widget text/foreground color ───────────────────────────────────── +*/ +@define-color theme_fg_color {{ colour-foreground-hex }}; + +/* + * ── text color for entries, views and content in general ───────────── +*/ +@define-color theme_text_color {{ colour-foreground-hex }}; + +/* + * ── widget base background color ───────────────────────────────────── +*/ +@define-color theme_bg_color {{ colour-background-hex }}; + +/* + * ── text widgets and the like base background color ────────────────── +*/ +@define-color theme_base_color {{ colour-background-alternative-hex }}; + +/* + * ── base background color of selections ────────────────────────────── +*/ +@define-color theme_selected_bg_color {{ colour-accent-hex }}; + +/* + * ── text/foreground color of selections ────────────────────────────── +*/ +@define-color theme_selected_fg_color {{ colour-foreground-hex }}; + +/* + * ── base background color of insensitive widgets ───────────────────── +*/ +@define-color insensitive_bg_color {{ colour-background-hex }}; + +/* + * ── text foreground color of insensitive widgets ───────────────────── +*/ +@define-color insensitive_fg_color {{ colour-foreground-rgba }}; + +/* + * ── insensitive text widgets and the like base background color ────── +*/ +@define-color insensitive_base_color {{ colour-background-alternative-hex }}; + +/* + * ── widget text/foreground color on backdrop windows ───────────────── +*/ +@define-color theme_unfocused_fg_color {{ colour-accent-2-hex }}; + +/* +text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color {{ colour-inactive-hex }}; + +/* +widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color {{ colour-inactive-background-hex }}; + +/* +text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color {{ colour-inactive-background-hex }}; + +/* +base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color {{ colour-accent-2-hex }}; + +/* +text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color {{ colour-foreground-hex }}; + +/* +insensitive color on backdrop windows */ +@define-color unfocused_insensitive_color {{ colour-foreground-rgba }}; + +/* +widgets main borders color */ +@define-color borders {{ colour-shadow-rgba }}; +/* +widgets main borders color on backdrop windows */ +@define-color unfocused_borders {{ colour-shadow-rgba }}; + +/* +these are pretty self explicative */ +@define-color warning_color #ffeb3b; +@define-color error_color #f44336; +@define-color success_color #00e676; + +/* content view background such as thumbnails view in Photos or Boxes */ +@define-color content_view_bg {{ colour-background-hex }}; + +/* Very contrasty background for text views (@theme_text_color foreground) */ +@define-color text_view_bg {{ colour-background-hex }}; +/* placeholder for entries */ +@define-color placeholder_text_color {{ colour-inactive-hex }}; diff --git a/gtk-theme/src/gtk-4.0/gtk.css b/gtk-theme/src/gtk-4.0/gtk.css new file mode 100644 index 0000000..cf65183 --- /dev/null +++ b/gtk-theme/src/gtk-4.0/gtk.css @@ -0,0 +1,100 @@ +/* + * ╭───────────────────────────────────────────────╮ + * │ GTK NAMED COLORS │ + * ╰───────────────────────────────────────────────╯ +*/ + +/* + * ── widget text/foreground color ───────────────────────────────────── +*/ +@define-color theme_fg_color {{ colour-foreground-hex }}; + +/* + * ── text color for entries, views and content in general ───────────── +*/ +@define-color theme_text_color {{ colour-foreground-hex }}; + +/* + * ── widget base background color ───────────────────────────────────── +*/ +@define-color theme_bg_color {{ colour-background-hex }}; + +/* + * ── text widgets and the like base background color ────────────────── +*/ +@define-color theme_base_color {{ colour-background-alternative-hex }}; + +/* + * ── base background color of selections ────────────────────────────── +*/ +@define-color theme_selected_bg_color {{ colour-accent-hex }}; + +/* + * ── text/foreground color of selections ────────────────────────────── +*/ +@define-color theme_selected_fg_color {{ colour-foreground-hex }}; + +/* + * ── base background color of insensitive widgets ───────────────────── +*/ +@define-color insensitive_bg_color {{ colour-background-hex }}; + +/* + * ── text foreground color of insensitive widgets ───────────────────── +*/ +@define-color insensitive_fg_color {{ colour-foreground-rgba }}; + +/* + * ── insensitive text widgets and the like base background color ────── +*/ +@define-color insensitive_base_color {{ colour-background-alternative-hex }}; + +/* + * ── widget text/foreground color on backdrop windows ───────────────── +*/ +@define-color theme_unfocused_fg_color {{ colour-accent-2-hex }}; + +/* +text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color {{ colour-inactive-hex }}; + +/* +widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color {{ colour-inactive-background-hex }}; + +/* +text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color {{ colour-inactive-background-hex }}; + +/* +base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color {{ colour-accent-2-hex }}; + +/* +text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color {{ colour-foreground-hex }}; + +/* +insensitive color on backdrop windows */ +@define-color unfocused_insensitive_color {{ colour-foreground-rgba }}; + +/* +widgets main borders color */ +@define-color borders {{ colour-shadow-rgba }}; +/* +widgets main borders color on backdrop windows */ +@define-color unfocused_borders {{ colour-shadow-rgba }}; + +/* +these are pretty self explicative */ +@define-color warning_color #ffeb3b; +@define-color error_color #f44336; +@define-color success_color #00e676; + +/* content view background such as thumbnails view in Photos or Boxes */ +@define-color content_view_bg {{ colour-background-hex }}; + +/* Very contrasty background for text views (@theme_text_color foreground) */ +@define-color text_view_bg {{ colour-background-hex }}; +/* placeholder for entries */ +@define-color placeholder_text_color {{ colour-inactive-hex }}; diff --git a/gtk-theme/src/index.theme b/gtk-theme/src/index.theme new file mode 100644 index 0000000..43a621d --- /dev/null +++ b/gtk-theme/src/index.theme @@ -0,0 +1,8 @@ +[Desktop Entry] +Type=X-GNOME-Metatheme +Name=Adaptive-Theme +Comment=A very adaptive theme together with its scripts +Encoding=UTF-8 + +[X-GNOME-Metatheme] +GtkTheme=Adaptive-Theme diff --git a/system/environment b/system/environment index 23ce03f..2b48c5f 100644 --- a/system/environment +++ b/system/environment @@ -4,13 +4,12 @@ # Syntax: simple "KEY=VAL" pairs on separate lines # -QT_QPA_PLATFORMTHEME=qt5ct -QT_STYLE_OVERRIDE=kvantum +QT_QPA_PLATFORMTHEME=gtk3 +QT_QPA_PLATFORM=wayland +GTK_THEME=Material-Black-Blueberry +# QT_STYLE_OVERRIDE=kvantum GCM_CREDENTIAL_STORE=secretservice VKD3D_CONFIG=dxr11,dxr RADV_PERFTEST_RT=1 ANDROID_HOME=/home/janis/Android/Sdk -QT_QPA_PLATFORM=wayland -JELLYFIN_WEB_DIR=/usr/share/jellyfin-web -GTK_THEME=Material-Black-Blueberry EDITOR=nvim