Merge pull request #120 from eoneill/eoneill-mod-registry

rename Themes -> Mods
This commit is contained in:
NOCanoa 2025-02-07 19:58:44 +00:00 committed by GitHub
commit 9bb1524ed8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 67 additions and 67 deletions

View file

@ -1,7 +1,7 @@
--- ---
title: Contributing to Zen Browser title: Contributing to Zen Browser
draft: false 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. 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]] - [[www | Getting Started with Zen's Homepage Development]]
- [[docs | Getting Started with Documentation Contributions]] - [[docs | Getting Started with Documentation Contributions]]
- [[translation | Getting Started with Translations]] - [[translation | Getting Started with Translations]]
Please follow the appropriate guide based on the repository you want to contribute to. Please follow the appropriate guide based on the repository you want to contribute to.
### Reporting Bugs ### Reporting Bugs
@ -33,7 +33,7 @@ If you find a bug, please open an issue and describe the problem in detail. Incl
>[!important] >[!important]
>Open the issue in it's corresponding GitHub repository: >Open the issue in it's corresponding GitHub repository:
>- [Desktop Browser App](https://github.com/zen-browser/desktop/issues) >- [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) >- [Zen's Homepage Website](https://github.com/zen-browser/www)
>- [This documentation Website](https://github.com/zen-browser/docs) >- [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]] ![[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* *Use the correct Github Repository based on the list above*
--- ---

View file

@ -9,7 +9,7 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee
* #### [[building|Building Zen Browser 📦]] * #### [[building|Building Zen Browser 📦]]
* #### [[user-manual/index|User Manual 📖]] * #### [[user-manual/index|User Manual 📖]]
* #### [[guides/index|Guides 🛠️]] * #### [[guides/index|Guides 🛠️]]
* #### [[themes-store/index|Theme Store 🎨]] * #### [[themes-store/index|Mods Registry 🎨]]
* #### [[faq | Frequently Asked Questions ❓]] * #### [[faq | Frequently Asked Questions ❓]]
* #### [[benchmarks | Performance Benchmarks 📊]] * #### [[benchmarks | Performance Benchmarks 📊]]
* #### [[contribute/index | Contribution Guides 🌟]] * #### [[contribute/index | Contribution Guides 🌟]]

View file

@ -1,3 +1,3 @@
--- ---
title: Themes Store 🎨 title: Mods Registry 🎨
--- ---

View file

@ -1,9 +1,9 @@
--- ---
title: Themes Store Preferences ⚙️ title: Mods Registry Preferences ⚙️
lastmod: 2024-09-16 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 ## 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. 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 ### Field: `label` - Label
@ -35,7 +35,7 @@ The `checkbox` type allows a togglable input to enable or disable a property.
```json title="Checkbox Example" ```json title="Checkbox Example"
{ {
"property": "theme.mytheme.enable_dark_mode", "property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode", "label": "Enable dark mode",
"type": "checkbox" "type": "checkbox"
} }
@ -47,7 +47,7 @@ The `dropdown` type allows to select a single choice on multiple options.
```json title="Dropdown Example" ```json title="Dropdown Example"
{ {
"property": "theme.mytheme.background_color", "property": "mod.mymod.background_color",
"label": "Background color", "label": "Background color",
"type": "dropdown", "type": "dropdown",
"options": [ "options": [
@ -70,7 +70,7 @@ The `string` type is a text input that allows to insert valid css values without
```json title="String Example" ```json title="String Example"
{ {
"property": "theme.mytheme.tab_padding", "property": "mod.mymod.tab_padding",
"label": "Set tab padding", "label": "Set tab padding",
"type": "string" "type": "string"
} }
@ -161,18 +161,18 @@ For example: `e.g: 10px`
<details> <details>
<summary><font weight="bold" size=4.75><b>See Full Example</b></font></summary> <summary><font weight="bold" size=4.75><b>See Full Example</b></font></summary>
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 ```json
[ [
{ {
"property": "theme.mytheme.enable_dark_mode", "property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode", "label": "Enable dark mode",
"type": "checkbox", "type": "checkbox",
"defaultValue": true "defaultValue": true
}, },
{ {
"property": "theme.mytheme.background_color", "property": "mod.mymod.background_color",
"label": "Background color", "label": "Background color",
"type": "dropdown", "type": "dropdown",
"placeholder": "Select a color", "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", "label": "Show bookmarks bar",
"type": "string", "type": "string",
"disabledOn": ["macos"] "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 themes CSS to modify the appearance or behavior based on the users selections. Once you have defined your preferences in the `preferences.json` file, you can use them in your mods CSS to modify the appearance or behavior based on the users selections.
### Checkbox Preferences ### 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. 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 ```json
{ {
"property": "theme.mytheme.enable_dark_mode", "property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode", "label": "Enable dark mode",
"type": "checkbox" "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: You can use the following CSS to change the background color when the dark mode preference is enabled:
```css {1} ```css {1}
@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") { @media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
body { body {
background-color: #000; background-color: #000;
color: #fff; 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 You can also have negative conditions
```css {1} ```css {1}
@media not (-moz-bool-pref: "theme.mytheme.enable_dark_mode") @media not (-moz-bool-pref: "mod.mymod.enable_dark_mode")
``` ```
### Dropdown Preferences ### Dropdown Preferences
> [!attention] > [!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 mods 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. > 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. 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 ```json
{ {
"property": "theme.mytheme.background_color", "property": "mod.mymod.background_color",
"label": "Background color", "label": "Background color",
"type": "dropdown", "type": "dropdown",
"options": [ "options": [
@ -276,13 +276,13 @@ You can use the following CSS to change the background color based on the select
```css {2,8,14} ```css {2,8,14}
/* Green background */ /* Green background */
body:has(#theme-mytheme[theme-mytheme-background_color="green"]) { body:has(#mod-mymod[mod-mymod-background_color="green"]) {
background-color: #008000; background-color: #008000;
color: #000; color: #000;
} }
/* Blue background */ /* Blue background */
body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) { body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
background-color: #0000ff; background-color: #0000ff;
color: #fff; color: #fff;
} }
@ -290,7 +290,7 @@ body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) {
In this example: In this example:
- The background color and text color change based on the value selected in the `background_color` dropdown. - 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 ```json
[ [
{ {
"property": "theme.mytheme.enable_dark_mode", "property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode", "label": "Enable dark mode",
"type": "checkbox" "type": "checkbox"
}, },
{ {
"property": "theme.mytheme.background_color", "property": "mod.mymod.background_color",
"label": "Background color", "label": "Background color",
"type": "dropdown", "type": "dropdown",
"options": [ "options": [
@ -328,7 +328,7 @@ You can combine the CSS like this:
```css ```css
/* Checkbox for dark mode */ /* Checkbox for dark mode */
@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") { @media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
body { body {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
@ -336,12 +336,12 @@ You can combine the CSS like this:
} }
/* Dropdown for background color selection */ /* 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; background-color: #008000;
color: #000; color: #000;
} }
body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) { body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
background-color: #0000ff; background-color: #0000ff;
color: #fff; 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. String preferences can be detected in your CSS using the `var(--property)` operator. The preference property is saved at `:root` level.
> [!attention] > [!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 mods 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. > 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 ```json
{ {
"property": "theme.mytheme.background_color", "property": "mod.mymod.background_color",
"label": "Background color", "label": "Background color",
"type": "string" "type": "string"
} }
@ -377,6 +377,6 @@ You can use the following CSS to change the background color when the dark mode
```css {2} ```css {2}
.myClass { .myClass {
background-color: var(--theme-mytheme-background_color) background-color: var(--mod-mymod-background_color)
} }
``` ```

View file

@ -1,33 +1,33 @@
--- ---
title: Themes Store Submission Guidelines 📋 title: Mods Registry Submission Guidelines 📋
lastmod: 2024-08-19 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**: 1. **Mod requirements**:
- Your theme must be compatible with Zen Browser. - Your mod must be compatible with Zen Browser.
- Your theme must be open-source. - Your mod must be open-source.
- Your theme must not contain any malicious code. - Your mod must not contain any malicious code.
- Your theme must not violate any copyright laws. - Your mod must not violate any copyright laws.
2. **Theme Validation**: 2. **Mod Validation**:
- Your theme's name must be unique and less than `25` characters. - Your mod's name must be unique and less than `25` characters.
- Your theme's description must be less than `100` characters. - Your mod'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 mod'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. - Your mod must contain a valid `README` describing the mod 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. - 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). - See how preferences work [here](themes-store/themes-marketplace-preferences.md).
3. **Theme Submission**: 3. **Mod 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+) - 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. - 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. - Once you have submitted your mod, 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. - If your mod is approved, it will be added to the Mods Registry.
4. **Theme Update**: 4. **Mod Update**:
- If you would like to update your theme, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new) - 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. - Please explain the changes you have made.
> [!info] > [!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.

View file

@ -1,16 +1,16 @@
--- ---
title: Information about Themes Store title: Information about Mods Registry
lastmod: 2024-09-19 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. 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. 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.