Finished theme recoloring framework.

2026-01-18 17:27:20 +01:00 · 2023-08-24 18:34:50 +02:00
parent 792b7e2b80
commit d0d9372b13
7 changed files with 91 additions and 74 deletions
--- a/color_manager/utils.py
+++ b/color_manager/utils.py
@@ -145,7 +145,7 @@ def expand_css_rgba(match) -> str:
        int(match.group(3)), float(match.group(4))
    ))

-def css_to_hex(text:str):
+def css_to_hex(text:str) -> str:
    """ Returns the given string with css rgba functions and named colors substituted for their corresponding hexadecimal codes. """

    text = re.sub(r"rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\)",
@@ -156,6 +156,19 @@ def css_to_hex(text:str):

    return text

+# Post-processing --------------------------------------------------------------
+
+def hex_to_rgba(match) -> str:
+    """ Converts 8-digit hexadecimal code to rgba function. """
+    hex = match.group(1)
+
+    return f"rgba({int(hex[1:3], 16)}, {int(hex[3:5], 16)}, {int(hex[5:7], 16)}, {int(hex[7:9], 16) / 255.0:.2f})"
+
+def hex_to_css(text:str) -> str:
+    """ Convert 8-digit hexadecimal color codes to css rgba color functions. Needed when a css interpreter does not recognize the alpha-channel when reading hexadecimal color codes. """
+
+    return re.sub(r"(#[0-9a-fA-F]{8})", hex_to_rgba, text)
+
 def expand_all_hex(text:str) -> str:
    """Expand all 3-digit hexadecimal codes in the input string to 6 digits."""

@@ -473,6 +486,7 @@ def recolor(src_path:str, dest_path:str, name:str, replacement) -> None:
        elif op == "mapping":
            x = apply_mapping_to_vec(x, colors, new_colors)

+        x = hex_to_css(x)
        with open(path, 'w') as file: file.write(x)

    # Recolor pngs.
--- a/readme.md
+++ b/readme.md
@@ -1,20 +1,31 @@
 # Color Manager <img src="resources/icon.svg" width="50"/>

-[Roadmap](#roadmap) | [Features](#features) | [Use](#use) | [Requests](#requests) | [Contribute](#contribute)
+[Showcase](#showcase) | [Examples](#examples) | [Performance](#performance) | [Roadmap](#roadmap) | [Requests](#requests) | [Contribute](#contribute)

-Color Manager is a program for recoloring and manipulating existing icon packs, wallpapers and themes. The program is designed for [NovaOS](https://github.com/NicklasVraa/NovaOS) and is currently in **early development**. The first release will be late August 2023. In the meantime, this repository will act as a preview.
+Color Manager is a program for recoloring and manipulating existing icon packs, themes and wallpapers. The program is designed for [NovaOS](https://github.com/NicklasVraa/NovaOS) (Linux) and is written in python. If you publish anything that was generated using this program, make sure to credit the original creator and this repository.

+
+## Showcase <a name="showcase"></a>
+Below are examples of what can be done using this library. Using it in a simple python script, you can define a pipeline to automatically customize assets exactly as you see fit.
+
+### Icon-pack Recoloring and Editing
 ![gui](resources/gui.png)

 **Add customizable backdrops to all your icons.**
 | Examples | `rounding=0.0` | `rounding=0.5` | `rounding=1.0` |
 | :------: | :------------: | :------------: | :------------: |
-| `padding=0`<br> `color="#000000"` | <img src="resources/backdrops/colors_r00_p0_black.svg" width="100"/> | <img src="resources/backdrops/colors_r05_p0_black.svg" width="100"/> | <img src="resources/backdrops/colors_r10_p0_black.svg" width="100"/> |
-| `padding=2`<br> `color="#112288"` | <img src="resources/backdrops/firefox_r00_p2_blue.svg" width="100"/> | <img src="resources/backdrops/firefox_r05_p2_blue.svg" width="100"/> | <img src="resources/backdrops/firefox_r10_p2_blue.svg" width="100"/> |
-| `padding=4`<br> `color="#551144"` | <img src="resources/backdrops/vscode_r00_p4_purple.svg" width="100"/> | <img src="resources/backdrops/vscode_r05_p4_purple.svg" width="100"/> | <img src="resources/backdrops/vscode_r10_p4_purple.svg" width="100"/> |
+| `padding=0`<br> `color="#000000"` | <img src="resources/backdrops/colors_r00_p0_black.svg" width="60"/> | <img src="resources/backdrops/colors_r05_p0_black.svg" width="60"/> | <img src="resources/backdrops/colors_r10_p0_black.svg" width="60"/> |
+| `padding=2`<br> `color="#112288"` | <img src="resources/backdrops/firefox_r00_p2_blue.svg" width="60"/> | <img src="resources/backdrops/firefox_r05_p2_blue.svg" width="60"/> | <img src="resources/backdrops/firefox_r10_p2_blue.svg" width="60"/> |
+| `padding=4`<br> `color="#551144"` | <img src="resources/backdrops/vscode_r00_p4_purple.svg" width="60"/> | <img src="resources/backdrops/vscode_r05_p4_purple.svg" width="60"/> | <img src="resources/backdrops/vscode_r10_p4_purple.svg" width="60"/> |

+### Theme-pack Recoloring
+| | |
+|-|-|
+| <img src="resources/themes/nordic.png" width="600"/> | <img src="resources/themes/forest.png" width="600"/> |
+| <img src="resources/themes/watermelon.png" width="600"/> | <img src="resources/themes/beach.png" width="600"/> |
+These are simple monochromatic recolors of [my own theme](https://github.com/NicklasVraa/NovaOS-nord-Theme) and the papirus icon pack. Multichromatic recoloring based on a palette or mapping also works. Recoloring works on any svg/css/png/jpg/xml-based theme, which include GTK-, Cinnamon-, Gnome-shell- and metacity-themes.

-**Instantly recolor artwork such as wallpapers.**
+### Wallpaper Recoloring
 | Operation | Result |
 | :---------: | ------ |
 | **Original** | ![1](resources/wallpaper/original.png) |
@@ -24,54 +35,12 @@ Color Manager is a program for recoloring and manipulating existing icon packs,
 | **Remapping**:<br>`renord.json`<br><small>Remap of previous<br>to alterate nord<br>colors</small>. | ![5](resources/wallpaper/remapped.png) |
 | **Extraction**:<br>Original `num=10` | ![6](resources/wallpaper/palette.png) |

-With these tools, one can build a pipeline to customize most assets to fit into a larger design.
-
-**GUI Demo**:
+### GUI
+The program is also available with a graphical frontend. Features for this may lack slightly behind.
 ![demo](resources/demo.gif)


-**Note**: If you publish anything that was generated using this program, make sure to credit the original creator and this repository.
-
-
-## Roadmap <a name="roadmap"></a>
- [x] Basic framework for manipulating icon packs.
- [x] Grayscale, monochromatic and multichromatic recoloring functions.
- [x] Command-line interface.
- [x] Graphical user interface based on the GTK framework.
- [x] Python pip package.
- [x] Full support for pngs and jpgs.
- [x] Generate palette from source image or svg.
- [x] Remove metadata from svgs.
- [x] Adding basic geometry to the backgrounds of svg icons.
- [x] Preserve transparency in pngs after multichrome recoloring.
- [x] Add function to remap colors directly using a json dictionary.
- [x] Update GUI to support new features.
- [x] Support inline palette and mapping objects.
- [x] Basic framework for manipulating GTK, Cinnamon and Metacity themes.
- [ ] Optional automatic palette extending.
- [ ] Intelligent color inversion.
- [ ] GNU/Linux binary (deb, flatpak, appimage).
-
-
-## Features <a name="features"></a>
-Currently, three operations are supported:
-| Type | Result | Speed | Support |
-| :--: | ------ | ----- | ------- |
-| **Monochrome recoloring**  | A monochromatic variant, colored by appropriate shades of the provided base color. | ~5050svg/s<br> ~500png/s | svg, xml, css, png, jpg |
-| **Palette recoloring** | A multichromatic variant, where all colors are replaced by their nearest perceived equivalent that adheres to the provided color palette. | ~110svg/s<br> ~3png/s | svg, xml, css, png, jpg |
-| **Color remapping** | A multichromatic variant, where all colors that are specified in a given map will be replaced as dictated by said map. | ~1000svg/s<br> ~10png/s | svg, xml, css, png, jpg |
-| **Extract colors** | Returns and optionally saves the color palette of an image, in specified detail. | ~10colors/s | svg, xml, css, png, jpg |
-| **Add backdrop** | Add a rectangular or elliptical background (and anything in between) to all svg icons. | ~5000svg/s | svg |
-
-Speeds were recorded with an Intel i7-4770K CPU and is strongly dependent on file sizes. Any asset can serve as the base for any color palette or base color. Svg/css recolorings will always be perfect, but png/jpgs may require experimentation.
-
-**Tip**: To increase the quality, i.e. decrease the perceived noise of multichromatic recolorings of pngs/jpgs, either...
- Increase the number of colors in the palette you provide to the program, e.g. populate it with slight variations of the existing colors
- Decrease the number of colors in your original image, e.g. using a function like `Image.quantize()` from `pillow`.
- Experiment with setting `smooth` to `true`/`false` in the palette json file.
-
-
-## Using the Program<a name="use"></a>
+## Examples<a name="examples"></a>
 Either import `utils` into your own script and call its functions, e.g.:
 ```python
 from color_manager import utils
@@ -139,6 +108,43 @@ my_mapping = {
 Examples of both as json-files are available in this repository.


+## Performance <a name="performance"></a>
+Currently, three operations are supported:
+| Type | Result | Speed | Support |
+| :--: | ------ | ----- | ------- |
+| **Monochrome<br>recoloring**  | A monochromatic variant, colored by appropriate shades of the provided base color. | ~5000svg/s<br> ~500png/s | svg, xml, css, png, jpg |
+| **Palette<br>recoloring** | A multichromatic variant, where all colors are replaced by their nearest perceived equivalent that adheres to the provided color palette. | ~100svg/s<br> ~3png/s | svg, xml, css, png, jpg |
+| **Color<br>remapping** | A multichromatic variant, where all colors that are specified in a given map will be replaced as dictated by said map. | ~1000svg/s<br> ~10png/s | svg, xml, css, png, jpg |
+| **Extract<br>colors** | Returns and optionally saves the color palette of an image, in specified detail. | ~10colors/s | svg, xml, css, png, jpg |
+| **Add<br>backdrop** | Add a rectangular or elliptical background (and anything in between) to all svg icons. | ~5000svg/s | svg |
+
+Speeds were recorded with an Intel i7-4770K CPU and is strongly dependent on file sizes. Any asset can serve as the base for any color palette or base color. Svg/css recolorings will always be perfect, but png/jpgs may require experimentation.
+
+**Tip**: To increase the quality, i.e. decrease the perceived noise of multichromatic recolorings of pngs/jpgs, either...
+- Increase the number of colors in the palette you provide to the program, e.g. populate it with slight variations of the existing colors
+- Decrease the number of colors in your original image, e.g. using a function like `Image.quantize()` from `pillow`.
+- Experiment with setting `smooth` to `true`/`false` in the palette json file.
+
+
+## Roadmap <a name="roadmap"></a>
+- [x] Basic framework for manipulating icon packs.
+- [x] Grayscale, monochromatic and multichromatic recoloring functions.
+- [x] Command-line interface.
+- [x] Graphical user interface based on the GTK framework.
+- [x] Python pip package.
+- [x] Full support for pngs and jpgs.
+- [x] Generate palette from source image or svg.
+- [x] Remove metadata from svgs.
+- [x] Adding basic geometry to the backgrounds of svg icons.
+- [x] Preserve transparency in pngs after multichrome recoloring.
+- [x] Add function to remap colors directly using a json dictionary.
+- [x] Update GUI to support new features.
+- [x] Support inline palette and mapping objects.
+- [x] Basic framework for manipulating GTK, Cinnamon and Metacity themes.
+- [ ] Optional automatic palette extending.
+- [ ] Intelligent color inversion.
+- [ ] GNU/Linux binary (deb, flatpak, appimage).
+
 ## Requests <a name="requests"></a>
 Until the release official release of Color Manager, I will be taking requests for recolorings. Simply submit a feature request, specifying what you would like to see. Please star the repository or consider donating, and I will upload your requested variant. Also consider showing the creators of the original artworks some love.

--- a/resources/themes/beach.png
+++ b/resources/themes/beach.png
--- a/resources/themes/forest.png
+++ b/resources/themes/forest.png
--- a/resources/themes/nordic.png
+++ b/resources/themes/nordic.png
--- a/resources/themes/watermelon.png
+++ b/resources/themes/watermelon.png
--- a/test.ipynb
+++ b/test.ipynb
@@ -14,17 +14,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#resource = utils.norm_hsl(180, 50, 50) # Color\n",
-    "resource = \"palettes/dracula.json\""
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 12,
+   "execution_count": 52,
   "metadata": {},
   "outputs": [
    {
@@ -38,9 +28,9 @@
     "name": "stderr",
     "output_type": "stream",
     "text": [
-      "svg: 100%|██████████| 84/84 [00:02<00:00, 40.88it/s]\n",
-      "css: 100%|██████████| 27/27 [00:01<00:00, 13.56it/s]\n",
-      "png: 100%|██████████| 442/442 [03:01<00:00,  2.44it/s]\n"
+      "svg: 100%|██████████| 84/84 [00:00<00:00, 365.25it/s]\n",
+      "css: 100%|██████████| 27/27 [00:00<00:00, 83.93it/s]\n",
+      "png: 100%|██████████| 442/442 [00:07<00:00, 57.79it/s] \n"
     ]
    }
   ],
@@ -50,13 +40,13 @@
    "    \"~/Downloads/NovaOS-nord-theme\", # Source\n",
    "    \"~/.themes\",                     # Destination\n",
    "    \"My_theme\",                      # New name\n",
-    "    resource\n",
+    "    utils.norm_hsl(22, 35, 50)\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
-   "execution_count": 13,
+   "execution_count": 54,
   "metadata": {},
   "outputs": [
    {
@@ -70,7 +60,7 @@
     "name": "stderr",
     "output_type": "stream",
     "text": [
-      "svg: 100%|██████████| 7974/7974 [01:04<00:00, 123.98it/s]\n"
+      "svg: 100%|██████████| 7974/7974 [00:01<00:00, 5569.24it/s]\n"
     ]
    }
   ],
@@ -80,27 +70,34 @@
    "    \"~/Downloads/NovaOS-nord-icons\", # Source\n",
    "    \"~/.icons\",                      # Destination\n",
    "    \"My_icons\",                      # New name\n",
-    "    resource\n",
+    "    utils.norm_hsl(118, 26, 50)\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
-   "execution_count": 14,
+   "execution_count": 41,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
-      "/home/nv/.backgrounds/My_wallpapers/index.theme\n"
+      "/home/nv/.wallpapers/My_wallpapers/index.theme\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
-      "png: 100%|██████████| 5/5 [00:03<00:00,  1.58it/s]\n"
+      "png:   0%|          | 0/5 [00:00<?, ?it/s]"
+     ]
+    },
+    {
+     "name": "stderr",
+     "output_type": "stream",
+     "text": [
+      "png: 100%|██████████| 5/5 [00:32<00:00,  6.41s/it]\n"
     ]
    }
   ],
@@ -110,7 +107,7 @@
    "    \"~/Downloads/NovaOS-nord-wallpapers\", # Source\n",
    "    \"~/.wallpapers\",                      # Destination\n",
    "    \"My_wallpapers\",                      # New name\n",
-    "    resource\n",
+    "    utils.norm_hsl(0, 48, 65)\n",
    ")"
   ]
  }