@@ -26,68 +53,59 @@ Generally, light mode is the default appearance of PatternFly. In this mode, dar
### Dark mode
-In dark mode, light text is presented on dark backgrounds backgrounds, and our color palette adapts to maintain a [text contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#contrast-minimum) and [non-text contrast ratio of at least 3:1](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#non-text-contrast). Some users might prefer dark mode for aesthetics, while others find it to be easier on the eyes and less straining for those with light sensitivities.
+Dark mode adapts color palettes for light-sensitive users or low-light environments. It presents light text on dark backgrounds backgrounds while maintaining the same accessibility ratios as light mode. Some users might prefer dark mode for aesthetics, while others find it to be easier on the eyes and less straining for those with light sensitivities.
-For development guidance, refer to the [dark theme handbook](/foundations-and-styles/theming/dark-theme-handbook).
+For implementation guidance, refer to the [dark theme handbook](/foundations-and-styles/theming/dark-theme-handbook).
-### High contrast mode
-
-
- High contrast mode is still under development and will continue to evolve and be enabled for charts and extensions. This beta allows you to preview our progress.
-
+## Contrast modes
-High contrast mode adjusts our default colors to meet an [enhanced contrast ratio of at least 7:1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html), making it more suitable for users who require higher contrast between UI elements. By using wider border strokes and adjusted fill colors, high contrast mode creates more visual distinction and clarity between interactive elements.
+Contrast modes adjust the surface treatment of UI elements across both color schemes. They are mutually exclusive and can't be applied simultaneously.
-In high contrast mode, distinct borders are also added to components to ensure that their boundaries are clearly defined without requiring users to rely on subtle background colors as a visual cue.
+### Default contrast
-For development guidance, refer to the [high contrast handbook](/foundations-and-styles/theming/high-contrast-handbook).
+Default contrast mode is used in the Default theme and doesn't include special enhancements to increase contrast in UI elements. This mode doesn't need to be enabled and simply refers to the standard color palette used to achieve level AA accessibility, with contrast ratios of 4.5:1 for normal text, 3:1 for large text, and 3:1 for graphics and other UI components.
-
-
-
-
-## Custom themes
+### High contrast
-To branch off of our themes and create your own, you can identify the design tokens you'd like to adjust on our [all tokens page](/foundations-and-styles/design-tokens/all-design-tokens) and provide new values to use within your application.
+High contrast mode is focused on improving accessibility for users who require more clarity and higher contrast between UI elements. Turned on by user preference, high contrast mode adjusts border strokes and colors to meet an [enhanced contrast ratio of at least 7:1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html).
-### When to customize a theme
+**Note:** Activating high contrast mode will override and disable glass mode to ensure all boundaries and text meet strict accessibility requirements.
-There are a couple of instances when you might want to adjust an existing PatternFly theme:
-- One-off adjustments, like changing a single button color, spacer, or font size, when intentional deviation is needed across your product.
-- Application-wide adjustments, like changing all button colors and font sizes to adjust the overall brand identity of your product.
+For implementation guidance, refer to the [high contrast handbook](/foundations-and-styles/theming/high-contrast-handbook).
-## Using themes in Figma
-
-Our Figma libraries fully support theming. Designers can create a single design and then swap between our themes using the "Apply Variable Mode" toggles in the "Appearance" section of the component properties panel. This makes it easy to visually test and validate designs across all supported themes.
-
-The standard light PatternFly theme will be applied to components by default. If you want your mockups to use our dark or high contrast themes, you will need to adjust the following settings in Figma.
+
+
+
-### Dark mode
+### Glass
-To swap your components to our standard dark mode, change the Semantic Color Tokens variable mode to be "Dark":
+Glass mode introduces transparency and depth to the UI, creating a layered visual effect. It is enabled in the Felt theme by default, but can also be manually enabled in the Default theme.
-
-
-
+When glass is enabled, the following changes will apply:
+- **Transparency:** Container backgrounds will become more transparent, allowing the content below to subtly show through.
+- **Background image:** A pre-approved background image will fill the page body. Product teams must work with the Brand team ensure these images maintain accessibility compliance behind UI elements.
+- **Layout changes:** Layout variations, including the banded masthead and floating side navigation.
-### High contrast mode
+For more details, including implementation guidance, refer to the [glass mode handbook](/foundations-and-styles/theming/glass-mode-handbook).
-To swap your components to our high contrast mode, change the Semantic Dimension Tokens variable mode to be "High Contrast" and choose either "Light - High Contrast" or "Dark - High Contrast" for the Semantic Color Tokens variable mode:
+## Feature compatibility
-
-
-
+The following table outlines the availability and compatibility of PatternFly features across themes.
-### Chart themes
+| Feature | Default theme | Felt theme |
+| --- | --- | --- |
+| Accent color | Blue | Red |
+| Interactive element colors | Blue | Blue |
+| Border radius shape | Square | Pill |
+| Default contrast mode | Standard | Glass |
+| Background image | Optional (Manual) | Required (with glass mode) |
+| Branded icons | Optional (Manual) | Default
+| High contrast support | Yes | Yes |
-Our charts use a unique token collection, so you will need to adjust chart variable modes separately from components in order to swap themes. To change the variable mode for charts, follow the same steps previously outlined for component theme adjustments.
## Best practices
@@ -102,4 +120,32 @@ To ensure your application is robust, maintainable, and adaptable across differe
- **Prioritize semantic tokens:** Always use the most relevant semantic token for your use case to ensure the element's purpose is clear and that it receives the correct styling in any theme. If no semantic token exists, you can fall back to a base token.
- **Never use a palette token**: Do not use palette tokens (like `--pf-t--color--blue--20`) directly in your code, as the value is not guaranteed to be consistent across themes.
- **Use scalable icons:** For icons, use vector images (SVG) or icon fonts instead of raster or bitmap images (PNG, JPEG, GIF, BMP, and so on). This allows you to control their color with CSS `fill` and `color` properties. By assigning a design token to these properties, your icons will automatically change color to match the active theme.
- - If you must use static images, you might need to hide and show different image files based presence of a theme-specific class (like `pf-v6-theme-dark`).
\ No newline at end of file
+ - If you must use static images, you might need to hide and show different image files based presence of a theme-specific class (like `pf-v6-theme-dark`).
+
+## Theming in Figma
+
+Our Figma libraries fully support theming. Designers can create a single design and then swap between our themes using the "Apply Variable Mode" toggles in the "Appearance" section of the component properties panel. This makes it easy to visually test and validate designs across all supported themes.
+
+The standard light PatternFly theme will be applied to components by default. If you want your mockups to use our dark or high contrast themes, you will need to adjust the following settings in Figma.
+
+**Note:** Our charts use a unique token collection, so you will need to adjust chart variable modes separately from components in order to swap themes. To change the variable mode for charts, follow the same steps outlined for component theme adjustments.
+
+### Swapping themes
+
+To swap between the Default and Felt themes, adjust the theme variable mode. The Felt mode will automatically apply the red accents, pill shapes, and glass treatment.
+
+### Swapping color schemes
+
+To swap your components to our standard dark mode, change the Semantic Color Tokens variable mode to be "Dark":
+
+
+
+
+
+### Swapping contrast modes
+
+To swap your components to our high contrast mode, change the Semantic Dimension Tokens variable mode to be "High Contrast" and choose either "Light - High Contrast" or "Dark - High Contrast" for the Semantic Color Tokens variable mode:
+
+
+
+
\ No newline at end of file