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/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",