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

[Gtk-Theme] Pre-Processing + Some other work

Browse Source
This commit is contained in:
Janis Hutz
2025-04-25 10:05:42 +02:00
parent 722be458ec
commit d120b7a49e
15 changed files with 517 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
build/render.js
View File

@@ -12,22 +12,21 @@ const build = ( wallpaper, lockpaper, theme ) => {
// Extract colour palette from chosen wallpaper using Color-Thief
colorThief.getPalette( wallpaper ).then( palette => {
// Define view options (for rendering with mustache)
console.log( palette );
const view = {
'wallpaper-path': wallpaper,
'lockpaper-path': lockpaper,
// 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 ),
'colour-accent-2-hex': renderColourAsHex( palette[ 2 ] ),
'colour-accent-2-rgb': renderColourAsRGB( palette[ 2 ] ),
'colour-accent-3-hex': renderColourAsHex( palette[ 3 ] ),
'colour-accent-3-rgb': renderColourAsRGB( palette[ 3 ] ),
'colour-foreground-hex': renderColourAsHex( colours.foreground[ theme ] ),
'colour-foreground-rgb': renderColourAsRGB( colours.foreground[ theme ] ),
'colour-foreground-rgba': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ),
'colour-accent-hex': renderColourAsHex( palette[ 0 ] ),
'colour-accent-rgb': renderColourAsRGB( palette[ 0 ] ),
'colour-accent-rgba': renderColourAsRGBA( palette[ 0 ], 0.3 ),
'colour-accent-2-hex': renderColourAsHex( palette[ 1 ] ),
'colour-accent-2-rgb': renderColourAsRGB( palette[ 1 ] ),
'colour-accent-3-hex': renderColourAsHex( palette[ 2 ] ),
'colour-accent-3-rgb': renderColourAsRGB( palette[ 2 ] ),
'colour-background-hex': renderColourAsHex( colours.background[ theme ] ),
'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ),
'colour-background-rgba': renderColourAsRGBA( colours.background[ theme ], 0.5 ),
@@ -36,10 +35,10 @@ const build = ( wallpaper, lockpaper, 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 ] ),
'colour-inactive-hex': renderColourAsHex( colours.inactive[ theme ] ),
'colour-inactive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
'colour-inactive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
'colour-inactive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ),
// Fonts
'font-primary': fonts.primary[ theme ],
@@ -53,11 +52,6 @@ const build = ( wallpaper, lockpaper, theme ) => {
'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5),
}
// TODO: Maybe bar config? Reordering? Same for quick actions?
// Those will be read by AGS components though, but generated by
// this script
console.log( view );
try {
fs.mkdir( path.join( __dirname, '/dist' ) );
} catch ( e ) {
@@ -76,8 +70,10 @@ const build = ( wallpaper, lockpaper, theme ) => {
}
}
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' );
util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), 'src' );
util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), 'src' );
render( path.join( __dirname, '/../gtk-theme/temp/gtk-3.0/gtk.css' ), view, 'temp', 'dist' );
render( path.join( __dirname, '/../gtk-theme/temp/gtk-4.0/gtk.css' ), view, 'temp', 'dist' );
// TODO: Copy over to /usr/share/themes/Adaptive-Theme/
} ).catch( e => {
console.error( e );
@@ -86,6 +82,13 @@ const build = ( wallpaper, lockpaper, theme ) => {
}
const colours = {
foreground: {
'nordic': [ 10, 220, 255 ],
'deep-dark': [ 230, 230, 230 ],
'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
'light': [ 40, 40, 40 ],
'bright': [ 0, 0, 0 ]
},
background: {
'nordic': [ 10, 0, 50 ],
'deep-dark': [ 20, 20, 20 ],

50
build/util.js
View File

@@ -39,12 +39,58 @@ const renderColourAsRGB = ( colour ) => {
}
const renderColourAsRGBA = ( colour, ambiance ) => {
return `rgb( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance } )`
return `rgba( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance } )`
}
/*
* Replace the colours with variable names
* #000 = @bg
* #111 = @bg_accent
* #222 = @bg_inactive
* #555A = @shadow_rgba
* #555 = @shadow
* #F00 = @accent
* #0F0 = @accent2
* #00F = @accent3
* #AAA = @inactive
* #FFF = @fg
*/
const replacements = {
'#000': '@bg',
'#111': '@bg_accent',
'#222': '@bg_inactive',
'#555A': '@shadow_rgba',
'#555': '@shadow',
'#F00': '@accent',
'#0F0': '@accent2',
'#00F': '@accent3',
'#AAA': '@inactive',
'#FFF': '@fg'
};
const themePreProcessor = ( file, replacement ) => {
const colours = Object.keys( replacements );
let data = '' + fs.readFileSync( file );
for (let index = 0; index < colours.length; index++) {
const colour = colours[index];
data = data.replaceAll(colour, replacements[ colour ]);
}
const outPath = file.replace( replacement, 'temp' );
try {
fs.mkdirSync( path.dirname( outPath ), {
recursive: true,
} );
} catch ( e ) {
console.error( e );
}
fs.writeFileSync( outPath, data );
}
module.exports = {
treeWalker,
renderColourAsHex,
renderColourAsRGB,
renderColourAsRGBA
renderColourAsRGBA,
themePreProcessor
}