docs(charts): Adds developer notes to about-charts page (#4488)

* docs(charts): Adds developer notes to about-charts page

* Makes a few edits.

Author: edonehoo

packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md

@@ -8,15 +8,15 @@ _Charts are only available in React_
 A **chart** visualizes data in an application. The type of chart you use will depend on your use case and the type of data you need to display.
 
 ## Elements
-<img src="./img/axis-labels.png" alt="Chart with axis labels" width="713"/> 
+<img src="./img/axis-labels.png" alt="Chart with axis labels" width="713"/> 
 
 1. **Title:** Titles should be left-aligned and appear above your chart.
 2. **Axis labels and scale values:**  We recommend using tick marks to clearly mark scale values on the y-axis. The text for axis labels and scale values should be 12px font in standard text color. All scale values should be equally distributed across the axis and the axis label should fall outside the scale values, centered with the axis line.
 3. **Legends:** We recommend using legends when charts include more than one variable and therefore use more than one color. When datasets are overlapping, an [interactive legend](#interactive-chart-legends) can be used. If space is not available to display names of horizontal and vertical axes, a legend must be added instead. The legend should list the colors that each variable obtains and the name of the variable. The text on the legend should be 14px size and standard text color. They can either be placed left-aligned to the right of the chart or centered below the chart.
 4. **Chart tooltip:** A tooltip will appear on hover over certain elements of a chart, like bars in a bar chart or segments in a donut chart. [Chart tooltips](/charts/tooltips) should display the specific values related to the element the user is hovering over. 
 
 ## Chart types
-<img src="./img/chart-legend.png" alt="Image displaying what chart types to use when" width="1024"/> 
+<img src="./img/chart-legend.png" alt="Image displaying what chart types to use when" width="1024"/> 
 
 - [Area chart](/charts/area-chart/design-guidelines): Use to show (potentially multiple) trends over a continuous scale (usually time).
 - [Bar chart](/charts/bar-chart/design-guidelines): Use to show and compare categories and their respective data point/value. Bar charts can be plotted vertically or horizontally. The axis that labels the bar is the category, the axis that marks the end point of the bar displays the data points/values.
@@ -65,3 +65,14 @@ On click
 
 1. **Legend:** When a user clicks on a legend label, it becomes disabled and the color swatch is replaced with an eye-slashed icon.
 2. **Chart:** Data corresponding to the clicked legend label is hidden from view.
+
+## Develop with charts 
+
+Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. Charts work with PatternFly's light theme by default&mdash;you don't need to import anything else. 
+
+To support dark-themed charts, you must:
+1. Import the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly), so that you can use our global tokens.
+1. Import the stylesheet that contains dark theme styles by adding this line before importing your main application component: `import '@patternfly/patternfly/patternfly-charts.css';`
+    - Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. 
+
+To display the list of all available chart tokens, filter for "charts" in [the PatternFly design tokens table](/tokens/all-patternfly-tokens). 

packages/documentation-site/patternfly-docs/content/developer-resources/dark-theme-handbook.md

@@ -12,15 +12,11 @@ Dark theme can also be applied based on the browser’s `prefers-color-scheme` m
 
 [Our token resources](https://github.com/patternfly/patternfly/tree/v6/src/patternfly/base/tokens) include styles 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. 
 
-The only features which will require additional work in order to support dark theme are charts and images. Instructions for enabling support in these areas are included in the following sections.
+The only features which will require additional work in order to support dark theme are charts and images. 
 
 ### Charts
 
-The [PatternFly React charts package](https://www.npmjs.com/package/@patternfly/react-charts) uses default style values that align with our light theme. In order to support dark-themed charts, you must import the stylesheet that contains dark theme styles by adding the following import statement before your main application component is imported:
-
-`import '@patternfly/patternfly/patternfly-charts.css';`
-
-**Note:** You must also have the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly) installed.
+To use charts with dark themes, refer to our guidance for [developing with charts](/charts/about-charts#develop-with-charts).
 
 ### Images
 
@@ -62,5 +58,4 @@ To make it easier to support light and dark theming in your application, we reco
 * **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.
 
-* **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.