mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
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
This commit is contained in:
parent
6aa221874d
commit
01040237ed
4 changed files with 57 additions and 4 deletions
16
.github/ISSUE_TEMPLATE/create-theme.yml
vendored
16
.github/ISSUE_TEMPLATE/create-theme.yml
vendored
|
@ -33,17 +33,29 @@ body:
|
||||||
placeholder: https://...
|
placeholder: https://...
|
||||||
validations:
|
validations:
|
||||||
required: true
|
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
|
- type: textarea
|
||||||
id: styles
|
id: styles
|
||||||
attributes:
|
attributes:
|
||||||
label: Theme Styles
|
label: Theme Styles
|
||||||
render: css
|
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: |
|
placeholder: |
|
||||||
body {
|
body {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
{
|
||||||
|
"primaryColor": "#000000",
|
||||||
|
...
|
||||||
|
}
|
||||||
validations:
|
validations:
|
||||||
required: true
|
required: true
|
||||||
- type: textarea
|
- type: textarea
|
||||||
|
@ -59,7 +71,7 @@ body:
|
||||||
attributes:
|
attributes:
|
||||||
render: json
|
render: json
|
||||||
label: Preferences
|
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: |
|
placeholder: |
|
||||||
{
|
{
|
||||||
"uc.my-preference.enable-this": "Enable this feature for the theme",
|
"uc.my-preference.enable-this": "Enable this feature for the theme",
|
||||||
|
|
2
.github/workflows/create-theme.yml
vendored
2
.github/workflows/create-theme.yml
vendored
|
@ -38,6 +38,7 @@ jobs:
|
||||||
echo "THEME_HOMEPAGE=${{ fromJson(steps.issue-parser.outputs.jsonString)['homepage'] }}" >> $GITHUB_ENV
|
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_IMAGE=${{ fromJson(steps.issue-parser.outputs.jsonString)['image'] }}" >> $GITHUB_ENV
|
||||||
echo "THEME_AUTHOR=${{ github.event.issue.user.login }}" >> $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
|
- name: Write styles to file
|
||||||
uses: "DamianReeves/write-file-action@master"
|
uses: "DamianReeves/write-file-action@master"
|
||||||
|
@ -70,6 +71,7 @@ jobs:
|
||||||
--description "${{ env.THEME_DESCRIPTION }}" \
|
--description "${{ env.THEME_DESCRIPTION }}" \
|
||||||
--author "${{ env.THEME_AUTHOR }}" \
|
--author "${{ env.THEME_AUTHOR }}" \
|
||||||
--image "${{ env.THEME_IMAGE }}" \
|
--image "${{ env.THEME_IMAGE }}" \
|
||||||
|
--is-color-theme "${{ env.THEME_IS_COLOR_THEME }}" \
|
||||||
--homepage "${{ env.THEME_HOMEPAGE }}" 2> error.log
|
--homepage "${{ env.THEME_HOMEPAGE }}" 2> error.log
|
||||||
|
|
||||||
- name: Export creation output
|
- name: Export creation output
|
||||||
|
|
|
@ -5,6 +5,32 @@ import json
|
||||||
THEMES_FOLDER = './themes'
|
THEMES_FOLDER = './themes'
|
||||||
THEMES_DATA_FILE = './themes.json'
|
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():
|
def main():
|
||||||
with open(THEMES_DATA_FILE, 'w') as f:
|
with open(THEMES_DATA_FILE, 'w') as f:
|
||||||
json.dump({}, f, indent=4)
|
json.dump({}, f, indent=4)
|
||||||
|
@ -22,6 +48,10 @@ def main():
|
||||||
themes_data[theme] = theme_data
|
themes_data[theme] = theme_data
|
||||||
with open(THEMES_DATA_FILE, 'w') as f:
|
with open(THEMES_DATA_FILE, 'w') as f:
|
||||||
json.dump(themes_data, f, indent=4)
|
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(f"Rebuilt theme: {theme}")
|
||||||
print("Rebuilt all themes!")
|
print("Rebuilt all themes!")
|
||||||
|
|
||||||
|
|
|
@ -8,6 +8,7 @@ import requests
|
||||||
import urllib.parse
|
import urllib.parse
|
||||||
|
|
||||||
STYLES_FILE = "chrome.css"
|
STYLES_FILE = "chrome.css"
|
||||||
|
COLORS_FILE = "colors.json"
|
||||||
README_FILE = "readme.md"
|
README_FILE = "readme.md"
|
||||||
IMAGE_FILE = "image.png"
|
IMAGE_FILE = "image.png"
|
||||||
PREFERENCES_FILE = "preferences.json"
|
PREFERENCES_FILE = "preferences.json"
|
||||||
|
@ -22,11 +23,17 @@ def create_theme_id():
|
||||||
def get_static_asset(theme_id, asset):
|
def get_static_asset(theme_id, asset):
|
||||||
return f"https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/{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:
|
with open(TEMPLATE_STYLES_FILE, 'r') as f:
|
||||||
content = f.read()
|
content = f.read()
|
||||||
content = content[len("```css"):]
|
content = content[len("```css"):]
|
||||||
content = content[:-len("```")]
|
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
|
return content
|
||||||
|
|
||||||
def get_readme():
|
def get_readme():
|
||||||
|
@ -123,6 +130,7 @@ def main():
|
||||||
parser.add_argument('--homepage', type=str, help='The homepage of the theme.')
|
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('--author', type=str, help='The author of the theme.')
|
||||||
parser.add_argument('--image', type=str, help='The image 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()
|
args = parser.parse_args()
|
||||||
|
|
||||||
name = args.name
|
name = args.name
|
||||||
|
@ -130,6 +138,7 @@ def main():
|
||||||
homepage = args.homepage
|
homepage = args.homepage
|
||||||
author = args.author
|
author = args.author
|
||||||
image = args.image
|
image = args.image
|
||||||
|
is_color_theme = args.is_color_theme == True
|
||||||
|
|
||||||
validate_name(name)
|
validate_name(name)
|
||||||
validate_description(description)
|
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}")
|
os.makedirs(f"themes/{theme_id}")
|
||||||
|
|
||||||
with open(f"themes/{theme_id}/{STYLES_FILE}", 'w') as f:
|
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:
|
with open(f"themes/{theme_id}/{README_FILE}", 'w') as f:
|
||||||
f.write(get_readme())
|
f.write(get_readme())
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue