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

.github/ISSUE_TEMPLATE/create-theme.yml

@@ -33,17 +33,29 @@ body:
       placeholder: https://...
     validations:
       required: true
+  - type: checkbox
+    id: is-color-theme
+    attributes:
+      label: Is Color Theme
+      description: Check this box if the theme is a color theme.
   - type: textarea
     id: styles
     attributes:
       label: Theme Styles
       render: css
-      description: The CSS styles for the theme.
+      description: The CSS styles for the theme. If the theme is a color theme, the styles should be a JSON object with the color values.
       placeholder: |
         body {
           background-color: white;
           color: black;
         }
+
+        or
+
+        {
+          "primaryColor": "#000000",
+          ...
+        }
     validations:
       required: true
   - type: textarea
@@ -59,7 +71,7 @@ body:
     attributes:
       render: json
       label: Preferences
-      description: The preferences for the theme in JSON format. Leave empty if there are no preferences.
+      description: The preferences for the theme in JSON format. Leave empty if there are no preferences. This is not used for color themes.
       placeholder: |
         {
           "uc.my-preference.enable-this": "Enable this feature for the theme",

.github/workflows/create-theme.yml

@@ -38,6 +38,7 @@ jobs:
           echo "THEME_HOMEPAGE=${{ fromJson(steps.issue-parser.outputs.jsonString)['homepage'] }}" >> $GITHUB_ENV
           echo "THEME_IMAGE=${{ fromJson(steps.issue-parser.outputs.jsonString)['image'] }}" >> $GITHUB_ENV
           echo "THEME_AUTHOR=${{ github.event.issue.user.login }}" >> $GITHUB_ENV
+          echo "THEME_IS_COLOR_THEME=${{ fromJson(steps.issue-parser.outputs.jsonString)['is-color-theme'] }}" >> $GITHUB_ENV
 
       - name: Write styles to file
         uses: "DamianReeves/write-file-action@master"
@@ -70,6 +71,7 @@ jobs:
               --description "${{ env.THEME_DESCRIPTION }}" \
               --author "${{ env.THEME_AUTHOR }}" \
               --image "${{ env.THEME_IMAGE }}" \
+              --is-color-theme "${{ env.THEME_IS_COLOR_THEME }}" \
               --homepage "${{ env.THEME_HOMEPAGE }}" 2> error.log
 
       - name: Export creation output

scripts/rebuild-themes.py

@@ -5,6 +5,32 @@
 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 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,13 +130,15 @@ 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
     description = args.description
     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 @@ def main():
     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())