additional themes bruv

themes/README.md

@@ -0,0 +1,103 @@
+# Custom CSS Themes
+
+You can create custom Themes. They must at least include the following:
+
+## Requirements for Themes
+
+### Required Variables
+
+Define the following variables in your theme:
+
+- `--color1`: Primary color
+- `--color2`: Secondary color
+- `--color3`: Additional color
+- `--color4`: Another color
+
+These variables are essential for automatic icon generation.
+
+### Folder Icon Specification
+
+Include the following CSS rule to specify the folder icon used in your theme:
+
+```css
+.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: var(--color1); /* Adjust fill color as per your theme */
+}
+```
+
+Replace the SVG data URI (`url("data:image/svg+xml,...")`) with your desired SVG icon content. Adjust the `fill` color to match `--color1` or another suitable color from your theme's palette.
+
+## Previews of included themes
+
+### Alpenglow Theme
+
+![Alpenglow Theme](./alpenglow.png)
+
+### Aritim Dark Theme
+
+![Aritim Dark Theme](./aritim-dark.png)
+
+### Aritim Theme
+
+![Aritim Theme](./aritim.png)
+
+### Autumn Theme
+
+![Autumn Theme](./autumn.png)
+
+### Carnation Theme
+
+![Carnation Theme](./carnation.png)
+
+### Catpuccino Theme
+
+![Catpuccin Theme](./catpuccin.png)
+
+### Cornflower Theme
+
+![Cornflower Theme](./cornflower.png)
+
+### Default Dark Theme
+
+![Default Dark Theme](./default-dark.png)
+
+### Default Theme
+
+![Default Theme](./default.png)
+
+### Ivy Theme
+
+![Ivy Theme](./ivy.png)
+
+### Kjoe Theme
+
+![Kjoe Theme](./kjoe.png)
+
+### Monokai Vibrant Theme
+
+![Monokai Vibrant Theme](./monokai-vibrant.png)
+
+### Rainbow Theme
+
+![Rainbow Theme](./rainbow.png)
+
+### Spring Theme
+
+![Spring Theme](./spring.png)
+
+### Steam Theme
+
+![Steam Theme](./steam.png)
+
+### Summer Theme
+
+![Summer Theme](./summer.png)
+
+### Sunflower Theme
+
+![Sunflower Theme](./sunflower.png)
+
+### Winter Theme
+
+![Winter Theme](./winter.png)

themes/alpenglow.css

@@ -0,0 +1,97 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400;600;800&display=swap");
+
+* {
+  --color1: #FFADAD; /* Soft Pink */
+  --color2: #FF6363; /* Vivid Pink */
+  --color3: #FF9F1C; /* Orange */
+  --color4: #FF6F91; /* Coral Pink */
+  --bcolor1: #FFFFFF; /* White */
+  --bcolor2: #1E1E1E; /* Almost Black */
+  --bcolor3: #2E2E2E; /* Dark Gray */
+  --bcolor4: #4B4B4B; /* Medium Gray */
+}
+
+body {
+  color: var(--bcolor1);
+  background-color: var(--bcolor3);
+  font-family: "Roboto Slab", serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.navbar {
+  font-weight: 600;
+  color: var(--bcolor1);
+  background-color: var(--color1);
+}
+
+.navbar li a {
+  font-weight: 400;
+  color: var(--bcolor1);
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  font-weight: 600;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%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);
+}
+
+.folders a {
+  font-weight: 400;
+  color: var(--bcolor1);
+  text-decoration: none;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 400;
+  color: var(--color2);
+  text-decoration: none;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 200;
+  background-color: var(--bcolor2);
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 400;
+}

themes/aritim-dark.css

