mirror of
https://github.com/zen-browser/docs.git
synced 2025-07-07 17:05:34 +02:00
rename Themes -> Mods, rename Themes Marketplace / Store -> Mods Registry
This commit is contained in:
parent
e75bcd369d
commit
e0ce697c81
6 changed files with 67 additions and 67 deletions
|
@ -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*
|
||||
|
||||
---
|
||||
|
|
|
@ -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 🌟]]
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
---
|
||||
title: Themes Store 🎨
|
||||
title: Mods Registry 🎨
|
||||
---
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
```
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue