Small refactor + UX improvements [WIP] (#190)

* chore: small cleanup helper

* chore: adding interfaces for icon variants

* feat: You can now switch between Material Theme icons

* chore: helpers small fix

* chore(helpers): small fix helpers

* refactor: refactoring fixIcons command, ready for new prop autoFix

* refactor: accentsSetter command, ready for autoFix prop

* chore: added new exports file for all commands

* refactor: main theme file, ready for autoFix prop

* chore: added listener also when changing iconTheme

* feat: autoApplyIcons added as option and toggleApplyIcons as command

* chore: added check for autoApplyIcons flag. Removed listen icon change

* feat: Notification shows up when the window needs reload

* chore: Update CTA's

* chore: Make consistent indent guides and add support to editorIndentGuide.activeBackground

Close #188

* chore: fix check on CTA ok

* chore: split up configurationChange and changelog  (added to commands)

* chore: small change settings method

* feat: Now the theme will auto fix if needed on change icons theme

.gulp/index.ts

@@ -2,6 +2,7 @@
 export * from './tasks/icons';
 export * from './tasks/icons-accents';
 export * from './tasks/icons-variants';
+export * from './tasks/icons-variants-json';
 export * from './tasks/themes';
 export * from './tasks/watcher';
 export * from './tasks/changelog-title';

.gulp/tasks/icons-variants-json.ts

@@ -0,0 +1,37 @@
+import * as fs from 'fs';
+import * as gulp from 'gulp';
+
+import {resolve} from 'path';
+import {IDefaultsThemeIconVariant} from './../../extensions/interfaces/idefaults';
+import {getDefaultValues, getVariantIcons} from './../../extensions/helpers/fs';
+import {PATHS} from '../../extensions/consts/paths';
+import {CHARSET} from '../../extensions/consts/files';
+
+/**
+ * For each ThemeIconVariant create a Material-Theme-Icons-{variant}.json
+ * depends on default Material-Theme-Icons.json
+ */
+export default gulp.task('build:icons.variants-json', callback => {
+  try {
+    const variants: IDefaultsThemeIconVariant = getDefaultValues().themeIconVariants;
+    const defaults = fs.readFileSync(resolve(`${PATHS.THEMES}/Material-Theme-Icons.json`), 'utf8');
+    Object.keys(variants).forEach(variantName => {
+      const jsonDefaults = JSON.parse(defaults);
+
+      getVariantIcons().forEach(iconname => {
+        const newIconPath = jsonDefaults.iconDefinitions[iconname].iconPath.replace('.svg', `${variantName}.svg`);
+        jsonDefaults.iconDefinitions[iconname].iconPath = newIconPath;
+
+        fs.writeFileSync(
+          `${PATHS.THEMES}/Material-Theme-Icons-${variantName}.json`,
+          JSON.stringify(jsonDefaults),
+          {encoding: CHARSET}
+        );
+      });
+    });
+  } catch (error) {
+    return callback(error);
+  }
+
+  callback();
+});

extensions/commands/accents-setter/index.ts

@@ -4,16 +4,8 @@ import {IAccentCustomProperty} from './../../interfaces/iaccent-custom-property'
 import {IGenericObject} from './../../interfaces/igeneric-object';
 import {
   updateAccent,
-  isMaterialTheme,
-  isMaterialThemeIcons
 } from './../../helpers/settings';
-import {
-  getCurrentThemeID,
-  getCurrentThemeIconsID,
-  reloadWindow
-} from './../../helpers/vscode';
 import {getDefaultValues} from './../../helpers/fs';
-import {THEME_ICONS} from './../theme-icons/index';
 
 const REGEXP_HEX: RegExp = /^#([0-9A-F]{6}|[0-9A-F]{8})$/i;
 
@@ -62,11 +54,11 @@ const accentsProperties: IGenericObject <IAccentCustomProperty> = {
     alpha: 100,
     value: undefined
   },
-  "editor.findWidgetResizeBorder": {
+  'editor.findWidgetResizeBorder': {
     alpha: 100,
     value: undefined
   },
-  "editorWidget.border": {
+  'editorWidget.border': {
     alpha: 100,
     value: undefined
   }
@@ -101,35 +93,24 @@ const isValidColour = (colour: string | null | undefined): boolean =>
 /**
  * Sets workbench options
  */
-const setWorkbenchOptions = (accentSelected: string | undefined, config: any): void => {
-  vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true).then(() => {
-    const themeID = getCurrentThemeID();
-    const themeIconsID = getCurrentThemeIconsID();
-
-    updateAccent(accentSelected).then(() => {
-      if (isMaterialTheme(themeID) && isMaterialThemeIcons(themeIconsID)) {
-        THEME_ICONS().then(() => reloadWindow());
-      }
-    });
-  }, reason => {
-    vscode.window.showErrorMessage(reason);
-  });
-};
+const setWorkbenchOptions = (accentSelected: string | undefined, config: any): Thenable<string> =>
+  vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true)
+    .then(() => updateAccent(accentSelected),
+    reason => vscode.window.showErrorMessage(reason));
 
 /**
  * VSCode command
  */
-export const THEME_ACCENTS_SETTER = () => {
+export default async (): Promise<boolean> => {
   const themeConfigCommon = getDefaultValues();
-  // shows the quick pick dropdown
-  const options: string[] = Object.keys(themeConfigCommon.accents);
   const purgeColourKey: string = 'Remove accents';
+  const options: string[] = Object.keys(themeConfigCommon.accents).concat(purgeColourKey);
 
-  options.push(purgeColourKey);
+  // shows the quick pick dropdown and wait response
+  const accentSelected = await vscode.window.showQuickPick(options);
 
-  vscode.window.showQuickPick(options).then(accentSelected => {
   if (accentSelected === null || accentSelected === undefined) {
-      return;
+    Promise.resolve(null);
   }
 
   const config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations');
@@ -137,11 +118,12 @@ export const THEME_ACCENTS_SETTER = () => {
   switch (accentSelected) {
     case purgeColourKey:
       assignColorCustomizations(undefined, config);
-        setWorkbenchOptions(undefined, config);
-        break;
+      await setWorkbenchOptions(undefined, config);
+      return Promise.resolve(true);
     default:
       assignColorCustomizations(themeConfigCommon.accents[accentSelected], config);
-        setWorkbenchOptions(accentSelected, config);
+      await setWorkbenchOptions(accentSelected, config);
+      return Promise.resolve(true);
   }
-  });
+
 };

extensions/commands/index.ts

@@ -0,0 +1,4 @@
+export {default as accentsSetter} from './accents-setter';
+export {default as fixIcons} from './theme-icons';
+export {default as toggleApplyIcons} from './toggle-apply-icons';
+export {default as showChangelog} from './show-changelog';

extensions/commands/show-changelog/index.ts

@@ -0,0 +1,28 @@
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+import {PATHS} from './../../consts/paths';
+
+const previewFile = (): void => {
+  const uri = vscode.Uri.file(path.join(PATHS.VSIX_DIR, './CHANGELOG.md'));
+  vscode.commands.executeCommand('markdown.showPreview', uri);
+};
+
+export default (): void => {
+  const extname: string = 'vscode.markdown';
+  const md = vscode.extensions.getExtension<any>(extname);
+
+  if (md === undefined) {
+    console.warn(`Ext not found ${ extname }`);
+    return;
+  }
+
+  if (md.isActive) {
+    return previewFile();
+  }
+
+  md.activate()
+    .then(() => previewFile(),
+    reason => console.warn(reason)
+  );
+};

extensions/commands/theme-icons/index.ts

@@ -6,20 +6,21 @@ import {
   getDefaultValues,
   getThemeIconsByContributeID,
   getThemeIconsContribute,
-  getVariantIcons
+  getIconVariantFromTheme
 } from './../../helpers/fs';
 import {
   isAccent,
-  isMaterialThemeIcons,
-  getCustomSettings
+  getCustomSettings,
+  isMaterialTheme,
+  setCustomSetting
 } from './../../helpers/settings';
-import {getCurrentThemeIconsID, getCurrentThemeID} from './../../helpers/vscode';
+import {getCurrentThemeID, setIconsID, getCurrentThemeIconsID, reloadWindow} from './../../helpers/vscode';
 import {CHARSET} from './../../consts/files';
 import {IPackageJSONThemeIcons} from './../../interfaces/ipackage.json';
 import {IThemeIconsIconPath, IThemeIcons} from './../../interfaces/itheme-icons';
 
-const getIconDefinition = (definitions: any, iconname: string): IThemeIconsIconPath => {
-  return (definitions as any)[iconname];
+const getIconDefinition = (definitions: any, iconName: string): IThemeIconsIconPath => {
+  return (definitions as any)[iconName];
 };
 
 /**
@@ -29,80 +30,73 @@ const replaceIconPathWithAccent = (iconPath: string, accentName: string): string
   return iconPath.replace('.svg', `.accent.${ accentName }.svg`);
 };
 
-const getVariantFromColor = (color: string): string => {
-  switch (true) {
-    case color === undefined || color === 'Material Theme':
-      return 'Default';
-    case color === 'Material Theme High Contrast':
-      return 'Default High Contrast';
-    case color.includes('Material Theme Lighter'):
-      return 'Light';
-    default:
-      return color.replace(/Material Theme /gi, '');
-  }
-};
-
-export const THEME_ICONS = () => {
+/**
+ * Fix icons when flag auto-fix is active and current theme is Material
+ */
+export default async () => {
   const deferred: any = {};
   const promise = new Promise((resolve, reject) => {
     deferred.resolve = resolve;
     deferred.reject = reject;
   });
-  const themeIconsID: string = getCurrentThemeIconsID();
 
-  if (isMaterialThemeIcons(themeIconsID)) {
-    const themeID = getCurrentThemeID();
-    const customSettings = getCustomSettings();
-    const defaults = getDefaultValues();
-    const accentName = customSettings.accent;
-    const variantName: string = getVariantFromColor(themeID);
+  // Current theme id set on VSCode ("label" of the package.json)
+  const themeLabel = getCurrentThemeID();
 
-    const themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID);
-    const theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID);
-    const themepath: string = getAbsolutePath(themeContribute.path);
+  // If this method was called without Material Theme set, just return
+  if (!isMaterialTheme(themeLabel)) {
+    return deferred.resolve();
+  }
 
-    if (isAccent(accentName, defaults)) {
-      const realAccentName = accentName.replace(/\s+/, '-');
-      getAccentableIcons().forEach(iconname => {
-        const distIcon = getIconDefinition(theme.iconDefinitions, iconname);
-        const outIcon = getIconDefinition(defaults.icons.theme.iconDefinitions, iconname);
+  await setCustomSetting('fixIconsRunning', true);
+
+  const DEFAULTS = getDefaultValues();
+  const CUSTOM_SETTINGS = getCustomSettings();
+
+  const materialIconVariantID: string | null = getIconVariantFromTheme(themeLabel);
+  const currentThemeIconsID: string = getCurrentThemeIconsID();
+  const newThemeIconsID = materialIconVariantID ?
+    `eq-material-theme-icons-${materialIconVariantID}` : 'eq-material-theme-icons';
+
+  // Just set the correct Material Theme icons variant if wasn't
+  // Or also change the current icons set to the Material Theme icons variant
+  // (this is intended: this command was called directly or `autoFix` flag was already checked by other code)
+  if (currentThemeIconsID !== newThemeIconsID) {
+    await setIconsID(newThemeIconsID);
+  }
+
+  // package.json iconThemes object for the current icons set
+  const themeIconsContribute: IPackageJSONThemeIcons = getThemeIconsContribute(newThemeIconsID);
+  // Actual json file of the icons theme (eg. Material-Theme-Icons-Darker.json)
+  const theme: IThemeIcons = getThemeIconsByContributeID(newThemeIconsID);
+
+  const newIconPath = (outIcon: IThemeIconsIconPath) => isAccent(CUSTOM_SETTINGS.accent, DEFAULTS) ?
+    replaceIconPathWithAccent(outIcon.iconPath, CUSTOM_SETTINGS.accent.replace(/\s+/, '-')) : outIcon.iconPath;
+
+  getAccentableIcons().forEach(iconName => {
+    const distIcon = getIconDefinition(theme.iconDefinitions, iconName);
+    const outIcon = getIconDefinition(DEFAULTS.icons.theme.iconDefinitions, iconName);
 
     if (typeof distIcon === 'object' && typeof outIcon === 'object') {
-          distIcon.iconPath = replaceIconPathWithAccent(outIcon.iconPath, realAccentName);
+      distIcon.iconPath = newIconPath(outIcon);
     }
   });
 
-    } else {
-      getAccentableIcons().forEach(iconname => {
-        const distIcon = getIconDefinition(theme.iconDefinitions, iconname);
-        const outIcon = getIconDefinition(defaults.icons.theme.iconDefinitions, iconname);
-
-        distIcon.iconPath = outIcon.iconPath;
-      });
-    }
-
-    getVariantIcons().forEach(iconname => {
-      const distIcon = getIconDefinition(theme.iconDefinitions, iconname);
-      const outIcon = getIconDefinition(defaults.icons.theme.iconDefinitions, iconname);
-
-      if (distIcon && outIcon) {
-        distIcon.iconPath = outIcon.iconPath.replace('.svg', `${ variantName }.svg`);
-      }
-    });
-
-    fs.writeFile(themepath, JSON.stringify(theme), {
+  // Path of the icons theme .json
+  const themePath: string = getAbsolutePath(themeIconsContribute.path);
+  fs.writeFile(themePath, JSON.stringify(theme), {
     encoding: CHARSET
-    }, err => {
+  }, async err => {
     if (err) {
       deferred.reject(err);
       return;
     }
 
+    await setCustomSetting('fixIconsRunning', false);
     deferred.resolve();
   });
-  } else {
-    deferred.resolve();
-  }
 
-  return promise;
+  return promise
+    .then(() => reloadWindow())
+    .catch((error: NodeJS.ErrnoException) => console.trace(error));
 };

extensions/commands/toggle-apply-icons/index.ts

@@ -0,0 +1,11 @@
+import * as vscode from 'vscode';
+
+export default async (): Promise<void> => {
+  // shows the quick pick dropdown and wait response
+  const optionSelected = await vscode.window.showQuickPick(['Enable', 'Disable']);
+  const isEnable = optionSelected === 'Enable';
+
+  return Promise.resolve(vscode.workspace
+    .getConfiguration().update('materialTheme.autoApplyIcons', isEnable, true)
+  );
+};

extensions/defaults.json

@@ -145,6 +145,12 @@
       }
     }
   },
+  "themeIconVariants": {
+    "Darker": "eq-material-theme-icons-darker",
+    "Light": "eq-material-theme-icons-light",
+    "Palenight": "eq-material-theme-icons-palenight",
+    "Ocean": "eq-material-theme-icons-ocean"
+  },
   "themeVariants": {
     "Darker": "./themes/Material-Theme-Darker.json",
     "Darker High Contrast": "./themes/Material-Theme-Darker-High-Contrast.json",

extensions/helpers/configuration-change.ts

@@ -0,0 +1,42 @@
+import {
+  ConfigurationChangeEvent
+} from 'vscode';
+import {getCustomSettings, isMaterialThemeIcons, isAutoApplyEnable, isMaterialTheme} from './settings';
+import {getCurrentThemeIconsID, getCurrentThemeID} from './vscode';
+
+import * as ThemeCommands from './../commands';
+import {infoMessage} from './messages';
+
+const icons = () => isAutoApplyEnable() ? ThemeCommands.fixIcons() : infoMessage();
+
+const onIconsChanged = () => {
+  const customSettings = getCustomSettings();
+  if (customSettings.fixIconsRunning) {
+    return;
+  }
+
+  const currentIconsTheme = getCurrentThemeIconsID();
+  if (isMaterialThemeIcons(currentIconsTheme)) {
+    return icons();
+  }
+};
+
+const onThemeChanged = () => {
+  const currentTheme = getCurrentThemeID();
+  if (isMaterialTheme(currentTheme)) {
+    return icons();
+  }
+};
+
+export const onChangeConfiguration = (event: ConfigurationChangeEvent) => {
+  const isColorTheme = event.affectsConfiguration('workbench.colorTheme');
+  const isIconTheme = event.affectsConfiguration('workbench.iconTheme');
+
+  if (isIconTheme) {
+    return onIconsChanged();
+  }
+
+  if (isColorTheme) {
+    return onThemeChanged();
+  }
+};

extensions/helpers/fs.ts

@@ -52,6 +52,15 @@ export function getThemeIconsContribute(ID: string): IPackageJSONThemeIcons {
   return contributes[0] !== undefined ? contributes[0] : null;
 }
 
+/**
+ * Icon variant name from theme name
+ */
+export function getIconVariantFromTheme(theme: string): string {
+  const {themeIconVariants} = getDefaultValues();
+  const found = Object.keys(themeIconVariants).find(variant => theme.includes(variant));
+  return found ? found.toLowerCase() : null;
+}
+
 /**
  * Gets package JSON
  */

extensions/helpers/messages.ts

@@ -0,0 +1,14 @@
+import {
+  window as Window
+} from 'vscode';
+
+import * as ThemeCommands from './../commands';
+
+const INFO_MESSAGE = 'You should reload the window for full activate the Material Theme.';
+const OPTIONS = {ok: 'Reload now', cancel: 'Cancel'};
+
+export const infoMessage = async () => {
+  if (await Window.showInformationMessage(INFO_MESSAGE, OPTIONS.ok, OPTIONS.cancel) === OPTIONS.ok) {
+    ThemeCommands.fixIcons();
+  }
+};

extensions/helpers/settings.ts

@@ -18,11 +18,18 @@ export function getCustomSettings(): IThemeCustomProperties {
   return vscode.workspace.getConfiguration().get<IThemeCustomProperties>('materialTheme', {});
 }
 
+/**
+ * Get autoApplyIcons
+ */
+export function isAutoApplyEnable(): boolean {
+  return vscode.workspace.getConfiguration().get<boolean>('materialTheme.autoApplyIcons', true);
+}
+
 /**
  * Checks if a given string could be an accent
  */
 export function isAccent(accentName: string, defaults: IDefaults): boolean {
-  return Object.keys(defaults.accents).filter(name => name === accentName).length > 0;
+  return Boolean(Object.keys(defaults.accents).find(name => name === accentName));
 }
 
 /**
@@ -30,7 +37,7 @@ export function isAccent(accentName: string, defaults: IDefaults): boolean {
  */
 export function isMaterialTheme(themeName: string): boolean {
   const packageJSON = getPackageJSON();
-  return packageJSON.contributes.themes.filter(contrib => contrib.label === themeName).length > 0;
+  return Boolean(packageJSON.contributes.themes.find(contrib => contrib.label === themeName));
 }
 
 /**
@@ -38,20 +45,20 @@ export function isMaterialTheme(themeName: string): boolean {
  */
 export function isMaterialThemeIcons(themeIconsName: string): boolean {
   const packageJSON = getPackageJSON();
-  return packageJSON.contributes.iconThemes.filter(contribute => contribute.id === themeIconsName).length > 0;
+  return Boolean(packageJSON.contributes.iconThemes.find(contribute => contribute.id === themeIconsName));
 }
 
 /**
  * Sets a custom property in custom settings
  */
-export function setCustomSetting(settingName: string, value: any): Thenable<void> {
-  return vscode.workspace.getConfiguration().update(`materialTheme.${settingName}`, value, true);
+export function setCustomSetting(settingName: string, value: any): Thenable<string> {
+  return vscode.workspace.getConfiguration().update(`materialTheme.${settingName}`, value, true).then(() => settingName);
 }
 
 /**
  * Updates accent name
  */
-export function updateAccent(accentName: string): Thenable<void> {
+export function updateAccent(accentName: string): Thenable<string> {
   const prevAccent = getAccent();
   return setCustomSetting('accentPrevious', prevAccent)
     .then(() => setCustomSetting('accent', accentName));

extensions/helpers/should-show-changelog.ts

@@ -1,15 +1,8 @@
 import * as path from 'path';
-import * as vscode from 'vscode';
 
 import {IDefaults} from './../interfaces/idefaults';
 
 import {getDefaultValues, getPackageJSON, writeFile} from './fs';
-import {PATHS} from './../consts/paths';
-
-const previewFile = (): void => {
-  const uri = vscode.Uri.file(path.join(PATHS.VSIX_DIR, './CHANGELOG.md'));
-  vscode.commands.executeCommand('markdown.showPreview', uri);
-};
 
 const splitVersion = (input: string): {major: number; minor: number; patch: number} => {
   const [major, minor, patch] = input.split('.').map(i => parseInt(i, 10));
@@ -19,26 +12,7 @@ const splitVersion = (input: string): {major: number; minor: number; patch: numb
 const writeDefaults = (defaults: IDefaults) =>
   writeFile(path.join('./extensions/defaults.json'), JSON.stringify(defaults, null, 2));
 
-export const showChangelog = (): void => {
-  const extname: string = 'vscode.markdown';
-  const md = vscode.extensions.getExtension<any>(extname);
-
-  if (md === undefined) {
-    console.warn(`Ext not found ${ extname }`);
-    return;
-  }
-
-  if (md.isActive) {
-    return previewFile();
-  }
-
-  md.activate()
-    .then(() => previewFile(),
-    reason => console.warn(reason)
-  );
-};
-
-export const shouldShowChangelog = (): boolean => {
+export default (): boolean => {
   const defaults = getDefaultValues();
   const packageJSON = getPackageJSON();
 

extensions/interfaces/idefaults.ts

@@ -4,6 +4,7 @@ export interface IDefaults {
   changelog: IChangelog;
   icons: IDefaultsThemeIcons;
   themeVariants: IDefaultsThemeVariant;
+  themeIconVariants: IDefaultsThemeIconVariant;
   themeVariantsColours: IDefaultsThemeVariant;
   themeVariantsUITheme: IDefaultsThemeVariant;
   variantsIcons: string[];
@@ -54,4 +55,14 @@ export interface IDefaultsThemeVariant {
   Light: string;
   LightHighContrast: string;
   PalenightHighContrast: string;
+  Ocean: string;
+  OceanHighContrast: string;
+}
+
+export interface IDefaultsThemeIconVariant {
+  [index: string]: string;
+  Darker: string;
+  Light: string;
+  Palenight: string;
+  Ocean: string;
 }

extensions/interfaces/itheme-custom-properties.ts

@@ -1,4 +1,6 @@
 export interface IThemeCustomProperties {
   accent?: string;
   accentPrevious?: string;
+  autoApplyIcons?: boolean;
+  fixIconsRunning?: boolean;
 }

extensions/material.theme.config.ts

@@ -3,28 +3,17 @@ import {
   commands as Commands
 } from 'vscode';
 
-import {THEME_ACCENTS_SETTER} from './commands/accents-setter/index';
-import {THEME_ICONS} from './commands/theme-icons/index';
-import {shouldShowChangelog, showChangelog} from './helpers/changelog';
-import {reloadWindow, getCurrentThemeID, setIconsID} from './helpers/vscode';
-
-const isMaterialTheme = (currentTheme: string): boolean =>
-  currentTheme.includes('Material Theme');
+import * as ThemeCommands from './commands';
+import {isAutoApplyEnable} from './helpers/settings';
+import {onChangeConfiguration} from './helpers/configuration-change';
+import {infoMessage} from './helpers/messages';
+import shouldShowChangelog from './helpers/should-show-changelog';
 
 export function activate() {
   const config = Workspace.getConfiguration();
 
   // Listen on set theme: when the theme is Material Theme, just adjust icon and accent.
-  Workspace.onDidChangeConfiguration(event => {
-    const isColorTheme = event.affectsConfiguration('workbench.colorTheme');
-    const currentTheme = getCurrentThemeID();
-    // tslint:disable-next-line:early-exit
-    if (isColorTheme && isMaterialTheme(currentTheme)) {
-      setIconsID('eq-material-theme-icons')
-        .then(() => THEME_ICONS().catch(error => console.trace(error)))
-        .then(() => reloadWindow());
-    }
-  });
+  Workspace.onDidChangeConfiguration(onChangeConfiguration);
 
   // Delete old configuration, must remove with next major release
   if (config.has('materialTheme.cache.workbench')) {
@@ -32,15 +21,18 @@ export function activate() {
   }
 
   if (shouldShowChangelog()) {
-    showChangelog();
+    ThemeCommands.showChangelog();
   }
 
   // Registering commands
-  Commands.registerCommand('materialTheme.setAccent', () => THEME_ACCENTS_SETTER());
-  Commands.registerCommand('materialTheme.fixIcons', () =>
-    THEME_ICONS()
-      .then(() => reloadWindow())
-      .catch(err => console.trace(err))
-  );
-  Commands.registerCommand('materialTheme.showChangelog', () => showChangelog());
+  Commands.registerCommand('materialTheme.setAccent', async () => {
+    const wasSet = await ThemeCommands.accentsSetter();
+
+    if (wasSet) {
+      return isAutoApplyEnable() ? ThemeCommands.fixIcons() : infoMessage();
+    }
+  });
+  Commands.registerCommand('materialTheme.fixIcons', () => ThemeCommands.fixIcons());
+  Commands.registerCommand('materialTheme.toggleApplyIcons', () => ThemeCommands.toggleApplyIcons());
+  Commands.registerCommand('materialTheme.showChangelog', () => ThemeCommands.showChangelog());
 }

package.json

@@ -28,7 +28,7 @@
     }
   },
   "scripts": {
-    "build": "yarn build-icons && yarn build-themes && yarn build-icons-accents && yarn build-icons-variants",
+    "build": "yarn build-icons && yarn build-themes && yarn build-icons-accents && yarn build-icons-variants && yarn build-icons-variants-json",
     "minimize-icons": "mkdir icons && svgo -f src/icons/svgs -o icons/",
     "minimize-json": "json-minify themes/.material-theme-icons.tmp > themes/Material-Theme-Icons.json && yarn remove-icons-tmp",
     "remove-icons": "rimraf icons && rimraf themes/Material-Theme-Icons.json",
@@ -36,6 +36,7 @@
     "build-icons": "yarn remove-icons && yarn minimize-icons && yarn gulp build:icons && yarn minimize-json",
     "build-icons-accents": "yarn gulp build:icons.accents",
     "build-icons-variants": "yarn gulp build:icons.variants",
+    "build-icons-variants-json": "yarn gulp build:icons.variants-json",
     "build-themes": "yarn gulp build:themes",
     "build-ts": "tsc -p ./tsconfig.json",
     "test": "tslint **.ts",
@@ -52,6 +53,11 @@
   "main": "./extensions/material.theme.config.js",
   "contributes": {
     "commands": [
+      {
+        "command": "materialTheme.toggleApplyIcons",
+        "title": "Toggle icons auto-apply ",
+        "category": "🎨 Material Theme"
+      },
       {
         "command": "materialTheme.setAccent",
         "title": "Set accent color",
@@ -79,6 +85,16 @@
         "materialTheme.accentPrevious": {
           "type": "string",
           "description": "Previous accent color selected"
+        },
+        "materialTheme.autoApplyIcons": {
+          "type": "boolean",
+          "description": "Enable/disable auto-apply of Material Theme icons",
+          "default": true
+        },
+        "materialTheme.fixIconsRunning": {
+          "type": "boolean",
+          "description": "For checking if the command is currently acting",
+          "default": false
         }
       }
     },
@@ -139,6 +155,26 @@
         "id": "eq-material-theme-icons",
         "label": "Material Theme Icons",
         "path": "./themes/Material-Theme-Icons.json"
+      },
+      {
+        "id": "eq-material-theme-icons-darker",
+        "label": "Material Theme Icons Darker",
+        "path": "./themes/Material-Theme-Icons-Darker.json"
+      },
+      {
+        "id": "eq-material-theme-icons-palenight",
+        "label": "Material Theme Icons Palenight",
+        "path": "./themes/Material-Theme-Icons-Palenight.json"
+      },
+      {
+        "id": "eq-material-theme-icons-ocean",
+        "label": "Material Theme Icons Ocean",
+        "path": "./themes/Material-Theme-Icons-Ocean.json"
+      },
+      {
+        "id": "eq-material-theme-icons-light",
+        "label": "Material Theme Icons Light",
+        "path": "./themes/Material-Theme-Icons-Light.json"
       }
     ]
   },

src/themes/settings/specific/darker-hc.json

@@ -13,7 +13,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#EEFFFF",
     "focusBorder": "#FFFFFF",
-    "guides": "#42424270",
+    "guides": "#424242",
     "lineNumbers": "#424242",
     "invisibles": "#65737E",
     "lineHighlight": "#000000",

src/themes/settings/specific/darker.json

@@ -11,7 +11,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#EEFFFF",
     "focusBorder": "#FFFFFF",
-    "guides": "#42424270",
+    "guides": "#424242",
     "lineNumbers": "#424242",
     "invisibles": "#65737E",
     "lineHighlight": "#000000",

src/themes/settings/specific/default-hc.json

@@ -13,7 +13,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#EEFFFF",
     "focusBorder": "#FFFFFF",
-    "guides": "#37474F80",
+    "guides": "#37474F",
     "lineNumbers": "#37474F",
     "invisibles": "#65737E",
     "lineHighlight": "#000000",

src/themes/settings/specific/default.json

@@ -11,7 +11,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#EEFFFF",
     "focusBorder": "#FFFFFF",
-    "guides": "#37474F80",
+    "guides": "#37474F",
     "lineNumbers": "#37474F",
     "invisibles": "#65737E",
     "lineHighlight": "#000000",

src/themes/settings/specific/lighter-hc.json

@@ -13,7 +13,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#90A4AE",
     "focusBorder": "#FFFFFF",
-    "guides": "#B0BEC570",
+    "guides": "#B0BEC5",
     "lineNumbers": "#CFD8DC",
     "invisibles": "#E7EAEC",
     "lineHighlight": "#CCD7DA",

src/themes/settings/specific/lighter.json

@@ -11,7 +11,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#90A4AE",
     "focusBorder": "#FFFFFF",
-    "guides": "#B0BEC570",
+    "guides": "#B0BEC5",
     "lineNumbers": "#CFD8DC",
     "invisibles": "#E7EAEC",
     "lineHighlight": "#CCD7DA",

src/themes/settings/specific/ocean-hc.json

@@ -11,7 +11,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#8F93A2",
     "focusBorder": "#FFFFFF",
-    "guides": "#3B3F5150",
+    "guides": "#3B3F51",
     "lineNumbers": "#3B3F5180",
     "invisibles": "#80869E50",
     "lineHighlight": "#000000",

src/themes/settings/specific/ocean.json

@@ -11,7 +11,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#8F93A2",
     "focusBorder": "#FFFFFF",
-    "guides": "#3B3F5150",
+    "guides": "#3B3F51",
     "lineNumbers": "#3B3F5180",
     "invisibles": "#80869E50",
     "lineHighlight": "#000000",

src/themes/settings/specific/palenight-hc.json

@@ -13,7 +13,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#A6ACCD",
     "focusBorder": "#FFFFFF",
-    "guides": "#4E557980",
+    "guides": "#4E5579",
     "lineNumbers": "#3A3F58",
     "invisibles": "#4E5579",
     "lineHighlight": "#000000",

src/themes/settings/specific/palenight.json

@@ -11,7 +11,7 @@
     "findHighlight": "#FFCC00",
     "foreground": "#A6ACCD",
     "focusBorder": "#FFFFFF",
-    "guides": "#4E557980",
+    "guides": "#4E5579",
     "lineNumbers": "#3A3F58",
     "invisibles": "#4E5579",
     "lineHighlight": "#000000",

src/themes/theme-template-color-theme.json

@@ -706,7 +706,8 @@
     "editorOverviewRuler.border": "{{variant.scheme.background}}",
     "editorHoverWidget.background": "{{variant.scheme.background}}",
     "editorHoverWidget.border": "{{variant.scheme.inputBorder}}",
-    "editorIndentGuide.background": "{{variant.scheme.guides}}",
+    "editorIndentGuide.background": "{{variant.scheme.guides}}70",
+    "editorIndentGuide.activeBackground": "{{variant.scheme.guides}}",
     "editorGroupHeader.tabsBackground": "{{variant.scheme.background}}",
     "editorGroup.border": "{{variant.scheme.shadow}}",
     "editorGutter.modifiedBackground": "{{variant.scheme.base.blue}}60",