@@ -0,0 +1,105 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+
+* {
+  --color1: #6B5B95; /* Purple */
+  --color2: #FF6F61; /* Coral */
+  --color3: #88B04B; /* Green */
+  --color4: #F7CAC9; /* Pink */
+  --bcolor1: #2C2C2C; /* Very Dark Gray */
+  --bcolor2: #D3D3D3; /* Light Gray */
+  --bcolor3: #1C1C1C; /* Very Dark Gray */
+  --bcolor4: #4B0082; /* Indigo */
+}
+
+.navbar {
+  font-weight: 600;
+  color: var(--bcolor2);
+  background-color: var(--color1);
+  font-family: "Poppins", sans-serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor2);
+  font-family: "Poppins", sans-serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor2);
+  background-color: var(--color3);
+  font-weight: 500;
+  font-family: "Poppins", sans-serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%23FF6F61' /%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='%236B5B95' /%3E%3C/g%3E%3C/svg%3E");
+  fill: var(--color1);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor2);
+  text-decoration: none;
+  font-family: "Poppins", sans-serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color2);
+  text-decoration: none;
+  font-family: "Poppins", sans-serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor1);
+  font-family: "Poppins", sans-serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor2);
+  font-weight: 600;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  color: var(--bcolor2);
+  background-color: var(--bcolor3);
+  font-family: "Poppins", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

themes/aritim.css

@@ -0,0 +1,105 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+
+* {
+  --color1: #FF6F61; /* Coral */
+  --color2: #6B5B95; /* Purple */
+  --color3: #88B04B; /* Green */
+  --color4: #F7CAC9; /* Pink */
+  --bcolor1: #FFFFFF; /* White */
+  --bcolor2: #4B4B4B; /* Dark Gray */
+  --bcolor3: #F0F0F0; /* Light Gray */
+  --bcolor4: #D8BFD8; /* Thistle */
+}
+
+.navbar {
+  font-weight: 600;
+  color: var(--bcolor1);
+  background-color: var(--color1);
+  font-family: "Poppins", sans-serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  font-family: "Poppins", sans-serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  font-weight: 500;
+  font-family: "Poppins", sans-serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%236B5B95' /%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='%23FF6F61' /%3E%3C/g%3E%3C/svg%3E");
+  fill: var(--color1);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor1);
+  text-decoration: none;
+  font-family: "Poppins", sans-serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color2);
+  text-decoration: none;
+  font-family: "Poppins", sans-serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor2);
+  font-family: "Poppins", sans-serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 600;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  color: var(--bcolor2);
+  background-color: var(--bcolor3);
+  font-family: "Poppins", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

themes/autumn.css

