ags: config option for symbolic icon theme (#547)

.config/ags/config.js

@@ -20,8 +20,8 @@ import Overview from './modules/overview/main.js';
 import Session from './modules/session/main.js';
 import SideLeft from './modules/sideleft/main.js';
 import SideRight from './modules/sideright/main.js';
+import { COMPILED_STYLE_DIR, handleStyles } from './init.js';
 
-const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`
 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
 function forMonitors(widget) {
     const n = Gdk.Display.get_default()?.get_n_monitors() || 1;
@@ -32,18 +32,7 @@ function forMonitorsAsync(widget) {
     return range(n, 0).forEach((n) => widget(n).catch(print))
 }
 
-// SCSS compilation
+handleStyles();
-Utils.exec(`mkdir -p "${GLib.get_user_state_dir()}/ags/scss"`);
-Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicwal.scss'`); // reset music styles
-Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicmaterial.scss'`); // reset music styles
-async function applyStyle() {
-    Utils.exec(`mkdir -p ${COMPILED_STYLE_DIR}`);
-    Utils.exec(`sass -I "${GLib.get_user_state_dir()}/ags/scss" -I "${App.configDir}/scss/fallback" "${App.configDir}/scss/main.scss" "${COMPILED_STYLE_DIR}/style.css"`);
-    App.resetCss();
-    App.applyCss(`${COMPILED_STYLE_DIR}/style.css`);
-    console.log('[LOG] Styles loaded')
-}
-applyStyle().catch(print);
 
 const Windows = () => [
     // forMonitors(DesktopBackground),

.config/ags/init.js

@@ -0,0 +1,28 @@
+import GLib from 'gi://GLib';
+import App from 'resource:///com/github/Aylur/ags/app.js'
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
+
+export const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`
+
+export const handleStyles = () => {
+    // Reset
+    Utils.exec(`mkdir -p "${GLib.get_user_state_dir()}/ags/scss"`);
+    Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicwal.scss'`); // reset music styles
+    Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicmaterial.scss'`); // reset music styles
+    // Generate overrides
+    Utils.writeFile(`
+@mixin symbolic-icon {
+    -gtk-icon-theme: '${userOptions.icons.symbolicIconTheme}';
+}
+    `, `${GLib.get_user_state_dir()}/ags/scss/_lib_mixins_overrides.scss`)
+    // Compile and apply
+    async function applyStyle() {
+        Utils.exec(`mkdir -p ${COMPILED_STYLE_DIR}`);
+        Utils.exec(`sass -I "${GLib.get_user_state_dir()}/ags/scss" -I "${App.configDir}/scss/fallback" "${App.configDir}/scss/main.scss" "${COMPILED_STYLE_DIR}/style.css"`);
+        App.resetCss();
+        App.applyCss(`${COMPILED_STYLE_DIR}/style.css`);
+        console.log('[LOG] Styles loaded')
+    }
+    applyStyle().catch(print);
+}
+

.config/ags/modules/.configuration/user_options.js

@@ -134,7 +134,7 @@ let configOptions = {
         // are too many files in the search path it'll affect performance
         // Example: ['/usr/share/icons/Tela-nord/scalable/apps']
         'searchPaths': [''],
-
+        'symbolicIconTheme': "Adwaita",
         substitutions: {
             'code-url-handler': "visual-studio-code",
             'Code': "visual-studio-code",

.config/ags/scss/_lib_mixins.scss

@@ -29,9 +29,9 @@ $rounding_large: 1.705rem;
     -gtk-outline-radius: 9999px;
 }
 
-@mixin symbolic-icon {
+// @mixin symbolic-icon {
-    -gtk-icon-theme: 'Adwaita';
+//    -gtk-icon-theme: 'Adwaita';
-}
+// }
 
 @mixin titlefont {
     // Geometric sans-serif

.config/ags/scss/main.scss

@@ -8,6 +8,7 @@
 @import 'material'; // Material colors
 @import './colors'; // Global color definitions. Uses material colors as base.
 @import './lib_mixins';
+@import 'lib_mixins_overrides';
 @import './lib_classes';
 @import './common'; // Context menu n stuff