feat: ✨ config to create light variants of the icon

src/icons/generator/clones/fileClone.ts

@@ -49,8 +49,13 @@ function createFileIconClones(
         filePath.path
       )}`;
 
+      const baseColor =
+        base.type === FileIconType.Base
+          ? cloneOpts.color
+          : cloneOpts.lightColor ?? cloneOpts.color;
+
       // generates the new icon content
-      const content = cloneIcon(base.path, hash, cloneOpts);
+      const content = cloneIcon(base.path, hash, baseColor);
       const iconName = basename(filePath.path, '.svg');
 
       try {

src/icons/generator/clones/folderClone.ts

@@ -50,8 +50,12 @@ function createFolderClones(
         clonePath.path
       )}`;
 
+      const baseColor = isDarkThemeIcon(clonePath)
+        ? cloneOpts.color
+        : cloneOpts.lightColor ?? cloneOpts.color;
+
       // generates the new icon content
-      const content = cloneIcon(base.path, hash, cloneOpts);
+      const content = cloneIcon(base.path, hash, baseColor);
       const iconName = basename(clonePath.path, '.svg');
 
       try {
@@ -91,3 +95,7 @@ function createFolderClones(
 
   return config;
 }
+
+function isDarkThemeIcon(path: IconPath<FolderIconType>): boolean {
+  return path.type === FolderIconType.Base || path.type === FolderIconType.Open;
+}

src/icons/generator/clones/utils/cloning.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from 'fs';
 import { INode, parseSync, stringify } from 'svgson';
-import { CustomClone, IconConfiguration } from '../../../../models';
+import { IconConfiguration } from '../../../../models';
 import { getColorList, replacementMap } from './color/colors';
 
 /**
@@ -25,14 +25,10 @@ export function readIcon(path: string, hash: string): string {
 }
 
 /** Clones an icon and changes its colors according to the clone options. */
-export function cloneIcon(
-  path: string,
-  hash: string,
-  cloneOpts: CustomClone
-): string {
+export function cloneIcon(path: string, hash: string, color: string): string {
   const baseContent = readIcon(path, hash);
   const svg = parseSync(baseContent);
-  const replacements = replacementMap(cloneOpts.color, getColorList(svg));
+  const replacements = replacementMap(color, getColorList(svg));
   replaceColors(svg, replacements);
   return stringify(svg);
 }

src/icons/generator/clones/utils/paths.ts

@@ -41,10 +41,15 @@ export function getFileIconBasePaths(
 ): IconPath<FileIconType>[] | undefined {
   const paths = [];
   const base = config.iconDefinitions?.[`${cloneOpts.base}`]?.iconPath;
-  const light =
+  let light =
     config.iconDefinitions?.[`${cloneOpts.base}${lightColorFileEnding}`]
       ?.iconPath;
 
+  if (cloneOpts.lightColor && !light) {
+    // the original icon does not have a light version, so we re-use the base
+    light = base;
+  }
+
   if (base) {
     paths.push({ type: FileIconType.Base, path: resolvePath(base) });
     light && paths.push({ type: FileIconType.Light, path: resolvePath(light) });
@@ -87,9 +92,9 @@ export function getFolderIconBasePaths(
   const base = config.iconDefinitions?.[`${folderBase}`]?.iconPath;
   const open =
     config.iconDefinitions?.[`${folderBase}${openedFolder}`]?.iconPath;
-  const light =
+  let light =
     config.iconDefinitions?.[`${folderBase}${lightColorFileEnding}`]?.iconPath;
-  const lightOpen =
+  let lightOpen =
     config.iconDefinitions?.[
       `${folderBase}${openedFolder}${lightColorFileEnding}`
     ]?.iconPath;
@@ -98,6 +103,12 @@ export function getFolderIconBasePaths(
     base && paths.push({ type: FolderIconType.Base, path: resolvePath(base) });
     open && paths.push({ type: FolderIconType.Open, path: resolvePath(open) });
 
+    if (cloneOpts.lightColor && (!light || !lightOpen)) {
+      // the original icon does not have a light version, so we re-use the base icons
+      light = base;
+      lightOpen = open;
+    }
+
     if (light) {
       paths.push({ type: FolderIconType.Light, path: resolvePath(light) });
     }