chore: Adds theme variants command to "Material Theme Settings"

.gulp/tasks/icons-variants.ts

@@ -3,19 +3,15 @@ import * as gulp from 'gulp';
 import * as path from 'path';
 
 import { CHARSET } from "../../extensions/consts/files";
-import { IGenericObject } from "../../extensions/interfaces/igeneric-object";
 import { IPackageJSON } from "../../extensions/interfaces/ipackage.json";
 import { IThemeIconsVariants } from "../interfaces/itheme-icons-variants";
 import PATHS from '../../extensions/consts/paths'
+import { getDefaultValues } from "../../extensions/helpers/fs";
+import { IDefaultsThemeVariantColours } from "../../extensions/interfaces/idefaults";
 
 const PACKAGE_JSON: IPackageJSON = require(path.join(process.cwd(), './package.json'));
 
-let variants: IGenericObject<string> = {
+let variants: IDefaultsThemeVariantColours = getDefaultValues().themeVariantsColours;
-  Darker: '#424242',
-  Default: '#4A616C',
-  Light: '#90A4AE',
-  Palenight: '#4E5579'
-}
 
 function writeIconVariant(filepath: string, destpath: string, colour: string): void {
   let regexp = new RegExp('.st0\{fill:(#[a-zA-Z0-9]{3,6})')
@@ -37,14 +33,15 @@ export default gulp.task('build:icons.variants', callback => {
         let basepath: string = path.join(process.cwd(), contribute.path);
         let basetheme: IThemeIconsVariants = require(basepath);
         let theme: IThemeIconsVariants = JSON.parse(JSON.stringify(basetheme));
+        let variant = variants[variantName];
 
         theme.iconDefinitions._folder_dark.iconPath = theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
         theme.iconDefinitions._file_folder.iconPath = theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
         theme.iconDefinitions["_file_folder-build"].iconPath = theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
 
-        writeIconVariant(basetheme.iconDefinitions._folder_dark.iconPath, theme.iconDefinitions._folder_dark.iconPath, variants[variantName]);
+        writeIconVariant(basetheme.iconDefinitions._folder_dark.iconPath, theme.iconDefinitions._folder_dark.iconPath, variant);
-        writeIconVariant(basetheme.iconDefinitions._file_folder.iconPath, theme.iconDefinitions._file_folder.iconPath, variants[variantName]);
+        writeIconVariant(basetheme.iconDefinitions._file_folder.iconPath, theme.iconDefinitions._file_folder.iconPath, variant);
-        writeIconVariant(basetheme.iconDefinitions["_file_folder-build"].iconPath, theme.iconDefinitions["_file_folder-build"].iconPath, variants[variantName]);
+        writeIconVariant(basetheme.iconDefinitions["_file_folder-build"].iconPath, theme.iconDefinitions["_file_folder-build"].iconPath, variant);
       });
     });
 

extensions/commands/accents-setter/index.ts

@@ -3,7 +3,9 @@ import * as vscode from 'vscode';
 import {IAccentCustomProperty} from '../../interfaces/iaccent-custom-property';
 import { IDefaults } from "../../interfaces/idefaults";
 import {IGenericObject} from '../../interfaces/igeneric-object';
-import { updateAccent } from "../../helpers/settings";
+import { updateAccent, isMaterialTheme, isMaterialThemeIcons } from "../../helpers/settings";
+import { getCurrentThemeID, getCurrentThemeIconsID, askForWindowReload } from "../../helpers/vscode";
+import { THEME_ICONS } from "../theme-icons/index";
 
 const REGEXP_HEX: RegExp = /^#([0-9A-F]{6}|[0-9A-F]{8})$/i;
 
