--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -123,16 +123,17 @@ devtools.jar:
     skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/images/controls.png (themes/images/controls.png)
     skin/images/controls@2x.png (themes/images/controls@2x.png)
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)
     skin/images/performance-details-call-tree.svg (themes/images/performance-details-call-tree.svg)
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
     skin/breadcrumbs.css (themes/breadcrumbs.css)
+    skin/chart.css (themes/chart.css)
     skin/widgets.css (themes/widgets.css)
     skin/images/power.svg (themes/images/power.svg)
     skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
     skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
     skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
     skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
     skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
     skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)

--- a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
@@ -1,14 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Statistics panel */
 
+@import "chrome://devtools/skin/chart.css";
+
 .statistics-panel {
   display: flex;
   height: 100vh;
 }
 
 .statistics-panel .devtools-toolbarbutton.back-button {
   min-width: 4em;
   margin: 0;
@@ -189,9 +191,8 @@
     width: calc(100% - 4em);
   }
 
   .statistics-panel .splitter {
     width: 100%;
     height: 1px;
   }
 }
-

--- a/devtools/client/styleeditor/styleeditor.xul
+++ b/devtools/client/styleeditor/styleeditor.xul
@@ -11,16 +11,17 @@
  %sourceEditorStrings;
 <!ENTITY % csscoverageDTD SYSTEM "chrome://devtools-shared/locale/csscoverage.dtd">
  %csscoverageDTD;
 ]>
 
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/splitview.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/chart.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/splitview.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/styleeditor.css" type="text/css"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns="http://www.w3.org/1999/xhtml"
         id="style-editor-chrome-window">

new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/chart.css
@@ -0,0 +1,135 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Chart */
+
+.generic-chart-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.theme-dark .generic-chart-container {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .generic-chart-container {
+  color: var(--theme-body-color-alt);
+}
+
+.chart-colored-blob {
+  fill: var(--theme-content-color2);
+  background: var(--theme-content-color2);
+}
+
+/* Chart: Pie */
+
+.pie-chart-slice {
+  stroke-width: 1px;
+  cursor: pointer;
+}
+
+.theme-dark .pie-chart-slice {
+  stroke: rgba(0,0,0,0.2);
+}
+
+.theme-light .pie-chart-slice {
+  stroke: rgba(255,255,255,0.8);
+}
+
+.theme-dark .pie-chart-slice[largest] {
+  stroke-width: 2px;
+  stroke: #fff;
+}
+
+.theme-light .pie-chart-slice[largest] {
+  stroke: #000;
+}
+
+.pie-chart-label {
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+}
+
+.theme-dark .pie-chart-label {
+  fill: #000;
+}
+
+.theme-light .pie-chart-label {
+  fill: #fff;
+}
+
+.pie-chart-container[slices="1"] > .pie-chart-slice {
+  stroke-width: 0px;
+}
+
+.pie-chart-slice,
+.pie-chart-label {
+  transition: all 0.1s ease-out;
+}
+
+.pie-chart-slice:not(:hover):not([focused]),
+.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
+  transform: none !important;
+}
+
+/* Chart: Table */
+
+.table-chart-title {
+  padding-bottom: 10px;
+  font-size: 120%;
+  font-weight: 600;
+}
+
+.table-chart-row {
+  margin-top: 1px;
+  cursor: pointer;
+}
+
+.table-chart-grid:hover > .table-chart-row {
+  transition: opacity 0.1s ease-in-out;
+}
+
+.table-chart-grid:not(:hover) > .table-chart-row {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
+.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
+  opacity: 0.4;
+}
+
+.table-chart-row-box {
+  width: 8px;
+  height: 1.5em;
+  margin-inline-end: 10px;
+}
+
+.table-chart-row-label {
+  width: 8em;
+  padding-inline-end: 6px;
+  cursor: inherit;
+}
+
+.table-chart-totals {
+  margin-top: 8px;
+  padding-top: 6px;
+}
+
+.table-chart-totals {
+  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
+}
+
+.table-chart-summary-label {
+  font-weight: 600;
+  padding: 1px 0px;
+}
+
+.theme-dark .table-chart-summary-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .table-chart-summary-label {
+  color: var(--theme-body-color);
+}

--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -784,148 +784,16 @@
 
 .bar-graph-widget-legend-item > [view="label"] {
   text-shadow: 1px  0px rgba(255,255,255,0.8),
               -1px  0px rgba(255,255,255,0.8),
                0px -1px rgba(255,255,255,0.8),
                0px  1px rgba(255,255,255,0.8);
 }
 
-/* Charts */
-
-.generic-chart-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.theme-dark .generic-chart-container {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .generic-chart-container {
-  color: var(--theme-body-color-alt);
-}
-
-.chart-colored-blob {
-  fill: var(--theme-content-color2);
-  background: var(--theme-content-color2);
-}
-
-/* Charts: Pie */
-
-.pie-chart-slice {
-  stroke-width: 1px;
-  cursor: pointer;
-}
-
-.theme-dark .pie-chart-slice {
-  stroke: rgba(0,0,0,0.2);
-}
-
-.theme-light .pie-chart-slice {
-  stroke: rgba(255,255,255,0.8);
-}
-
-.theme-dark .pie-chart-slice[largest] {
-  stroke-width: 2px;
-  stroke: #fff;
-}
-
-.theme-light .pie-chart-slice[largest] {
-  stroke: #000;
-}
-
-.pie-chart-label {
-  text-anchor: middle;
-  dominant-baseline: middle;
-  pointer-events: none;
-}
-
-.theme-dark .pie-chart-label {
-  fill: #000;
-}
-
-.theme-light .pie-chart-label {
-  fill: #fff;
-}
-
-.pie-chart-container[slices="1"] > .pie-chart-slice {
-  stroke-width: 0px;
-}
-
-.pie-chart-slice,
-.pie-chart-label {
-  transition: all 0.1s ease-out;
-}
-
-.pie-chart-slice:not(:hover):not([focused]),
-.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
-  transform: none !important;
-}
-
-/* Charts: Table */
-
-.table-chart-title {
-  padding-bottom: 10px;
-  font-size: 120%;
-  font-weight: 600;
-}
-
-.table-chart-row {
-  margin-top: 1px;
-  cursor: pointer;
-}
-
-.table-chart-grid:hover > .table-chart-row {
-  transition: opacity 0.1s ease-in-out;
-}
-
-.table-chart-grid:not(:hover) > .table-chart-row {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
-.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
-  opacity: 0.4;
-}
-
-.table-chart-row-box {
-  width: 8px;
-  height: 1.5em;
-  margin-inline-end: 10px;
-}
-
-.table-chart-row-label {
-  width: 8em;
-  padding-inline-end: 6px;
-  cursor: inherit;
-}
-
-.table-chart-totals {
-  margin-top: 8px;
-  padding-top: 6px;
-}
-
-.table-chart-totals {
-  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
-}
-
-.table-chart-summary-label {
-  font-weight: 600;
-  padding: 1px 0px;
-}
-
-.theme-dark .table-chart-summary-label {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .table-chart-summary-label {
-  color: var(--theme-body-color);
-}
-
 /* Table Widget */
 
 /* Table body */
 
 .table-widget-body > .devtools-side-splitter {
   background-color: transparent;
 }