Skip to content

Commit

Permalink
Content edits per feedback.
Browse files Browse the repository at this point in the history
  • Loading branch information
@edonehoo
edonehoo committed Mar 20, 2024
1 parent c3d81d7 commit 12f34e9
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions ...ntation-site/patternfly-docs/content/developer-resources/dark-theme-handbook.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ section: developer-resources

## Enabling dark theme

Dark theme styles ship with PatternFly CSS by default. To enable dark theme, add the class `pf-version-theme-dark` (for example, `pf-v6-theme-dark`) to your application's `<html>` tag. This class can be added dynamically to toggle dark theme on and off in your application.
Dark theme styles ship with PatternFly CSS by default. To enable dark theme, add the class `pf-[version]-theme-dark` (for example, `pf-v6-theme-dark`) to your application's `<html>` tag. This class can be added dynamically to toggle dark theme on and off in your application.

Dark theme can also be applied based on the browser’s `prefers-color-scheme` media query. When using this method, we recommend using JavaScript to detect the media query and apply the `pf-version-theme-dark` class. This allows you to manipulate a single class in order to toggle dark theme based on user preference. [Adam Argyle wrote a great article](https://web.dev/building-a-theme-switch-component/#javascript) on using JavaScript to manage dark theme preference, using the `prefers-color-scheme` media query alongside a manual button that toggles dark theme.
Dark theme can also be applied based on the browser’s `prefers-color-scheme` media query. When using this method, we recommend using JavaScript to detect the media query and apply the `pf-[version]-theme-dark` class. This allows you to manipulate a single class in order to toggle dark theme based on user preference. [Adam Argyle wrote a great article](https://web.dev/building-a-theme-switch-component/#javascript) on using JavaScript to manage dark theme preference, using the `prefers-color-scheme` media query alongside a manual button that toggles dark theme.

[Our token package](https://github.com/patternfly/patternfly/tree/v6/src/patternfly/base/tokens) includes files for both light and dark themes. When dark theme is enabled, your product will automatically pull dark theme tokens in order to adapt visual styles appropriately.
[Our token resources](https://github.com/patternfly/patternfly/tree/v6/src/patternfly/base/tokens) include files for both light and dark themes. When dark theme is enabled, your product will automatically pull dark theme tokens in order to adapt visual styles appropriately.

## Best practices

Expand All @@ -19,13 +19,13 @@ To make it easier to support light and dark theming in your application, we reco
* **Use PatternFly components without customizations.** Most problems with dark theming are due to the use of custom styles, overrides to PatternFly styles, and non-PatternFly components. To ensure consistent styling and behavior when switching themes, try to use PatternFly components as they are.

* **Use tokens to define any overrides.**
* For example, to override a primary button’s background color, declare `.pf-version-c-button { --pf-version-c-button--m-primary--BackgroundColor: [color]; }` instead of `.pf-version-c-button.pf-m-primary { background-color: [color]; }`.
* For example, to override a primary button’s background color, declare `.pf-[version]-c-button { --pf-[version]-c-button--m-primary--BackgroundColor: [color]; }` instead of `.pf-[version]-c-button.pf-m-primary { background-color: [color]; }`.

* **Use tokens in custom styles.**
* For example, use `background-color: var(--pf-t--version--global--background--color--primary--default)` for a primary background instead of `background-color: #fff` or `background-color: white`. Values like `#fff` and `white` will not change between light and dark theme, but tokens will.
* For example, use `background-color: var(--pf-t--[version]--global--background--color--primary--default)` for a primary background instead of `background-color: #fff` or `background-color: white`. Values like `#fff` and `white` will not change between light and dark theme, but tokens will.

* **Always use the most relevant semantic token for your use case.** If there isn't a semantic token for your scenario, then you can use a base token. Never use a palette token directly in your code.
* For example, `--pf-t--version--global--text--color--link--default`, `--pf-t--version--color--blue--20`, and `#b9dafc` are all the same in PatternFly's default light theme. When you create something custom, where the color should match the application’s link text color, any of these values will work. However, in a different theme, these token values may not always be the same color.
* For example, `--pf-t--[version]--global--text--color--link--default`, `--pf-t--[version]--color--blue--20`, and `#b9dafc` are all the same in PatternFly's default light theme. When you create something custom, where the color should match the application’s link text color, any of these values will work. However, in a different theme, these token values may not always be the same color.

* **Use SVG files or icon fonts for icons, and use tokens for icon colors.** To easily manipulate icon colors between light and dark theme, SVG files and icon fonts can be changed via CSS by using the `fill` and `color` properties. When using semantic tokens, like `--pf-t--version--global--color--status--info--default`, colors will automatically adjust between light and dark theme. If images must be used, we advise you to use colors that work well in both light and dark themes and/or hide and show the appropriate images based on the presence of the dark theme body class.
* **Use SVG files or icon fonts for icons, and use tokens for icon colors.** To easily manipulate icon colors between light and dark theme, SVG files and icon fonts can be changed via CSS by using the `fill` and `color` properties. When using semantic tokens, like `--pf-t--[version]--global--color--status--info--default`, colors will automatically adjust between light and dark theme. If images must be used, we advise you to use colors that work well in both light and dark themes and/or hide and show the appropriate images based on the presence of the dark theme body class.

0 comments on commit 12f34e9

Please sign in to comment.