feat: Add support for color themes in theme creation

This commit modifies the theme creation process to include support for color themes. It adds a new checkbox field in the theme creation form to indicate whether the theme is a color theme. If the checkbox is selected, the CSS styles for the theme should be provided as a JSON object with the color values. Additionally, the `create-theme.yml` workflow file is updated to include the `THEME_IS_COLOR_THEME` environment variable when building the theme. The `rebuild-themes.py` script is also updated to generate a `chrome.css` file for color themes based on the provided color values in a `colors.json` file.

Fixes #69

scripts/rebuild-themes.py

@@ -5,6 +5,32 @@ import json
 THEMES_FOLDER = './themes'
 THEMES_DATA_FILE = './themes.json'
 
+def get_color_css_variable(color):
+    if color == "primaryColor":
+        return '--zen-colors-primary'
+    if color == "secondaryColor":
+        return '--zen-colors-secondary'
+    if color == "tertiaryColor":
+        return '--zen-colors-tertiary'
+    if color == "colorsBorder":
+        return '--zen-colors-border'
+    print(f"Unknown color: {color}")
+    exit(1)
+
+def write_colors(colors_file, output_file):
+    with open(colors_file, 'r') as f:
+        colors = json.load(f)
+        with open(output_file, 'w') as f:
+            f.write('/* This is a color theme. */\n')
+            f.write(':root {\n')
+            for color in colors:
+                if color == "isDarkMode":
+                    continue
+                f.write(f'    {get_color_css_variable(color)}: {colors[color]};\n')
+            if colors["isDarkMode"]:
+                f.write('    color-scheme: dark !important;\n')
+            f.write('}\n')
+
 def main():
     with open(THEMES_DATA_FILE, 'w') as f:
         json.dump({}, f, indent=4)
@@ -22,6 +48,10 @@ def main():
                 themes_data[theme] = theme_data
                 with open(THEMES_DATA_FILE, 'w') as f:
                     json.dump(themes_data, f, indent=4)
+        theme_colors_file = os.path.join(theme_folder, 'colors.json')
+        if os.path.exists(theme_colors_file):
+            theme_colors_output = os.path.join(theme_folder, 'chrome.css')
+            write_colors(theme_colors_file, theme_colors_output)
         print(f"Rebuilt theme: {theme}")
     print("Rebuilt all themes!")
   

scripts/submit-theme.py

@@ -8,6 +8,7 @@ import requests
 import urllib.parse
 
 STYLES_FILE = "chrome.css"
+COLORS_FILE = "colors.json"
 README_FILE = "readme.md"
 IMAGE_FILE = "image.png"
 PREFERENCES_FILE = "preferences.json"
@@ -22,11 +23,17 @@ def create_theme_id():
 def get_static_asset(theme_id, asset):
     return f"https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/{theme_id}/{asset}"
 
-def get_styles():
+def get_styles(is_color_theme, theme_id):
     with open(TEMPLATE_STYLES_FILE, 'r') as f:
         content = f.read()
         content = content[len("```css"):]
         content = content[:-len("```")]
+
+        # we actually have a JSON file here that needs to be generated
+        if is_color_theme:
+            with open(f"themes/{theme_id}/{COLORS_FILE}", 'w') as f:
+                json.dump(json.loads(content), f, indent=4)
+            return "/* This is a color theme. */"
         return content
     
 def get_readme():
@@ -123,6 +130,7 @@ def main():
     parser.add_argument('--homepage', type=str, help='The homepage of the theme.')
     parser.add_argument('--author', type=str, help='The author of the theme.')
     parser.add_argument('--image', type=str, help='The image of the theme.')
+    parser.add_argument('--is-color-theme', action='store_true', help='Whether the theme is a color theme.')
     args = parser.parse_args()
 
     name = args.name
@@ -130,6 +138,7 @@ def main():
     homepage = args.homepage
     author = args.author
     image = args.image
+    is_color_theme = args.is_color_theme == True
 
     validate_name(name)
     validate_description(description)
@@ -162,7 +171,7 @@ Just joking, you can do whatever you want. You're the boss.
     os.makedirs(f"themes/{theme_id}")
 
     with open(f"themes/{theme_id}/{STYLES_FILE}", 'w') as f:
-        f.write(get_styles())
+        f.write(get_styles(is_color_theme, theme_id))
 
     with open(f"themes/{theme_id}/{README_FILE}", 'w') as f:
         f.write(get_readme())