ZenBrowserMirrors/docs
1
0
Fork 0
mirror of https://github.com/zen-browser/docs.git synced 2025-07-07 17:05:34 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

8
content/contribute/CONTRIBUTING.md
View file

@ -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*
---

2
content/index.md
View file

@ -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 🌟]]

2
content/themes-store/index.md
View file

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

66
content/themes-store/themes-marketplace-preferences.md
View file

@ -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`
<details>
<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
[
{
"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)
}
```

42
content/themes-store/themes-marketplace-submission-guidelines.md
View file

@ -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.

14
content/themes-store/themes-marketplace.md
View file

@ -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.