@@ -90,10 +92,14 @@ function isValidColour(colour: string | null | undefined): boolean {
  */
 function setWorkbenchOptions(accentSelected: string | undefined, config: any): void {
   vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true).then(() => {
-    // let message: string = accentSelected !== undefined ? `${ accentSelected } set` : `Accents removed`;
+    let themeID = getCurrentThemeID()
+    let themeIconsID = getCurrentThemeIconsID()
+
     updateAccent(accentSelected);
-    // vscode.window.showInformationMessage(message).then(() => {
+
-    // });
+    if (isMaterialTheme(themeID) && isMaterialThemeIcons(themeIconsID)) {
+      THEME_ICONS().then(() => askForWindowReload());
+    }
   }, reason => {
     vscode.window.showErrorMessage(reason);
   });
@@ -105,10 +111,8 @@ function setWorkbenchOptions(accentSelected: string | undefined, config: any): v
 export const THEME_ACCENTS_SETTER = () => {
   // shows the quick pick dropdown
   let options: string[] = Object.keys(themeConfigCommon.accents);
-  // let customColourKey: string = 'Custom colour';
   let purgeColourKey: string = 'Remove accents';
 
-  // options.push(customColourKey);
   options.push(purgeColourKey);
 
   vscode.window.showQuickPick(options).then(accentSelected => {
@@ -117,19 +121,6 @@ export const THEME_ACCENTS_SETTER = () => {
     let config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations');
 
     switch(accentSelected) {
-      // case customColourKey:
-      //   vscode.window.showInputBox().then(colourCode => {
-      //     if (colourCode === null || colourCode === undefined) return;
-
-      //     if (colourCode && !isValidColour(colourCode)) {
-      //       vscode.window.showWarningMessage('Invalid colour set, aborting.');
-      //       return;
-      //     }
-
-      //     assignColorCustomizations(colourCode, config);
-      //     setWorkbenchOptions(accentSelected, config);
-      //   });
-      // break;
       case purgeColourKey:
         assignColorCustomizations(undefined, config);
         setWorkbenchOptions(undefined, config);
@@ -137,7 +128,6 @@ export const THEME_ACCENTS_SETTER = () => {
       default:
         assignColorCustomizations(themeConfigCommon.accents[accentSelected], config);
         setWorkbenchOptions(accentSelected, config);
-        // assignIconTheme(accentSelected);
       break;
     }
   });

extensions/commands/theme-icons/index.ts

@@ -1,63 +1,55 @@
 import * as fs from 'fs';
-import * as vscode from 'vscode';
 
 import { getAbsolutePath, getDefaultValues, getThemeIconsByContributeID, getThemeIconsContribute } from "../../helpers/fs";
-import { getCurrentThemeID, getCurrentThemeIconsID, reloadWindow } from "../../helpers/vscode";
+import { getCurrentThemeIconsID } from "../../helpers/vscode";
-import { getCustomSettings, isAccent, shouldReloadWindow } from "../../helpers/settings";
+import { getCustomSettings, isAccent, isMaterialThemeIcons } from "../../helpers/settings";
 
 import { CHARSET } from "../../consts/files";
 import { IPackageJSONThemeIcons } from "../../interfaces/ipackage.json";
 import { IThemeIcons } from "../../interfaces/itheme-icons";
 
-export const THEME_CHANGE_LISTENER = () => {
+export const THEME_ICONS = () => {
-  vscode.workspace.onDidChangeConfiguration(() => {
+  let deferred: any = {};
-    let themeID: string = getCurrentThemeID();
+  let promise = new Promise((resolve, reject) => {
-    let themeIconsID: string = getCurrentThemeIconsID();
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+  let themeIconsID: string = getCurrentThemeIconsID();
 
-    if (themeIconsID && /material-theme/i.test(themeIconsID)) {
+  if (isMaterialThemeIcons(themeIconsID)) {
-      let customSettings = getCustomSettings();
+    let customSettings = getCustomSettings();
-      let defaults = getDefaultValues();
+    let defaults = getDefaultValues();
-      let accentName = customSettings.accent;
+    let accentName = customSettings.accent;
-      let variantNames: string[] = themeID.split('Material Theme');
+    let variantName: string = customSettings.themeColours === undefined ? '' : customSettings.themeColours;
-      let variantName: string = variantNames[1] === undefined ? '' : variantNames[1].trim();
+    let themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID);
-      let themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID);
+    let theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID);
-      let theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID);
+    let themepath: string = getAbsolutePath(themeContribute.path);
-      let themepath: string = getAbsolutePath(themeContribute.path);
 
-      if (isAccent(accentName, defaults)) {
+    if (isAccent(accentName, defaults)) {
-        let _accentName = accentName.replace(/\s+/, '-');
+      let _accentName = accentName.replace(/\s+/, '-');
-        theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
+      theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
-        theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
+      theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
-      } else {
+    } else {
-        theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath;
+      theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath;
-        theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath;
+      theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath;
+    }
+
+    theme.iconDefinitions._folder_dark.iconPath = defaults.icons.theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
+    theme.iconDefinitions._file_folder.iconPath = defaults.icons.theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
+    theme.iconDefinitions._folder_dark_build.iconPath = defaults.icons.theme.iconDefinitions._folder_dark_build.iconPath.replace('.svg', `${ variantName }.svg`);
+    theme.iconDefinitions["_file_folder-build"].iconPath = defaults.icons.theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
+
+    fs.writeFile(themepath, JSON.stringify(theme), { encoding: CHARSET }, (error) => {
+      if (error) {
+        deferred.reject(error);
+        return;
       }
 
-      theme.iconDefinitions._folder_dark.iconPath = defaults.icons.theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
+      deferred.resolve();
-      theme.iconDefinitions._file_folder.iconPath = defaults.icons.theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
+    });
-      theme.iconDefinitions._folder_dark_build.iconPath = defaults.icons.theme.iconDefinitions._folder_dark_build.iconPath.replace('.svg', `${ variantName }.svg`);
+  } else {
-      theme.iconDefinitions["_file_folder-build"].iconPath = defaults.icons.theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
+    deferred.reject();
+  }
 
-      fs.writeFile(themepath, JSON.stringify(theme), { encoding: CHARSET }, (error) => {
+  return promise;
-        if (error) {
-          console.trace(error);
-          return;
-        }
-
-        const PROMPT_MESSAGE: string = 'Material Theme requires VS Code reload in order to display icons correctly.';
-        const PROMPT_MESSAGE_CONFIRM: string = 'Ok, reload';
-        const PROMPT_MESSAGE_CANCEL: string = 'I will do it later';
-
-        if (shouldReloadWindow(themeID, themeIconsID)) {
-          vscode.window.showInformationMessage(PROMPT_MESSAGE, PROMPT_MESSAGE_CONFIRM, PROMPT_MESSAGE_CANCEL).then((response) => {
-            if (response === PROMPT_MESSAGE_CONFIRM) {
-              reloadWindow();
-            }
-          }, (error) => {
-            console.log(error);
-          });
-        }
-      });
-    }
-  });
 }

extensions/commands/theme-variant/index.ts

@@ -0,0 +1,37 @@
+import * as vscode from 'vscode';
+import { getDefaultValues, getPackageJSON, getAbsolutePath } from "../../helpers/fs";
+import { setCustomSettings, getCustomSettings } from "../../helpers/settings";
+import { THEME_ICONS } from "../theme-icons/index";
+import * as fs from "fs";
+import { CHARSET } from "../../consts/files";
+import { reloadWindow } from "../../helpers/vscode";
+
+export const THEME_VARIANT = () => {
+  let defaults = getDefaultValues();
+  let options: string[] = Object.keys(defaults.themeVariants);
+  let packageJSON = getPackageJSON();
+
+  options = options.filter(i => i !== packageJSON.contributes.themes[0].path);
+
+  vscode.window.showQuickPick(options).then((response: string) => {
+    let customSettings = getCustomSettings();
+    let themepath: string = defaults.themeVariants[response];
+    let themeUITheme: string = defaults.themeVariantsUITheme[response];
+
+    customSettings.themeColours = response;
+
+    packageJSON.contributes.themes[0].path = themepath;
+    packageJSON.contributes.themes[0].uiTheme = themeUITheme;
+
+    fs.writeFile(getAbsolutePath('./package.json'), JSON.stringify(packageJSON, null, 2), { encoding: CHARSET }, (error) => {
+      if (error) {
+        console.trace(error);
+        return;
+      }
+
+      setCustomSettings(customSettings);
+
+      THEME_ICONS().then(() => reloadWindow()).catch(error => console.trace(error));
+    });
+  });
+}

extensions/defaults.json

@@ -42,9 +42,21 @@
     }
   },
   "themeVariants": {
+    "Darker": "./themes/Material-Theme-Darker.json",
+    "Default": "./themes/Material-Theme-Default.json",
+    "Light": "./themes/Material-Theme-Lighter.json",
+    "Palenight": "./themes/Material-Theme-Palenight.json"
+  },
+  "themeVariantsColours": {
     "Darker": "#424242",
     "Default": "#4A616C",
     "Light": "#90A4AE",
     "Palenight": "#4E5579"
+  },
+  "themeVariantsUITheme": {
+    "Darker": "vs-dark",
+    "Default": "vs-dark",
+    "Light": "vs",
+    "Palenight": "vs-dark"
   }
 }

extensions/helpers/settings.ts

@@ -96,7 +96,7 @@ export function shouldReloadWindow(themeColour: string, themeIcons: string): boo
 
   let customSettings = getCustomSettings();
 
-  return customSettings.themeColours !== themeColour || customSettings.themeIcons !== themeIcons || customSettings.accent !== customSettings.accentPrevious;
+  return customSettings.accent !== customSettings.accentPrevious;
 }
 
 /**
@@ -105,7 +105,7 @@ export function shouldReloadWindow(themeColour: string, themeIcons: string): boo
  * @param {string} accentName
  */
 export function updateAccent(accentName: string): Thenable<void> {
-  let config: IThemeCustomProperties = {};
+  let config: IThemeCustomProperties = getCustomSettings();
   let prevaccent = getAccent();
 
   if (prevaccent !== undefined && prevaccent !== accentName) {

extensions/helpers/vscode.ts

@@ -1,5 +1,20 @@
 import * as vscode from 'vscode'
 
+
+export function askForWindowReload(): Thenable<void> {
+  const PROMPT_MESSAGE: string = 'Material Theme requires VS Code reload in order to display icons correctly.';
+  const PROMPT_MESSAGE_CONFIRM: string = 'Ok, reload';
+  const PROMPT_MESSAGE_CANCEL: string = 'I will do it later';
+
+  return vscode.window.showInformationMessage(PROMPT_MESSAGE, PROMPT_MESSAGE_CONFIRM, PROMPT_MESSAGE_CANCEL).then((response) => {
+    if (response === PROMPT_MESSAGE_CONFIRM) {
+      reloadWindow();
+    }
+  }, (error) => {
+    console.log(error);
+  });
+}
+
 /**
  * Gets your current theme ID
  * @export

extensions/interfaces/idefaults.ts

@@ -2,6 +2,8 @@ export interface IDefaults {
   accents: IAccents;
   icons: IDefaultsThemeIcons;
   themeVariants: IDefaultsThemeVariant;
+  themeVariantsColours: IDefaultsThemeVariantColours;
+  themeVariantsUITheme: IDefaultsThemeVariantUITheme;
 }
 
 export interface IAccents {
@@ -35,8 +37,17 @@ export interface IDefaultsThemeIcons {
 }
 
 export interface IDefaultsThemeVariant {
+  [index: string]: string;
   Darker: string;
   Default: string;
   Light: string;
   Palenight: string;
+}
+
+export interface IDefaultsThemeVariantColours extends IDefaultsThemeVariant {
+
+}
+
+export interface IDefaultsThemeVariantUITheme extends IDefaultsThemeVariant {
+
 }

extensions/material.theme.config.ts

@@ -2,15 +2,16 @@ import * as vscode from 'vscode';
 
 import { IGenericObject } from "./interfaces/igeneric-object";
 import { THEME_ACCENTS_SETTER } from "./commands/accents-setter/index";
-import { THEME_CHANGE_LISTENER } from "./commands/theme-icons/index";
+import { THEME_VARIANT } from "./commands/theme-variant/index";
 
 enum Commands {
   ACCENTS,
-  COLOR_THEME
+  COLOUR_VARIANT
 }
 
 const OPTIONS: IGenericObject<number> = {
-  'Change accent color': Commands.ACCENTS
+  'Change accent color': Commands.ACCENTS,
+  'Change color variant': Commands.COLOUR_VARIANT
 }
 
 export function activate(context: vscode.ExtensionContext) {
@@ -23,11 +24,12 @@ export function activate(context: vscode.ExtensionContext) {
         case Commands.ACCENTS:
           THEME_ACCENTS_SETTER();
         break;
+        case Commands.COLOUR_VARIANT:
+          THEME_VARIANT();
+        break;
       }
     });
   });
 
-  THEME_CHANGE_LISTENER();
-
   context.subscriptions.push(command);
 }

package.json

@@ -66,22 +66,7 @@
       {
         "label": "Material Theme",
         "uiTheme": "vs-dark",
-        "path": "./themes/Material-Theme-Default.json"
-      },
-      {
-        "label": "Material Theme Darker",
-        "uiTheme": "vs-dark",
         "path": "./themes/Material-Theme-Darker.json"
-      },
-      {
-        "label": "Material Theme Palenight",
-        "uiTheme": "vs-dark",
-        "path": "./themes/Material-Theme-Palenight.json"
-      },
-      {
-        "label": "Material Theme Lighter",
-        "uiTheme": "vs",
-        "path": "./themes/Material-Theme-Lighter.json"
       }
     ],
     "iconThemes": [
@@ -131,4 +116,4 @@
     "yamljs": "0.3.0",
     "yargs": "8.0.2"
   }
-}
+}