From 9dcaf437ba857bb2e6c3076636f0b6746fae8279 Mon Sep 17 00:00:00 2001 From: nitro <143457057+n7itro@users.noreply.github.com> Date: Mon, 16 Sep 2024 22:27:03 +0200 Subject: [PATCH] full examples collapsed by default --- content/themes-store/themes-marketplace-preferences.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/content/themes-store/themes-marketplace-preferences.md b/content/themes-store/themes-marketplace-preferences.md index bd483e1..aab3df7 100644 --- a/content/themes-store/themes-marketplace-preferences.md +++ b/content/themes-store/themes-marketplace-preferences.md @@ -137,7 +137,8 @@ Invalid Example: } ``` -### Full Example of `preferences.json` +
+ 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: @@ -180,6 +181,8 @@ In this example: - 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`. +
+ --- ## How to use preferences in the theme's CSS @@ -274,7 +277,8 @@ In this example: --- -### Full Example +
+ See Full Example 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. - Select a background color from the dropdown, which dynamically changes the background and text colors based on the user's choice. +
> [!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.