Created
February 6, 2023 17:37
-
-
Save rileyjshaw/875a1fae8c1716cbb5d99ed8f8365fde to your computer and use it in GitHub Desktop.
Convert a list of 10 colors to a Firefox theme manifest.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Convert a list of 10 colors (eg. generated by https://primer.style/prism/) | |
// to a Firefox theme manifest. | |
// | |
// name: The name of the theme. | |
// colors: An array of 10 colors. | |
// id: The ID of the theme. Format: "[email protected]". | |
// version (optional): The version of the theme. Format: "<major>.<minor>". | |
// | |
// Docs: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme | |
// | |
// To use the manifest, save the output as `manifest.json`, zip it, change the | |
// file extension to `.xpi`, and drag it into Firefox. | |
function generateTheme(name, colors, id, version = '1.0') { | |
if (!name || !colors || !id) throw new Error('Error: `name`, `colors`, and `id` are required arguments.'); | |
return JSON.stringify( | |
{ | |
name, | |
manifest_version: 2, | |
version, | |
theme: { | |
images: {}, | |
properties: {}, | |
colors: { | |
button_background_active: colors[3], | |
frame_inactive: colors[8], | |
frame: colors[9], | |
icons_attention: colors[1], | |
icons: colors[2], | |
ntp_background: colors[9], | |
ntp_text: colors[3], | |
popup_border: colors[6], | |
popup_highlight_text: colors[0], | |
popup_highlight: colors[4], | |
popup_text: colors[0], | |
popup: colors[6], | |
sidebar_border: colors[6], | |
sidebar_highlight_text: colors[0], | |
sidebar_highlight: colors[7], | |
sidebar_text: colors[1], | |
sidebar: colors[9], | |
tab_background_text: colors[2], | |
tab_line: colors[7], | |
tab_loading: colors[7], | |
tab_selected: colors[7], | |
tab_text: colors[0], | |
toolbar_field_border_focus: 'transparent', | |
toolbar_field_focus: colors[7], | |
toolbar_field_highlight: colors[5], | |
toolbar_field_text: colors[0], | |
toolbar_field: colors[8], | |
toolbar_text: colors[2], | |
toolbar: 'transparent', | |
}, | |
}, | |
browser_specific_settings: { | |
gecko: { | |
id, | |
}, | |
}, | |
}, | |
null, | |
'\t' | |
); | |
} | |
// Example usage: | |
generateTheme( | |
'Dim', | |
['#f5f1f3', '#c8c2c5', '#989295', '#6e6c6d', '#504f50', '#3a3a3a', '#2c2c2c', '#222223', '#1c1b1e', '#19181c'], | |
version | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment