ags: use separate symbolic icon theme for different color schemes

One may want to use different icon theme for dark and light backgrounds
to ensure readability.

This also fixes a race condition by using `Utils.writeFileSync` to
ensure the style file is updated before compiling sass.

.config/ags/init.js

@@ -1,6 +1,7 @@
 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'
+import { darkMode } from './modules/.miscutils/system.js';
 
 export const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`
 
@@ -12,9 +13,10 @@ globalThis['handleStyles'] = (resetMusic) => {
         Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicmaterial.scss'`); // reset music styles
     }
     // Generate overrides
-    Utils.writeFile(
+    let lightdark = darkMode.value ? "dark" : "light";
+    Utils.writeFileSync(
 `@mixin symbolic-icon {
-    -gtk-icon-theme: '${userOptions.icons.symbolicIconTheme}';
+    -gtk-icon-theme: '${userOptions.icons.symbolicIconTheme[lightdark]}';
 }
 `,
         `${GLib.get_user_state_dir()}/ags/scss/_lib_mixins_overrides.scss`)

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

@@ -134,7 +134,10 @@ 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",
+        'symbolicIconTheme': {
+            "dark": "Adwaita",
+            "light": "Adwaita",
+        },
         substitutions: {
             'code-url-handler': "visual-studio-code",
             'Code': "visual-studio-code",