feat: Add "Change File Color" functionality (#1916)

* Change File Color functionality • Acts identically to changing the folder color, but applies to the default file icon instead • Remove & ignore "file.svg", as it's now autobuilt • Use grey as default color instead of blue, as that was commonly recommended and changing back to blue would now be painless * Adjust translations * Add typst file icon (#1917) * feat: add deno icon (#1896) Co-authored-by: Philipp Kief <philipp.kief@gmx.de> * feat: add C/C++ resource icon (#1897) * .rc icon & file extension * Update c icon colors --------- Co-authored-by: Philipp Kief <philipp.kief@gmx.de> --------- Co-authored-by: Philipp Kief <philipp.kief@gmx.de> Co-authored-by: Luke <64204135+fus1ondev@users.noreply.github.com>
PKief · Apr 5, 2023 · 4c73696 · 4c73696
1 parent 4858e1d
commit 4c73696
Show file tree

Hide file tree

Showing 29 changed files with 233 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,10 +6,11 @@ node_modules
 .vscode-test/**
 *.vsix
 
+icons/file.svg
 icons/folder.svg
 icons/folder-open.svg
 icons/folder-root.svg
 icons/folder-root-open.svg
 
 src/scripts/preview/*.html
-src/scripts/contributors/*.html
+src/scripts/contributors/*.html
diff --git a/README.md b/README.md
@@ -30,16 +30,17 @@
 
 <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/folderIcons.png" alt="folder icons">
 
-#### Customize folder color
+#### Customize file & folder color
 
-You can change the color of the default folder icon using the command palette:
+You can change the color of the default file and folder icons using the command palette:
 
 <img src="https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/set-folder-color.gif" alt="custom folder colors">
 
 or via user settings:
 
 ```json
 "material-icon-theme.folders.color": "#ef5350",
+"material-icon-theme.files.color": "#42a5f5",
 ```
 
 #### Folder themes
@@ -170,6 +171,7 @@ Press `Ctrl-Shift-P` to open the command palette and type `Material Icons`.
 | Command                           | Description                                                                         |
 | --------------------------------- | ----------------------------------------------------------------------------------- |
 | **Activate Icon Theme**           | Activate the icon theme.                                                            |
+| **Change File Color**             | Change the color of the file icons.                                                 |
 | **Change Folder Color**           | Change the color of the folder icons.                                               |
 | **Change Folder Theme**           | Change the design of the folder icons.                                              |
 | **Change Opacity**                | Change the opacity of the icons.                                                    |

diff --git a/icons/file.svg b/icons/file.svg
diff --git a/package.json b/package.json
@@ -107,6 +107,11 @@
         "title": "%command.changeFolderColor%",
         "enablement": "!isWeb"
       },
+      {
+        "command": "material-icon-theme.changeFileColor",
+        "title": "%command.changeFileColor%",
+        "enablement": "!isWeb"
+      },
       {
         "command": "material-icon-theme.restoreDefaultConfig",
         "title": "%command.restoreDefaultConfig%",
@@ -198,6 +203,12 @@
           "pattern": "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
           "description": "%configuration.folders.color%"
         },
+        "material-icon-theme.files.color": {
+          "type": "string",
+          "default": "#90a4ae",
+          "pattern": "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
+          "description": "%configuration.files.color%"
+        },
         "material-icon-theme.opacity": {
           "type": "number",
           "default": 1,

diff --git a/package.nls.de.json b/package.nls.de.json
@@ -3,6 +3,7 @@
   "command.toggleIconPacks": "Material Icons: Icon Packs konfigurieren",
   "command.changeFolderTheme": "Material Icons: Ordner Thema auswählen",
   "command.changeFolderColor": "Material Icons: Ordner Farbe ändern",
+  "command.changeFileColor": "Material Icons: Datei Farbe ändern",
   "command.restoreDefaultConfig": "Material Icons: Standard Einstellungen wiederherstellen",
   "command.toggleExplorerArrows": "Material Icons: Explorer Pfeilsymbole umschalten",
   "command.changeOpacity": "Material Icons: Deckkraft verändern",
@@ -26,6 +27,7 @@
   "configuration.folders.theme.classic": "Klassische Ordner Icons auswählen.",
   "configuration.folders.theme.none": "Keine Ordner Icons.",
   "configuration.folders.color": "Farbe der Ordner Icons verändern.",
+  "configuration.files.color": "Farbe der Datei Icons verändern.",
   "configuration.hidesExplorerArrows": "Pfeile vor den Ordnern deaktivieren.",
   "configuration.opacity": "Deckkraft der Icons anpassen.",
   "configuration.saturation": "Sättigung der Icons anpassen."

diff --git a/package.nls.json b/package.nls.json
@@ -3,6 +3,7 @@
   "command.toggleIconPacks": "Material Icons: Configure Icon Packs",
   "command.changeFolderTheme": "Material Icons: Change Folder Theme",
   "command.changeFolderColor": "Material Icons: Change Folder Color",
+  "command.changeFileColor": "Material Icons: Change File Color",
   "command.restoreDefaultConfig": "Material Icons: Restore Default Configuration",
   "command.toggleExplorerArrows": "Material Icons: Toggle Explorer Arrows",
   "command.changeOpacity": "Material Icons: Change Opacity",
@@ -26,6 +27,7 @@
   "configuration.folders.theme.classic": "Select classic folder icons.",
   "configuration.folders.theme.none": "No folder icons.",
   "configuration.folders.color": "Change the color of the folder icons.",
+  "configuration.files.color": "Change the color of the file icons.",
   "configuration.hidesExplorerArrows": "Hide explorer arrows before folder.",
   "configuration.opacity": "Change the opacity of the icons.",
   "configuration.saturation": "Change the saturation of the icons."

diff --git a/src/commands/fileColor.ts b/src/commands/fileColor.ts
@@ -0,0 +1,96 @@
+import { QuickPickItem, window as codeWindow } from 'vscode';
+import { getMaterialIconsJSON, setThemeConfig } from '../helpers';
+import { translate } from '../i18n';
+import { getDefaultIconOptions, validateHEXColorCode } from '../icons';
+
+interface FileColor {
+  label: string;
+  hex: string;
+}
+
+const iconPalette: FileColor[] = [
+  { label: 'Grey (Default)', hex: '#90a4ae' },
+  { label: 'Blue', hex: '#42a5f5' },
+  { label: 'Green', hex: '#7CB342' },
+  { label: 'Teal', hex: '#26A69A' },
+  { label: 'Red', hex: '#EF5350' },
+  { label: 'Orange', hex: '#FF7043' },
+  { label: 'Yellow', hex: '#FDD835' },
+  { label: 'Custom Color', hex: 'Custom HEX Code' },
+];
+
+/** Command to toggle the file icons. */
+export const changeFileColor = async () => {
+  try {
+    const status = checkFileColorStatus();
+    const response = await showQuickPickItems(status);
+    if (response) {
+      handleQuickPickActions(response);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+/** Show QuickPick items to select preferred color for the file icons. */
+const showQuickPickItems = (currentColor: string) => {
+  const options = iconPalette.map(
+    (color): QuickPickItem => ({
+      description: color.label,
+      label: isColorActive(color, currentColor) ? '\u2714' : '\u25FB',
+    })
+  );
+
+  return codeWindow.showQuickPick(options, {
+    placeHolder: translate('colorSelect.color'),
+    ignoreFocusOut: false,
+    matchOnDescription: true,
+  });
+};
+
+/** Handle the actions from the QuickPick. */
+const handleQuickPickActions = async (value: QuickPickItem) => {
+  if (!value || !value.description) return;
+  if (value.description === 'Custom Color') {
+    const value = await codeWindow.showInputBox({
+      placeHolder: translate('colorSelect.hexCode'),
+      ignoreFocusOut: true,
+      validateInput: validateColorInput,
+    });
+    if (value) {
+      setColorConfig(value);
+    }
+  } else {
+    const hexCode = iconPalette.find((c) => c.label === value.description)?.hex;
+    if (hexCode) {
+      setColorConfig(hexCode);
+    }
+  }
+};
+
+const validateColorInput = (colorInput: string) => {
+  if (!validateHEXColorCode(colorInput)) {
+    return translate('colorSelect.wrongHexCode');
+  }
+  return undefined;
+};
+
+/** Check status of the file color */
+export const checkFileColorStatus = (): string => {
+  const defaultOptions = getDefaultIconOptions();
+  const config = getMaterialIconsJSON();
+  return config?.options?.files?.color ?? defaultOptions.files.color!;
+};
+
+const setColorConfig = (value: string) => {
+  setThemeConfig('files.color', value.toLowerCase(), true);
+};
+
+const isColorActive = (color: FileColor, currentColor: string): boolean => {
+  if (color.label === 'Custom Color') {
+    return !iconPalette.some(
+      (c) => c.hex.toLowerCase() === currentColor.toLowerCase()
+    );
+  }
+  return color.hex.toLowerCase() === currentColor.toLowerCase();
+};
diff --git a/src/commands/folderColor.ts b/src/commands/folderColor.ts
@@ -42,7 +42,7 @@ const showQuickPickItems = (currentColor: string) => {
   );
 
   return codeWindow.showQuickPick(options, {
-    placeHolder: translate('folders.color'),
+    placeHolder: translate('colorSelect.color'),
     ignoreFocusOut: false,
     matchOnDescription: true,
   });
@@ -53,7 +53,7 @@ const handleQuickPickActions = async (value: QuickPickItem) => {
   if (!value || !value.description) return;
   if (value.description === 'Custom Color') {
     const value = await codeWindow.showInputBox({
-      placeHolder: translate('folders.hexCode'),
+      placeHolder: translate('colorSelect.hexCode'),
       ignoreFocusOut: true,
       validateInput: validateColorInput,
     });
@@ -70,7 +70,7 @@ const handleQuickPickActions = async (value: QuickPickItem) => {
 
 const validateColorInput = (colorInput: string) => {
   if (!validateHEXColorCode(colorInput)) {
-    return translate('folders.wrongHexCode');
+    return translate('colorSelect.wrongHexCode');
   }
   return undefined;
 };

diff --git a/src/commands/index.ts b/src/commands/index.ts
@@ -1,6 +1,7 @@
 import { commands } from 'vscode';
 import { activateIcons } from './activate';
 import { toggleExplorerArrows } from './explorerArrows';
+import { changeFileColor } from './fileColor';
 import { changeFolderColor } from './folderColor';
 import { changeFolderTheme } from './folders';
 import { toggleGrayscale } from './grayscale';
@@ -14,6 +15,7 @@ const extensionCommands: { [commmand: string]: () => Promise<void> } = {
   toggleIconPacks,
   changeFolderTheme,
   changeFolderColor,
+  changeFileColor,
   restoreDefaultConfig,
   toggleExplorerArrows,
   changeOpacity,

diff --git a/src/commands/restoreConfig.ts b/src/commands/restoreConfig.ts
@@ -5,6 +5,7 @@ export const restoreDefaultConfig = async () => {
   await setThemeConfig('activeIconPack', undefined, true);
   await setThemeConfig('folders.theme', undefined, true);
   await setThemeConfig('folders.color', undefined, true);
+  await setThemeConfig('files.color', undefined, true);
   await setThemeConfig('hidesExplorerArrows', undefined, true);
   await setThemeConfig('opacity', undefined, true);
   await setThemeConfig('saturation', undefined, true);

diff --git a/src/helpers/fileConfig.ts b/src/helpers/fileConfig.ts
@@ -12,7 +12,8 @@ export const getFileConfigHash = (options: IconJsonOptions): string => {
     if (
       options.saturation !== defaults.saturation ||
       options.opacity !== defaults.opacity ||
-      options.folders?.color !== defaults.folders.color
+      options.folders?.color !== defaults.folders.color ||
+      options.files?.color !== defaults.files.color
     ) {
       fileConfigString += `~${getHash(JSON.stringify(options))}`;
     }

diff --git a/src/i18n/lang-de.ts b/src/i18n/lang-de.ts
@@ -10,14 +10,16 @@ export const translation: Translation = {
   },
   folders: {
     toggleIcons: 'Wähle ein Ordner Design',
-    color: 'Wähle eine Ordner Farbe',
-    hexCode: 'Gebe einen HEX Farbcode ein',
-    wrongHexCode: 'Ungültiger HEX Farbcode',
     disabled: 'Keine Ordner Icons',
     theme: {
       description: "Wähle das '%0' Design",
     },
   },
+  colorSelect: {
+    color: 'Wähle eine Farbe',
+    hexCode: 'Gebe einen HEX Farbcode ein',
+    wrongHexCode: 'Ungültiger HEX Farbcode',
+  },
   opacity: {
     inputPlaceholder: 'Wert der Deckkraft (zwischen 0 und 1)',
     wrongValue: 'Der Wert muss zwischen 0 und 1 liegen!',

diff --git a/src/i18n/lang-en.ts b/src/i18n/lang-en.ts
@@ -10,14 +10,16 @@ export const translation: Translation = {
   },
   folders: {
     toggleIcons: 'Pick a folder theme',
-    color: 'Choose a folder color',
-    hexCode: 'Insert a HEX color code',
-    wrongHexCode: 'Invalid HEX color code!',
     disabled: 'No folder icons',
     theme: {
       description: "Select the '%0' folder theme",
     },
   },
+  colorSelect: {
+    color: 'Choose a color',
+    hexCode: 'Insert a HEX color code',
+    wrongHexCode: 'Invalid HEX color code!',
+  },
   opacity: {
     inputPlaceholder: 'Opacity value (between 0 and 1)',
     wrongValue: 'Please enter a floating-point number between 0 and 1.',

diff --git a/src/i18n/lang-es.ts b/src/i18n/lang-es.ts
@@ -10,14 +10,16 @@ export const translation: Translation = {
   },
   folders: {
     toggleIcons: 'Cambiar activación de iconos de carpetas',
-    color: 'Elija un color de carpeta',
-    hexCode: 'Insertar un código de color HEX',
-    wrongHexCode: '¡Código de color HEX inválido!',
     disabled: 'Sin iconos de carpeta',
     theme: {
       description: "Iconos de carpeta '%0'",
     },
   },
+  colorSelect: {
+    color: 'Elija un color',
+    hexCode: 'Insertar un código de color HEX',
+    wrongHexCode: '¡Código de color HEX inválido!',
+  },
   opacity: {
     inputPlaceholder: 'Valor de opacidad (entre 0 y 1)',
     wrongValue: '¡El valor debe estar entre 0 y 1!',

diff --git a/src/i18n/lang-fr.ts b/src/i18n/lang-fr.ts
@@ -10,14 +10,16 @@ export const translation: Translation = {
   },
   folders: {
     toggleIcons: 'Basculer les icônes de dossiers',
-    color: 'Choisissez une couleur de dossier',
-    hexCode: 'Insérer un code couleur HEX',
-    wrongHexCode: 'Code couleur HEX non valide!',
     disabled: 'Aucune icônes de dossiers',
     theme: {
       description: "Icônes de dossiers '%0'",
     },
   },
+  colorSelect: {
+    color: 'Choisissez une couleur',
+    hexCode: 'Insérer un code couleur HEX',
+    wrongHexCode: 'Code couleur HEX non valide!',
+  },
   opacity: {
     inputPlaceholder: "Valeur d'opacité (entre 0 et 1)",
     wrongValue: 'La valeur doit être comprise entre 0 et 1!',

diff --git a/src/i18n/lang-ja.ts b/src/i18n/lang-ja.ts
@@ -10,14 +10,16 @@ export const translation: Translation = {
   },
   folders: {
     toggleIcons: 'フォルダーアイコンを切り替える',
-    color: 'フォルダーの色を切り替える',
-    hexCode: 'HEX カラーコードを入力する',
-    wrongHexCode: '無効な HEX カラーコードです！',
     disabled: 'フォルダーアイコンを表示しない',
     theme: {
       description: "フォルダーテーマ '%0' を選択する",
     },
   },
+  colorSelect: {
+    color: '色を変える',
+    hexCode: 'HEX カラーコードを入力する',
+    wrongHexCode: '無効な HEX カラーコードです！',
+  },
   opacity: {
     inputPlaceholder: '不透明度（0〜1）',
     wrongValue: '値は0から1の間にしてください！',

diff --git a/src/i18n/lang-nl.ts b/src/i18n/lang-nl.ts
@@ -10,14 +10,16 @@ export const translation: Translation = {
   },
   folders: {
     toggleIcons: 'Kies een folderthema',
-    color: 'Kies een folderkleur',
-    hexCode: 'Voeg een HEX kleurcode in',
-    wrongHexCode: 'Ongeldige HEX kleurcode!',
     disabled: 'Geen foldericons',
     theme: {
       description: "Selecteer het '%0' folderthema",
     },
   },
+  colorSelect: {
+    color: 'Kies een kleur',
+    hexCode: 'Voeg een HEX kleurcode in',
+    wrongHexCode: 'Ongeldige HEX kleurcode!',
+  },
   opacity: {
     inputPlaceholder: 'Doorzichtbaarheidswaarde (tussen 0 en 1)',
     wrongValue: 'De waarde moet tussen de 0 en 1 zijn!',

diff --git a/src/i18n/lang-pl.ts b/src/i18n/lang-pl.ts
@@ -10,14 +10,16 @@ export const translation: Translation = {
   },
   folders: {
     toggleIcons: 'Wybierz motyw folderów',
-    color: 'Wybierz kolor folderów',
-    hexCode: 'Podaj kolor w formacie HEX',
-    wrongHexCode: 'Nieprawidłowy kolor HEX!',
     disabled: 'Brak ikon folderów',
     theme: {
       description: "Wybierz motyw folderów '%0'",
     },
   },
+  colorSelect: {
+    color: 'Wybierz kolor',
+    hexCode: 'Podaj kolor w formacie HEX',
+    wrongHexCode: 'Nieprawidłowy kolor HEX!',
+  },
   opacity: {
     inputPlaceholder: 'Wartość przezroczystości (pomiędzy 0 a 1)',
     wrongValue: 'Wartość musi być pomiędzy 0 i 1!',