@@ -0,0 +1,105 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap");
+
+* {
+  --color1: #FF7F50; /* Coral */
+  --color2: #D2691E; /* Chocolate */
+  --color3: #8B4513; /* SaddleBrown */
+  --color4: #FFA07A; /* LightSalmon */
+  --bcolor1: #FFF8DC; /* Cornsilk */
+  --bcolor2: #2F4F4F; /* DarkSlateGray */
+  --bcolor3: #3E2723; /* Darker brown */
+  --bcolor4: #4E342E; /* Slightly lighter brown */
+}
+
+.navbar {
+  font-weight: 600;
+  color: var(--bcolor1);
+  background-color: var(--color1);
+  font-family: "Playfair Display", serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  font-family: "Playfair Display", serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  font-weight: 500;
+  font-family: "Playfair Display", serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%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);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor1);
+  text-decoration: none;
+  font-family: "Playfair Display", serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color2);
+  text-decoration: none;
+  font-family: "Playfair Display", serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor2);
+  font-family: "Playfair Display", serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 600;
+  font-family: "Playfair Display", serif;
+}
+
+body {
+  color: var(--bcolor1);
+  background-color: var(--bcolor3);
+  font-family: "Playfair Display", serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

themes/catpuccin.css

@@ -0,0 +1,105 @@
+@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 */
+}
+
+.navbar {
+  font-weight: 600;
+  color: var(--bcolor1);
+  background-color: var(--color1);
+  font-family: "Nunito", sans-serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  font-family: "Nunito", sans-serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  font-weight: 500;
+  font-family: "Nunito", sans-serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%2396CDFB' /%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='%23F28FAD' /%3E%3C/g%3E%3C/svg%3E");
+  fill: var(--color1);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor1);
+  text-decoration: none;
+  font-family: "Nunito", sans-serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color2);
+  text-decoration: none;
+  font-family: "Nunito", sans-serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor2);
+  font-family: "Nunito", sans-serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 600;
+  font-family: "Nunito", sans-serif;
+}
+
+body {
+  color: var(--bcolor2);
+  background-color: var(--bcolor3);
+  font-family: "Nunito", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

themes/generate_preview.py

@@ -0,0 +1,66 @@
+import os
+import sys
+import time
+from selenium import webdriver
+from selenium.webdriver.chrome.service import Service
+from selenium.webdriver.common.by import By
+from selenium.webdriver.chrome.options import Options
+
+def take_screenshot(html_file, css_file, output_file):
+    # Setup Chrome options
+    chrome_options = Options()
+    chrome_options.add_argument("--headless")  # Run in headless mode, no GUI
+
+    # Initialize Chrome WebDriver with the specified service and options
+    chromedriver_path = '/usr/bin/chromedriver'  # Replace with your actual path
+    service = Service(chromedriver_path)
+    driver = webdriver.Chrome(service=service, options=chrome_options)
+
+    try:
+        # Open the HTML file
+        driver.get(f'file://{os.path.abspath(html_file)}')
+
+        # Apply the CSS file to the HTML
+        apply_css_script = f"""
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = '{os.path.abspath(css_file)}';
+            document.head.appendChild(link);
+        """
+        driver.execute_script(apply_css_script)
+
+        # Wait for a while to ensure CSS is applied (adjust as needed)
+        time.sleep(2)
+
+        # Capture screenshot
+        driver.save_screenshot(output_file)
+        print(f'Screenshot saved to {output_file}')
+
+    finally:
+        driver.quit()
+
+def main(folder_path):
+    # Assuming index.html is in the same directory as the CSS files
+    html_file = '/mnt/nfs/pictures/Sony_Alpha_7_iv/103MSDCF/index.html'
+
+    # Check if the folder path exists
+    if not os.path.exists(folder_path):
+        print(f'Error: Folder path "{folder_path}" does not exist.')
+        return
+
+    # Iterate over all files in the folder
+    for filename in os.listdir(folder_path):
+        if filename.endswith('.css'):
+            css_file = os.path.join(folder_path, filename)
+            output_file = os.path.join(folder_path, f'{os.path.splitext(filename)[0]}.png')
+
+            # Take screenshot for this CSS file
+            take_screenshot(html_file, css_file, output_file)
+
+if __name__ == "__main__":
+    if len(sys.argv) != 2:
+        print('Usage: python script_name.py folder_path')
+    else:
+        folder_path = sys.argv[1]
+        main(folder_path)

themes/spring.css

@@ -0,0 +1,105 @@
+@import url("https://fonts.googleapis.com/css2?family=Lora:wght@300;400;500;600;700&display=swap");
+
+* {
+  --color1: #FFB6C1; /* LightPink */
+  --color2: #98FB98; /* PaleGreen */
+  --color3: #FFD700; /* Gold */
+  --color4: #87CEFA; /* LightSkyBlue */
+  --bcolor1: #FFFFFF; /* White */
+  --bcolor2: #2F4F4F; /* DarkSlateGray */
+  --bcolor3: #FAF0E6; /* Linen */
+  --bcolor4: #E6E6FA; /* Lavender */
+}
+
+.navbar {
+  font-weight: 600;
+  color: var(--bcolor1);
+  background-color: var(--color1);
+  font-family: "Lora", serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  font-family: "Lora", serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  font-weight: 500;
+  font-family: "Lora", serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%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);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor1);
+  text-decoration: none;
+  font-family: "Lora", serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color2);
+  text-decoration: none;
+  font-family: "Lora", serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor2);
+  font-family: "Lora", serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 600;
+  font-family: "Lora", serif;
+}
+
+body {
+  color: var(--bcolor2);
+  background-color: var(--bcolor3);
+  font-family: "Lora", serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

themes/steam.css

@@ -0,0 +1,105 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
+* {
+  --color1: #1b2838; /* Dark Blue */
+  --color2: #2a475e; /* Medium Blue */
+  --color3: #66c0f4; /* Light Blue */
+  --color4: #c7d5e0; /* Light Gray */
+  --bcolor1: #FFFFFF; /* White */
+  --bcolor2: #1b2838; /* Dark Blue */
+  --bcolor3: #171a21; /* Dark Gray */
+  --bcolor4: #66c0f4; /* Light Blue */
+}
+
+.navbar {
+  font-weight: 700;
+  color: var(--bcolor1);
+  background-color: var(--bcolor2);
+  font-family: "Roboto", sans-serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  font-family: "Roboto", sans-serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--bcolor3);
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%232a475e' /%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='%231b2838' /%3E%3C/g%3E%3C/svg%3E");
+  fill: var(--color1);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor1);
+  text-decoration: none;
+  font-family: "Roboto", sans-serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color3);
+  text-decoration: none;
+  font-family: "Roboto", sans-serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor2);
+  font-family: "Roboto", sans-serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 600;
+  font-family: "Roboto", sans-serif;
+}
+
+body {
+  color: var(--bcolor1);
+  background-color: var(--bcolor3);
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

themes/summer.css

@@ -0,0 +1,105 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
+* {
+  --color1: #FFD700; /* Gold */
+  --color2: #00BFFF; /* DeepSkyBlue */
+  --color3: #32CD32; /* LimeGreen */
+  --color4: #FFA500; /* Orange */
+  --bcolor1: #FFFFFF; /* White */
+  --bcolor2: #1E1E1E; /* DarkGrey */
+  --bcolor3: #F0F8FF; /* AliceBlue */
+  --bcolor4: #E0FFFF; /* LightCyan */
+}
+
+.navbar {
+  font-weight: 700;
+  color: var(--bcolor1);
+  background-color: var(--color1);
+  font-family: "Roboto", sans-serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  font-family: "Roboto", sans-serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%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);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor1);
+  text-decoration: none;
+  font-family: "Roboto", sans-serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color2);
+  text-decoration: none;
+  font-family: "Roboto", sans-serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor2);
+  font-family: "Roboto", sans-serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 600;
+  font-family: "Roboto", sans-serif;
+}
+
+body {
+  color: var(--bcolor2);
+  background-color: var(--bcolor3);
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}

