mirror of
https://github.com/zen-browser/docs.git
synced 2025-07-08 17:30:03 +02:00
full examples collapsed by default
This commit is contained in:
parent
c4f0927009
commit
9dcaf437ba
1 changed files with 7 additions and 2 deletions
|
@ -137,7 +137,8 @@ Invalid Example:
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Full Example of `preferences.json`
|
<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 theme:
|
||||||
|
|
||||||
|
@ -180,6 +181,8 @@ In this example:
|
||||||
- Each object defines a `property`, `label`, and `type` (either `checkbox` or `dropdown`).
|
- Each object defines a `property`, `label`, and `type` (either `checkbox` or `dropdown`).
|
||||||
- Dropdown preferences can include an `options` field, with each option having a `label` and a `value`.
|
- Dropdown preferences can include an `options` field, with each option having a `label` and a `value`.
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## How to use preferences in the theme's CSS
|
## How to use preferences in the theme's CSS
|
||||||
|
@ -274,7 +277,8 @@ In this example:
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Full Example
|
<details>
|
||||||
|
<summary><font weight="bold" size=4.75><b>See Full Example</b></font></summary>
|
||||||
|
|
||||||
Suppose your `preferences.json` file includes these two preferences:
|
Suppose your `preferences.json` file includes these two preferences:
|
||||||
|
|
||||||
|
@ -339,6 +343,7 @@ This allows users to:
|
||||||
- Toggle dark mode on/off using the checkbox.
|
- Toggle dark mode on/off using the checkbox.
|
||||||
- Select a background color from the dropdown, which dynamically changes the background and text colors based on the user's choice.
|
- Select a background color from the dropdown, which dynamically changes the background and text colors based on the user's choice.
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
> [!info]
|
> [!info]
|
||||||
> The `-moz-bool-pref` query is used for detecting boolean values (checkboxes), while the `:has()` pseudo-class with attribute selectors is used for detecting the selected values of dropdowns.
|
> The `-moz-bool-pref` query is used for detecting boolean values (checkboxes), while the `:has()` pseudo-class with attribute selectors is used for detecting the selected values of dropdowns.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue