Set opacity of all icons

package.json

@@ -122,6 +122,11 @@
           "default": "#90a4ae",
           "description": "%configuration.folders.color%"
         },
+        "material-icon-theme.opacity": {
+          "type": "string",
+          "default": "1.0",
+          "description": "%configuration.opacity%"
+        },
         "material-icon-theme.hidesExplorerArrows": {
           "type": "boolean",
           "default": false,

package.nls.de.json

@@ -15,5 +15,6 @@
     "configuration.activeIconPack": "Icon Paket auswählen, die bestimme Icons aktivieren.",
     "configuration.folders.theme": "Art der Ordner Icons auswählen.",
     "configuration.folders.color": "Farbe der Ordner Icons verändern.",
-    "configuration.hidesExplorerArrows": "Pfeile vor den Ordnern deaktivieren."
+    "configuration.hidesExplorerArrows": "Pfeile vor den Ordnern deaktivieren.",
+    "configuration.opacity": "Deckkraft aller Icons verändern."
 }

package.nls.json

@@ -15,5 +15,6 @@
     "configuration.activeIconPack": "Select an icon pack that enables specific icons.",
     "configuration.folders.theme": "Set the type for the folder icons.",
     "configuration.folders.color": "Change the color of the folder icons.",
-    "configuration.hidesExplorerArrows": "Hide explorer arrows before folder."
+    "configuration.hidesExplorerArrows": "Hide explorer arrows before folder.",
+    "configuration.opacity": "Change the opacity of all icons."
 }

src/commands/restoreConfig.ts

@@ -8,6 +8,7 @@ export const restoreDefaultConfig = () => {
     helpers.setThemeConfig('folders.theme', defaultOptions.folders.theme, true);
     helpers.setThemeConfig('folders.color', defaultOptions.folders.color, true);
     helpers.setThemeConfig('hidesExplorerArrows', defaultOptions.hidesExplorerArrows, true);
+    helpers.setThemeConfig('opacity', defaultOptions.opacity, true);
     helpers.setThemeConfig('files.associations', defaultOptions.files.associations, true);
     helpers.setThemeConfig('folders.associations', defaultOptions.folders.associations, true);
     helpers.setThemeConfig('languages.associations', defaultOptions.languages.associations, true);

src/extension.ts

@@ -2,7 +2,7 @@
 
 import * as vscode from 'vscode';
 import * as commands from './commands';
-import { detectConfigChanges } from './helpers/change-detection';
+import { detectConfigChanges } from './helpers/changeDetection';
 import { checkThemeStatus } from './helpers/versioning';
 import * as i18n from './i18n';
 import { showStartMessages } from './messages/start';

src/icons/generator/iconOpacity.ts

@@ -0,0 +1,83 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Changes the opacity of all icons in the set.
+ * @param opacity Opacity value
+ */
+export const setIconOpacity = (opacity: string) => {
+    if (!validateOpacityValue(opacity)) {
+        return Promise.reject('Invalid opacity value! Opacity must be a decimal number between 0 and 1!');
+    }
+
+    return new Promise((resolve, reject) => {
+        let iconsPath = path.join(__dirname, '..', '..', '..');
+        const parentFolder = iconsPath.split(path.sep).pop();
+        if (parentFolder === 'out') {
+            iconsPath = path.join(iconsPath, '..');
+        }
+        iconsPath = path.join(iconsPath, 'icons');
+
+        // read all icon files from the icons folder
+        try {
+            fs.readdirSync(iconsPath).forEach(iconFileName => {
+                const svgFilePath = path.join(iconsPath, iconFileName);
+
+                // Read SVG file
+                const svg = fs.readFileSync(svgFilePath, 'utf-8');
+
+                // Get the root element of the SVG file
+                const svgRootElement = getSVGRootElement(svg);
+                if (!svgRootElement) return;
+
+                const updatedRootElement = addOpacityAttribute(svgRootElement, opacity);
+                const updatedSVG = svg.replace(/<svg[^>]*>/, updatedRootElement);
+
+                fs.writeFileSync(svgFilePath, updatedSVG);
+                resolve();
+            });
+        }
+        catch (e) {
+            console.log(e);
+            reject(e);
+        }
+        resolve();
+    });
+};
+
+/**
+ * Validate the opacity value.
+ * @param opacity Opacity value
+ */
+export const validateOpacityValue = (opacity: string) => {
+    const pattern = new RegExp(/^([0]?\.\d+)|(1.0)$/);
+    return pattern.test(opacity);
+};
+
+/**
+ * Get the SVG root element.
+ * @param svg SVG file as string.
+ */
+const getSVGRootElement = (svg: string) => {
+    const result = new RegExp(/<svg[^>]*>/).exec(svg);
+    if (result.length > 0) {
+        return result[0];
+    } else {
+        return undefined;
+    }
+};
+
+/**
+ * Add an opacity attribute to the SVG icon to control the opacity of the icon.
+ * @param svgRoot Root element of the SVG icon.
+ * @param opacity Opacity value.
+ */
+const addOpacityAttribute = (svgRoot: string, opacity: string) => {
+    const pattern = new RegExp(/opacity="[\d.]+"/);
+    // if the opacity attribute already exists
+    if (pattern.test(svgRoot)) {
+        return svgRoot.replace(pattern, `opacity="${opacity}"`);
+    } else {
+        return svgRoot.replace(/^<svg/, `<svg opacity="${opacity}"`);
+    }
+};

src/icons/generator/jsonGenerator.ts

@@ -6,6 +6,7 @@ import { fileIcons } from '../fileIcons';
 import { folderIcons } from '../folderIcons';
 import { languageIcons } from '../languageIcons';
 import { iconJsonName } from './constants';
+import { setIconOpacity } from './iconOpacity';
 import { generateFolderIcons, getFileIconDefinitions, getFolderIconDefinitions, getLanguageIconDefinitions } from './index';
 
 /**
@@ -35,11 +36,16 @@ export const createIconFile = (jsonOptions?: IconJsonOptions): Promise<string> =
             if (err) {
                 reject(err);
             }
+            const promises = [];
             if (options.folders.color) {
-                generateFolderIcons(options.folders.color).catch(e => reject(e)).then(() => {
-                    resolve(iconJsonName);
-                });
+                promises.push(generateFolderIcons(options.folders.color));
             }
+            if (options.opacity) {
+                promises.push(setIconOpacity(options.opacity));
+            }
+            Promise.all(promises).catch(e => reject(e)).then(() => {
+                resolve(iconJsonName);
+            });
         });
     });
 };
@@ -55,6 +61,7 @@ export const getDefaultIconOptions = (): IconJsonOptions => ({
     },
     activeIconPack: 'angular',
     hidesExplorerArrows: false,
+    opacity: '1.0',
     files: { associations: {} },
     languages: { associations: {} },
 });

src/models/icons/iconJsonOptions.ts

@@ -1,6 +1,7 @@
 export interface IconJsonOptions {
     activeIconPack?: string;
     hidesExplorerArrows?: boolean;
+    opacity?: string;
     folders?: {
         theme?: string;
         color?: string;