added support for dynamic icon creation from jimja template with cairosvg

README.md

@@ -17,6 +17,7 @@
 - **Ignore Other Files:** Option to ignore files other than those specified by the included extensions.
 - **Info Tooltips:** Display additional information as tooltips for images if an `info` file is present in the directory.
 - **Generate Web Manifest:** Ability to generate a web manifest file for PWA (Progressive Web App) support.
+- **Generate on the fly icons:** If `cairosvg` is installed the script will generate icons from the css theme colors automatically.
 
 ## Requirements
 

StaticGalleryBuilder.code-workspace

@@ -36,6 +36,7 @@
                     "--use-fancy-folders",
                     "--web-manifest",
                     "-n",
+                    "-m",
                     "-r"
                 ],
                 "console": "integratedTerminal",
@@ -54,10 +55,11 @@
                     "-t",
                     "Pictures",
                     "--theme",
-                    "themes/ivy.css",
+                    "themes/rainbow.css",
                     "--use-fancy-folders",
                     "--web-manifest",
                     "-n",
+                    "-m",
                     "-r",
                 ],
                 "console": "integratedTerminal",

builder.py

@@ -5,6 +5,7 @@ import urllib.parse
 import shutil
 import fnmatch
 import json
+import re
 from multiprocessing import Pool
 from pathlib import Path
 from typing import Any, Dict, List, Optional, Tuple
@@ -31,7 +32,7 @@ FAVICON_PATH = ".static/favicon.ico"
 GLOBAL_CSS_PATH = ".static/global.css"
 DEFAULT_THEME_PATH = os.path.join(os.path.abspath(os.path.dirname(__file__)), "themes", "default.css")
 DEFAULT_AUTHOR = "Author"
-VERSION = "1.9.14"
+VERSION = "1.10.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", ".mrw", ".nef", ".nrw", ".obm", ".orf", ".pef", ".ptx", ".pxn", ".r3d", ".raf", ".raw", ".rwl", ".rw2", ".rwz", ".sr2", ".srf", ".srw", ".tif", ".tiff", ".x3f"]
 IMG_EXTENSIONS = [".jpg", ".jpeg"]
 EXCLUDES = [".lock", "index.html", "manifest.json", ".sizelist.json", ".thumbnails", ".static"]
@@ -129,9 +130,35 @@ def copy_static_files(_args: Args) -> None:
         shutil.copyfile(_args.theme_path, os.path.join(_args.root_directory, ".static", "theme.css"))
 
 
+def icons(_args: Args) -> None:
+    pattern = r"--color([1-4]):\s*(#[0-9a-f]+);"
+    colorscheme = {}
+    iconspath = os.path.join(_args.root_directory, ".static", "icons")
+    with open(_args.theme_path, "r") as f:
+        filecontent = f.read()
+    matches = re.findall(pattern, filecontent)
+    for match in matches:
+        colorscheme["color" + match[0]] = match[1]
+    svg = env.get_template("icon.svg.j2")
+    content = svg.render(colorscheme=colorscheme)
+    with open(os.path.join(iconspath, "icon.svg"), "w+") as f:
+        f.write(content)
+    if not SVGSUPPORT:
+        print("Please install cairosvg to generate favicon from svg icon.")
+        return
+    tmpimg = BytesIO()
+    cairosvg.svg2png(bytestring=content, write_to=tmpimg)
+    with Image.open(tmpimg) as iconfile:
+        iconfile.save(os.path.join(iconspath, "icon.png"))
+    if shutil.which("magick"):
+        os.system(f'magick {os.path.join(iconspath, "icon.png")} -define icon:auto-resize=16,32,48,64,72,96,144,192 {os.path.join(_args.root_directory, ".static", "favicon.ico")}')
+    else:
+        os.system(f"convert {os.path.join(iconspath, "icon.png")} -define icon:auto-resize=16,32,48,64,72,96,144,192 {os.path.join(_args.root_directory, ".static", "favicon.ico")}")
+
+
 def webmanifest(_args: Args) -> None:
     icons: List[Icon] = []
