Lorem Ipsum.
+Currently Aura is the only available preset and more will follow in the upcoming updates.
+- PrimeVue utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your document. - Code below sets the scale of the components based on 16px. If you require bigger or smaller components, just change this variable and components will scale accordingly. + Lorem Ipsum.
The options property defines the how the CSS would be generated from the design tokens of the preset.
-The prefix of the CSS variables, defaults to p. For instance, the primary.color design token would be var(--p-primary-color).
-The CSS rule to encapsulate the CSS variables of the dark mode, the default is the system to generate @media (prefers-color-scheme: dark). If you need to make the dark mode toggleable based on the user selection define a - class selector such as .app-dark and toggle this class at the document root. See the dark mode toggle section below for example. + class selector such as .app-dark and toggle this class at the document root. See the dark mode toggle section for an example.
-
Defines whether the styles should be defined inside a CSS layer named primevue or not. A CSS layer would be handy to
declare a custom cascade layer for easier customization. The default is false. View the CSS layer section for an example usage.
diff --git a/doc/theming/styled/configuration/ThemeDoc.vue b/doc/theming/styled/configuration/ThemeDoc.vue
index 0b485674f..86977d3a4 100644
--- a/doc/theming/styled/configuration/ThemeDoc.vue
+++ b/doc/theming/styled/configuration/ThemeDoc.vue
@@ -1,7 +1,6 @@
The theme property is used to customize the initial theme that is preconfigured to be PrimeOne base with the Aura preset by default. The following is the default configuration and only needs to be defined for customization. The design tokens of a specific component is defined at components layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead. The definePreset utility is used to customize an existing preset during the PrimeVue setup. The first parameter is the preset to customize and the second is the design tokens to override. Focus ring defines the outline width, style, color and offset. Let's use a thicker ring with the primary color for the outline.
+ Presets use the native font stack by default for optimal rendering depending on the platform. If you have installed a specific font stack in your application, use the fontFamily and the optional fontVariationSettings tokens
+ to define your custom font for PrimeVue components. As example, let's configure the popular Inter for PrimeVue.
+
+ The design tokens of the form input components are derived from the form.field token group. This customization example changes border color to primary on hover. Any component that depends on this semantic token such as
+ dropdown.hover.border.color and textarea.hover.border.color would receive the change.
+
+ The noir mode is the nickname of a variant that uses black tones as the primary and requires and additional colorScheme configuration to implement. A sample preset configuration with black and white variants as the primary
+ color;
+ The primary defines the main color palette, default value maps to the emerald primitive token. Let's setup to use indigo instead.
+ The color scheme palette that varies between light and dark modes is specified with the surface tokens. Example below uses zinc for light mode and slategray for dark mode. With this setting, light mode, would have a
+ grayscale tone and dark mode would include blue tone.
+ The $dt function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically. Returns shades and tints of a given color from 50 to 950 as an array. Merges the provided tokens to the current preset, an example would be changing the primary color palette dynamically. Replaces the current presets entirely, common use case is changing the preset dynamically at runtime. Replaces the theme including the base and the preset such as from PrimeOne to Material. Note that the built-in Material theme is under development.