updated themes

2026-02-05 02:59:27 +00:00 · 2024-07-14 11:00:06 +02:00
parent bf16204395
commit 61c9094565
13 changed files with 165 additions and 16 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -165,4 +165,5 @@ test/.static
 test/.thumbnails
 test/**/index.html
 test/**/.sizelist.json
-test/manifest.json
+test/manifest.json
+themes/previews
--- a/generate_previews.py
+++ b/generate_previews.py
@@ -2,9 +2,12 @@ import os
 import re
 import sys
 import time
+import shutil
 import base64
 import logging
+import fileinput
 import urllib.parse
+import urllib.request
 from typing import List
 from selenium import webdriver
 from selenium.webdriver.chrome.service import Service
@@ -16,6 +19,12 @@ from modules.svg_handling import extract_colorscheme
 logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s")


+def replace_all(file, search_exp, replace_exp):
+    for line in fileinput.input(file, inplace=1):
+        line = re.sub(search_exp, replace_exp, line)
+        sys.stdout.write(line)
+
+
 def take_screenshot(html_file_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.
@@ -90,6 +99,45 @@ def take_screenshot(html_file_path: str, css_file: str, output_file: str, driver
        logging.error("Failed to take screenshot for %s: %s", css_file, e)


+def create_preview(html_file_path: str, css_file: str, previews_folder: str):
+    out_file = os.path.basename(css_file).removesuffix(".css") + ".html"
+    urllib.request.urlretrieve(html_file_path, os.path.join(previews_folder, out_file))
+    basename = os.path.basename(css_file)
+    path = css_file.removesuffix(basename)
+    replace_all(
+        os.path.join(previews_folder, out_file),
+        r'^\s*?<link rel="stylesheet" href=".*theme.css">\s*?$',
+        f'  <link rel="stylesheet" href="file://{path}previews/{basename}">',
+    )
+    with open(css_file, "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(css_file, os.path.join(path, "previews", basename))
+    else:
+        with open(os.path.join(path, foldericon.removeprefix("themes/")), "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)
+        os.remove(os.path.join(path, "previews", basename))
+        with open(os.path.join(path, "previews", basename), "x", encoding="utf-8") as f:
+            f.write(themehead + '\n.foldericon {\n  content: url("data:image/svg+xml,' + svg + '");\n}\n' + themetail)
+
+
 def write_readme(directory_path: str, themes: List[str]) -> None:
    """
    Writes the README file with previews of included themes.
@@ -118,6 +166,23 @@ def write_readme(directory_path: str, themes: List[str]) -> None:
        logging.error("Failed to write README.md: %s", e)


+def write_index(directory_path: str, themes: List[str]) -> None:
+    with open(os.path.join(directory_path, "index.html"), "w", encoding="utf-8") as f:
+        f.write(
+            """<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Themes</title>
+</head>
+<body>"""
+        )
+        for theme in themes:
+            f.write(f'<a href="previews/{theme}.html">{theme}</a><br>\n')
+        f.write("</body></html>")
+
+
 def main(directory_path: str, html_file_path: str) -> None:
    """
    Main function to take screenshots for each CSS file in the folder and update the README.md.
@@ -149,15 +214,19 @@ def main(directory_path: str, html_file_path: str) -> None:
                themes.append(theme_name)
                css_file = os.path.join(directory_path, filename)
                output_file = os.path.join(directory_path, "screenshots", f"{theme_name}.png")
+                previews_folder = os.path.join(directory_path, "previews")

                # Create screenshots folder if it doesn't exist
                os.makedirs(os.path.dirname(output_file), exist_ok=True)
+                os.makedirs(previews_folder, exist_ok=True)

                # Take screenshot for this CSS file
                take_screenshot(html_file_path, css_file, output_file, driver)
+                create_preview(html_file_path, css_file, previews_folder)

        # Write the README file with the new previews
        write_readme(directory_path, themes)
+        write_index(directory_path, themes)

    finally:
        driver.quit()
--- a/themes/aritim.css
+++ b/themes/aritim.css
@@ -25,6 +25,7 @@
 /* Change the link color on hover */
 .navbar li a:hover {
  text-decoration: none;
+  color: var(--bcolor1);
  background-color: var(--bcolor2);
 }

--- a/themes/default.css
+++ b/themes/default.css
@@ -49,7 +49,7 @@

 .tooltiptext {
  font-weight: 400;
-  background-color: var(--color3);
+  background-color: var(--color2);
 }

 .column img {
--- a/themes/icons/subfolder.svg.j2
+++ b/themes/icons/subfolder.svg.j2
@@ -1,5 +1,46 @@
-<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" />
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+    version="1.1"
+    id="svg3"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <rect
+        x="10"
+        y="30"
+        width="80"
+        height="50"
+        fill="{{ color1 }}"
+        rx="5"
+        ry="5"
+        id="rect1" />
+    <rect
+        x="10"
+        y="20"
+        width="40"
+        height="20"
+        fill="{{ color1 }}"
+        rx="5"
+        ry="5"
+        id="rect2" />
+    <rect
+        x="20"
+        y="40"
+        width="60"
+        height="40"
+        fill="{{ color2 }}"
+        rx="3"
+        ry="3"
+        id="rect3" />
+    <rect
+        x="30"
+        y="50"
+        width="40"
+        height="30"
+        fill="{{ color1 }}"
+        rx="2"
+        ry="2"
+        id="rect4" />
 </svg>
--- a/themes/index.html
+++ b/themes/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Themes</title>
+</head>
+<body><a href="previews/alpenglow.html">alpenglow</a><br>
+<a href="previews/aritim-dark.html">aritim-dark</a><br>
+<a href="previews/aritim.html">aritim</a><br>
+<a href="previews/autumn.html">autumn</a><br>
+<a href="previews/carnation.html">carnation</a><br>
+<a href="previews/catpuccin.html">catpuccin</a><br>
+<a href="previews/cornflower.html">cornflower</a><br>
+<a href="previews/default-dark.html">default-dark</a><br>
+<a href="previews/default.html">default</a><br>
+<a href="previews/ivy.html">ivy</a><br>
+<a href="previews/kjoe.html">kjoe</a><br>
+<a href="previews/monokai-vibrant.html">monokai-vibrant</a><br>
+<a href="previews/rainbow.html">rainbow</a><br>
+<a href="previews/spring.html">spring</a><br>
+<a href="previews/steam.html">steam</a><br>
+<a href="previews/summer.html">summer</a><br>
+<a href="previews/sunflower.html">sunflower</a><br>
+<a href="previews/winter.html">winter</a><br>
+</body></html>
--- a/themes/screenshots/alpenglow.png
+++ b/themes/screenshots/alpenglow.png
--- a/themes/screenshots/monokai-vibrant.png
+++ b/themes/screenshots/monokai-vibrant.png
--- a/themes/screenshots/rainbow.png
+++ b/themes/screenshots/rainbow.png
--- a/themes/spring.css
+++ b/themes/spring.css
@@ -75,7 +75,7 @@

 .tooltiptext {
  font-weight: 400;
-  background-color: var(--bcolor2);
+  background-color: var(--bcolor4);
  font-family: "Lora", serif;
 }

--- a/themes/summer.css
+++ b/themes/summer.css
@@ -75,6 +75,7 @@

 .tooltiptext {
  font-weight: 400;
+  color: var(--bcolor1);
  background-color: var(--bcolor2);
  font-family: "Roboto", sans-serif;
 }
--- a/themes/sunflower.css
+++ b/themes/sunflower.css
@@ -70,6 +70,7 @@

 .tooltiptext {
  font-weight: 600;
+  color: var(--bcolor1);
  background-color: var(--bcolor2);
 }

--- a/themes/winter.css
+++ b/themes/winter.css
@@ -1,14 +1,22 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

 * {
-  --color1: #00CED1; /* DarkTurquoise */
-  --color2: #4682B4; /* SteelBlue */
-  --color3: #B0C4DE; /* LightSteelBlue */
-  --color4: #5F9EA0; /* CadetBlue */
-  --bcolor1: #FFFFFF; /* White */
-  --bcolor2: #2F4F4F; /* DarkSlateGray */
-  --bcolor3: #E0E0E0; /* LightGray */
-  --bcolor4: #D3D3D3; /* LightGray */
+  --color1: #00CED1;
+  /* DarkTurquoise */
+  --color2: #4682B4;
+  /* SteelBlue */
+  --color3: #B0C4DE;
+  /* LightSteelBlue */
+  --color4: #5F9EA0;
+  /* CadetBlue */
+  --bcolor1: #FFFFFF;
+  /* White */
+  --bcolor2: #2F4F4F;
+  /* DarkSlateGray */
+  --bcolor3: #E0E0E0;
+  /* LightGray */
+  --bcolor4: #D3D3D3;
+  /* LightGray */
 }

 .navbar {
@@ -75,6 +83,7 @@

 .tooltiptext {
  font-weight: 400;
+  color: var(--bcolor3);
  background-color: var(--bcolor2);
  font-family: "Montserrat", sans-serif;
 }
@@ -101,4 +110,4 @@ body {
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
-}
+}