-    files = os.listdir(os.path.join(STATIC_FILES_DIR, "icons"))
+    files = os.listdir(os.path.join(_args.root_directory, ".static", "icons"))
     if SVGSUPPORT and any(file.endswith(".svg") for file in files):
         svg = [file for file in files if file.endswith(".svg")][0]
         icons.append(
@@ -143,7 +170,7 @@ def webmanifest(_args: Args) -> None:
             sizes = size.split("x")
             iconpath = os.path.join(_args.root_directory, ".static", "icons", os.path.splitext(svg)[0] + "-" + size + ".png")
             cairosvg.svg2png(
-                url=os.path.join(STATIC_FILES_DIR, "icons", svg),
+                url=os.path.join(_args.root_directory, ".static", "icons", svg),
                 write_to=tmpimg,
                 output_width=int(sizes[0]),
                 output_height=int(sizes[1]),
@@ -261,6 +288,9 @@ def list_folder(folder: str, title: str, _args: Args, raw: list[str]) -> None:
         for item in items:
             if item not in EXCLUDES:
                 if os.path.isdir(os.path.join(folder, item)):
+                    if _args.web_root_url.startswith("file://"):
+                        subfolder = {"url": f"{_args.web_root_url}{baseurl}{urllib.parse.quote(item)}/index.html", "name": item}
+                    else:
                         subfolder = {"url": f"{_args.web_root_url}{baseurl}{urllib.parse.quote(item)}", "name": item}
                     subfolders.append(subfolder)
                     if item not in _args.exclude_folders:
@@ -335,6 +365,8 @@ def list_folder(folder: str, title: str, _args: Args, raw: list[str]) -> None:
                     if not foldername
                     else f"{_args.web_root_url}{urllib.parse.quote(foldername.removesuffix(folder.split('/')[-1] + '/'))}"
                 )
+                if parent and _args.web_root_url.startswith("file://"):
+                    parent += "index.html"
                 license_info: cclicense.License = (
                     {
                         "project": _args.site_title,
@@ -393,6 +425,8 @@ def main() -> None:
 
         copy_static_files(args)
 
+        icons(args)
+
         if args.generate_webmanifest:
             print("Generating webmanifest...")
             webmanifest(args)

templates/icon.svg.j2

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+    <g id="g0" transform="matrix(5.8227235,0,0,5.8227235,69.672843,69.672843)">
+        <g id="g1">
+            <rect x="6" y="6" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color1 }}" id="rect1" />
+            <path d="m 10,20 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path1" />
+            <circle cx="13" cy="11" r="2" fill="#ffffff" id="circle1" />
+        </g>
+        <g id="g2">
+            <rect x="34" y="6" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color2 }}" id="rect2" />
+            <path d="m 38,20 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path2" />
+            <circle cx="41" cy="11" r="2" fill="#ffffff" id="circle2" />
+        </g>
+        <g id="g3">
+            <rect x="6" y="34" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color3 }}" id="rect3" />
+            <path d="m 10,48 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path3" />
+            <circle cx="13" cy="39" r="2" fill="#ffffff" id="circle3" />
+        </g>
+        <g id="g4">
+            <rect x="34" y="34" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color4 }}" id="rect4" />
+            <path d="m 38,48 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path4" />
+            <circle cx="41" cy="39" r="2" fill="#ffffff" id="circle4" />
+        </g>
+    </g>
+</svg>

themes/carnation.css

@@ -1,31 +1,42 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
+* {
+  --color1: #8b0000;
+  --color2: #b22222;
+  --color3: #ff4500;
+  --color4: #6e0000;
+  --bcolor1: #ebebeb;
+  --bcolor2: #191919;
+  --bcolor3: #171717;
+  --bcolor4: #0a0a0a;
+}
+
 .navbar {
   font-weight: bold;
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #8B0000;
+  background-color: var(--color1);
   font-weight: 900;
 }
 
 .navbar li a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
   text-decoration: none;
-  background-color: #B22222;
+  background-color: var(--color2);
 }
 
 .footer {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #FF4500;
+  background-color: var(--color3);
   font-weight: 700;
 }
 
 .footer a {
-  color: #8B0000;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -35,12 +46,12 @@
 
 .folders img {
   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: #8B0000;
+  fill: var(--color1);
 }
 
 .folders a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
   text-decoration: none;
 }
 
@@ -50,7 +61,7 @@
 
 .row a {
   font-weight: 800;
-  color: #B22222;
+  color: var(--color2);
   text-decoration: none;
 }
 
@@ -60,16 +71,16 @@
 
 .tooltiptext {
   font-weight: 600;
-  background-color: #191313;
+  background-color: var(--bcolor2);
 }
 
 .column img {
-  background-color: #0a0a0a;
+  background-color: var(--bcolor4);
 }
 
 body {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #171717;
+  background-color: var(--bcolor3);
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;

themes/cornflower.css

@@ -1,31 +1,42 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
+* {
+  --color1: #6495ed;
+  --color2: #1346a4;
+  --color3: #0e3377;
+  --color4: #3674e7;
+  --bcolor1: #ebebeb;
+  --bcolor2: #191919;
+  --bcolor3: #171717;
+  --bcolor4: #0a0a0a;
+}
+
 .navbar {
   font-weight: bold;
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #3674e7;
+  background-color: var(--color1);
   font-weight: 900;
 }
 
 .navbar li a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
   text-decoration: none;
-  background-color: #1346a4;
+  background-color: var(--color2);
 }
 
 .footer {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #0e3377;
+  background-color: var(--color3);
   font-weight: 700;
 }
 
 .footer a {
-  color: cornflowerblue;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -35,12 +46,12 @@
 
 .folders img {
   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: cornflowerblue;
+  fill: var(--color1);
 }
 
 .folders a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
   text-decoration: none;
 }
 
@@ -50,7 +61,7 @@
 
 .row a {
   font-weight: 800;
-  color: cornflowerblue;
+  color: var(--color2);
   text-decoration: none;
 }
 
@@ -60,18 +71,16 @@
 
 .tooltiptext {
   font-weight: 600;
-  background-color: #191313;
+  background-color: var(--bcolor2);
-
 }
 
 .column img {
-  background-color: #0a0a0a;
+  background-color: var(--bcolor4);
 }
 
-
 body {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #171717;
+  background-color: var(--bcolor3);
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;

themes/default-dark.css

@@ -1,29 +1,39 @@
 @import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 
+* {
+  --color1: #262a2b;
+  --color2: #0d0e0e;
+  --color3: #313537;
+  --color4: #181a1b;
+  --color5: #5483ef;
+  --bcolor1: #e8e6e3;
+  --bcolor2: #0c0d0e;
+}
+
 .navbar {
   font-weight: bold;
-  color: #e8e6e3;
+  color: var(--bcolor1);
-  background-color: #262a2b;
+  background-color: var(--color1);
 }
 
 .navbar li a {
   font-weight: bold;
-  color: #e8e6e3;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
-  background-color: #0d0e0e;
+  background-color: var(--color2);
 }
 
 .footer {
-  color: #e8e6e3;
+  color: var(--bcolor1);
-  background-color: #313537;
+  background-color: var(--color3);
   font-weight: 500;
 }
 
 .footer a {
-  color: #5483ef;
+  color: var(--color5);
   text-decoration: none;
 }
 
@@ -33,23 +43,23 @@
 
 .folders a {
   font-weight: 700;
-  color: #5483ef;
+  color: var(--color5);
   text-decoration: none;
 }
 
 .tooltiptext {
   font-weight: 400;
-  background-color: #313537;
+  background-color: var(--color3);
 }
 
 .column img {
-  background-color: #0c0d0e;
+  background-color: var(--bcolor2);
 }
 
 
 body {
-  color: #e8e6e3;
+  color: var(--bcolor1);
-  background-color: #181a1b;
+  background-color: var(--color4);
   font-family: "Ubuntu", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
@@ -58,6 +68,6 @@ body {
 
 body a {
   font-weight: 400;
-  color: #5483ef;
+  color: var(--color5);
   text-decoration: none;
 }

themes/default.css

@@ -1,29 +1,39 @@
 @import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 
+* {
+  --color1: #333333;
+  --color2: #888888;
+  --color3: #dddddd;
+  --color4: #111111;
+  --color5: #0055ff;
+  --bcolor1: #ffffff;
+  --bcolor2: #000000;
+}
+
 .navbar {
   font-weight: bold;
-  color: #fff;
+  color: var(--bcolor1);
-  background-color: #333;
+  background-color: var(--color1);
 }
 
 .navbar li a {
   font-weight: 700;
-  color: #fff;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
-  background-color: #111;
+  background-color: var(--color4);
 }
 
 .footer {
-  color: #000;
+  color: var(--bcolor2);
-  background-color: #ddd;
+  background-color: var(--color3);
   font-weight: 500;
 }
 
 .footer a {
-  color: #0055ff;
+  color: var(--color5);
   text-decoration: none;
 }
 
@@ -33,23 +43,23 @@
 
 .folders a {
   font-weight: 700;
-  color: #0055ff;
+  color: var(--color5);
   text-decoration: none;
 }
 
 .tooltiptext {
   font-weight: 400;
-  background-color: #ddd;
+  background-color: var(--color3);
 }
 
 .column img {
-  background-color: #888;
+  background-color: var(--color2);
 }
 
 
 body {
-  color: #000;
+  color: var(--bcolor2);
-  background-color: #fff;
+  background-color: var(--bcolor1);
   font-family: "Ubuntu", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
@@ -58,6 +68,6 @@ body {
 
 body a {
   font-weight: 400;
-  color: #0055ff;
+  color: var(--color5);
   text-decoration: none;
 }

themes/ivy.css

@@ -1,31 +1,42 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
+* {
+  --color1: #006400;
+  --color2: #008000;
+  --color3: #32cd32;
+  --color4: #004300;
+  --bcolor1: #ebebeb;
+  --bcolor2: #191919;
+  --bcolor3: #171717;
+  --bcolor4: #0a0a0a;
+}
+
 .navbar {
   font-weight: bold;
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #006400;
+  background-color: var(--color1);
   font-weight: 900;
 }
 
 .navbar li a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
   text-decoration: none;
-  background-color: #008000;
+  background-color: var(--color2);
 }
 
 .footer {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #32CD32;
+  background-color: var(--color3);
   font-weight: 700;
 }
 
 .footer a {
-  color: #006400;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -35,12 +46,12 @@
 
 .folders img {
   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: #006400;
+  fill: var(--color1);
 }
 
 .folders a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
   text-decoration: none;
 }
 
@@ -50,7 +61,7 @@
 
 .row a {
   font-weight: 800;
-  color: #008000;
+  color: var(--color2);
   text-decoration: none;
 }
 
@@ -60,16 +71,16 @@
 
 .tooltiptext {
   font-weight: 600;
-  background-color: #191313;
+  background-color: var(--bcolor2);
 }
 
 .column img {
-  background-color: #0a0a0a;
+  background-color: var(--bcolor4);
 }
 
 body {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #171717;
+  background-color: var(--bcolor3);
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;

themes/kjoe.css

@@ -1,31 +1,41 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
+* {
+  --color1: #260000;
+  --color2: #470000;
+  --color3: #191313;
+  --color4: #ff2727;
+  --bcolor1: #ebebeb;
+  --bcolor2: #171717;
+  --bcolor3: #0a0a0a;
+}
+
 .navbar {
   font-weight: bold;
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #260000;
+  background-color: var(--color1);
   font-weight: 900;
 }
 
 .navbar li a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
   text-decoration: none;
-  background-color: #470000;
+  background-color: var(--color2);
 }
 
 .footer {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #191313;
+  background-color: var(--color3);
   font-weight: 700;
 }
 
 .footer a {
-  color: #ff2727;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -35,12 +45,11 @@
 
 .folders img {
   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='%238e0000' /%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='%23FF2727' /%3E%3C/g%3E%3C/svg%3E");
-  fill: #f00f0f;
 }
 
 .folders a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
   text-decoration: none;
 }
 
@@ -50,7 +59,7 @@
 
 .row a {
   font-weight: 800;
-  color: #ff2727;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -60,17 +69,17 @@
 
 .tooltiptext {
   font-weight: 600;
-  background-color: #191313;
+  background-color: var(--color3);
 }
 
 .column img {
-  background-color: #0a0a0a;
+  background-color: var(--bcolor3);
 }
 
 
 body {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #171717;
+  background-color: var(--bcolor2);
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;

themes/monokai-vibrant.css

@@ -1,30 +1,42 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
+* {
+  --color1: #81f900;
+  --color2: #e542ff;
+  --color3: #ffd945;
+  --color4: #528bff;
+  --bcolor1: #f6f6f6;
+  --bcolor2: #2c313a;
+  --bcolor3: #191b20;
+  --bcolor4: #16171d;
+  --bcolor5: #0b0c0f;
+}
+
 .navbar {
   font-weight: bold;
-  color: #f6f6f6;
+  color: var(--bcolor1);
-  background-color: #191b20;
+  background-color: var(--bcolor3);
   font-weight: 900;
 }
 
 .navbar li a {
   font-weight: 900;
-  color: #f6f6f6;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
-  background-color: #2c313a;
+  background-color: var(--bcolor2);
 }
 
 .footer {
-  color: #f6f6f6;
+  color: var(--bcolor1);
-  background-color: #2c313a;
+  background-color: var(--bcolor2);
   font-weight: 700;
 }
 
 .footer a {
-  color: #528bff;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -34,23 +46,23 @@
 
 .folders a {
   font-weight: 900;
-  color: #ffd945;
+  color: var(--color3);
   text-decoration: none;
 }
 
 .tooltiptext {
   font-weight: 600;
-  background-color: #2c313a;
+  background-color: var(--bcolor2);
 }
 
 .column img {
-  background-color: #0b0c0f;
+  background-color: var(--bcolor5);
 }
 
 
 body {
-  color: #f6f6f6;
+  color: var(--bcolor1);
-  background-color: #16171d;
+  background-color: var(--bcolor4);
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 800;
@@ -59,6 +71,6 @@ body {
 
 body a {
   font-weight: 900;
-  color: #e542ff;
+  color: var(--color2);
   text-decoration: none;
 }

themes/rainbow.css

@@ -1,31 +1,44 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
+* {
+  --color1: #e50000;
+  --color2: #ff8d00;
+  --color3: #ffee00;
+  --color4: #028121;
+  --color5: #004cff;
+  --color6: #770088;
+  --bcolor1: #ebebeb;
+  --bcolor2: #191919;
+  --bcolor3: #171717;
+  --bcolor4: #0a0a0a;
+}
+
 .navbar {
   font-weight: bold;
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #FF0000;
+  background-color: var(--color1);
   font-weight: 900;
 }
 
 .navbar li a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
   text-decoration: none;
-  background-color: #FF7F00;
+  background-color: var(--color2);
 }
 
 .footer {
-  color: #ebebeb;
+  color: var(--bcolor2);
-  background-color: #0000FF;
+  background-color: var(--color3);
   font-weight: 700;
 }
 
 .footer a {
-  color: #9500ff;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -34,13 +47,13 @@
 }
 
 .folders img {
-  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='%23FF0000' /%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='%23FF7F00' /%3E%3C/g%3E%3C/svg%3E");
+  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: #FF0000;
+  fill: var(--color5);
 }
 
 .folders a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
   text-decoration: none;
 }
 
@@ -50,7 +63,7 @@
 
 .row a {
   font-weight: 800;
-  color: #32CD32;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -60,16 +73,16 @@
 
 .tooltiptext {
   font-weight: 600;
-  background-color: #191313;
+  background-color: var(--bcolor2);
 }
 
 .column img {
-  background-color: #0a0a0a;
+  background-color: var(--bcolor4);
 }
 
 body {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #171717;
+  background-color: var(--bcolor3);
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;

themes/sunflower.css

@@ -1,31 +1,42 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
+* {
+  --color1: #ffb000;
+  --color2: #ffd700;
+  --color3: #ffe135;
+  --color4: #ce8c00;
+  --bcolor1: #ebebeb;
+  --bcolor2: #191919;
+  --bcolor3: #171717;
+  --bcolor4: #0a0a0a;
+}
+
 .navbar {
   font-weight: bold;
-  color: #222222;
+  color: var(--bcolor1);
-  background-color: #FFB000;
+  background-color: var(--color1);
   font-weight: 900;
 }
 
 .navbar li a {
   font-weight: 800;
-  color: #222222;
+  color: var(--bcolor1);
 }
 
 /* Change the link color on hover */
 .navbar li a:hover {
   text-decoration: none;
-  background-color: #FFD700;
+  background-color: var(--color2);
 }
 
 .footer {
-  color: #222222;
+  color: var(--bcolor1);
-  background-color: #FFE135;
+  background-color: var(--color3);
   font-weight: 700;
 }
 
 .footer a {
-  color: #FFB000;
+  color: var(--color4);
   text-decoration: none;
 }
 
@@ -35,12 +46,12 @@
 
 .folders img {
   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: #FFB000;
+  fill: var(--color1);
 }
 
 .folders a {
   font-weight: 800;
-  color: #ebebeb;
+  color: var(--bcolor1);
   text-decoration: none;
 }
 
@@ -50,7 +61,7 @@
 
 .row a {
   font-weight: 800;
-  color: #FFD700;
+  color: var(--color2);
   text-decoration: none;
 }
 
@@ -60,16 +71,16 @@
 
 .tooltiptext {
   font-weight: 600;
-  background-color: #191313;
+  background-color: var(--bcolor2);
 }
 
 .column img {
-  background-color: #0a0a0a;
+  background-color: var(--bcolor4);
 }
 
 body {
-  color: #ebebeb;
+  color: var(--bcolor1);
-  background-color: #171717;
+  background-color: var(--bcolor3);
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 700;