diff --git a/StaticGalleryBuilder.code-workspace b/StaticGalleryBuilder.code-workspace
index 65a43ca..adf0a78 100644
--- a/StaticGalleryBuilder.code-workspace
+++ b/StaticGalleryBuilder.code-workspace
@@ -32,7 +32,7 @@
                     "-t",
                     "Pictures",
                     "--theme",
-                    "themes/default.css",
+                    "themes/summer.css",
                     "--use-fancy-folders",
                     "--web-manifest",
                     "-l",
@@ -78,7 +78,7 @@
                 ],
                 "console": "integratedTerminal",
                 "name": "Generate Themes previews",
-                "program": "${workspaceFolder}/themes/generate_preview.py",
+                "program": "${workspaceFolder}/generate_previews.py",
                 "request": "launch",
                 "type": "debugpy",
             }
diff --git a/builder.py b/builder.py
index 0f225ea..eb08ce2 100755
--- a/builder.py
+++ b/builder.py
@@ -1,7 +1,9 @@
 #!/usr/bin/env python3
 import os
+import re
 import shutil
 import fnmatch
+import urllib.parse
 from multiprocessing import Pool
 from pathlib import Path
 from typing import Dict, List, Tuple
@@ -10,13 +12,14 @@ from tqdm.auto import tqdm
 from PIL import Image, ImageOps
 
 from modules.argumentparser import parse_arguments, Args
-from modules.svg_handling import icons, webmanifest
+from modules.svg_handling import icons, webmanifest, extract_colorscheme
 from modules.generate_html import list_folder, EXCLUDES
 
 # fmt: off
 # Constants
 STATIC_FILES_DIR = os.path.join(os.path.abspath(os.path.dirname(__file__)), "files")
-VERSION = "2.0.1"
+SCRIPT_DIR = os.path.abspath(os.path.dirname(__file__))
+VERSION = "2.2.0"
 RAW_EXTENSIONS = [
     ".3fr", ".ari", ".arw", ".bay", ".braw", ".crw", ".cr2", ".cr3", ".cap", ".data", ".dcs", ".dcr",
     ".dng", ".drf", ".eip", ".erf", ".fff", ".gpr", ".iiq", ".k25", ".kdc", ".mdc", ".mef", ".mos",
@@ -74,7 +77,32 @@ def copy_static_files(_args: Args) -> None:
 
     print("Copying static files...")
     shutil.copytree(STATIC_FILES_DIR, static_dir, dirs_exist_ok=True)
-    shutil.copyfile(_args.theme_path, os.path.join(static_dir, "theme.css"))
+    with open(_args.theme_path, "r", encoding="utf-8") as f:
+        theme = f.read()
+    split = theme.split(".foldericon {")
+    split2 = split[1].split("}", maxsplit=1)
+    themehead = split[0]
+    themetail = split2[1]
+    foldericon = split2[0].strip()
+    foldericon = re.sub(r"/\*.*\*/", "", foldericon)
+    for match in re.finditer(r"content: (.*);", foldericon):
+        foldericon = match[1]
+        foldericon = foldericon.replace('"', "")
+        break
+    if "url" in foldericon:
+        shutil.copyfile(_args.theme_path, os.path.join(static_dir, "theme.css"))
+        return
+    with open(os.path.join(SCRIPT_DIR, foldericon), "r", encoding="utf-8") as f:
+        svg = f.read()
+    if "svg.j2" in foldericon:
+        colorscheme = extract_colorscheme(_args.theme_path)
+        svg = svg.replace("{{ color1 }}", colorscheme["color1"])
+        svg = svg.replace("{{ color2 }}", colorscheme["color2"])
+        svg = svg.replace("{{ color3 }}", colorscheme["color3"])
+        svg = svg.replace("{{ color4 }}", colorscheme["color4"])
+    svg = urllib.parse.quote(svg)
+    with open(os.path.join(static_dir, "theme.css"), "x", encoding="utf-8") as f:
+        f.write(themehead + '\n.foldericon {\n  content: url("data:image/svg+xml,' + svg + '");\n}\n' + themetail)
 
 
 def generate_thumbnail(arguments: Tuple[str, str, str]) -> None:
diff --git a/themes/generate_preview.py b/generate_previews.py
similarity index 60%
rename from themes/generate_preview.py
rename to generate_previews.py
index 1333c79..b55bfc6 100644
--- a/themes/generate_preview.py
+++ b/generate_previews.py
@@ -1,18 +1,22 @@
 import os
+import re
 import sys
 import time
 import base64
 import logging
+import urllib.parse
 from typing import List
 from selenium import webdriver
 from selenium.webdriver.chrome.service import Service
 from selenium.webdriver.chrome.options import Options
 
+from modules.svg_handling import extract_colorscheme
+
 # Set up logging
 logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s")
 
 
-def take_screenshot(html_path: str, css_file: str, output_file: str, driver: webdriver.Chrome) -> None:
+def take_screenshot(_html_path: str, css_file: str, output_file: str, driver: webdriver.Chrome) -> None:
     """
     Takes a screenshot of the given HTML file with the specified CSS applied.
 
@@ -24,10 +28,10 @@ def take_screenshot(html_path: str, css_file: str, output_file: str, driver: web
     """
     try:
         # Open the HTML file or URL
-        if html_path.startswith(("http://", "https://")):
-            driver.get(html_path)
+        if _html_path.startswith(("http://", "https://")):
+            driver.get(_html_path)
         else:
-            driver.get(f"file://{os.path.abspath(html_path)}")
+            driver.get(f"file://{os.path.abspath(_html_path)}")
 
         # Remove current theme.css
         remove_css_script = """
@@ -40,11 +44,34 @@ def take_screenshot(html_path: str, css_file: str, output_file: str, driver: web
         """
         driver.execute_script(remove_css_script)
 
-        with open(css_file, "rb") as f:
+        with open(css_file, "r", encoding="utf-8") as f:
             css_content = f.read()
 
+        # Apply Icon
+        split = css_content.split(".foldericon {")
+        split2 = split[1].split("}", maxsplit=1)
+        themehead = split[0]
+        themetail = split2[1]
+        foldericon = split2[0].strip()
+        foldericon = re.sub(r"/\*.*\*/", "", foldericon)
+        for match in re.finditer(r"content: (.*);", foldericon):
+            foldericon = match[1]
+            foldericon = foldericon.replace('"', "")
+            break
+        if not "url" in foldericon:
+            with open(foldericon, "r", encoding="utf-8") as f:
+                svg = f.read()
+            if "svg.j2" in foldericon:
+                colorscheme = extract_colorscheme(css_file)
+                svg = svg.replace("{{ color1 }}", colorscheme["color1"])
+                svg = svg.replace("{{ color2 }}", colorscheme["color2"])
+                svg = svg.replace("{{ color3 }}", colorscheme["color3"])
+                svg = svg.replace("{{ color4 }}", colorscheme["color4"])
+            svg = urllib.parse.quote(svg)
+            css_content = f'{themehead}\n.foldericon {{\n  content: url("data:image/svg+xml,{svg}");\n}}\n{themetail}'
+
         # Encode CSS content as Base64
-        encoded_css = base64.b64encode(css_content).decode("utf-8")
+        encoded_css = base64.b64encode(css_content.encode("utf-8")).decode("utf-8")
 
         # Inject CSS into HTML using JavaScript
         apply_css_script = f"""
@@ -59,13 +86,13 @@ def take_screenshot(html_path: str, css_file: str, output_file: str, driver: web
 
         # Capture screenshot
         driver.save_screenshot(output_file)
-        logging.info(f"Screenshot saved to {output_file}")
+        logging.info("Screenshot saved to %s", output_file)
 
     except Exception as e:
-        logging.error(f"Failed to take screenshot for {css_file}: {e}")
+        logging.error("Failed to take screenshot for %s: %s", css_file, e)
 
 
-def write_readme(folder_path: str, themes: List[str]) -> None:
+def write_readme(_folder_path: str, themes: List[str]) -> None:
     """
     Writes the README file with previews of included themes.
 
@@ -73,7 +100,7 @@ def write_readme(folder_path: str, themes: List[str]) -> None:
         folder_path (str): Path to the folder containing the themes and README.md.
         themes (List[str]): List of theme names.
     """
-    readme_path = os.path.join(folder_path, "README.md")
+    readme_path = os.path.join(_folder_path, "README.md")
     try:
         with open(readme_path, "r", encoding="utf-8") as f:
             readme = f.read()
@@ -85,15 +112,15 @@ def write_readme(folder_path: str, themes: List[str]) -> None:
         with open(readme_path, "w", encoding="utf-8") as f:
             f.write(readme_head)
 
-        logging.info(f"README.md updated with previews of included themes.")
+        logging.info("README.md updated with previews of included themes.")
 
     except FileNotFoundError:
-        logging.error(f"README.md not found in {folder_path}")
+        logging.error("README.md not found in %s", _folder_path)
     except Exception as e:
-        logging.error(f"Failed to write README.md: {e}")
+        logging.error("Failed to write README.md: %s", e)
 
 
-def main(folder_path: str, html_path: str) -> None:
+def main(_folder_path: str, _html_path: str) -> None:
     """
     Main function to take screenshots for each CSS file in the folder and update the README.md.
 
@@ -101,8 +128,8 @@ def main(folder_path: str, html_path: str) -> None:
         folder_path (str): Path to the folder containing CSS files.
         html_path (str): Path to the HTML file or URL for rendering.
     """
-    if not os.path.exists(folder_path):
-        logging.error(f'Error: Folder path "{folder_path}" does not exist.')
+    if not os.path.exists(_folder_path):
+        logging.error('Error: Folder path "%s" does not exist.', _folder_path)
         return
 
     # Setup Chrome options
@@ -118,21 +145,21 @@ def main(folder_path: str, html_path: str) -> None:
     try:
         themes = []
         # Iterate over all files in the folder
-        for filename in sorted(os.listdir(folder_path)):
+        for filename in sorted(os.listdir(_folder_path)):
             if filename.endswith(".css"):
                 theme_name = os.path.splitext(filename)[0]
                 themes.append(theme_name)
-                css_file = os.path.join(folder_path, filename)
-                output_file = os.path.join(folder_path, "screenshots", f"{theme_name}.png")
+                css_file = os.path.join(_folder_path, filename)
+                output_file = os.path.join(_folder_path, "screenshots", f"{theme_name}.png")
 
                 # Create screenshots folder if it doesn't exist
                 os.makedirs(os.path.dirname(output_file), exist_ok=True)
 
                 # Take screenshot for this CSS file
-                take_screenshot(html_path, css_file, output_file, driver)
+                take_screenshot(_html_path, css_file, output_file, driver)
 
         # Write the README file with the new previews
-        write_readme(folder_path, themes)
+        write_readme(_folder_path, themes)
 
     finally:
         driver.quit()
diff --git a/themes/alpenglow.css b/themes/alpenglow.css
index 4b5b163..cb4b36e 100644
--- a/themes/alpenglow.css
+++ b/themes/alpenglow.css
@@ -53,8 +53,7 @@ body {
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FF6F91' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFADAD' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/autumn.css b/themes/autumn.css
index 4131293..480ecad 100644
--- a/themes/autumn.css
+++ b/themes/autumn.css
@@ -48,8 +48,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFA07A' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FF7F50' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/carnation.css b/themes/carnation.css
index c8418c1..7da44ae 100644
--- a/themes/carnation.css
+++ b/themes/carnation.css
@@ -45,8 +45,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%238B0000' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23B22222' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/catpuccin.css b/themes/catpuccin.css
index a626949..c5b3431 100644
--- a/themes/catpuccin.css
+++ b/themes/catpuccin.css
@@ -1,14 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap");
 
 * {
-  --color1: #F28FAD; /* Pink */
-  --color2: #ABE9B3; /* Green */
-  --color3: #FAE3B0; /* Yellow */
-  --color4: #96CDFB; /* Blue */
-  --bcolor1: #F5E0DC; /* Rosewater */
-  --bcolor2: #575268; /* Dark surface */
-  --bcolor3: #D9E0EE; /* Surface */
-  --bcolor4: #C9CBFF; /* Mauve */
+  --color1: #F28FAD;
+  /* Pink */
+  --color2: #ABE9B3;
+  /* Green */
+  --color3: #FAE3B0;
+  /* Yellow */
+  --color4: #96CDFB;
+  /* Blue */
+  --bcolor1: #F5E0DC;
+  /* Rosewater */
+  --bcolor2: #575268;
+  /* Dark surface */
+  --bcolor3: #D9E0EE;
+  /* Surface */
+  --bcolor4: #C9CBFF;
+  /* Mauve */
 }
 
 .navbar {
@@ -48,7 +56,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6H10L8 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V8C22 6.89543 21.1046 6 20 6Z' fill='%23F28FAD'/%3E%3Cpath d='M4 4H8L10 6H20C21.1046 6 22 6.89543 22 8H2C2 6.89543 2.89543 6 4 6V4Z' fill='%2396CDFB'/%3E%3Cpath d='M10 6H14L12 4H8L10 6Z' fill='%23ABE9B3'/%3E%3Cpath d='M14 6H18L16 4H12L14 6Z' fill='%23FAE3B0'/%3E%3C/svg%3E");
+  content: "themes/icons/catpuccin.svg";
 }
 
 .folders a {
@@ -101,4 +109,4 @@ body {
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-}
+}
\ No newline at end of file
diff --git a/themes/cornflower.css b/themes/cornflower.css
index fe7876a..3bece60 100644
--- a/themes/cornflower.css
+++ b/themes/cornflower.css
@@ -45,8 +45,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%233674e7' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%236495ed' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/icons/steam.svg b/themes/icons/steam.svg
new file mode 100644
index 0000000..fbc6582
--- /dev/null
+++ b/themes/icons/steam.svg
@@ -0,0 +1,11 @@
+<?xml version='1.0' encoding='UTF-8' standalone='no'?>
+<svg height='512' width='512' version='1.1' id='Layer_1' viewBox='0 0 327.68 327.68' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'
+    xmlns:svg='http://www.w3.org/2000/svg'>
+    <defs id='defs1' />
+    <g id='icon' transform='translate(-128.08785,-19.123746)'>
+        <path id='fg' style='fill:#dcdedf;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round'
+            d='m 428.2793,160.97461 c -78.34525,0.002 -156.69075,-0.007 -235.03585,0.0159 -6.54719,0.16827 -12.82625,4.35683 -15.37415,10.41233 -1.13922,2.74038 -1.79474,5.64883 -2.74311,8.45618 -10.27476,33.32809 -20.56379,66.65251 -30.78952,99.99526 -1.21885,4.66702 0.98496,9.97729 5.17832,12.3776 2.40372,1.49255 5.31559,1.67974 8.07056,1.58986 78.16762,-0.0305 156.33557,0.008 234.503,-0.0259 6.43644,-0.17102 12.61041,-4.22124 15.23762,-10.1162 1.2077,-2.75858 1.84495,-5.72012 2.81312,-8.56426 10.08283,-32.66775 20.13843,-65.34481 30.20361,-98.01744 0.84274,-2.37238 1.35887,-4.96865 0.67937,-7.45078 -0.98831,-4.2533 -4.6015,-7.82876 -8.96172,-8.48315 -1.24947,-0.20685 -2.51789,-0.23068 -3.78125,-0.18945 z' />
+        <path id='bg' style='fill:#dcdedf;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal'
+            d='m 214.44922,72.089844 c -20.32611,0.01324 -40.65359,-0.03032 -60.97883,0.03325 -5.06767,0.228794 -9.72081,4.176673 -10.64873,9.186171 -0.54368,2.865585 -0.16202,5.794266 -0.28069,8.688777 -4.6e-4,27.527908 -0.008,55.056498 0.0176,82.583978 0.17186,3.22428 3.44977,5.89016 6.64757,5.28488 2.4037,-0.30447 4.32209,-2.31086 4.87898,-4.61617 3.53052,-10.60549 6.98896,-21.23707 10.60492,-31.81263 1.14174,-2.71356 4.14972,-4.41014 7.06111,-4.12697 16.80704,-0.0631 33.61433,-0.01 50.42149,-0.0279 55.72175,-0.002 111.44406,0.006 167.16547,-0.0191 5.71319,-0.19462 10.82844,-5.25566 10.91838,-11.00339 0.12602,-2.9908 -0.0352,-5.98579 0.0574,-8.97822 0.0534,-2.61272 -0.3941,-5.33067 -1.94259,-7.50013 -2.21535,-3.37352 -6.26106,-5.45808 -10.30253,-5.1988 -44.42303,-0.0315 -88.8461,0.006 -133.26914,-0.0339 -1.35699,0.0355 -2.86726,0.10531 -3.94821,-0.87625 -1.14131,-0.86056 -1.57137,-2.31551 -1.50179,-3.694889 -0.0148,-5.79966 0.0803,-11.603104 -0.0604,-17.400318 -0.41681,-5.210159 -4.80455,-9.807583 -10.02134,-10.361315 -2.37314,-0.240789 -4.76368,-0.0457 -7.14443,-0.12428 -5.89141,-0.0074 -11.78281,-0.0066 -17.67422,-0.0028 z' />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/themes/icons/subfolder.svg b/themes/icons/subfolder.svg
deleted file mode 100644
index 717459d..0000000
--- a/themes/icons/subfolder.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <rect x="10" y="30" width="80" height="50" fill="#F9A825" rx="5" ry="5" />
-    <rect x="10" y="20" width="40" height="20" fill="#F9A825" rx="5" ry="5" />
-    <rect x="20" y="40" width="60" height="40" fill="#FFD54F" rx="3" ry="3" />
-</svg>
\ No newline at end of file
diff --git a/themes/icons/subfolder.svg.j2 b/themes/icons/subfolder.svg.j2
new file mode 100644
index 0000000..9acfef2
--- /dev/null
+++ b/themes/icons/subfolder.svg.j2
@@ -0,0 +1,5 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <rect x="10" y="30" width="80" height="50" fill="{{ color1 }}" rx="5" ry="5" />
+    <rect x="10" y="20" width="40" height="20" fill="{{ color1 }}" rx="5" ry="5" />
+    <rect x="20" y="40" width="60" height="40" fill="{{ color2 }}" rx="3" ry="3" />
+</svg>
\ No newline at end of file
diff --git a/themes/ivy.css b/themes/ivy.css
index 4edd29c..5728ea8 100644
--- a/themes/ivy.css
+++ b/themes/ivy.css
@@ -45,8 +45,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23006400' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23008000' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/rainbow.css b/themes/rainbow.css
index 88033d8..312deb3 100644
--- a/themes/rainbow.css
+++ b/themes/rainbow.css
@@ -47,8 +47,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23770088' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23004CFF' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color5);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/screenshots/alpenglow.png b/themes/screenshots/alpenglow.png
index 664e46a..ceae4ea 100644
Binary files a/themes/screenshots/alpenglow.png and b/themes/screenshots/alpenglow.png differ
diff --git a/themes/screenshots/aritim-dark.png b/themes/screenshots/aritim-dark.png
index c8fc1dd..4df000d 100644
Binary files a/themes/screenshots/aritim-dark.png and b/themes/screenshots/aritim-dark.png differ
diff --git a/themes/screenshots/aritim.png b/themes/screenshots/aritim.png
index cc70abf..3ad7808 100644
Binary files a/themes/screenshots/aritim.png and b/themes/screenshots/aritim.png differ
diff --git a/themes/screenshots/autumn.png b/themes/screenshots/autumn.png
index fb1ed16..929d2db 100644
Binary files a/themes/screenshots/autumn.png and b/themes/screenshots/autumn.png differ
diff --git a/themes/screenshots/carnation.png b/themes/screenshots/carnation.png
index 7b64b77..a5d02e3 100644
Binary files a/themes/screenshots/carnation.png and b/themes/screenshots/carnation.png differ
diff --git a/themes/screenshots/catpuccin.png b/themes/screenshots/catpuccin.png
index ac1899e..472963d 100644
Binary files a/themes/screenshots/catpuccin.png and b/themes/screenshots/catpuccin.png differ
diff --git a/themes/screenshots/cornflower.png b/themes/screenshots/cornflower.png
index f4f5e25..d6504be 100644
Binary files a/themes/screenshots/cornflower.png and b/themes/screenshots/cornflower.png differ
diff --git a/themes/screenshots/default-dark.png b/themes/screenshots/default-dark.png
index b1ae90a..8e99261 100644
Binary files a/themes/screenshots/default-dark.png and b/themes/screenshots/default-dark.png differ
diff --git a/themes/screenshots/default.png b/themes/screenshots/default.png
index cd35f1a..c43a3cc 100644
Binary files a/themes/screenshots/default.png and b/themes/screenshots/default.png differ
diff --git a/themes/screenshots/ivy.png b/themes/screenshots/ivy.png
index 4183afb..38b9903 100644
Binary files a/themes/screenshots/ivy.png and b/themes/screenshots/ivy.png differ
diff --git a/themes/screenshots/kjoe.png b/themes/screenshots/kjoe.png
index d460074..13a0ae3 100644
Binary files a/themes/screenshots/kjoe.png and b/themes/screenshots/kjoe.png differ
diff --git a/themes/screenshots/monokai-vibrant.png b/themes/screenshots/monokai-vibrant.png
index 19ec297..ed8b966 100644
Binary files a/themes/screenshots/monokai-vibrant.png and b/themes/screenshots/monokai-vibrant.png differ
diff --git a/themes/screenshots/rainbow.png b/themes/screenshots/rainbow.png
index 1dddcdc..21b45df 100644
Binary files a/themes/screenshots/rainbow.png and b/themes/screenshots/rainbow.png differ
diff --git a/themes/screenshots/spring.png b/themes/screenshots/spring.png
index 7cb50cc..40c4e55 100644
Binary files a/themes/screenshots/spring.png and b/themes/screenshots/spring.png differ
diff --git a/themes/screenshots/steam.png b/themes/screenshots/steam.png
index f909ead..c0d9c07 100644
Binary files a/themes/screenshots/steam.png and b/themes/screenshots/steam.png differ
diff --git a/themes/screenshots/summer.png b/themes/screenshots/summer.png
index 64a37eb..694ca22 100644
Binary files a/themes/screenshots/summer.png and b/themes/screenshots/summer.png differ
diff --git a/themes/screenshots/sunflower.png b/themes/screenshots/sunflower.png
index f2dc4c0..f886565 100644
Binary files a/themes/screenshots/sunflower.png and b/themes/screenshots/sunflower.png differ
diff --git a/themes/screenshots/winter.png b/themes/screenshots/winter.png
index e53a844..da0174f 100644
Binary files a/themes/screenshots/winter.png and b/themes/screenshots/winter.png differ
diff --git a/themes/spring.css b/themes/spring.css
index e8073b4..9529262 100644
--- a/themes/spring.css
+++ b/themes/spring.css
@@ -48,8 +48,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%2387CEFA' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFB6C1' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/steam.css b/themes/steam.css
index 3be6881..9877dab 100644
--- a/themes/steam.css
+++ b/themes/steam.css
@@ -55,7 +55,7 @@
 }
 
 .folders figure:hover img {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg height='512' width='512' version='1.1' id='Layer_1' viewBox='0 0 327.68 327.68' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cg id='icon' transform='translate(-128.08785,-19.123746)'%3E%3Cpath id='fg' style='fill:%23dcdedf;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round' d='m 428.2793,160.97461 c -78.34525,0.002 -156.69075,-0.007 -235.03585,0.0159 -6.54719,0.16827 -12.82625,4.35683 -15.37415,10.41233 -1.13922,2.74038 -1.79474,5.64883 -2.74311,8.45618 -10.27476,33.32809 -20.56379,66.65251 -30.78952,99.99526 -1.21885,4.66702 0.98496,9.97729 5.17832,12.3776 2.40372,1.49255 5.31559,1.67974 8.07056,1.58986 78.16762,-0.0305 156.33557,0.008 234.503,-0.0259 6.43644,-0.17102 12.61041,-4.22124 15.23762,-10.1162 1.2077,-2.75858 1.84495,-5.72012 2.81312,-8.56426 10.08283,-32.66775 20.13843,-65.34481 30.20361,-98.01744 0.84274,-2.37238 1.35887,-4.96865 0.67937,-7.45078 -0.98831,-4.2533 -4.6015,-7.82876 -8.96172,-8.48315 -1.24947,-0.20685 -2.51789,-0.23068 -3.78125,-0.18945 z' /%3E%3Cpath id='bg' style='fill:%23dcdedf;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal' d='m 214.44922,72.089844 c -20.32611,0.01324 -40.65359,-0.03032 -60.97883,0.03325 -5.06767,0.228794 -9.72081,4.176673 -10.64873,9.186171 -0.54368,2.865585 -0.16202,5.794266 -0.28069,8.688777 -4.6e-4,27.527908 -0.008,55.056498 0.0176,82.583978 0.17186,3.22428 3.44977,5.89016 6.64757,5.28488 2.4037,-0.30447 4.32209,-2.31086 4.87898,-4.61617 3.53052,-10.60549 6.98896,-21.23707 10.60492,-31.81263 1.14174,-2.71356 4.14972,-4.41014 7.06111,-4.12697 16.80704,-0.0631 33.61433,-0.01 50.42149,-0.0279 55.72175,-0.002 111.44406,0.006 167.16547,-0.0191 5.71319,-0.19462 10.82844,-5.25566 10.91838,-11.00339 0.12602,-2.9908 -0.0352,-5.98579 0.0574,-8.97822 0.0534,-2.61272 -0.3941,-5.33067 -1.94259,-7.50013 -2.21535,-3.37352 -6.26106,-5.45808 -10.30253,-5.1988 -44.42303,-0.0315 -88.8461,0.006 -133.26914,-0.0339 -1.35699,0.0355 -2.86726,0.10531 -3.94821,-0.87625 -1.14131,-0.86056 -1.57137,-2.31551 -1.50179,-3.694889 -0.0148,-5.79966 0.0803,-11.603104 -0.0604,-17.400318 -0.41681,-5.210159 -4.80455,-9.807583 -10.02134,-10.361315 -2.37314,-0.240789 -4.76368,-0.0457 -7.14443,-0.12428 -5.89141,-0.0074 -11.78281,-0.0066 -17.67422,-0.0028 z' /%3E%3C/g%3E%3C/svg%3E%0A");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg height='512' width='512' version='1.1' id='Layer_1' viewBox='0 0 327.68 327.68' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cg id='icon' transform='translate(-128.08785,-19.123746)'%3E%3Cpath id='fg' style='fill:%23dcdedf;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round' d='m 428.2793,160.97461 c -78.34525,0.002 -156.69075,-0.007 -235.03585,0.0159 -6.54719,0.16827 -12.82625,4.35683 -15.37415,10.41233 -1.13922,2.74038 -1.79474,5.64883 -2.74311,8.45618 -10.27476,33.32809 -20.56379,66.65251 -30.78952,99.99526 -1.21885,4.66702 0.98496,9.97729 5.17832,12.3776 2.40372,1.49255 5.31559,1.67974 8.07056,1.58986 78.16762,-0.0305 156.33557,0.008 234.503,-0.0259 6.43644,-0.17102 12.61041,-4.22124 15.23762,-10.1162 1.2077,-2.75858 1.84495,-5.72012 2.81312,-8.56426 10.08283,-32.66775 20.13843,-65.34481 30.20361,-98.01744 0.84274,-2.37238 1.35887,-4.96865 0.67937,-7.45078 -0.98831,-4.2533 -4.6015,-7.82876 -8.96172,-8.48315 -1.24947,-0.20685 -2.51789,-0.23068 -3.78125,-0.18945 z' /%3E%3Cpath id='bg' style='fill:%231a9fff;fill-opacity:1;stroke:none;stroke-width:6.4;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal' d='m 214.44922,72.089844 c -20.32611,0.01324 -40.65359,-0.03032 -60.97883,0.03325 -5.06767,0.228794 -9.72081,4.176673 -10.64873,9.186171 -0.54368,2.865585 -0.16202,5.794266 -0.28069,8.688777 -4.6e-4,27.527908 -0.008,55.056498 0.0176,82.583978 0.17186,3.22428 3.44977,5.89016 6.64757,5.28488 2.4037,-0.30447 4.32209,-2.31086 4.87898,-4.61617 3.53052,-10.60549 6.98896,-21.23707 10.60492,-31.81263 1.14174,-2.71356 4.14972,-4.41014 7.06111,-4.12697 16.80704,-0.0631 33.61433,-0.01 50.42149,-0.0279 55.72175,-0.002 111.44406,0.006 167.16547,-0.0191 5.71319,-0.19462 10.82844,-5.25566 10.91838,-11.00339 0.12602,-2.9908 -0.0352,-5.98579 0.0574,-8.97822 0.0534,-2.61272 -0.3941,-5.33067 -1.94259,-7.50013 -2.21535,-3.37352 -6.26106,-5.45808 -10.30253,-5.1988 -44.42303,-0.0315 -88.8461,0.006 -133.26914,-0.0339 -1.35699,0.0355 -2.86726,0.10531 -3.94821,-0.87625 -1.14131,-0.86056 -1.57137,-2.31551 -1.50179,-3.694889 -0.0148,-5.79966 0.0803,-11.603104 -0.0604,-17.400318 -0.41681,-5.210159 -4.80455,-9.807583 -10.02134,-10.361315 -2.37314,-0.240789 -4.76368,-0.0457 -7.14443,-0.12428 -5.89141,-0.0074 -11.78281,-0.0066 -17.67422,-0.0028 z' /%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
 .folders figure:hover a {
diff --git a/themes/summer.css b/themes/summer.css
index 5e94133..dd48ffa 100644
--- a/themes/summer.css
+++ b/themes/summer.css
@@ -48,8 +48,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFA500' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFD700' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/sunflower.css b/themes/sunflower.css
index 21bb033..95fab66 100644
--- a/themes/sunflower.css
+++ b/themes/sunflower.css
@@ -45,8 +45,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFB000' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFD700' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {
diff --git a/themes/winter.css b/themes/winter.css
index 8d8cd50..6815771 100644
--- a/themes/winter.css
+++ b/themes/winter.css
@@ -48,8 +48,7 @@
 }
 
 .foldericon {
-  content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%235F9EA0' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%2300CED1' /%3E%3C/g%3E%3C/svg%3E");
-  fill: var(--color1);
+  content: "themes/icons/subfolder.svg.j2";
 }
 
 .folders a {