themes/winter.css

@@ -0,0 +1,105 @@
+@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 */
+}
+
+.navbar {
+  font-weight: 600;
+  color: var(--bcolor1);
+  background-color: var(--color1);
+  font-family: "Montserrat", sans-serif;
+}
+
+.navbar li a {
+  font-weight: 500;
+  color: var(--bcolor1);
+  font-family: "Montserrat", sans-serif;
+}
+
+/* Change the link color on hover */
+.navbar li a:hover {
+  text-decoration: none;
+  background-color: var(--color2);
+}
+
+.footer {
+  color: var(--bcolor1);
+  background-color: var(--color3);
+  font-weight: 500;
+  font-family: "Montserrat", sans-serif;
+}
+
+.footer a {
+  color: var(--color4);
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
+
+.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='%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);
+}
+
+.folders a {
+  font-weight: 600;
+  color: var(--bcolor1);
+  text-decoration: none;
+  font-family: "Montserrat", sans-serif;
+}
+
+.folders a:hover {
+  text-decoration: none;
+}
+
+.row a {
+  font-weight: 500;
+  color: var(--color2);
+  text-decoration: none;
+  font-family: "Montserrat", sans-serif;
+}
+
+.row a:hover {
+  text-decoration: underline;
+}
+
+.tooltiptext {
+  font-weight: 400;
+  background-color: var(--bcolor2);
+  font-family: "Montserrat", sans-serif;
+}
+
+.column img {
+  background-color: var(--bcolor4);
+}
+
+#totop:hover {
+  background-color: var(--color2);
+}
+
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 600;
+  font-family: "Montserrat", sans-serif;
+}
+
+body {
+  color: var(--bcolor2);
+  background-color: var(--bcolor3);
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}