diff --git a/content/contribute/CONTRIBUTING.md b/content/contribute/CONTRIBUTING.md index c1f4cef..f6d3efa 100644 --- a/content/contribute/CONTRIBUTING.md +++ b/content/contribute/CONTRIBUTING.md @@ -1,7 +1,7 @@ --- title: Contributing to Zen Browser draft: false -lastmod: 2024-08-26 +lastmod: 2025-02-07 --- Thank you for considering contributing to Zen Browser! We appreciate your time and effort in improving this project. The following is a set of guidelines for contributing to Zen Browser. These guidelines are intended to make it easier for you to get involved. @@ -23,7 +23,7 @@ To help you get started with contributing, we have created separate guides for e - [[www | Getting Started with Zen's Homepage Development]] - [[docs | Getting Started with Documentation Contributions]] - [[translation | Getting Started with Translations]] - + Please follow the appropriate guide based on the repository you want to contribute to. ### Reporting Bugs @@ -33,7 +33,7 @@ If you find a bug, please open an issue and describe the problem in detail. Incl >[!important] >Open the issue in it's corresponding GitHub repository: >- [Desktop Browser App](https://github.com/zen-browser/desktop/issues) ->- [Zen's Custom Themes](https://github.com/zen-browser/theme-store) +>- [Zen's Custom Mods](https://github.com/zen-browser/theme-store) >- [Zen's Homepage Website](https://github.com/zen-browser/www) >- [This documentation Website](https://github.com/zen-browser/docs) @@ -41,7 +41,7 @@ If you find a bug, please open an issue and describe the problem in detail. Incl ![[discuss.png]] -We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category. +We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category. *Use the correct Github Repository based on the list above* --- diff --git a/content/index.md b/content/index.md index a2960e7..cce8e47 100644 --- a/content/index.md +++ b/content/index.md @@ -9,7 +9,7 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee * #### [[building|Building Zen Browser 📦]] * #### [[user-manual/index|User Manual 📖]] * #### [[guides/index|Guides 🛠️]] -* #### [[themes-store/index|Theme Store 🎨]] +* #### [[themes-store/index|Mods Registry 🎨]] * #### [[faq | Frequently Asked Questions ❓]] * #### [[benchmarks | Performance Benchmarks 📊]] * #### [[contribute/index | Contribution Guides 🌟]] diff --git a/content/themes-store/index.md b/content/themes-store/index.md index a96bc90..74ca7c7 100644 --- a/content/themes-store/index.md +++ b/content/themes-store/index.md @@ -1,3 +1,3 @@ --- -title: Themes Store 🎨 +title: Mods Registry 🎨 --- diff --git a/content/themes-store/themes-marketplace-preferences.md b/content/themes-store/themes-marketplace-preferences.md index 0278508..fb4a94b 100644 --- a/content/themes-store/themes-marketplace-preferences.md +++ b/content/themes-store/themes-marketplace-preferences.md @@ -1,9 +1,9 @@ --- -title: Themes Store Preferences ⚙️ -lastmod: 2024-09-16 +title: Mods Registry Preferences ⚙️ +lastmod: 2025-02-07 --- -The `preferences.json` file allows theme developers to define custom preferences that control the behavior and appearance of themes in the Zen Browser. Each preference is defined with a `property`, a `label`, a `type`, and optionally `options` (for dropdown preferences), `defaultValue`, `placeholder` (to configure preference placeholder) and `disabledOn` (to disable property on selected OS). The `preferences.json` file contains a list of these preference objects at its root. +The `preferences.json` file allows mod developers to define custom preferences that control the behavior and appearance of mods in the Zen Browser. Each preference is defined with a `property`, a `label`, a `type`, and optionally `options` (for dropdown preferences), `defaultValue`, `placeholder` (to configure preference placeholder) and `disabledOn` (to disable property on selected OS). The `preferences.json` file contains a list of these preference objects at its root. ## Preferences fields @@ -11,7 +11,7 @@ The `preferences.json` file allows theme developers to define custom preferences The `property` field is a string that should follow Firefox's preference naming schema, similar to `about:config` entries. The `property` name can be any valid string that aligns with this schema. -For example: `theme.mytheme.background_color` +For example: `mod.mymod.background_color` ### Field: `label` - Label @@ -35,7 +35,7 @@ The `checkbox` type allows a togglable input to enable or disable a property. ```json title="Checkbox Example" { - "property": "theme.mytheme.enable_dark_mode", + "property": "mod.mymod.enable_dark_mode", "label": "Enable dark mode", "type": "checkbox" } @@ -47,7 +47,7 @@ The `dropdown` type allows to select a single choice on multiple options. ```json title="Dropdown Example" { - "property": "theme.mytheme.background_color", + "property": "mod.mymod.background_color", "label": "Background color", "type": "dropdown", "options": [ @@ -70,7 +70,7 @@ The `string` type is a text input that allows to insert valid css values without ```json title="String Example" { - "property": "theme.mytheme.tab_padding", + "property": "mod.mymod.tab_padding", "label": "Set tab padding", "type": "string" } @@ -161,18 +161,18 @@ For example: `e.g: 10px`
See Full Example -Below is a full example of what a `preferences.json` file might look like with multiple preference objects in its root. Each object represents a preference defined for a theme: +Below is a full example of what a `preferences.json` file might look like with multiple preference objects in its root. Each object represents a preference defined for a mod: ```json [ { - "property": "theme.mytheme.enable_dark_mode", + "property": "mod.mymod.enable_dark_mode", "label": "Enable dark mode", "type": "checkbox", "defaultValue": true }, { - "property": "theme.mytheme.background_color", + "property": "mod.mymod.background_color", "label": "Background color", "type": "dropdown", "placeholder": "Select a color", @@ -189,7 +189,7 @@ Below is a full example of what a `preferences.json` file might look like with m ] }, { - "property": "theme.mytheme.show_bookmarks_bar", + "property": "mod.mymod.show_bookmarks_bar", "label": "Show bookmarks bar", "type": "string", "disabledOn": ["macos"] @@ -207,19 +207,19 @@ In this example: --- -## Using preferences in the theme's CSS +## Using preferences in the mod's CSS -Once you have defined your preferences in the `preferences.json` file, you can use them in your theme’s CSS to modify the appearance or behavior based on the user’s selections. +Once you have defined your preferences in the `preferences.json` file, you can use them in your mod’s CSS to modify the appearance or behavior based on the user’s selections. ### Checkbox Preferences Checkbox preferences can be detected in your CSS using the `-moz-bool-pref` media query, which evaluates the boolean value (`true` or `false`) of a checkbox preference. -For example, if you have a preference to enable dark mode in your theme: +For example, if you have a preference to enable dark mode in your mod: ```json { - "property": "theme.mytheme.enable_dark_mode", + "property": "mod.mymod.enable_dark_mode", "label": "Enable dark mode", "type": "checkbox" } @@ -228,7 +228,7 @@ For example, if you have a preference to enable dark mode in your theme: You can use the following CSS to change the background color when the dark mode preference is enabled: ```css {1} -@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") { +@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") { body { background-color: #000; color: #fff; @@ -238,16 +238,16 @@ You can use the following CSS to change the background color when the dark mode You can also have negative conditions ```css {1} -@media not (-moz-bool-pref: "theme.mytheme.enable_dark_mode") +@media not (-moz-bool-pref: "mod.mymod.enable_dark_mode") ``` ### Dropdown Preferences > [!attention] -> `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your themes CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**. +> `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**. > -> E.g. `theme.mytheme.background_color` becomes `theme-mytheme-background_color` in the CSS file. +> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file. > This transformation ensures that the property can be used as an attribute selector or inside a media query. For dropdown preferences, you can detect the selected value using the `:has(){:css}` CSS pseudo-class, which applies styles based on the selected attribute and value in the DOM. @@ -256,7 +256,7 @@ For example, if you have a preference to select the background color from a drop ```json { - "property": "theme.mytheme.background_color", + "property": "mod.mymod.background_color", "label": "Background color", "type": "dropdown", "options": [ @@ -276,13 +276,13 @@ You can use the following CSS to change the background color based on the select ```css {2,8,14} /* Green background */ -body:has(#theme-mytheme[theme-mytheme-background_color="green"]) { +body:has(#mod-mymod[mod-mymod-background_color="green"]) { background-color: #008000; color: #000; } /* Blue background */ -body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) { +body:has(#mod-mymod[mod-mymod-background_color="blue"]) { background-color: #0000ff; color: #fff; } @@ -290,7 +290,7 @@ body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) { In this example: - The background color and text color change based on the value selected in the `background_color` dropdown. -- The selector `body:has(#theme-mytheme[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option. +- The selector `body:has(#mod-mymod[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option. --- @@ -302,12 +302,12 @@ Suppose your `preferences.json` file includes these two preferences: ```json [ { - "property": "theme.mytheme.enable_dark_mode", + "property": "mod.mymod.enable_dark_mode", "label": "Enable dark mode", "type": "checkbox" }, { - "property": "theme.mytheme.background_color", + "property": "mod.mymod.background_color", "label": "Background color", "type": "dropdown", "options": [ @@ -328,7 +328,7 @@ You can combine the CSS like this: ```css /* Checkbox for dark mode */ -@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") { +@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") { body { background-color: #000; color: #fff; @@ -336,12 +336,12 @@ You can combine the CSS like this: } /* Dropdown for background color selection */ -body:has(#theme-mytheme[theme-mytheme-background_color="green"]) { +body:has(#mod-mymod[mod-mymod-background_color="green"]) { background-color: #008000; color: #000; } -body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) { +body:has(#mod-mymod[mod-mymod-background_color="blue"]) { background-color: #0000ff; color: #fff; } @@ -358,16 +358,16 @@ This allows users to: String preferences can be detected in your CSS using the `var(--property)` operator. The preference property is saved at `:root` level. > [!attention] -> `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your themes CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**. +> `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**. > -> E.g. `theme.mytheme.background_color` becomes `theme-mytheme-background_color` in the CSS file. +> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file. > This transformation ensures that the property can be used as an attribute selector or inside a media query. -For example, if you have a preference to enable dark mode in your theme: +For example, if you have a preference to enable dark mode in your mod: ```json { - "property": "theme.mytheme.background_color", + "property": "mod.mymod.background_color", "label": "Background color", "type": "string" } @@ -377,6 +377,6 @@ You can use the following CSS to change the background color when the dark mode ```css {2} .myClass { - background-color: var(--theme-mytheme-background_color) + background-color: var(--mod-mymod-background_color) } ``` diff --git a/content/themes-store/themes-marketplace-submission-guidelines.md b/content/themes-store/themes-marketplace-submission-guidelines.md index 6ebc96c..5a69c7d 100644 --- a/content/themes-store/themes-marketplace-submission-guidelines.md +++ b/content/themes-store/themes-marketplace-submission-guidelines.md @@ -1,33 +1,33 @@ --- -title: Themes Store Submission Guidelines 📋 -lastmod: 2024-08-19 +title: Mods Registry Submission Guidelines 📋 +lastmod: 2025-02-07 --- -If you are a theme developer and would like to submit your theme, please follow these guidelines: +If you are a [mod developer] and would like to submit your mod, please follow these guidelines: -1. **Theme requirements**: - - Your theme must be compatible with Zen Browser. - - Your theme must be open-source. - - Your theme must not contain any malicious code. - - Your theme must not violate any copyright laws. +1. **Mod requirements**: + - Your mod must be compatible with Zen Browser. + - Your mod must be open-source. + - Your mod must not contain any malicious code. + - Your mod must not violate any copyright laws. -2. **Theme Validation**: - - Your theme's name must be unique and less than `25` characters. - - Your theme's description must be less than `100` characters. - - Your theme's screenshot must be a `PNG` with a size of `300x200` (it can be resized after upload). - - Your theme must contain a valid `README` describing the theme and how to use it. - - If your theme has any preferences values, they must be set in the `preferences` text area as a `JSON` object. +2. **Mod Validation**: + - Your mod's name must be unique and less than `25` characters. + - Your mod's description must be less than `100` characters. + - Your mod's screenshot must be a `PNG` with a size of `300x200` (it can be resized after upload). + - Your mod must contain a valid `README` describing the mod and how to use it. + - If your mod has any preferences values, they must be set in the `preferences` text area as a `JSON` object. - See how preferences work [here](themes-store/themes-marketplace-preferences.md). -3. **Theme Submission**: - - To submit your theme, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+) +3. **Mod Submission**: + - To submit your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+) - Fill out the template with the required information. - - Once you have submitted your theme, it will be analyzed by a bot and a pull request will be created. - - If your theme is approved, it will be added to the Themes Marketplace. + - Once you have submitted your mod, it will be analyzed by a bot and a pull request will be created. + - If your mod is approved, it will be added to the Mods Registry. -4. **Theme Update**: - - If you would like to update your theme, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new) +4. **Mod Update**: + - If you would like to update your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new) - Please explain the changes you have made. > [!info] -> Themes are automatically updated and generated by the bot. If your theme is not approved, you will receive a message with the reason why it was not approved. +> Mods are automatically updated and generated by the bot. If your mod is not approved, you will receive a message with the reason why it was not approved. diff --git a/content/themes-store/themes-marketplace.md b/content/themes-store/themes-marketplace.md index bd2ecd0..5170707 100644 --- a/content/themes-store/themes-marketplace.md +++ b/content/themes-store/themes-marketplace.md @@ -1,16 +1,16 @@ --- -title: Information about Themes Store ℹ️ -lastmod: 2024-09-19 +title: Information about Mods Registry ℹ️ +lastmod: 2025-02-07 --- -The Themes Store is a place where you can find and install themes for Zen Browser. +The Mods Registry is a place where you can find and install mods for Zen Browser. -## How to install a theme +## How to install a mod 1. Open Zen Browser. -2. Click on the theme you would like to install on the [Themes Store](https://www.zen-browser.app/themes). +2. Click on the mod you would like to install on the [Mods Registry](https://www.zen-browser.app/mods). 3. Click on the "Install" button. -## For theme developers +## For mod developers -If you are a theme developer and would like to submit your theme, please follow the instructions on the [Submission Guidelines](themes-store/themes-marketplace-submission-guidelines.md) page. +If you are a mod developer and would like to submit your mod, please follow the instructions on the [Submission Guidelines](themes-store/themes-marketplace-submission-guidelines.md) page.