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`)