diff --git a/.changeset/few-rings-approve.md b/.changeset/few-rings-approve.md
new file mode 100644
index 000000000..f39f6b245
--- /dev/null
+++ b/.changeset/few-rings-approve.md
@@ -0,0 +1,9 @@
+---
+"victory-core": minor
+"victory-group": minor
+"victory-legend": minor
+"victory-pie": minor
+"victory-stack": minor
+---
+
+Minor updates for clean theme
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index f7506f53c..45f7663e1 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -11,8 +11,8 @@ on:
     branches:
       - main
     paths:
-      - 'stories/**'
-      - 'packages/**'
+      - "stories/**"
+      - "packages/**"
 
 jobs:
   chromatic:
diff --git a/demo/ts/components/animation-demo.tsx b/demo/ts/components/animation-demo.tsx
index 0d84b7753..5cbd9ce73 100644
--- a/demo/ts/components/animation-demo.tsx
+++ b/demo/ts/components/animation-demo.tsx
@@ -89,7 +89,14 @@ export default class App extends React.Component<any, any> {
   }
 
   getStyles() {
-    const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"];
+    const colors = VictoryTheme.clean.bar?.colorScale ?? [
+      "red",
+      "orange",
+      "gold",
+      "tomato",
+      "magenta",
+      "purple",
+    ];
     return {
       fill: colors[random(0, 5)],
     };
@@ -122,12 +129,7 @@ export default class App extends React.Component<any, any> {
           <VictoryArea data={this.state.areaTransitionData} />
         </VictoryChart>
 
-        <VictoryStack
-          style={style}
-          animate
-          theme={VictoryTheme.material}
-          colorScale={"warm"}
-        >
+        <VictoryStack style={style} animate theme={VictoryTheme.clean}>
           {this.state.multiTransitionData.map((data, index) => {
             return (
               <VictoryArea key={index} data={data} interpolation={"basis"} />
@@ -135,8 +137,8 @@ export default class App extends React.Component<any, any> {
           })}
         </VictoryStack>
 
-        <VictoryChart style={style} animate theme={VictoryTheme.material}>
-          <VictoryStack colorScale={"warm"}>
+        <VictoryChart style={style} animate theme={VictoryTheme.clean}>
+          <VictoryStack>
             {this.state.multiTransitionData.map((data, index) => {
               return (
                 <VictoryArea key={index} data={data} interpolation={"basis"} />
@@ -145,7 +147,7 @@ export default class App extends React.Component<any, any> {
           </VictoryStack>
         </VictoryChart>
 
-        <VictoryChart style={style}>
+        <VictoryChart style={style} theme={VictoryTheme.clean}>
           <VictoryBar
             animate={{
               animationWhitelist: ["style"],
@@ -157,7 +159,7 @@ export default class App extends React.Component<any, any> {
           />
         </VictoryChart>
 
-        <VictoryChart style={style}>
+        <VictoryChart style={style} theme={VictoryTheme.clean}>
           <VictoryBar
             animate={{
               animationWhitelist: ["data"],
diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx
index 460779a7d..efa4aa4b6 100644
--- a/demo/ts/components/canvas-demo.tsx
+++ b/demo/ts/components/canvas-demo.tsx
@@ -259,9 +259,16 @@ const CanvasDemo = () => {
   };
 
   const getStyles = () => {
-    const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"];
+    const colors = VictoryTheme.clean.palette?.qualitative ?? [
+      "red",
+      "orange",
+      "gold",
+      "tomato",
+      "magenta",
+      "purple",
+    ];
     return {
-      fill: colors[random(0, 5)],
+      fill: colors[random(0, colors.length - 1)],
     };
   };
 
@@ -280,7 +287,11 @@ const CanvasDemo = () => {
 
   return (
     <div className="demo" style={containerStyle}>
-      <VictoryChart theme={VictoryTheme.clean} animate style={{ parent: parentStyle }}>
+      <VictoryChart
+        theme={VictoryTheme.clean}
+        animate
+        style={{ parent: parentStyle }}
+      >
         {populationData.map(({ country, values }) => {
           const data = values.map(({ year, value }) => ({
             x: year,
@@ -298,14 +309,14 @@ const CanvasDemo = () => {
         <VictoryAxis tickFormat={(v) => v} />
         <VictoryAxis dependentAxis tickFormat={formatPopulation} />
       </VictoryChart>
-      <VictoryChart style={{ parent: parentStyle }}>
+      <VictoryChart theme={VictoryTheme.clean} style={{ parent: parentStyle }}>
         <VictoryScatter
           groupComponent={<CanvasGroup />}
           dataComponent={<CanvasPoint />}
           data={getRandomData(1000)}
         />
       </VictoryChart>
-      <VictoryChart style={{ parent: parentStyle }}>
+      <VictoryChart theme={VictoryTheme.clean} style={{ parent: parentStyle }}>
         <VictoryBar
           groupComponent={<CanvasGroup />}
           dataComponent={<CanvasBar />}
diff --git a/demo/ts/components/events-demo.tsx b/demo/ts/components/events-demo.tsx
index f4c04a792..0295b9069 100644
--- a/demo/ts/components/events-demo.tsx
+++ b/demo/ts/components/events-demo.tsx
@@ -5,7 +5,7 @@ import { VictoryStack } from "victory-stack";
 import { VictoryArea } from "victory-area";
 import { VictoryBar, VictoryBarTTargetType } from "victory-bar";
 import { VictoryLine } from "victory-line";
-import { VictoryTheme, VictoryLabel } from "victory-core";
+import { VictoryTheme, VictoryLabel, VictoryThemePalette } from "victory-core";
 
 class EventsDemo extends React.Component {
   render() {
@@ -21,6 +21,8 @@ class EventsDemo extends React.Component {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
     };
     const barTarget: VictoryBarTTargetType = "data";
+    const themeColors: VictoryThemePalette =
+      VictoryTheme.clean.palette?.colors || {};
 
     return (
       <div className="demo">
@@ -29,8 +31,6 @@ class EventsDemo extends React.Component {
             theme={VictoryTheme.clean}
             style={{
               parent: chartStyle.parent,
-              data: { fill: "blue", width: 20 },
-              labels: { fontSize: 20 },
             }}
             labels={["a", "b", "c", "d", "e"]}
             data={[
@@ -49,15 +49,17 @@ class EventsDemo extends React.Component {
                     evt.stopPropagation();
                     return [
                       {
-                        mutation: () => {
-                          return { style: { fill: "orange", width: 20 } };
+                        mutation: (props) => {
+                          return {
+                            style: { ...props.style, fill: themeColors.teal },
+                          };
                         },
                       },
                       {
                         target: "labels",
                         eventKey: 3,
-                        mutation: () => {
-                          return { text: "now click me" };
+                        mutation: (props) => {
+                          return { ...props.style, text: "now click me" };
                         },
                       },
                     ];
@@ -71,8 +73,13 @@ class EventsDemo extends React.Component {
                     return [
                       {
                         target: "data",
-                        mutation: () => {
-                          return { style: { fill: "tomato", width: 10 } };
+                        mutation: (props) => {
+                          return {
+                            style: {
+                              ...props.style,
+                              fill: themeColors.pink,
+                            },
+                          };
                         },
                       },
                     ];
@@ -83,6 +90,7 @@ class EventsDemo extends React.Component {
           />
 
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
             domainPadding={{ x: 30, y: 30 }}
             events={[
@@ -105,7 +113,7 @@ class EventsDemo extends React.Component {
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { stroke: "lime" }),
+                            style: { ...props.style, stroke: themeColors.teal },
                           };
                         },
                       },
@@ -114,7 +122,7 @@ class EventsDemo extends React.Component {
                         target: "labels",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "green" }),
+                            style: { ...props.style, fill: themeColors.purple },
                             text: "waddup",
                           };
                         },
@@ -128,7 +136,6 @@ class EventsDemo extends React.Component {
             <VictoryBar
               name="bar"
               labels={() => null}
-              style={{ data: { width: 15, fill: "green" } }}
               data={[
                 { x: 1, y: 1 },
                 { x: 2, y: 2 },
@@ -148,13 +155,14 @@ class EventsDemo extends React.Component {
             <VictoryLine
               name="line"
               y={() => 0.5}
-              style={{ data: { stroke: "blue", strokeWidth: 5 } }}
+              style={{ data: { stroke: themeColors.purple } }}
             />
           </VictoryChart>
 
           <VictoryChart
             theme={VictoryTheme.clean}
             style={chartStyle}
+            domainPadding={20}
             events={[
               {
                 childName: "bar",
@@ -164,8 +172,10 @@ class EventsDemo extends React.Component {
                     evt.stopPropagation();
                     return [
                       {
-                        mutation: () => {
-                          return { style: { fill: "orange" } };
+                        mutation: (props) => {
+                          return {
+                            style: { ...props.style, fill: themeColors.yellow },
+                          };
                         },
                       },
                     ];
@@ -190,13 +200,18 @@ class EventsDemo extends React.Component {
               },
             ]}
           >
-            <VictoryLabel text="Parent Events" y={50} x={150} style={{...VictoryTheme.clean.label, fontSize: 18 }} />
+            <VictoryLabel
+              text="Parent Events"
+              y={50}
+              x={150}
+              style={{ ...VictoryTheme.clean.label, fontSize: 18 }}
+            />
             <VictoryBar name="bar" labels={() => null} />
           </VictoryChart>
 
           <VictoryChart
             style={chartStyle}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             events={[
               {
                 childName: ["area-1", "area-2"],
@@ -209,9 +224,14 @@ class EventsDemo extends React.Component {
                         target: "data",
                         mutation: (props) => {
                           const fill = props.style && props.style.fill;
-                          return fill === "gold"
+                          return fill === themeColors.yellow
                             ? null
-                            : { style: { fill: "gold" } };
+                            : {
+                                style: {
+                                  ...props.style,
+                                  fill: themeColors.yellow,
+                                },
+                              };
                         },
                       },
                     ];
diff --git a/demo/ts/components/external-events-demo.tsx b/demo/ts/components/external-events-demo.tsx
index b578d64c0..81ad3e14e 100644
--- a/demo/ts/components/external-events-demo.tsx
+++ b/demo/ts/components/external-events-demo.tsx
@@ -9,8 +9,10 @@ import { VictoryLine } from "victory-line";
 import { VictoryZoomContainer } from "victory-zoom-container";
 import { VictoryVoronoiContainer } from "victory-voronoi-container";
 import { range } from "lodash";
-import { VictoryTheme } from "victory-core/lib";
+import { VictoryTheme, VictoryThemePalette } from "victory-core";
 
+const themeColors: VictoryThemePalette =
+  VictoryTheme.clean.palette?.colors || {};
 class App extends React.Component<any, any> {
   constructor(props) {
     super(props);
@@ -53,9 +55,13 @@ class App extends React.Component<any, any> {
           eventKey: "all",
           mutation: (props) => {
             const fill = props.style && props.style.fill;
-            return fill === "blue"
-              ? { style: Object.assign({}, props.style, { fill: "red" }) }
-              : { style: Object.assign({}, props.style, { fill: "blue" }) };
+            return fill === themeColors.green
+              ? {
+                  style: { ...props.style, fill: themeColors.red },
+                }
+              : {
+                  style: { ...props.style, fill: themeColors.green },
+                };
           },
           callback,
         },
@@ -108,7 +114,7 @@ class App extends React.Component<any, any> {
           <VictoryChart
             theme={VictoryTheme.clean}
             style={chartStyle}
-            domainPadding={{ x: 40 }}
+            domainPadding={20}
             animate
             externalEventMutations={this.state.externalMutation}
             events={[
@@ -119,8 +125,10 @@ class App extends React.Component<any, any> {
                   onClick: () => {
                     return [
                       {
-                        mutation: () => {
-                          return { style: { fill: "orange" } };
+                        mutation: (props) => {
+                          return {
+                            style: { ...props.style, fill: themeColors.orange },
+                          };
                         },
                       },
                       {
@@ -141,11 +149,11 @@ class App extends React.Component<any, any> {
               name="data"
               labels={() => null}
               data={this.state.data}
-              // style={{ data: { fill: "cyan" } }}
             />
           </VictoryChart>
 
           <VictoryBar
+            theme={VictoryTheme.clean}
             style={chartStyle}
             animate
             data={this.state.data}
@@ -157,8 +165,10 @@ class App extends React.Component<any, any> {
                   onClick: () => {
                     return [
                       {
-                        mutation: () => {
-                          return { style: { fill: "orange" } };
+                        mutation: (props) => {
+                          return {
+                            style: { ...props.style, fill: themeColors.orange },
+                          };
                         },
                       },
                       {
@@ -176,6 +186,8 @@ class App extends React.Component<any, any> {
             ]}
           />
           <VictoryChart
+            domainPadding={20}
+            theme={VictoryTheme.clean}
             style={chartStyle}
             externalEventMutations={this.state.externalMutation}
             events={[
@@ -186,8 +198,16 @@ class App extends React.Component<any, any> {
                   onClick: () => {
                     return [
                       {
-                        mutation: () => {
-                          return { style: { fill: "orange" } };
+                        mutation: (props) => {
+                          return {
+                            style: {
+                              ...props.style,
+                              fill:
+                                props.style.fill === themeColors.green
+                                  ? themeColors.teal
+                                  : themeColors.green,
+                            },
+                          };
                         },
                       },
                       {
@@ -239,13 +259,11 @@ class App extends React.Component<any, any> {
               name="data"
               style={{
                 data: {
-                  fill: "tomato",
+                  fill: themeColors.yellow,
                   stroke: ({ active }) => (active ? "black" : "none"),
-                  strokeWidth: 2,
                 },
               }}
-              cornerRadius={{ top: 1, bottom: 1 }}
-              barWidth={({ active }) => (active ? 7 : 4)}
+              barWidth={({ active }) => (active ? 22 : 20)}
               data={[
                 { x: 1, y: -5 },
                 { x: 2, y: 4 },
@@ -259,13 +277,11 @@ class App extends React.Component<any, any> {
             <VictoryBar
               style={{
                 data: {
-                  fill: "orange",
+                  fill: themeColors.orange,
                   stroke: ({ active }) => (active ? "black" : "none"),
-                  strokeWidth: 2,
                 },
               }}
-              cornerRadius={{ top: 1, bottom: 1 }}
-              barWidth={({ active }) => (active ? 7 : 4)}
+              barWidth={({ active }) => (active ? 22 : 20)}
               data={[
                 { x: 1, y: -3 },
                 { x: 2, y: 5 },
@@ -278,13 +294,13 @@ class App extends React.Component<any, any> {
             />
           </VictoryStack>
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
             containerComponent={<VictoryZoomContainer />}
             externalEventMutations={this.state.externalMutation}
           >
             <VictoryArea
               name="data"
-              style={{ data: { stroke: "#333", fill: "#888", opacity: 0.4 } }}
               data={this.state.data}
               interpolation="stepBefore"
             />
diff --git a/demo/ts/components/group-demo.tsx b/demo/ts/components/group-demo.tsx
index 2299fb60f..bb7894f97 100644
--- a/demo/ts/components/group-demo.tsx
+++ b/demo/ts/components/group-demo.tsx
@@ -13,6 +13,7 @@ import { VictoryBoxPlot } from "victory-box-plot";
 import { range, random } from "lodash";
 import { VictoryTheme } from "victory-core/lib";
 
+const themeColors = VictoryTheme.clean.palette?.colors || {};
 class App extends React.Component {
   getGroupData() {
     return range(5).map(() => {
@@ -67,18 +68,14 @@ class App extends React.Component {
               style={{
                 data: { strokeDasharray: "10, 5" },
               }}
-              colorScale="qualitative"
             >
               <VictoryGroup
-                color={"purple"}
+                colorScale="red"
                 data={[
                   { x: 1, y: 3 },
                   { x: 2, y: 4 },
                   { x: 3, y: 2 },
                 ]}
-                style={{
-                  data: { width: 40, opacity: 0.6 },
-                }}
               >
                 <VictoryBar />
                 <VictoryLine />
@@ -89,9 +86,7 @@ class App extends React.Component {
                   { x: 2, y: 5 },
                   { x: 3, y: 1 },
                 ]}
-                style={{
-                  data: { width: 20, opacity: 0.8 },
-                }}
+                colorScale="green"
               >
                 <VictoryBar />
                 <VictoryLine />
@@ -102,26 +97,23 @@ class App extends React.Component {
                   { x: 2, y: 2 },
                   { x: 3, y: 5 },
                 ]}
-                style={{
-                  data: { width: 10, opacity: 1 },
-                }}
+                colorScale="blue"
               >
                 <VictoryBar />
                 <VictoryLine />
                 <VictoryScatter
                   symbol={"plus"}
-                  size={10}
                   style={{
-                    data: { fill: "tomato" },
+                    data: { fill: themeColors.purple },
                   }}
                 />
               </VictoryGroup>
             </VictoryStack>
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart theme={VictoryTheme.clean} style={chartStyle}>
             <VictoryGroup
-              color="red"
+              colorScale="red"
               data={[
                 { x: 1, y: 3, errorX: 0.2, errorY: 0.5 },
                 { x: 2, y: 4, errorX: 0.3, errorY: 0.3 },
@@ -166,27 +158,18 @@ class App extends React.Component {
               />
             </VictoryGroup>
           </VictoryChart>
-          <VictoryGroup style={chartStyle}>
-              <VictoryBoxPlot
-                minLabels
-                maxLabels
-                data={[
-                  { x: 1, y: [1, 2, 3, 5] },
-                  { x: 2, y: [3, 2, 8, 10] },
-                  { x: 3, y: [2, 8, 6, 5] },
-                  { x: 4, y: [1, 3, 2, 9] },
-                ]}
-                style={{
-                  min: { stroke: "tomato" },
-                  max: { stroke: "orange" },
-                  q1: { fill: "tomato" },
-                  q3: { fill: "orange" },
-                  median: { stroke: "white", strokeWidth: 2 },
-                  minLabels: { fill: "tomato" },
-                  maxLabels: { fill: "orange" },
-                }}
-              />
-            </VictoryGroup>
+          <VictoryGroup style={chartStyle} theme={VictoryTheme.clean}>
+            <VictoryBoxPlot
+              minLabels
+              maxLabels
+              data={[
+                { x: 1, y: [1, 2, 3, 5] },
+                { x: 2, y: [3, 2, 8, 10] },
+                { x: 3, y: [2, 8, 6, 5] },
+                { x: 4, y: [1, 3, 2, 9] },
+              ]}
+            />
+          </VictoryGroup>
         </div>
       </div>
     );
diff --git a/demo/ts/components/horizontal-demo.tsx b/demo/ts/components/horizontal-demo.tsx
index e4e30086f..c30112e76 100644
--- a/demo/ts/components/horizontal-demo.tsx
+++ b/demo/ts/components/horizontal-demo.tsx
@@ -14,7 +14,7 @@ import { VictoryBoxPlot } from "victory-box-plot";
 import { VictoryAxis } from "victory-axis";
 import { VictoryBrushContainer } from "victory-brush-container";
 import { range, random } from "lodash";
-import { VictoryTheme } from "victory-core/lib";
+import { VictoryTheme } from "victory-core";
 
 const errorData = [
   { x: 1, y: 10, errorX: [1, 0.5], errorY: 1 },
@@ -24,6 +24,8 @@ const errorData = [
   { x: 5, y: 10, errorX: [1, 0.5], errorY: 2 },
 ];
 
+const themeColors = VictoryTheme.clean.palette?.colors || {};
+
 class App extends React.Component {
   getBarData() {
     return range(5).map(() => {
@@ -49,9 +51,19 @@ class App extends React.Component {
     };
     return (
       <div style={containerStyle}>
-        <VictoryChart horizontal scale={{ y: "log" }} style={chartStyle}>
+        <VictoryChart
+          horizontal
+          scale={{ y: "log" }}
+          style={chartStyle}
+          theme={VictoryTheme.clean}
+          domainPadding={20}
+        >
           <VictoryBar
-            cornerRadius={4}
+            style={{
+              data: {
+                fill: themeColors.green,
+              },
+            }}
             data={[
               { x: 1, y: 0.1 },
               { x: 2, y: 1 },
@@ -64,7 +76,12 @@ class App extends React.Component {
             ]}
           />
         </VictoryChart>
-        <VictoryChart horizontal scale={{ y: "log" }} style={chartStyle}>
+        <VictoryChart
+          horizontal
+          scale={{ y: "log" }}
+          style={chartStyle}
+          theme={VictoryTheme.clean}
+        >
           <VictoryArea
             data={[
               { x: 1, y: 0.1 },
@@ -78,9 +95,18 @@ class App extends React.Component {
             ]}
           />
         </VictoryChart>
-        <VictoryChart horizontal theme={VictoryTheme.clean} style={chartStyle}>
+        <VictoryChart
+          horizontal
+          theme={VictoryTheme.clean}
+          style={chartStyle}
+          domainPadding={20}
+        >
           <VictoryBar
-            cornerRadius={{ topLeft: 1, topRight: 5 }}
+            style={{
+              data: {
+                fill: themeColors.orange,
+              },
+            }}
             data={[
               { x: "low", y: 1, sort: 1 },
               { x: "med", y: 2, sort: 2 },
@@ -89,8 +115,7 @@ class App extends React.Component {
             sortKey={"sort"}
             labels={() => "hi"}
           />
-          <VictoryScatter
-            style={{ data: { fill: "tomato" } }}
+          <VictoryLine
             data={[
               { x: "low", y: 1, sort: 1 },
               { x: "med", y: 2, sort: 2 },
@@ -98,8 +123,12 @@ class App extends React.Component {
             ]}
             sortKey={"sort"}
           />
-          <VictoryLine
-            style={{ data: { stroke: "tomato" } }}
+          <VictoryScatter
+            style={{
+              data: {
+                fill: themeColors.cyan,
+              },
+            }}
             data={[
               { x: "low", y: 1, sort: 1 },
               { x: "med", y: 2, sort: 2 },
@@ -108,8 +137,17 @@ class App extends React.Component {
             sortKey={"sort"}
           />
         </VictoryChart>
-        <VictoryChart style={chartStyle}>
+        <VictoryChart
+          style={chartStyle}
+          theme={VictoryTheme.clean}
+          domainPadding={20}
+        >
           <VictoryBar
+            style={{
+              data: {
+                fill: themeColors.pink,
+              },
+            }}
             horizontal
             data={[
               { x: "low", y: 1, sort: 3 },
@@ -120,8 +158,13 @@ class App extends React.Component {
           />
         </VictoryChart>
 
-        <VictoryChart style={chartStyle}>
+        <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
           <VictoryBar
+            style={{
+              data: {
+                fill: themeColors.yellow,
+              },
+            }}
             horizontal
             alignment="start"
             data={[
@@ -133,8 +176,12 @@ class App extends React.Component {
           />
         </VictoryChart>
 
-        <VictoryChart style={chartStyle} domainPadding={{ y: 30 }}>
-          <VictoryGroup offset={20} style={{ data: { width: 15 } }}>
+        <VictoryChart
+          style={chartStyle}
+          domainPadding={{ x: 30 }}
+          theme={VictoryTheme.clean}
+        >
+          <VictoryGroup offset={20}>
             <VictoryStack colorScale={"red"}>
               {this.getBarData().map((data, index) => {
                 return <VictoryBar horizontal key={index} data={data} />;
@@ -153,7 +200,12 @@ class App extends React.Component {
           </VictoryGroup>
         </VictoryChart>
 
-        <VictoryChart horizontal style={chartStyle}>
+        <VictoryChart
+          horizontal
+          style={chartStyle}
+          theme={VictoryTheme.clean}
+          domainPadding={20}
+        >
           <VictoryStack labels={["a", "b", "c"]} colorScale={"qualitative"}>
             <VictoryBar
               data={[
@@ -179,7 +231,7 @@ class App extends React.Component {
           </VictoryStack>
         </VictoryChart>
 
-        <VictoryChart horizontal style={chartStyle}>
+        <VictoryChart horizontal style={chartStyle} theme={VictoryTheme.clean}>
           <VictoryGroup
             labels={["a", "b", "c"]}
             offset={20}
@@ -214,6 +266,7 @@ class App extends React.Component {
           style={chartStyle}
           labels={["a", "b", "c"]}
           offset={20}
+          theme={VictoryTheme.clean}
           colorScale={"qualitative"}
         >
           <VictoryBar
@@ -240,10 +293,11 @@ class App extends React.Component {
         </VictoryGroup>
 
         <VictoryArea
+          theme={VictoryTheme.clean}
           horizontal
           style={{
             parent: chartStyle.parent,
-            data: { stroke: "red", strokeWidth: 2 },
+            data: { fill: themeColors.green },
           }}
           labels={() => "yo"}
           data={[
@@ -257,12 +311,13 @@ class App extends React.Component {
             { x: new Date(2015, 1, 1), y: 470 },
           ]}
         />
-        <VictoryChart horizontal style={chartStyle} scale={{ x: "time" }}>
+        <VictoryChart
+          horizontal
+          style={chartStyle}
+          scale={{ x: "time" }}
+          theme={VictoryTheme.clean}
+        >
           <VictoryLine
-            style={{
-              data: { stroke: "red", strokeWidth: 2 },
-            }}
-            labels={() => "yo"}
             data={[
               { x: new Date(1982, 1, 1), y: 125 },
               { x: new Date(1987, 1, 1), y: 257 },
@@ -276,8 +331,12 @@ class App extends React.Component {
           />
         </VictoryChart>
         <VictoryBar
+          theme={VictoryTheme.clean}
           horizontal
-          style={chartStyle}
+          style={{
+            ...chartStyle,
+            data: { fill: themeColors.red },
+          }}
           labels={() => "yo"}
           data={[
             { x: new Date(1982, 1, 1), y: 125 },
@@ -290,7 +349,7 @@ class App extends React.Component {
             { x: new Date(2015, 1, 1), y: 470 },
           ]}
         />
-        <VictoryChart horizontal style={chartStyle}>
+        <VictoryChart horizontal style={chartStyle} theme={VictoryTheme.clean}>
           <VictoryStack>
             <VictoryArea
               data={[
@@ -331,46 +390,12 @@ class App extends React.Component {
           </VictoryStack>
         </VictoryChart>
 
-        <VictoryStack horizontal style={chartStyle}>
-          <VictoryArea
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 5 },
-              { x: 4, y: 4 },
-              { x: 5, y: 7 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 4 },
-              { x: 3, y: 5 },
-              { x: 4, y: 7 },
-              { x: 5, y: 5 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 2 },
-              { x: 3, y: 6 },
-              { x: 4, y: 2 },
-              { x: 5, y: 6 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 3 },
-              { x: 4, y: 4 },
-              { x: 5, y: 7 },
-            ]}
-          />
-        </VictoryStack>
-
-        <VictoryChart style={chartStyle} horizontal>
+        <VictoryChart
+          style={chartStyle}
+          horizontal
+          theme={VictoryTheme.clean}
+          domainPadding={20}
+        >
           <VictoryCandlestick
             labels={() => "yo"}
             data={[
@@ -428,25 +453,32 @@ class App extends React.Component {
           />
         </VictoryChart>
 
-        <VictoryChart horizontal style={chartStyle}>
+        <VictoryChart horizontal style={chartStyle} theme={VictoryTheme.clean}>
           <VictoryErrorBar data={errorData} labels={() => "yo"} />
           <VictoryScatter data={errorData} />
           <VictoryAxis dependentAxis />
           <VictoryAxis crossAxis={false} />
         </VictoryChart>
 
-        <VictoryChart horizontal style={chartStyle}>
+        <VictoryChart horizontal style={chartStyle} theme={VictoryTheme.clean}>
           <VictoryLine
-            style={{ data: { stroke: "blue" } }}
             y={(d) => Math.sin(2 * Math.PI * d.x)}
             samples={25}
+            style={{
+              data: {
+                stroke: themeColors.green,
+              },
+            }}
           />
         </VictoryChart>
-        <VictoryChart horizontal style={chartStyle} domain={{ y: [100, 550] }}>
+        <VictoryChart
+          horizontal
+          style={chartStyle}
+          domain={{ y: [100, 550] }}
+          theme={VictoryTheme.clean}
+          domainPadding={20}
+        >
           <VictoryBar
-            style={{
-              data: { stroke: "red", strokeWidth: 2 },
-            }}
             labels={() => "yo"}
             data={[
               { x: new Date(1982, 1, 1), y: 125 },
@@ -464,8 +496,12 @@ class App extends React.Component {
           style={chartStyle}
           horizontal
           categories={{ y: ["E", "F", "G", "H"] }}
+          theme={VictoryTheme.clean}
         >
           <VictoryLine
+            style={{
+              data: { stroke: themeColors.teal },
+            }}
             data={[
               { x: 6, y: "E" },
               { x: 2, y: "F" },
@@ -474,7 +510,12 @@ class App extends React.Component {
             ]}
           />
         </VictoryChart>
-        <VictoryChart horizontal style={chartStyle} domainPadding={20}>
+        <VictoryChart
+          horizontal
+          style={chartStyle}
+          domainPadding={20}
+          theme={VictoryTheme.clean}
+        >
           <VictoryBoxPlot
             minLabels
             maxLabels
@@ -491,13 +532,14 @@ class App extends React.Component {
         <VictoryChart
           horizontal
           style={chartStyle}
+          theme={VictoryTheme.clean}
           containerComponent={
             <VictoryBrushContainer brushDomain={{ x: [2, 4], y: [-2, 2] }} />
           }
         >
           <VictoryLine
             style={{
-              data: { stroke: "tomato" },
+              data: { stroke: themeColors.teal },
             }}
             data={[
               { x: 1, y: -5 },
@@ -511,7 +553,7 @@ class App extends React.Component {
           />
           <VictoryLine
             style={{
-              data: { stroke: "blue" },
+              data: { stroke: themeColors.purple },
             }}
             data={[
               { x: 1, y: -3 },
@@ -535,21 +577,6 @@ class App extends React.Component {
             ]}
           />
         </VictoryChart>
-
-        <VictoryChart style={chartStyle} horizontal>
-          <VictoryAxis
-            tickValues={[
-              new Date(1985, 1, 1),
-              new Date(1990, 1, 1),
-              new Date(1995, 1, 1),
-              new Date(2000, 1, 1),
-              new Date(2005, 1, 1),
-              new Date(2010, 1, 1),
-            ]}
-            tickFormat={(x) => new Date(x).getFullYear()}
-          />
-          <VictoryScatter data={[]} />
-        </VictoryChart>
       </div>
     );
   }
diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx
index 82357a8e4..58b53b457 100644
--- a/demo/ts/components/immutable-demo.tsx
+++ b/demo/ts/components/immutable-demo.tsx
@@ -29,6 +29,13 @@ import {
   VictoryTheme,
 } from "victory-core";
 
+const themeColors = VictoryTheme.clean.palette?.colors || {};
+const scatterFillStyle: VictoryStyleInterface = {
+  data: {
+    fill: ({ active }) =>
+      active ? themeColors.pink || "pink" : themeColors.blue || "blue",
+  },
+};
 interface WrapperProps {
   children?: React.ReactElement | React.ReactElement[];
 }
@@ -211,7 +218,11 @@ export default class ImmutableDemo extends React.Component<
         <h1>with immutable.js data</h1>
 
         <div style={containerStyle}>
-          <VictoryChart style={chartStyle} animate={{ duration: 2000 }}>
+          <VictoryChart
+            style={chartStyle}
+            animate={{ duration: 2000 }}
+            theme={VictoryTheme.clean}
+          >
             <VictoryScatter
               groupComponent={<VictoryClipContainer />}
               data={this.state.scatterData}
@@ -237,7 +248,7 @@ export default class ImmutableDemo extends React.Component<
 
           <VictoryChart
             style={chartStyle}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             events={[
               {
                 childName: "area-1",
@@ -250,7 +261,9 @@ export default class ImmutableDemo extends React.Component<
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "gold" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "gold",
+                            }),
                           };
                         },
                       },
@@ -259,7 +272,9 @@ export default class ImmutableDemo extends React.Component<
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "orange" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "orange",
+                            }),
                           };
                         },
                       },
@@ -268,7 +283,9 @@ export default class ImmutableDemo extends React.Component<
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "red" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "red",
+                            }),
                           };
                         },
                       },
@@ -325,7 +342,7 @@ export default class ImmutableDemo extends React.Component<
           <VictoryChart
             style={chartStyle}
             domainPadding={{ x: 30 }}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
           >
             <VictoryGroup
               offset={12}
@@ -358,7 +375,7 @@ export default class ImmutableDemo extends React.Component<
             ])}
           />
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
             <VictoryErrorBar
               data={fromJS([
                 { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
@@ -381,7 +398,8 @@ export default class ImmutableDemo extends React.Component<
 
           <svg height={500} width={500}>
             <VictoryCandlestick
-              style={Object.assign({}, chartStyle, { data: { width: 10 } })}
+              theme={VictoryTheme.clean}
+              style={chartStyle}
               data={fromJS([
                 {
                   x: new Date(2016, 6, 1),
@@ -451,9 +469,10 @@ export default class ImmutableDemo extends React.Component<
                         {
                           mutation: (props) => {
                             return {
-                              style: Object.assign({}, props.style.labels, {
-                                fill: "orange",
-                              }),
+                              style: {
+                                ...props.style,
+                                stroke: themeColors.orange,
+                              },
                             };
                           },
                         },
@@ -469,7 +488,10 @@ export default class ImmutableDemo extends React.Component<
                         {
                           mutation: (props) => {
                             return {
-                              style: Object.assign({}, props.style, { fill: "blue" }),
+                              style: {
+                                ...props.style,
+                                stroke: themeColors.blue,
+                              },
                             };
                           },
                         },
@@ -483,6 +505,7 @@ export default class ImmutableDemo extends React.Component<
           </svg>
 
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
             domainPadding={{ x: 30, y: 30 }}
             events={[
@@ -505,7 +528,10 @@ export default class ImmutableDemo extends React.Component<
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { stroke: "lime" }),
+                            style: {
+                              ...props.style,
+                              stroke: themeColors.yellow,
+                            },
                           };
                         },
                       },
@@ -514,7 +540,10 @@ export default class ImmutableDemo extends React.Component<
                         target: "labels",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "green" }),
+                            style: {
+                              ...props.style,
+                              stroke: themeColors.green,
+                            },
                             text: "waddup",
                           };
                         },
@@ -527,7 +556,6 @@ export default class ImmutableDemo extends React.Component<
           >
             <VictoryBar
               name="bar"
-              style={{ data: { width: 15, fill: "green" } }}
               data={fromJS([
                 { x: 1, y: 1 },
                 { x: 2, y: 2 },
@@ -544,14 +572,14 @@ export default class ImmutableDemo extends React.Component<
                 { x: 13, y: 1 },
               ])}
             />
-            <VictoryLine
-              name="line"
-              y={() => 0.5}
-              style={{ data: { stroke: "blue", strokeWidth: 5 } }}
-            />
+            <VictoryLine name="line" y={() => 0.5} />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} domainPadding={20}>
+          <VictoryChart
+            style={chartStyle}
+            domainPadding={20}
+            theme={VictoryTheme.clean}
+          >
             <VictoryStack
               style={{
                 data: { strokeDasharray: "10, 5" },
@@ -559,15 +587,12 @@ export default class ImmutableDemo extends React.Component<
               colorScale="qualitative"
             >
               <VictoryGroup
-                color={"purple"}
+                colorScale="red"
                 data={fromJS([
                   { x: 1, y: 3 },
                   { x: 2, y: 4 },
                   { x: 3, y: 2 },
                 ])}
-                style={{
-                  data: { width: 40, opacity: 0.6 },
-                }}
               >
                 <VictoryBar />
                 <VictoryLine />
@@ -578,30 +603,25 @@ export default class ImmutableDemo extends React.Component<
                   { x: 2, y: 5 },
                   { x: 3, y: 1 },
                 ])}
-                style={{
-                  data: { width: 20, opacity: 0.8 },
-                }}
+                colorScale="blue"
               >
                 <VictoryBar />
                 <VictoryLine />
               </VictoryGroup>
               <VictoryGroup
+                colorScale="green"
                 data={fromJS([
                   { x: 1, y: 3 },
                   { x: 2, y: 2 },
                   { x: 3, y: 5 },
                 ])}
-                style={{
-                  data: { width: 10, opacity: 1 },
-                }}
               >
                 <VictoryBar />
                 <VictoryLine />
                 <VictoryScatter
                   symbol={"plus"}
-                  size={10}
                   style={{
-                    data: { fill: "tomato" },
+                    data: { fill: themeColors.purple },
                   }}
                 />
               </VictoryGroup>
@@ -639,6 +659,7 @@ export default class ImmutableDemo extends React.Component<
           />
 
           <VictoryCandlestick
+            theme={VictoryTheme.clean}
             style={chartStyle}
             labelComponent={<VictoryTooltip />}
             labels={({ datum }) => `hello #${datum.x}`}
@@ -653,10 +674,8 @@ export default class ImmutableDemo extends React.Component<
 
           <VictoryChart
             style={chartStyle}
-            height={400}
-            padding={{ top: 80, bottom: 50, left: 50, right: 50 }}
             containerComponent={<VictoryZoomContainer />}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             events={[
               {
                 childName: "area-1",
@@ -668,7 +687,10 @@ export default class ImmutableDemo extends React.Component<
                       target: "data",
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "gold" }),
+                          style: {
+                            ...props.style,
+                            fill: themeColors.yellow,
+                          },
                         };
                       },
                     },
@@ -677,7 +699,10 @@ export default class ImmutableDemo extends React.Component<
                       target: "data",
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "orange" }),
+                          style: {
+                            ...props.style,
+                            fill: themeColors.orange,
+                          },
                         };
                       },
                     },
@@ -686,7 +711,10 @@ export default class ImmutableDemo extends React.Component<
                       target: "data",
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "red" }),
+                          style: {
+                            ...props.style,
+                            fill: themeColors.red,
+                          },
                         };
                       },
                     },
@@ -695,20 +723,6 @@ export default class ImmutableDemo extends React.Component<
               },
             ]}
           >
-            <VictoryLegend
-              x={83}
-              y={10}
-              title="Legend"
-              centerTitle
-              orientation="horizontal"
-              gutter={20}
-              style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
-              data={[
-                { name: "One", symbol: { fill: "tomato" } },
-                { name: "Two", symbol: { fill: "orange" } },
-                { name: "Three", symbol: { fill: "gold" } },
-              ]}
-            />
             <VictoryAxis />
             <VictoryStack>
               <VictoryArea
@@ -757,7 +771,7 @@ export default class ImmutableDemo extends React.Component<
 
           <VictoryChart
             style={chartStyle}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             domainPadding={{ y: 2 }}
             containerComponent={
               <VictoryVoronoiContainer
@@ -782,10 +796,10 @@ export default class ImmutableDemo extends React.Component<
               ])}
               style={{
                 data: {
-                  stroke: "tomato",
-                  strokeWidth: ({ active }) => (active ? 4 : 2),
+                  stroke: themeColors.red,
+                  strokeWidth: ({ active }) => (active ? 2 : 1),
                 },
-                labels: { fill: "tomato" },
+                labels: { fill: themeColors.red },
               }}
             />
             <VictoryLine
@@ -796,10 +810,10 @@ export default class ImmutableDemo extends React.Component<
               ])}
               style={{
                 data: {
-                  stroke: "blue",
-                  strokeWidth: ({ active }) => (active ? 4 : 2),
+                  stroke: themeColors.blue,
+                  strokeWidth: ({ active }) => (active ? 2 : 1),
                 },
-                labels: { fill: "blue" },
+                labels: { fill: themeColors.blue },
               }}
             />
             <VictoryLine
@@ -810,19 +824,17 @@ export default class ImmutableDemo extends React.Component<
               ])}
               style={{
                 data: {
-                  stroke: "black",
-                  strokeWidth: ({ active }) => (active ? 4 : 2),
+                  stroke: themeColors.green,
+                  strokeWidth: ({ active }) => (active ? 2 : 1),
                 },
-                labels: { fill: "black" },
+                labels: { fill: themeColors.green },
               }}
             />
           </VictoryChart>
 
           <VictoryChart
             style={chartStyle}
-            theme={VictoryTheme.material}
-            height={400}
-            padding={{ top: 100, bottom: 40, left: 50, right: 50 }}
+            theme={VictoryTheme.clean}
             containerComponent={
               <VictoryCursorContainer
                 cursorLabel={({ datum }) =>
@@ -831,20 +843,6 @@ export default class ImmutableDemo extends React.Component<
               />
             }
           >
-            <VictoryLegend
-              x={90}
-              y={10}
-              title="Legend"
-              centerTitle
-              orientation="horizontal"
-              gutter={20}
-              style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
-              data={[
-                { name: "One", symbol: { fill: "tomato" } },
-                { name: "Two", symbol: { fill: "orange" } },
-                { name: "Three", symbol: { fill: "gold" } },
-              ]}
-            />
             <VictoryLine
               data={fromJS(
                 range(1500).map((x) => ({ x, y: x + 10 * Math.random() })),
@@ -854,6 +852,7 @@ export default class ImmutableDemo extends React.Component<
 
           <div>
             <VictoryChart
+              theme={VictoryTheme.clean}
               width={800}
               height={500}
               scale={{ x: "time" }}
@@ -869,9 +868,6 @@ export default class ImmutableDemo extends React.Component<
               }
             >
               <VictoryLine
-                style={{
-                  data: { stroke: "tomato" },
-                }}
                 data={fromJS([
                   { x: new Date(1982, 1, 1), y: 125 },
                   { x: new Date(1987, 1, 1), y: 257 },
@@ -886,6 +882,7 @@ export default class ImmutableDemo extends React.Component<
             </VictoryChart>
 
             <VictoryChart
+              theme={VictoryTheme.clean}
               padding={{ top: 0, left: 50, right: 50, bottom: 30 }}
               width={800}
               height={100}
@@ -913,9 +910,6 @@ export default class ImmutableDemo extends React.Component<
                 tickFormat={(x) => new Date(x).getFullYear()}
               />
               <VictoryLine
-                style={{
-                  data: { stroke: "tomato" },
-                }}
                 data={fromJS([
                   { x: new Date(1982, 1, 1), y: 125 },
                   { x: new Date(1987, 1, 1), y: 257 },
@@ -930,11 +924,7 @@ export default class ImmutableDemo extends React.Component<
             </VictoryChart>
           </div>
 
-          <VictoryChart
-            style={chartStyle}
-            animate
-            theme={VictoryTheme.material}
-          >
+          <VictoryChart style={chartStyle} animate theme={VictoryTheme.clean}>
             <VictoryStack colorScale={"warm"}>
               {this.state.multiTransitionAreaData.map((data, index) => {
                 return (
@@ -949,6 +939,7 @@ export default class ImmutableDemo extends React.Component<
           </VictoryChart>
 
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
             containerComponent={<VictorySelectionContainer />}
           >
@@ -959,11 +950,9 @@ export default class ImmutableDemo extends React.Component<
                 { x: 3, y: -2 },
               ])}
             >
-              <VictoryLine style={{ data: { stroke: "tomato" } }} />
+              <VictoryLine style={{ data: { stroke: themeColors.purple } }} />
               <VictoryScatter
-                style={{
-                  data: { fill: ({ active }) => (active ? "tomato" : "gray") },
-                }}
+                style={scatterFillStyle}
                 labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
@@ -975,11 +964,9 @@ export default class ImmutableDemo extends React.Component<
                 { x: 3, y: 3 },
               ])}
             >
-              <VictoryLine style={{ data: { stroke: "blue" } }} />
+              <VictoryLine style={{ data: { stroke: themeColors.green } }} />
               <VictoryScatter
-                style={{
-                  data: { fill: ({ active }) => (active ? "blue" : "gray") },
-                }}
+                style={scatterFillStyle}
                 labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
@@ -991,11 +978,9 @@ export default class ImmutableDemo extends React.Component<
                 { x: 3, y: -2 },
               ])}
             >
-              <VictoryLine style={{ data: { stroke: "black" } }} />
+              <VictoryLine style={{ data: { stroke: themeColors.cyan } }} />
               <VictoryScatter
-                style={{
-                  data: { fill: ({ active }) => (active ? "black" : "gray") },
-                }}
+                style={scatterFillStyle}
                 labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
@@ -1013,9 +998,6 @@ export default class ImmutableDemo extends React.Component<
                 <VictoryPolarAxis
                   key={i}
                   dependentAxis
-                  style={{
-                    axisLabel: { padding: 10 },
-                  }}
                   tickLabelComponent={
                     <VictoryLabel labelPlacement="vertical" />
                   }
diff --git a/demo/ts/components/victory-area-demo.tsx b/demo/ts/components/victory-area-demo.tsx
index f2700f47d..1c79dc1d8 100644
--- a/demo/ts/components/victory-area-demo.tsx
+++ b/demo/ts/components/victory-area-demo.tsx
@@ -133,311 +133,215 @@ export default class VictoryAreaDemo extends React.Component<
       justifyContent: "center",
     };
 
+    const dataStyle = { strokeWidth: 2, fillOpacity: 0.4 };
+
     return (
       <div className="demo" style={containerStyle}>
-        <VictoryChart style={style} scale={{ y: "log" }} theme={VictoryTheme.clean}>
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
+          <VictoryArea />
+        </VictoryChart>
+
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
           <VictoryArea
-            labels={({ datum }: any) => Math.round(datum.y)}
+            style={{
+              data: {
+                fill: VictoryTheme.clean.palette?.colors?.purple,
+              },
+            }}
             data={[
-              { x: 1, y: 0.2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 50 },
-              { x: 4, y: 400 },
-              { x: 5, y: 70 },
+              { x: new Date(1982, 1, 1), y: 125 },
+              { x: new Date(1987, 1, 1), y: 257 },
+              { x: new Date(1993, 1, 1), y: 345 },
+              { x: new Date(1997, 1, 1), y: 515 },
+              { x: new Date(2001, 1, 1), y: 132 },
+              { x: new Date(2005, 1, 1), y: 305 },
+              { x: new Date(2011, 1, 1), y: 270 },
+              { x: new Date(2015, 1, 1), y: 470 },
             ]}
           />
         </VictoryChart>
 
-        <VictoryChart style={style} scale={{ x: "log" }}>
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
           <VictoryArea
-            style={{ data: { fill: "cyan", stroke: "cyan" } }}
+            style={{
+              data: {
+                fill: VictoryTheme.clean.palette?.colors?.teal,
+              },
+            }}
             data={[
-              { x: 1, y: 0.2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 50 },
-              { x: 4, y: 400 },
-              { x: 5, y: 70 },
+              { x: 1, y: 4000 },
+              { x: 2, y: 3000 },
+              { x: 3, y: 2000 },
+              { x: 4, y: 2780 },
+              { x: 5, y: 1890 },
             ]}
+            interpolation="natural"
+            labels={({ datum }) => datum.y}
           />
         </VictoryChart>
 
-        <svg viewBox="0 0 350 350" style={style.parent}>
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
           <VictoryArea
-            standalone={false}
-            animate={{ duration: 1000 }}
-            data={this.state.areaTransitionData}
-            theme={VictoryTheme.material}
-            containerComponent={
-              <VictoryContainer
-                title="Area Chart"
-                desc="This is an animated area chart that displays data."
-              />
-            }
+            data={this.state.data}
+            style={{
+              data: {
+                fill: VictoryTheme.clean.palette?.colors?.pink,
+              },
+            }}
           />
-        </svg>
-
-        <VictoryStack
-          style={style}
-          animate={{
-            duration: 1000,
-          }}
-          colorScale={"warm"}
-          containerComponent={
-            <VictoryContainer desc="This is an animated area chart that displays data in a range of colors." />
-          }
-        >
-          {this.state.multiTransitionData.map((data, index) => {
-            return (
-              <VictoryArea key={index} data={data} interpolation={"basis"} />
-            );
-          })}
-        </VictoryStack>
+        </VictoryChart>
 
-        <VictoryArea style={style} />
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
+          <VictoryStack
+            style={{ parent: style.parent }}
+            colorScale="qualitative"
+          >
+            <VictoryArea
+              data={[
+                { x: 1, y: 2 },
+                { x: 2, y: 3 },
+                { x: 3, y: 5 },
+                { x: 4, y: 4 },
+                { x: 5, y: 7 },
+              ]}
+            />
+            <VictoryArea
+              data={[
+                { x: 1, y: 1 },
+                { x: 2, y: 4 },
+                { x: 3, y: 5 },
+                { x: 4, y: 7 },
+                { x: 5, y: 5 },
+              ]}
+            />
+            <VictoryArea
+              data={[
+                { x: 1, y: 3 },
+                { x: 2, y: 2 },
+                { x: 3, y: 6 },
+                { x: 4, y: 2 },
+                { x: 5, y: 6 },
+              ]}
+            />
+            <VictoryArea
+              data={[
+                { x: 1, y: 2 },
+                { x: 2, y: 3 },
+                { x: 3, y: 3 },
+                { x: 4, y: 4 },
+                { x: 5, y: 7 },
+              ]}
+            />
+          </VictoryStack>
+        </VictoryChart>
 
-        <VictoryArea
-          style={{ parent: style.parent, data: this.state.style }}
-          data={this.state.data}
-          animate={{ duration: 2000 }}
-        />
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
+          <VictoryGroup
+            style={{
+              parent: style.parent,
+            }}
+          >
+            <VictoryArea
+              style={{
+                data: {
+                  fill: VictoryTheme.clean.palette?.colors?.purple,
+                  stroke: VictoryTheme.clean.palette?.colors?.purple,
+                },
+              }}
+              data={[
+                { x: 1, y: 2 },
+                { x: 2, y: 3 },
+                { x: 3, y: 5 },
+                { x: 4, y: 4 },
+                { x: 5, y: 7 },
+              ]}
+            />
+            <VictoryArea
+              style={{
+                data: {
+                  fill: VictoryTheme.clean.palette?.colors?.teal,
+                  stroke: VictoryTheme.clean.palette?.colors?.teal,
+                },
+              }}
+              data={[
+                { x: 1, y: 3 },
+                { x: 2, y: 2 },
+                { x: 3, y: 6 },
+                { x: 4, y: 2 },
+                { x: 5, y: 6 },
+              ]}
+            />
+          </VictoryGroup>
+        </VictoryChart>
 
-        <VictoryStack style={{ parent: style.parent }}>
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
           <VictoryArea
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 5 },
-              { x: 4, y: 4 },
-              { x: 5, y: 7 },
-            ]}
+            style={{
+              parent: style.parent,
+            }}
+            interpolation={"basis"}
+            data={range(0, 100)}
+            y={(d) => Math.sin(d)}
           />
-          <VictoryArea
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 4 },
-              { x: 3, y: 5 },
-              { x: 4, y: 7 },
-              { x: 5, y: 5 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 2 },
-              { x: 3, y: 6 },
-              { x: 4, y: 2 },
-              { x: 5, y: 6 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 3 },
-              { x: 4, y: 4 },
-              { x: 5, y: 7 },
-            ]}
-          />
-        </VictoryStack>
+        </VictoryChart>
 
-        <VictoryGroup
-          style={{
-            parent: style.parent,
-            data: { strokeWidth: 2, fillOpacity: 0.4 },
-          }}
-        >
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
           <VictoryArea
-            style={{ data: { fill: "cyan", stroke: "cyan" } }}
+            theme={VictoryTheme.clean}
+            style={{
+              parent: style.parent,
+              data: {
+                fill: VictoryTheme.clean.palette?.colors?.purple,
+              },
+            }}
             data={[
-              { x: 1, y: 2 },
+              { x: 1, y: 1 },
               { x: 2, y: 3 },
               { x: 3, y: 5 },
-              { x: 4, y: 4 },
-              { x: 5, y: 7 },
-            ]}
-          />
-          <VictoryArea
-            style={{ data: { fill: "magenta", stroke: "magenta" } }}
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 2 },
-              { x: 3, y: 6 },
               { x: 4, y: 2 },
-              { x: 5, y: 6 },
+              { x: 5, y: null },
+              { x: 6, y: null },
+              { x: 7, y: 6 },
+              { x: 8, y: 7 },
+              { x: 9, y: 8 },
+              { x: 10, y: 12 },
             ]}
+            labels={({ datum }) => datum.y}
           />
-        </VictoryGroup>
-
-        <VictoryStack
-          style={{ parent: style.parent }}
-          colorScale={"green"}
-          animate={{ duration: 2000 }}
-        >
-          {this.state.groupedData.map((data, index) => (
-            <VictoryArea data={data} key={index} />
-          ))}
-        </VictoryStack>
-
-        <VictoryArea
-          style={{ parent: style.parent, data: { fill: "red" } }}
-          interpolation={"basis"}
-          data={range(0, 100)}
-          y={(d) => Math.sin(d)}
-        />
-
-        <VictoryArea
-          style={{
-            parent: style.parent,
-            data: { fill: "gold" },
-          }}
-          events={[
-            {
-              target: "parent",
-              eventHandlers: {
-                onClick: () => {
-                  return [
-                    {
-                      target: "data",
-                      mutation: (props) => {
-                        return {
-                          style: Object.assign({}, props.style, { fill: "orange" }),
-                        };
-                      },
-                    },
-                    {
-                      target: "labels",
-                      eventKey: 0,
-                      mutation: () => {
-                        return { text: "hey" };
-                      },
-                    },
-                  ];
-                },
-              },
-            },
-          ]}
-          labels={() => null}
-          data={this.state.arrayData}
-          x={0}
-          y={1}
-        />
-
-        <VictoryArea
-          style={{ parent: style.parent }}
-          data={[
-            { x: new Date(1982, 1, 1), y: 125 },
-            { x: new Date(1987, 1, 1), y: 257 },
-            { x: new Date(1993, 1, 1), y: 345 },
-            { x: new Date(1997, 1, 1), y: 515 },
-            { x: new Date(2001, 1, 1), y: 132 },
-            { x: new Date(2005, 1, 1), y: 305 },
-            { x: new Date(2011, 1, 1), y: 270 },
-            { x: new Date(2015, 1, 1), y: 470 },
-          ]}
-        />
-
-        <VictoryArea
-          style={{ parent: style.parent }}
-          data={[
-            { x: 1, y: 1 },
-            { x: 2, y: 3 },
-            { x: 3, y: 5 },
-            { x: 4, y: 2 },
-            { x: 5, y: null },
-            { x: 6, y: null },
-            { x: 7, y: 6 },
-            { x: 8, y: 7 },
-            { x: 9, y: 8 },
-            { x: 10, y: 12 },
-          ]}
-        />
+        </VictoryChart>
 
-        <svg width={450} height={300} style={style.parent}>
-          <VictoryArea
-            y={(data) => Math.sin(data.x)}
-            standalone={false}
-            style={{ data: { opacity: 0.4 } }}
-          />
-          <VictoryArea
-            y={(data) => Math.cos(data.x)}
-            standalone={false}
-            style={{ data: { opacity: 0.4 } }}
-          />
-        </svg>
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
+          <VictoryGroup
+            style={{
+              parent: style.parent,
+            }}
+          >
+            <VictoryArea
+              y={(data) => Math.sin(data.x)}
+              standalone={false}
+              style={{ data: { opacity: 0.4 } }}
+            />
+            <VictoryArea
+              y={(data) => Math.cos(data.x)}
+              standalone={false}
+              style={{ data: { opacity: 0.4 } }}
+            />
+          </VictoryGroup>
+        </VictoryChart>
 
-        <VictoryChart style={style} theme={VictoryTheme.material}>
-          <VictoryArea
-            style={style}
+        <VictoryChart theme={VictoryTheme.clean} style={style}>
+          <VictoryStack
             animate={{ duration: 1000 }}
-            data={this.state.areaTransitionData}
             containerComponent={
-              <VictoryContainer
-                title="Area Chart"
-                desc="This is an animated area chart that displays data."
-              />
+              <VictoryContainer desc="This is an animated area chart that displays data in a range of colors." />
             }
-          />
-        </VictoryChart>
-
-        <VictoryStack
-          style={style}
-          animate={{ duration: 1000 }}
-          theme={VictoryTheme.material}
-          containerComponent={
-            <VictoryContainer desc="This is an animated area chart that displays data in a range of colors." />
-          }
-        >
-          {this.state.multiTransitionData.map((data, index) => {
-            return (
-              <VictoryArea key={index} data={data} interpolation={"basis"} />
-            );
-          })}
-        </VictoryStack>
-
-        <VictoryStack
-          style={{ parent: style.parent }}
-          theme={VictoryTheme.material}
-        >
-          <VictoryArea
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 5 },
-              { x: 4, y: 4 },
-              { x: 5, y: 7 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 4 },
-              { x: 3, y: 5 },
-              { x: 4, y: 7 },
-              { x: 5, y: 5 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 3 },
-              { x: 2, y: 2 },
-              { x: 3, y: 6 },
-              { x: 4, y: 2 },
-              { x: 5, y: 6 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: 1, y: 2 },
-              { x: 2, y: 3 },
-              { x: 3, y: 3 },
-              { x: 4, y: 4 },
-              { x: 5, y: 7 },
-            ]}
-          />
-        </VictoryStack>
-
-        <VictoryChart style={style} theme={VictoryTheme.material}>
-          <VictoryArea style={style} data={[]} />
+          >
+            {this.state.multiTransitionData.map((data, index) => {
+              return (
+                <VictoryArea key={index} data={data} interpolation={"basis"} />
+              );
+            })}
+          </VictoryStack>
         </VictoryChart>
       </div>
     );
diff --git a/demo/ts/components/victory-axis-demo.tsx b/demo/ts/components/victory-axis-demo.tsx
index b2b9c686a..36cbe2684 100644
--- a/demo/ts/components/victory-axis-demo.tsx
+++ b/demo/ts/components/victory-axis-demo.tsx
@@ -3,7 +3,6 @@ import { random, range } from "lodash";
 import { DomainPropType } from "victory-core";
 import { VictoryAxis, VictoryAxisProps } from "victory-axis";
 import { VictoryLabel, VictoryContainer, VictoryTheme } from "victory-core";
-import XYTheme from "../theme/victory-axis-differential-styling-theme";
 
 interface VictoryAxisDemoState {
   tickValues: number[];
@@ -54,22 +53,15 @@ export default class VictoryAxisDemo extends React.Component<
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
     };
 
+    const blue = VictoryTheme.clean.palette?.colors?.blue || "blue";
+
     const styleOverrides: VictoryAxisProps["style"] = {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
-      axis: {
-        stroke: "black",
-      },
-      axisLabel: {
-        padding: 60,
-        fontWeight: "bold",
-        fontSize: 16,
-      },
       grid: {
-        strokeWidth: 2,
-        stroke: ({ tick }: any) => (tick === "Mariners\nSEA" ? "red" : "grey"),
+        stroke: ({ tick }: any) => (tick === "Mariners\nSEA" ? blue : "grey"),
       },
       ticks: {
-        stroke: ({ tick }: any) => (tick === "Mariners\nSEA" ? "red" : "grey"),
+        stroke: ({ tick }: any) => (tick === "Mariners\nSEA" ? blue : "grey"),
       },
       tickLabels: {
         fontWeight: ({ tick }: any) =>
@@ -91,13 +83,10 @@ export default class VictoryAxisDemo extends React.Component<
           <VictoryAxis
             style={{
               parent: styleOverrides.parent,
-              grid: { stroke: "#CFD8DC" },
+              grid: { stroke: "#CFD8DC", strokeDasharray: "10, 5" },
             }}
-            padding={60}
-            label={"animation\nwow!"}
-            axisLabelComponent={<VictoryLabel />}
             tickValues={this.state.tickValues}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             tickFormat={["first", "second", "third", "fourth", "fifth"]}
             animate={{ duration: 2000 }}
             containerComponent={
@@ -107,15 +96,13 @@ export default class VictoryAxisDemo extends React.Component<
               />
             }
           />
-
           <VictoryAxis
             scale="time"
             theme={VictoryTheme.clean}
             style={{
               parent: style.parent,
-              axis: { strokeWidth: 3 },
               tickLabels: { angle: 45 },
-              grid: { stroke: "#F82B60", strokeWidth: 2 },
+              grid: { stroke: VictoryTheme.clean.palette?.colors?.blue },
             }}
             containerComponent={
               <VictoryContainer title="Time Scale Axis Example" />
@@ -157,14 +144,13 @@ export default class VictoryAxisDemo extends React.Component<
             ]}
             tickFormat={(x) => x.getFullYear()}
           />
-
           <svg width={500} height={400}>
             <VictoryAxis
               crossAxis
               width={500}
               height={400}
               domain={this.state.domain}
-              theme={VictoryTheme.material}
+              theme={VictoryTheme.clean}
               offsetY={200}
               standalone={false}
             />
@@ -174,7 +160,7 @@ export default class VictoryAxisDemo extends React.Component<
               width={500}
               height={400}
               domain={this.state.domain}
-              theme={VictoryTheme.material}
+              theme={VictoryTheme.clean}
               offsetX={250}
               standalone={false}
             />
@@ -182,20 +168,27 @@ export default class VictoryAxisDemo extends React.Component<
 
           <svg width={500} height={400}>
             <VictoryAxis
+              theme={VictoryTheme.clean}
+              style={{
+                parent: style.parent,
+                axisLabel: { padding: 45 },
+              }}
               crossAxis
               domain={this.state.domain}
-              theme={XYTheme}
               standalone={false}
             />
             <VictoryAxis
+              theme={VictoryTheme.clean}
+              style={{
+                parent: style.parent,
+                axisLabel: { padding: 45 },
+              }}
               dependentAxis
               crossAxis
               domain={this.state.domain}
-              theme={XYTheme}
               standalone={false}
             />
           </svg>
-
           <VictoryAxis
             style={{
               parent: style.parent,
@@ -209,6 +202,7 @@ export default class VictoryAxisDemo extends React.Component<
             domain={[1, 5]}
           />
           <VictoryAxis
+            theme={VictoryTheme.clean}
             style={{
               parent: style.parent,
               axisLabel: { padding: 45 },
@@ -219,7 +213,6 @@ export default class VictoryAxisDemo extends React.Component<
             scale={"log"}
             domain={[1, 5]}
           />
-
           <VictoryAxis
             label="TEAMS"
             padding={{ top: 90, bottom: 40, left: 40, right: 40 }}
@@ -235,6 +228,7 @@ export default class VictoryAxisDemo extends React.Component<
             ]}
           />
           <VictoryAxis
+            theme={VictoryTheme.clean}
             label="TEAMS"
             padding={{ top: 40, bottom: 40, left: 40, right: 90 }}
             orientation="right"
@@ -248,6 +242,7 @@ export default class VictoryAxisDemo extends React.Component<
             ]}
           />
           <VictoryAxis
+            theme={VictoryTheme.clean}
             label="TEAMS"
             orientation="bottom"
             padding={{ top: 40, bottom: 90, left: 40, right: 40 }}
@@ -260,8 +255,8 @@ export default class VictoryAxisDemo extends React.Component<
               "Mariners\nSEA",
             ]}
           />
-
           <VictoryAxis
+            theme={VictoryTheme.clean}
             label="TEAMS"
             padding={{ top: 40, bottom: 40, left: 90, right: 40 }}
             orientation="left"
@@ -274,8 +269,8 @@ export default class VictoryAxisDemo extends React.Component<
               "Mariners\nSEA",
             ]}
           />
-
           <VictoryAxis
+            theme={VictoryTheme.clean}
             label="Empty Values"
             padding={{ top: 40, bottom: 40, left: 40, right: 90 }}
             orientation="right"
diff --git a/demo/ts/components/victory-bar-demo.tsx b/demo/ts/components/victory-bar-demo.tsx
index c429431e5..65083e5bf 100644
--- a/demo/ts/components/victory-bar-demo.tsx
+++ b/demo/ts/components/victory-bar-demo.tsx
@@ -151,7 +151,10 @@ export default class VictoryBarDemo extends React.Component<
       <div className="demo" style={containerStyle}>
         <ChartWrap>
           <VictoryBar
-            cornerRadius={4}
+            theme={VictoryTheme.clean}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.pink },
+            }}
             scale={{ y: "log", x: "linear" }}
             horizontal
             data={[
@@ -169,8 +172,10 @@ export default class VictoryBarDemo extends React.Component<
 
         <ChartWrap>
           <VictoryBar
-            cornerRadius={5}
-            style={{ data: { width: 15, fill: "red" } }}
+            theme={VictoryTheme.clean}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.teal },
+            }}
             scale={{ x: "linear", y: "log" }}
             data={[
               { x: 1, y: 0.1 },
@@ -184,8 +189,13 @@ export default class VictoryBarDemo extends React.Component<
             ]}
           />
         </ChartWrap>
+
         <ChartWrap>
           <VictoryBar
+            theme={VictoryTheme.clean}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.orange },
+            }}
             horizontal
             labels={({ datum }) => datum.y}
             data={[
@@ -199,6 +209,10 @@ export default class VictoryBarDemo extends React.Component<
 
         <ChartWrap>
           <VictoryBar
+            theme={VictoryTheme.clean}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.green },
+            }}
             horizontal
             labels={({ datum }) => datum.y}
             data={[
@@ -212,6 +226,10 @@ export default class VictoryBarDemo extends React.Component<
 
         <ChartWrap>
           <VictoryBar
+            theme={VictoryTheme.clean}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.yellow },
+            }}
             labels={({ datum }) => datum.y}
             data={[
               { x: 1, y: 20 },
@@ -222,7 +240,24 @@ export default class VictoryBarDemo extends React.Component<
           />
         </ChartWrap>
 
-        <VictoryChart domainPadding={ 20 } theme={VictoryTheme.clean}>
+        <ChartWrap>
+          <VictoryBar
+            theme={VictoryTheme.clean}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.purple },
+            }}
+            height={250}
+            data={[{ a: { b: { c: 1, d: 1 } } }, { a: { b: { c: 2, d: 3 } } }]}
+            x={"a.b.c"}
+            y={"a.b.d"}
+          />
+        </ChartWrap>
+
+        <VictoryChart
+          domainPadding={20}
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+        >
           <VictoryBar
             data={[
               { x: 1, y: "Alpha" },
@@ -234,8 +269,8 @@ export default class VictoryBarDemo extends React.Component<
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
-          theme={VictoryTheme.material}
         >
           <VictoryBar
             horizontal
@@ -246,12 +281,20 @@ export default class VictoryBarDemo extends React.Component<
               { x: 3, y: "Golf" },
               { x: 4, y: "Hotel" },
             ]}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.orange },
+            }}
           />
         </VictoryChart>
 
         <VictoryBar
           theme={VictoryTheme.clean}
-          style={{ parent: parentStyle }}
+          style={{
+            parent: parentStyle,
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.teal,
+            },
+          }}
           labels={() => "HELLO"}
           labelComponent={
             <VictoryLabel angle={45} verticalAnchor="end" textAnchor="end" />
@@ -280,7 +323,9 @@ export default class VictoryBarDemo extends React.Component<
                     {
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "orange" }),
+                          style: Object.assign({}, props.style, {
+                            fill: "orange",
+                          }),
                         };
                       },
                     },
@@ -302,6 +347,8 @@ export default class VictoryBarDemo extends React.Component<
         <VictoryStack
           style={{ parent: parentStyle }}
           animate={{ duration: 1000 }}
+          theme={VictoryTheme.clean}
+          colorScale="grayscale"
         >
           {this.state.multiTransitionData.map((data, index) => {
             return (
@@ -333,6 +380,7 @@ export default class VictoryBarDemo extends React.Component<
         </VictoryChart>
 
         <VictoryGroup
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           offset={18}
           colorScale={"qualitative"}
@@ -346,6 +394,7 @@ export default class VictoryBarDemo extends React.Component<
         </VictoryGroup>
 
         <VictoryGroup
+          theme={VictoryTheme.clean}
           horizontal
           style={{ parent: parentStyle }}
           offset={15}
@@ -359,6 +408,7 @@ export default class VictoryBarDemo extends React.Component<
         </VictoryGroup>
 
         <VictoryGroup
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle, data: { width: 20 } }}
           offset={25}
           animate={{ duration: 2000 }}
@@ -383,6 +433,7 @@ export default class VictoryBarDemo extends React.Component<
         <VictoryStack
           style={{ parent: parentStyle }}
           animate={{ duration: 2000 }}
+          theme={VictoryTheme.clean}
           colorScale={"warm"}
           labels={["one", "two", "three"]}
         >
@@ -391,16 +442,11 @@ export default class VictoryBarDemo extends React.Component<
           })}
         </VictoryStack>
 
-        <ChartWrap>
-          <VictoryBar
-            height={250}
-            data={[{ a: { b: { c: 1, d: 1 } } }, { a: { b: { c: 2, d: 3 } } }]}
-            x={"a.b.c"}
-            y={"a.b.d"}
-          />
-        </ChartWrap>
-
-        <VictoryStack colorScale="warm" style={{ parent: parentStyle }}>
+        <VictoryStack
+          theme={VictoryTheme.clean}
+          colorScale="warm"
+          style={{ parent: parentStyle }}
+        >
           <Wrapper>
             <VictoryBar
               data={[
@@ -417,7 +463,9 @@ export default class VictoryBarDemo extends React.Component<
                         {
                           mutation: (props) => {
                             return {
-                              style: Object.assign({}, props.style, { fill: "orange" }),
+                              style: Object.assign({}, props.style, {
+                                fill: "orange",
+                              }),
                             };
                           },
                         },
@@ -443,7 +491,9 @@ export default class VictoryBarDemo extends React.Component<
                       {
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "blue" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "blue",
+                            }),
                           };
                         },
                       },
@@ -455,10 +505,12 @@ export default class VictoryBarDemo extends React.Component<
           />
         </VictoryStack>
         <VictoryBar
-          theme={VictoryTheme.grayscale}
+          theme={VictoryTheme.clean}
           style={{
             parent: parentStyle,
-            data: { fill: "blue" },
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.pink,
+            },
           }}
           labels={["a", "b", "c", "d", "e"]}
           data={[
@@ -503,21 +555,35 @@ export default class VictoryBarDemo extends React.Component<
           ]}
         />
 
-        <VictoryChart>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+          domainPadding={20}
+        >
           <VictoryBar
+            style={{
+              parent: parentStyle,
+              data: {
+                fill: VictoryTheme.clean.palette?.colors?.yellow,
+              },
+            }}
             horizontal
             data={[
-              { x: 21, y: "Label 1" },
-              { x: 28, y: "Label 2" },
-              { x: 35, y: "Label 3" },
-              { x: 40, y: "Label 4" },
+              { x: 21, y: "1" },
+              { x: 28, y: "2" },
+              { x: 35, y: "3" },
+              { x: 40, y: "4" },
             ]}
             x={"y"}
             y={"x"}
           />
         </VictoryChart>
 
-        <VictoryChart>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+          domainPadding={20}
+        >
           <VictoryBar
             data={[
               [5, 10],
@@ -544,6 +610,7 @@ class ChartWrap extends React.Component<ChartWrapProps> {
   static defaultProps = {
     height: 250,
     width: 350,
+    theme: VictoryTheme.clean,
   };
   // renders both a standalone chart, and a version wrapped in VictoryChart,
   // to test both cases at once
@@ -557,7 +624,9 @@ class ChartWrap extends React.Component<ChartWrapProps> {
     return (
       <div style={parentStyle}>
         {React.cloneElement(this.props.children)}
-        <VictoryChart {...this.props}>{this.props.children}</VictoryChart>
+        <VictoryChart domainPadding={{ x: 20 }} {...this.props}>
+          {this.props.children}
+        </VictoryChart>
       </div>
     );
   }
diff --git a/demo/ts/components/victory-box-plot-demo.tsx b/demo/ts/components/victory-box-plot-demo.tsx
index d6b5ee22e..0ec7fef8e 100644
--- a/demo/ts/components/victory-box-plot-demo.tsx
+++ b/demo/ts/components/victory-box-plot-demo.tsx
@@ -78,9 +78,10 @@ export default class VictoryBoxPlotDemo extends React.Component<
             ]}
           />
         </VictoryChart>
-        <VictoryChart 
+        <VictoryChart
           style={chartStyle}
           theme={VictoryTheme.clean}
+          domain={{ x: [0, 2], y: [0, 20] }}
         >
           <VictoryBoxPlot
             data={[
@@ -91,7 +92,11 @@ export default class VictoryBoxPlotDemo extends React.Component<
             ]}
           />
         </VictoryChart>
-        <VictoryChart style={chartStyle} domain={{ x: [0, 3], y: [0, 20] }}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={chartStyle}
+          domain={{ x: [0, 3], y: [0, 20] }}
+        >
           <VictoryBoxPlot
             boxWidth={20}
             labels
@@ -100,22 +105,15 @@ export default class VictoryBoxPlotDemo extends React.Component<
               { x: 2, y: [1, 15, 6, 8] },
             ]}
             style={{
-              min: { stroke: "black", strokeWidth: 2 },
-              max: { stroke: "black", strokeWidth: 2 },
-              q1: { fill: "#FF530D", fillOpacity: "0.5" },
-              q3: { fill: "#2bbee0", fillOpacity: "0.5" },
-              median: { stroke: "#fff", strokeWidth: "4" },
-              minLabels: { fill: "green", padding: 10 },
-              maxLabels: { fill: "orange", padding: 10 },
-              q1Labels: { padding: 10 },
-              q3Labels: { padding: 10 },
-              medianLabels: { padding: 10 },
+              q1: { fill: VictoryTheme.clean.palette?.colors?.purple },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.orange },
             }}
           />
         </VictoryChart>
 
         <VictoryChart
           horizontal
+          theme={VictoryTheme.clean}
           style={chartStyle}
           domain={{ y: [0, 20], x: [0, 3] }}
         >
@@ -146,18 +144,18 @@ export default class VictoryBoxPlotDemo extends React.Component<
               },
             ]}
             style={{
-              min: { stroke: "black", strokeWidth: 2 },
-              max: { stroke: "black", strokeWidth: 2 },
-              q1: { fill: "#FF530D", fillOpacity: 0.5 },
-              q3: { fill: "#2bbee0", fillOpacity: 0.5 },
-              median: { stroke: "#fff", strokeWidth: 2 },
-              minLabels: { fill: "green", padding: 10 },
-              maxLabels: { fill: "orange", padding: 10 },
+              q1: { fill: VictoryTheme.clean.palette?.colors?.yellow },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.pink },
             }}
           />
         </VictoryChart>
 
-        <VictoryChart style={chartStyle} horizontal domainPadding={50}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={chartStyle}
+          horizontal
+          domainPadding={50}
+        >
           <VictoryBoxPlot
             minLabels
             maxLabels
@@ -169,9 +167,17 @@ export default class VictoryBoxPlotDemo extends React.Component<
               { x: new Date(2010, 1, 1), y: [5, 20, 8, 12] },
               { x: new Date(2020, 1, 1), y: [2, 11, 12, 13] },
             ]}
+            style={{
+              q1: { fill: VictoryTheme.clean.palette?.colors?.red },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.green },
+            }}
           />
         </VictoryChart>
-        <VictoryChart style={chartStyle} domainPadding={50}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={chartStyle}
+          domainPadding={50}
+        >
           <VictoryBoxPlot
             minLabels
             maxLabels
@@ -183,9 +189,17 @@ export default class VictoryBoxPlotDemo extends React.Component<
               { x: "yellow", y: [5, 20, 8, 12] },
               { x: "white", y: [2, 11, 12, 13] },
             ]}
+            style={{
+              q1: { fill: VictoryTheme.clean.palette?.colors?.blue },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.cyan },
+            }}
           />
         </VictoryChart>
-        <VictoryChart style={chartStyle} domainPadding={50}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={chartStyle}
+          domainPadding={50}
+        >
           <VictoryBoxPlot
             minLabels
             maxLabels
@@ -201,9 +215,17 @@ export default class VictoryBoxPlotDemo extends React.Component<
               { x: 3, y: 8 },
               { x: 3, y: 5 },
             ]}
+            style={{
+              q1: { fill: VictoryTheme.clean.palette?.colors?.green },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.yellow },
+            }}
           />
         </VictoryChart>
-        <VictoryChart style={chartStyle} domainPadding={50}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={chartStyle}
+          domainPadding={50}
+        >
           <VictoryBoxPlot
             labels
             boxWidth={10}
@@ -221,12 +243,29 @@ export default class VictoryBoxPlotDemo extends React.Component<
               max: "bottom",
               median: "bottom",
             }}
+            style={{
+              q1: { fill: VictoryTheme.clean.palette?.colors?.pink },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.purple },
+            }}
           />
         </VictoryChart>
-        <VictoryChart horizontal animate style={chartStyle} domainPadding={50}>
-          <VictoryBoxPlot boxWidth={10} data={this.state.data} />
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          horizontal
+          animate
+          style={chartStyle}
+        >
+          <VictoryBoxPlot
+            boxWidth={10}
+            data={this.state.data}
+            style={{
+              q1: { fill: VictoryTheme.clean.palette?.colors?.cyan },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.purple },
+            }}
+          />
         </VictoryChart>
         <VictoryBoxPlot
+          theme={VictoryTheme.clean}
           animate
           style={chartStyle}
           boxWidth={10}
diff --git a/demo/ts/components/victory-candlestick-demo.tsx b/demo/ts/components/victory-candlestick-demo.tsx
index 939e38c8d..898deef66 100644
--- a/demo/ts/components/victory-candlestick-demo.tsx
+++ b/demo/ts/components/victory-candlestick-demo.tsx
@@ -65,83 +65,59 @@ export default class VictoryCandlestickDemo extends React.Component<
   any,
   VictoryCandlestickDemoState
 > {
-  setStateInterval?: number = undefined;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      data: props.data,
-    };
-  }
-
-  componentDidMount() {
-    /* eslint-disable react/no-did-mount-set-state */
-    this.setStateInterval = window.setInterval(() => {
-      this.setState({
-        data: getData(),
-      });
-    }, 2000);
-  }
-
-  componentWillUnmount() {
-    window.clearInterval(this.setStateInterval);
-  }
-
   render() {
     return (
       <div className="demo" style={containerStyle}>
-        <svg height={500} width={500}>
-          <VictoryCandlestick
-            style={{ data: { width: 10 }, parent: style.parent }}
-            labels={({ datum }) => `x: ${datum.x.getDate()}`}
-            labelOrientation={{ low: "bottom", high: "top" }}
-            openLabels={({ datum }) => datum.open}
-            closeLabels={({ datum }) => datum.close}
-            lowLabels={({ datum }) => datum.low}
-            highLabels={({ datum }) => datum.high}
-            data={data}
-            size={8}
-            standalone={false}
-            events={[
-              {
-                target: "highLabels",
-                eventHandlers: {
-                  onClick: () => {
-                    return [
-                      {
-                        mutation: (props) => {
-                          return {
-                            style: Object.assign({}, props.style.labels, {
-                              fill: "orange",
-                            }),
-                          };
-                        },
+        <VictoryCandlestick
+          theme={VictoryTheme.clean}
+          style={{ data: { width: 10 }, parent: style.parent }}
+          labels={({ datum }) => `x: ${datum.x.getDate()}`}
+          labelOrientation={{ low: "bottom", high: "top" }}
+          openLabels={({ datum }) => datum.open}
+          closeLabels={({ datum }) => datum.close}
+          lowLabels={({ datum }) => datum.low}
+          highLabels={({ datum }) => datum.high}
+          data={data}
+          size={8}
+          events={[
+            {
+              target: "highLabels",
+              eventHandlers: {
+                onClick: () => {
+                  return [
+                    {
+                      mutation: (props) => {
+                        return {
+                          style: Object.assign({}, props.style.labels, {
+                            fill: "orange",
+                          }),
+                        };
                       },
-                    ];
-                  },
+                    },
+                  ];
                 },
               },
-              {
-                target: "data",
-                eventHandlers: {
-                  onClick: () => {
-                    return [
-                      {
-                        mutation: (props) => {
-                          return {
-                            style: Object.assign({}, props.style, {
-                              fill: "blue",
-                            }),
-                          };
-                        },
+            },
+            {
+              target: "data",
+              eventHandlers: {
+                onClick: () => {
+                  return [
+                    {
+                      mutation: (props) => {
+                        return {
+                          style: Object.assign({}, props.style, {
+                            fill: "blue",
+                          }),
+                        };
                       },
-                    ];
-                  },
+                    },
+                  ];
                 },
               },
-            ]}
-          />
-        </svg>
+            },
+          ]}
+        />
 
         <VictoryCandlestick
           horizontal
@@ -199,36 +175,30 @@ export default class VictoryCandlestickDemo extends React.Component<
           scale={{ x: "time" }}
           style={style}
           domainPadding={{ x: [20, 50] }}
+          theme={VictoryTheme.clean}
         >
           <VictoryCandlestick
-            candleColors={{ positive: "#8BC34A", negative: "#C62828" }}
+            candleColors={{
+              positive: VictoryTheme.clean?.palette?.colors?.green,
+              negative: VictoryTheme.clean?.palette?.colors?.red,
+            }}
             data={data}
             style={{ data: { stroke: "none" } }}
             size={8}
           />
         </VictoryChart>
 
-        <VictoryCandlestick
-          animate={{ duration: 2000 }}
-          data={this.state.data}
-          candleWidth={50}
-          style={{
-            data: {
-              stroke: "transparent",
-              fill: ({ datum }) => datum.fill,
-              opacity: ({ datum }) => datum.opacity,
-            },
-            parent: style.parent,
-          }}
-        />
-
         <VictoryChart
           scale={{ x: "time" }}
           style={style}
           domainPadding={{ x: [20, 50] }}
+          theme={VictoryTheme.clean}
         >
           <VictoryCandlestick
-            candleColors={{ positive: "#8BC34A", negative: "#C62828" }}
+            candleColors={{
+              positive: VictoryTheme.clean?.palette?.colors?.green,
+              negative: VictoryTheme.clean?.palette?.colors?.red,
+            }}
             data={data}
             style={{ data: { stroke: "none" }, closeLabels: { fill: "blue" } }}
             size={8}
@@ -240,11 +210,7 @@ export default class VictoryCandlestickDemo extends React.Component<
           />
         </VictoryChart>
 
-        <VictoryCandlestick style={style} size={1} theme={VictoryTheme.clean}/>
-
-        <VictoryChart style={style}>
-          <VictoryCandlestick />
-        </VictoryChart>
+        <VictoryCandlestick style={style} size={1} theme={VictoryTheme.clean} />
       </div>
     );
   }
diff --git a/demo/ts/components/victory-chart-demo.tsx b/demo/ts/components/victory-chart-demo.tsx
index 17299feab..b415a39c6 100644
--- a/demo/ts/components/victory-chart-demo.tsx
+++ b/demo/ts/components/victory-chart-demo.tsx
@@ -13,6 +13,7 @@ import {
   VictoryTheme,
   VictoryClipContainer,
   VictoryThemeDefinition,
+  VictoryThemePalette,
 } from "victory-core";
 
 const UPDATE_INTERVAL = 3000;
@@ -201,10 +202,16 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
   }
 
   getStyles(): React.CSSProperties {
-    const colors = ["red", "orange", "cyan", "green", "blue", "purple"];
+    const colors = VictoryTheme.clean.palette?.qualitative || [
+      "red",
+      "orange",
+      "cyan",
+      "green",
+      "blue",
+      "purple",
+    ];
     return {
-      stroke: colors[random(0, 5)],
-      strokeWidth: random(1, 3),
+      stroke: colors[random(0, colors.length - 1)],
     };
   }
 
@@ -221,16 +228,8 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
     };
 
-    const axisStyle: { [key: string]: React.CSSProperties } = {
-      grid: { stroke: "grey", strokeWidth: 1 },
-      axis: { stroke: "transparent" },
-      ticks: { stroke: "transparent" },
-      tickLabels: { fill: "none" },
-    };
-
-    const bgStyle: { [key: string]: React.CSSProperties } = {
-      background: { fill: "#e6e6ff" },
-    };
+    const themeColors: VictoryThemePalette =
+      VictoryTheme.clean.palette?.colors || {};
 
     return (
       <div className="demo">
@@ -247,10 +246,12 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
           </VictoryChart>
 
           <VictoryChart
-            style={Object.assign({}, chartStyle, bgStyle)}
+            theme={VictoryTheme.clean}
+            style={Object.assign({}, chartStyle)}
             title="Victory Scatter Chart"
           >
             <VictoryScatter
+              style={{ data: { fill: themeColors.cyan } }}
               data={[
                 { x: -3, y: -3 },
                 { x: -2, y: 2 },
@@ -259,17 +260,18 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} theme={dependentAxisTheme}>
-            <VictoryScatter />
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
+            <VictoryScatter style={{ data: { fill: themeColors.pink } }} />
           </VictoryChart>
 
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
-            domainPadding={{ x: [0, 20] }}
+            domainPadding={20}
             title="Victory Bar Chart"
           >
-            <VictoryAxis dependentAxis style={axisStyle} />
-            <VictoryAxis style={axisStyle} tickCount={6} />
+            <VictoryAxis dependentAxis />
+            <VictoryAxis tickCount={6} />
             <VictoryBar
               data={[
                 { x: 1, y: 1 },
@@ -285,11 +287,10 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart theme={VictoryTheme.clean} style={chartStyle}>
             <VictoryAxis tickFormat={(t, i, ts) => `${t}s ${i} ${ts[0]}`} />
             <VictoryBar
               groupComponent={<VictoryClipContainer />}
-              style={{ data: { fill: "tomato" } }}
               data={[
                 { x: "one", y: 1 },
                 { x: "two", y: 2 },
@@ -298,12 +299,12 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
             <VictoryGroup
               labels={["a", "b", "c"]}
               horizontal
               offset={20}
-              colorScale={"qualitative"}
+              colorScale="warm"
             >
               <VictoryBar
                 data={[
@@ -329,8 +330,8 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             </VictoryGroup>
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
-            <VictoryGroup offset={20} colorScale={"qualitative"}>
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
+            <VictoryGroup offset={20} colorScale="cool">
               <VictoryBar
                 data={[
                   { x: 1, y: 1 },
@@ -355,8 +356,12 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             </VictoryGroup>
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
-            <VictoryStack colorScale={"qualitative"}>
+          <VictoryChart
+            style={chartStyle}
+            theme={VictoryTheme.clean}
+            domainPadding={20}
+          >
+            <VictoryStack colorScale="heatmap">
               <VictoryBar
                 data={[
                   { x: 1, y: 1 },
@@ -380,7 +385,11 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
               />
             </VictoryStack>
           </VictoryChart>
-          <VictoryChart style={chartStyle}>
+          <VictoryChart
+            style={chartStyle}
+            theme={VictoryTheme.clean}
+            domainPadding={20}
+          >
             <VictoryStack
               horizontal
               labels={["a", "b", "c"]}
@@ -410,15 +419,27 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             </VictoryStack>
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} animate={{ duration: 1500 }}>
+          <VictoryChart
+            style={chartStyle}
+            animate={{ duration: 1500 }}
+            theme={VictoryTheme.clean}
+          >
             <VictoryLine data={this.state.barTransitionData} />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} animate={{ duration: 1500 }}>
+          <VictoryChart
+            style={chartStyle}
+            animate={{ duration: 1500 }}
+            theme={VictoryTheme.clean}
+          >
             <VictoryBar data={this.state.barTransitionData} />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} animate={{ duration: 1000 }}>
+          <VictoryChart
+            style={chartStyle}
+            animate={{ duration: 1000 }}
+            theme={VictoryTheme.clean}
+          >
             <VictoryStack colorScale={"warm"}>
               {this.state.multiBarTransitionData.map((data, index) => {
                 return <VictoryBar key={index} data={data} />;
@@ -426,21 +447,22 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             </VictoryStack>
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} />
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean} />
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
             <Wrapper>
               <VictoryLabel text={"WOW"} x={150} y={150} />
               <VictoryScatter />
             </Wrapper>
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
             <VictoryLine />
           </VictoryChart>
 
           <VictoryChart
             style={chartStyle}
+            theme={VictoryTheme.clean}
             events={[
               {
                 childName: "bar",
@@ -481,33 +503,28 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             <VictoryAxis tickFormat={["one", "two", "three", "four"]} />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} scale={"linear"}>
-            <VictoryAxis label={"A LABEL"} />
-            <VictoryAxis
-              label={"A LABEL"}
-              dependentAxis
-              crossAxis={false}
-              offsetX={30}
-            />
-
+          <VictoryChart
+            style={chartStyle}
+            scale={"linear"}
+            theme={VictoryTheme.clean}
+          >
             <VictoryLine
-              style={{ data: { stroke: "red", strokeWidth: 4 } }}
+              style={{ data: { stroke: themeColors.pink } }}
               y={(data) => Math.sin(2 * Math.PI * data.x)}
             />
 
             <VictoryLine
-              style={{ data: { stroke: "blue", strokeWidth: 4 } }}
+              style={{ data: { stroke: themeColors.purple } }}
               y={(data) => Math.cos(2 * Math.PI * data.x)}
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} animate={{ duration: 2000 }}>
-            <VictoryAxis
-              label={"A LABEL"}
-              dependentAxis
-              orientation="left"
-              style={{ grid: { strokeWidth: 1 } }}
-            />
+          <VictoryChart
+            style={chartStyle}
+            animate={{ duration: 2000 }}
+            theme={VictoryTheme.clean}
+          >
+            <VictoryAxis dependentAxis orientation="left" />
             <VictoryLine
               data={this.state.lineData}
               style={{ data: this.state.lineStyle }}
@@ -519,10 +536,10 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             scale={{
               x: "time",
             }}
+            theme={VictoryTheme.clean}
           >
             <VictoryAxis
               orientation="bottom"
-              label={"A LABEL"}
               tickValues={[
                 new Date(1980, 1, 1),
                 new Date(1990, 1, 1),
@@ -533,10 +550,6 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
               tickFormat={(x) => new Date(x).getFullYear()}
             />
             <VictoryLine
-              style={{
-                data: { stroke: "red", strokeWidth: 5 },
-                labels: { fontSize: 12 },
-              }}
               data={[
                 { x: new Date(1982, 1, 1), y: 125 },
                 { x: new Date(1987, 1, 1), y: 257 },
@@ -550,7 +563,11 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle} animate={{ duration: 2000 }}>
+          <VictoryChart
+            style={chartStyle}
+            animate={{ duration: 2000 }}
+            theme={VictoryTheme.clean}
+          >
             <VictoryScatter
               groupComponent={<VictoryClipContainer />}
               data={this.state.scatterData}
@@ -574,23 +591,18 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             />
           </VictoryChart>
 
-          <VictoryChart style={chartStyle}>
+          <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
             <VictoryAxis label={"A LABEL"} dependentAxis orientation="right" />
             <VictoryAxis label={"A LABEL"} orientation="top" />
-            <VictoryLine
-              y={(d) => 0.5 * d.x + 0.5}
-              style={{ data: { stroke: "red" } }}
-            />
-            <VictoryScatter
-              y={(d) => d.x * d.x}
-              style={{ data: { stroke: "red" } }}
-            />
+            <VictoryLine y={(d) => 0.5 * d.x + 0.5} />
+            <VictoryScatter y={(d) => d.x * d.x} />
           </VictoryChart>
 
           <VictoryChart
             style={chartStyle}
             animate={{ duration: 2000 }}
             domainPadding={{ x: 100 }}
+            theme={VictoryTheme.clean}
           >
             <VictoryAxis tickFormat={["one", "two", "three"]} />
             <VictoryStack>
@@ -605,6 +617,7 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
           </VictoryChart>
           <VictoryChart
             style={chartStyle}
+            theme={VictoryTheme.clean}
             domainPadding={{ x: 30, y: 30 }}
             events={[
               {
@@ -625,7 +638,9 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
                         eventKey: "all",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { stroke: "lime" }),
+                            style: Object.assign({}, props.style, {
+                              stroke: "lime",
+                            }),
                           };
                         },
                       },
@@ -635,7 +650,9 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
                         eventKey: "all",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "green" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "green",
+                            }),
                             text: "waddup",
                           };
                         },
@@ -648,7 +665,7 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
           >
             <VictoryBar
               name="bar"
-              style={{ data: { fill: "green" } }}
+              style={{ data: { fill: themeColors.green } }}
               labels={() => null}
               data={[
                 { x: 1, y: 1 },
@@ -669,13 +686,14 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             <VictoryLine
               name="line"
               y={() => 0.5}
-              style={{ data: { stroke: "blue", strokeWidth: 5 } }}
+              style={{ data: { stroke: themeColors.purple, strokeWidth: 2 } }}
             />
           </VictoryChart>
           <VictoryChart
             style={chartStyle}
             domainPadding={{ x: 50 }}
             animate={{ duration: 2000 }}
+            theme={VictoryTheme.clean}
           >
             <VictoryGroup offset={20} style={{ data: { width: 15 } }}>
               <VictoryStack colorScale={"red"}>
@@ -697,7 +715,7 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
           </VictoryChart>
           <VictoryChart
             style={chartStyle}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             categories={{ x: ["e", "a", "c", "b", "d"] }}
             events={[
               {
@@ -711,7 +729,9 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "gold" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "gold",
+                            }),
                           };
                         },
                       },
@@ -720,7 +740,9 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "orange" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "orange",
+                            }),
                           };
                         },
                       },
@@ -729,7 +751,9 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "red" }),
+                            style: Object.assign({}, props.style, {
+                              fill: "red",
+                            }),
                           };
                         },
                       },
diff --git a/demo/ts/components/victory-demo.tsx b/demo/ts/components/victory-demo.tsx
index 2e855cec3..8aa090694 100644
--- a/demo/ts/components/victory-demo.tsx
+++ b/demo/ts/components/victory-demo.tsx
@@ -36,80 +36,13 @@ export default class App extends React.Component {
           <VictoryLine y={(data) => data.x * data.x} />
         </VictoryChart>
 
+        <h3>VictoryChart</h3>
+        <p>Custom axes and tickformats; Bar + line chart</p>
         <VictoryChart
           theme={VictoryTheme.clean}
           style={style}
           domainPadding={{ x: 30, y: 30 }}
-          height={600}
-          width={600}
-          events={[
-            {
-              childName: "bar",
-              target: "data",
-              eventHandlers: {
-                onClick: () => {
-                  return [
-                    {
-                      target: "labels",
-                      mutation: () => {
-                        return { text: "o shit" };
-                      },
-                    },
-                    {
-                      childName: "line",
-                      eventKey: "all",
-                      target: "data",
-                      mutation: () => {
-                        return { style: { stroke: "lime" } };
-                      },
-                    },
-                    {
-                      childName: "line",
-                      eventKey: 0,
-                      target: "labels",
-                      mutation: () => {
-                        return {
-                          style: { fill: "green" },
-                          text: "waddup",
-                        };
-                      },
-                    },
-                  ];
-                },
-              },
-            },
-          ]}
         >
-          <VictoryBar
-            name="bar"
-            style={{ data: { width: 15, fill: "green" } }}
-            data={[
-              { x: 1, y: 1 },
-              { x: 2, y: 2 },
-              { x: 3, y: 3 },
-              { x: 4, y: 2 },
-              { x: 5, y: 1 },
-              { x: 6, y: 2 },
-              { x: 7, y: 3 },
-              { x: 8, y: 2 },
-              { x: 9, y: 1 },
-              { x: 10, y: 2 },
-              { x: 11, y: 3 },
-              { x: 12, y: 2 },
-              { x: 13, y: 1 },
-            ]}
-          />
-          <VictoryLine
-            name="line"
-            y={() => 0.5}
-            style={{ data: { stroke: "blue", strokeWidth: 5 } }}
-            labels={["LINE"]}
-          />
-        </VictoryChart>
-
-        <h3>VictoryChart</h3>
-        <p>Custom axes and tickformats; Bar + line chart</p>
-        <VictoryChart theme={VictoryTheme.clean} style={style} domainPadding={{ x: 30, y: 30 }}>
           <VictoryAxis
             tickValues={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]}
             tickFormat={(x) => `${x}\ntick`}
@@ -130,7 +63,11 @@ export default class App extends React.Component {
             }}
           />
           <VictoryBar
-            style={{ data: { width: 15, fill: "orange" } }}
+            style={{
+              data: {
+                fill: VictoryTheme.clean.palette?.colors?.orange,
+              },
+            }}
             data={[
               { x: 1, y: 1 },
               { x: 2, y: 2 },
diff --git a/demo/ts/components/victory-histogram-demo.tsx b/demo/ts/components/victory-histogram-demo.tsx
index 83d977a2c..8481ba987 100644
--- a/demo/ts/components/victory-histogram-demo.tsx
+++ b/demo/ts/components/victory-histogram-demo.tsx
@@ -47,8 +47,7 @@ interface VictoryBarDemoState {
   dateDynamicBinsBasedOnData: HistogramData;
   dateDynamicBins: HistogramData;
   style: {
-    stroke: string;
-    strokeWidth: number;
+    fill: string;
   };
 }
 
@@ -198,7 +197,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
   }
 
   getStyles() {
-    const colors = [
+    const colors = VictoryTheme.clean.palette?.qualitative ?? [
       "palevioletred",
       "orange",
       "cyan",
@@ -207,8 +206,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
       "purple",
     ];
     return {
-      stroke: colors[random(0, 5)],
-      strokeWidth: random(1, 5),
+      fill: colors[random(0, colors.length - 1)],
     };
   }
 
@@ -229,6 +227,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
     return (
       <div className="demo" style={containerStyle}>
         <VictoryHistogram
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           data={this.data}
           events={[
@@ -239,24 +238,20 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
                   {
                     mutation: (props) => {
                       return {
-                        style: Object.assign({}, props.style, { fill: "pink" }),
-                      };
-                    },
-                  },
-                ],
-                onMouseOut: () => [
-                  {
-                    mutation: (props) => {
-                      return {
-                        style: Object.assign({}, props.style, { fill: "yellow" }),
+                        style: {
+                          ...props.style,
+                          fill: VictoryTheme.clean.palette?.colors?.orange,
+                        },
                       };
                     },
                   },
                 ],
+                onMouseOut: () => ({
+                  mutation: () => null,
+                }),
               },
             },
           ]}
-          binSpacing={0}
         />
 
         <VictoryHistogram
@@ -264,33 +259,27 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           horizontal
           style={{
             parent: parentStyle,
-            // data: { stroke: "#1f4068", strokeWidth: 4, fill: "#e43f5a" },
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.purple,
+            },
           }}
           data={this.data.map(({ x }) => ({ value: x }))}
           x="value"
         />
 
         <VictoryHistogram
-          horizontal
-          cornerRadius={10}
-          style={{
-            parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
-          }}
-          data={this.data}
-        />
-
-        <VictoryHistogram
-          binSpacing={5}
+          theme={VictoryTheme.clean}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.green,
+            },
           }}
           data={this.data2}
         />
 
         <VictoryHistogram
-          binSpacing={50}
+          theme={VictoryTheme.clean}
           style={{
             parent: parentStyle,
             data: this.state.style,
@@ -300,46 +289,46 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         />
 
         <VictoryHistogram
-          bins={3}
-          style={{
-            parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
-          }}
-          data={this.data2}
-        />
-
-        <VictoryHistogram
-          bins={100}
+          theme={VictoryTheme.clean}
+          bins={30}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
           }}
           data={this.data2}
         />
 
         <VictoryHistogram
+          theme={VictoryTheme.clean}
           horizontal
           bins={100}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.orange,
+            },
           }}
           data={this.data2}
         />
 
         <VictoryHistogram
+          theme={VictoryTheme.clean}
           bins={[0, 20, 50, 500]}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.blue,
+            },
           }}
           data={this.data2}
         />
 
         <VictoryHistogram
+          theme={VictoryTheme.clean}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 1, fill: "#355c7d" },
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.pink,
+            },
           }}
           events={[
             {
@@ -350,7 +339,9 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
                     {
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "pink" }),
+                          style: Object.assign({}, props.style, {
+                            fill: VictoryTheme.clean.palette?.colors?.purple,
+                          }),
                         };
                       },
                     },
@@ -370,20 +361,22 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         />
 
         <VictoryHistogram
+          theme={VictoryTheme.clean}
           bins={[0, 20, 50, 500]}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+            data: { fill: VictoryTheme.clean.palette?.colors?.green },
           }}
           data={this.data2}
           labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
         />
 
         <VictoryHistogram
+          theme={VictoryTheme.clean}
           bins={[0, 20, 50, 500]}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+            data: { fill: VictoryTheme.clean.palette?.colors?.red },
           }}
           data={this.data2}
           labels={({ datum }) => `${datum.x0} - ${datum.x1}`}
@@ -391,10 +384,11 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         />
 
         <VictoryHistogram
+          theme={VictoryTheme.clean}
           bins={[0, 20, 50, 500]}
           style={{
             parent: parentStyle,
-            data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+            data: { fill: VictoryTheme.clean.palette?.colors?.yellow },
           }}
           data={this.data2}
           labels={({ datum }) =>
@@ -404,6 +398,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         />
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           containerComponent={
             <VictoryVoronoiContainer
@@ -416,12 +411,14 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           <VictoryHistogram
             bins={[0, 20, 50, 70, 100]}
             style={{
-              data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.teal },
             }}
             data={this.data2}
           />
           <VictoryLine
-            style={{ data: { stroke: "palevioletred" } }}
+            style={{
+              data: { stroke: VictoryTheme.clean.palette?.colors?.purple },
+            }}
             data={[
               { x: 0, y: 5 },
               { x: 10, y: 5 },
@@ -436,6 +433,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           containerComponent={
             <VictoryVoronoiContainer
@@ -447,13 +445,14 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         >
           <VictoryHistogram
             style={{
-              data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.orange },
             }}
             data={this.dateData}
           />
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           containerComponent={
             <VictoryVoronoiContainer
@@ -466,22 +465,18 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           <VictoryHistogram
             horizontal
             style={{
-              data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.pink },
             }}
             data={this.dateData}
           />
         </VictoryChart>
 
-        <VictoryChart style={{ parent: parentStyle }}>
-          <VictoryHistogram
-            bins={[0, 20, 50, 70, 100]}
-            style={{
-              data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
-            }}
-            data={this.data2}
-          />
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+        >
+          <VictoryHistogram bins={[0, 20, 50, 70, 100]} data={this.data2} />
           <VictoryScatter
-            style={{ data: { fill: "palevioletred" } }}
             data={[
               { x: 0, y: 5 },
               { x: 10, y: 5 },
@@ -495,12 +490,15 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           />
         </VictoryChart>
 
-        <VictoryChart style={{ parent: parentStyle }}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+        >
           <VictoryHistogram
             horizontal
             bins={[0, 20, 50, 70, 100]}
             style={{
-              data: { stroke: "#f67280", strokeWidth: 3, fill: "#355c7d" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.yellow },
             }}
             data={this.data2}
           />
@@ -519,17 +517,20 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           animate={{ duration: 500 }}
         >
           <VictoryHistogram
-            binSpacing={20}
             data={this.state.dataLoadedInWithBins.data}
             bins={this.state.dataLoadedInWithBins.bins}
             animate={{ duration: 1500 }}
+            style={{ data: { fill: VictoryTheme.clean.palette?.colors?.red } }}
           />
           <VictoryLine
-            style={{ data: { stroke: "palevioletred" } }}
+            style={{
+              data: { stroke: VictoryTheme.clean.palette?.colors?.yellow },
+            }}
             data={[
               { x: 0, y: 5 },
               { x: 10, y: 5 },
@@ -544,6 +545,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           animate={{ duration: 500 }}
         >
@@ -555,22 +557,27 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
-          theme={VictoryTheme.material}
         >
           <VictoryHistogram
-            binSpacing={5}
             data={this.state.dynamicBins.data}
             bins={this.state.dynamicBins.bins}
             animate={{ duration: 1500 }}
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.green },
+            }}
           />
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
-          theme={VictoryTheme.material}
         >
           <VictoryHistogram
+            style={{
+              data: { fill: VictoryTheme.clean.palette?.colors?.blue },
+            }}
             horizontal
             data={this.state.dynamicBinsBasedOnData.data}
             bins={this.state.dynamicBinsBasedOnData.bins}
@@ -579,13 +586,14 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           animate={{ duration: 500 }}
           scale={{ x: "time" }}
         >
           <VictoryHistogram
             style={{
-              data: { stroke: "#fc85ae", strokeWidth: 3, fill: "#574b90" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.purple },
             }}
             data={this.state.dateDataLoadedInWithBins.data}
             bins={this.state.dateDataLoadedInWithBins.bins}
@@ -594,13 +602,14 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           animate={{ duration: 500 }}
           scale={{ x: "time" }}
         >
           <VictoryHistogram
             style={{
-              data: { stroke: "#833B61", strokeWidth: 3, fill: "#F67E7D" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.orange },
             }}
             data={this.state.dateDataLoadedInWithoutBins.data}
             bins={this.state.dateDataLoadedInWithoutBins.bins}
@@ -608,10 +617,13 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           />
         </VictoryChart>
 
-        <VictoryChart style={{ parent: parentStyle }}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+        >
           <VictoryHistogram
             style={{
-              data: { stroke: "#833B61", strokeWidth: 3, fill: "#F67E7D" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.yellow },
             }}
             data={this.state.dateDynamicBinsBasedOnData.data}
             bins={this.state.dateDynamicBinsBasedOnData.bins}
@@ -619,10 +631,13 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           />
         </VictoryChart>
 
-        <VictoryChart style={{ parent: parentStyle }}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+        >
           <VictoryHistogram
             style={{
-              data: { stroke: "#833B61", strokeWidth: 3, fill: "#F67E7D" },
+              data: { fill: VictoryTheme.clean.palette?.colors?.red },
             }}
             data={this.state.dateDynamicBins.data}
             bins={this.state.dateDynamicBins.bins}
@@ -630,7 +645,11 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           />
         </VictoryChart>
 
-        <VictoryChart theme={VictoryTheme.clean} style={{ parent: parentStyle }} scale={{ x: "time" }}>
+        <VictoryChart
+          theme={VictoryTheme.clean}
+          style={{ parent: parentStyle }}
+          scale={{ x: "time" }}
+        >
           <VictoryStack colorScale="qualitative">
             <VictoryHistogram
               data={this.state.dateDynamicBins.data}
diff --git a/demo/ts/components/victory-line-demo.tsx b/demo/ts/components/victory-line-demo.tsx
index 9498e1179..ddc6e94eb 100644
--- a/demo/ts/components/victory-line-demo.tsx
+++ b/demo/ts/components/victory-line-demo.tsx
@@ -30,7 +30,7 @@ class PointedLine extends React.Component<PointedLineProps> {
 
       return (
         <Point
-          style={{ fill: "#FF08C2" }}
+          style={{ fill: VictoryTheme.clean.palette?.colors?.purple }}
           symbol="circle"
           size={2}
           key={`line-${index}-point-${pointIndex}`}
@@ -80,8 +80,7 @@ export default class VictoryLineDemo extends React.Component<
       transitionData: this.getTransitionData(),
       arrayData: this.getArrayData(),
       style: {
-        stroke: "blue",
-        strokeWidth: 2,
+        stroke: VictoryTheme.clean.line?.colorScale?.[0] ?? "blue",
       },
     };
   }
@@ -120,10 +119,16 @@ export default class VictoryLineDemo extends React.Component<
   }
 
   getStyles() {
-    const colors = ["red", "orange", "cyan", "green", "blue", "purple"];
+    const colors = VictoryTheme.clean.line?.colorScale ?? [
+      "red",
+      "orange",
+      "cyan",
+      "green",
+      "blue",
+      "purple",
+    ];
     return {
       stroke: colors[random(0, 5)],
-      strokeWidth: random(1, 5),
     };
   }
 
@@ -144,15 +149,17 @@ export default class VictoryLineDemo extends React.Component<
     return (
       <div className="demo" style={containerStyle}>
         <VictoryLine
-          style={{ parent: parentStyle, data: { stroke: "blue" } }}
+          style={{ parent: parentStyle }}
           y={(d) => Math.sin(2 * Math.PI * d.x)}
           samples={25}
+          theme={VictoryTheme.clean}
         />
 
         <VictoryLine
+          theme={VictoryTheme.clean}
           style={{
             parent: parentStyle,
-            data: { stroke: "red", strokeWidth: 6 },
+            data: { stroke: VictoryTheme.clean.palette?.colors?.orange },
           }}
           events={[
             {
@@ -163,7 +170,9 @@ export default class VictoryLineDemo extends React.Component<
                     {
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { stroke: "orange" }),
+                          style: Object.assign({}, props.style, {
+                            stroke: "orange",
+                          }),
                         };
                       },
                     },
@@ -193,13 +202,18 @@ export default class VictoryLineDemo extends React.Component<
         />
 
         <VictoryLine
-          style={{ parent: parentStyle }}
+          theme={VictoryTheme.clean}
+          style={{
+            parent: parentStyle,
+            data: { stroke: VictoryTheme.clean.palette?.colors?.pink },
+          }}
           data={this.state.arrayData}
           x={0}
           y={1}
         />
 
         <VictoryLine
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           labels={(d: any) => Math.round(d.y)}
           data={[
@@ -215,7 +229,11 @@ export default class VictoryLineDemo extends React.Component<
         />
 
         <VictoryLine
-          style={{ parent: parentStyle }}
+          theme={VictoryTheme.clean}
+          style={{
+            parent: parentStyle,
+            data: { stroke: VictoryTheme.clean.palette?.colors?.teal },
+          }}
           data={[
             { x: 1, y: 1 },
             { x: 2, y: 3 },
@@ -231,6 +249,7 @@ export default class VictoryLineDemo extends React.Component<
         />
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           scale={{ x: "linear", y: "log" }}
         >
@@ -238,21 +257,22 @@ export default class VictoryLineDemo extends React.Component<
         </VictoryChart>
 
         <VictoryLine
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           data={this.state.arrayData}
           x={0}
           y={1}
-          theme={VictoryTheme.grayscale}
         />
 
         <VictoryChart
           style={{ parent: parentStyle }}
-          theme={VictoryTheme.grayscale}
+          theme={VictoryTheme.clean}
         >
           <VictoryLine data={this.state.arrayData} x={0} y={1} />
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           height={450}
           scale={{
@@ -274,6 +294,7 @@ export default class VictoryLineDemo extends React.Component<
         </VictoryChart>
 
         <VictoryLine
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           data={[
             { x: 1, y: 1 },
@@ -290,22 +311,23 @@ export default class VictoryLineDemo extends React.Component<
         />
 
         <VictoryLine
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           scale={{ x: "linear", y: "log" }}
         />
 
         <VictoryLine
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
           data={this.state.arrayData}
           x={0}
           domain={{ x: [0, 100] }}
           y={1}
-          theme={VictoryTheme.material}
         />
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
-          theme={VictoryTheme.material}
         >
           <VictoryLine
             style={{ parent: parentStyle, data: this.state.style }}
@@ -321,19 +343,11 @@ export default class VictoryLineDemo extends React.Component<
         </VictoryChart>
 
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: parentStyle }}
-          theme={VictoryTheme.material}
         >
           <VictoryLine style={{ parent: parentStyle }} data={[]} />
         </VictoryChart>
-
-        <VictoryLine
-          style={{ parent: parentStyle }}
-          data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}
-          sortKey={"t"}
-          x={({ t }) => Math.sin(3 * t + 2 * Math.PI)}
-          y={({ t }) => Math.sin(2 * t)}
-        />
       </div>
     );
   }
diff --git a/demo/ts/components/victory-pie-demo.tsx b/demo/ts/components/victory-pie-demo.tsx
index 43813a634..0a4941fb9 100644
--- a/demo/ts/components/victory-pie-demo.tsx
+++ b/demo/ts/components/victory-pie-demo.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { random, range } from "lodash";
 import { VictoryPie } from "victory-pie";
 import { VictoryTooltip } from "victory-tooltip";
-import { VictoryTheme, LineSegment } from "victory-core";
+import { VictoryTheme, LineSegment, Helpers } from "victory-core";
 
 interface VictoryPieDemoState {
   data: {
@@ -21,6 +21,7 @@ interface VictoryPieDemoState {
   style: {
     [key: string]: React.CSSProperties;
   };
+  padding: number;
 }
 
 export default class VictoryPieDemo extends React.Component<
@@ -52,6 +53,7 @@ export default class VictoryPieDemo extends React.Component<
           maxWidth: "40%",
         },
       },
+      padding: 0,
     };
   }
 
@@ -103,7 +105,6 @@ export default class VictoryPieDemo extends React.Component<
     };
 
     const parentStyle: React.CSSProperties = {
-      backgroundColor: "#f7f7f7",
       border: "1px solid #ccc",
       margin: "2%",
       maxWidth: "40%",
@@ -120,81 +121,68 @@ export default class VictoryPieDemo extends React.Component<
             theme={VictoryTheme.clean}
             style={{
               parent: parentStyle,
-              data: { stroke: "#f7f7f7" }, // stroke to "disappear" into background
-              labels: { fill: "white", fontSize: 10 },
             }}
-            labelRadius={60}
-            padding={{ bottom: 50, left: 50, right: 10 }}
-            width={400}
-            height={200}
           />
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={{
               parent: parentStyle,
-              labels: { fill: "white", fontSize: 10 },
+              labels: {
+                fill: "white",
+              },
             }}
-            labelRadius={({ datum }) => datum.radius - 12}
-            padding={{ bottom: 50, left: 50, right: 10 }}
+            labelRadius={({ datum }) => datum.radius - 20}
             width={400}
             height={200}
             radius={({ datum }) => datum.radius}
             data={[
-              { x: 1, y: 1, radius: 40 },
-              { x: 2, y: 3, radius: 50 },
-              { x: 3, y: 5, radius: 70 },
-              { x: 4, y: 2, radius: 80 },
-              { x: 5, y: 3, radius: 60 },
+              { x: 1, y: 1, radius: 50 },
+              { x: 2, y: 3, radius: 60 },
+              { x: 3, y: 5, radius: 80 },
+              { x: 4, y: 2, radius: 90 },
+              { x: 5, y: 3, radius: 70 },
             ]}
           />
           <VictoryPie
             theme={VictoryTheme.clean}
-            style={{ parent: parentStyle, data: { stroke: "#f7f7f7" }, }}
+            style={{ parent: parentStyle }}
             labelPosition="endAngle"
-            width={200}
-            height={400}
           />
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={{ parent: parentStyle }}
             labelPosition="startAngle"
-            width={200}
-            height={400}
           />
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={{ parent: parentStyle }}
-            width={200}
-            height={400}
           />
 
-          <VictoryPie style={{ parent: parentStyle }} />
-
           <VictoryPie
+            theme={VictoryTheme.clean}
             animate={{ duration: 1000 }}
             style={{
               parent: parentStyle,
-              labels: {
-                fontSize: 10,
-                paintOrder: "stroke",
-                stroke: "#ffffff",
-                strokeWidth: 3,
-                strokeLinecap: "butt",
-                strokeLinejoin: "miter",
-              },
             }}
             data={this.state.transitionData}
           />
 
           <VictoryPie
             style={{ parent: parentStyle }}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             events={[
               {
                 target: "data",
                 eventHandlers: {
                   onMouseOver: () => ({
                     mutation: (props) => ({
-                      radius: 135,
-                      sliceStartAngle: props.slice.startAngle + 0.05,
-                      sliceEndAngle: props.slice.endAngle - 0.05,
+                      radius: 110,
+                      sliceStartAngle: Helpers.radiansToDegrees(
+                        props.slice.startAngle + 0.05,
+                      ),
+                      sliceEndAngle: Helpers.radiansToDegrees(
+                        props.slice.endAngle - 0.05,
+                      ),
                     }),
                   }),
                   onMouseOut: () => ({
@@ -207,7 +195,7 @@ export default class VictoryPieDemo extends React.Component<
 
           <VictoryPie
             style={{ parent: parentStyle }}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             events={[
               {
                 target: "parent",
@@ -228,81 +216,88 @@ export default class VictoryPieDemo extends React.Component<
           />
 
           <VictoryPie
+            labelComponent={<VictoryTooltip />}
+            theme={VictoryTheme.clean}
+            colorScale="grayscale"
             style={{
               parent: parentStyle,
-              labels: { fontSize: 10, padding: 10 },
             }}
-            labelComponent={<VictoryTooltip />}
-            colorScale="grayscale"
-          />
-
-          <VictoryPie
-            style={{ ...this.state.style }}
-            labelRadius={120}
-            innerRadius={140}
           />
 
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={{
-              parent: parentStyle,
-              data: { stroke: "transparent", opacity: 0.4 },
+              ...this.state.style,
+              labels: {
+                fill: "white",
+              },
             }}
+            labelRadius={115}
+            innerRadius={140}
           />
 
-          <VictoryPie style={this.state.style} startAngle={-90} endAngle={90} />
-
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={{ ...this.state.style, labels: { fontSize: 0 } }}
             data={this.state.data}
-            innerRadius={100}
+            innerRadius={50}
+            padding={10}
             animate={{ duration: 2000 }}
-            colorScale={this.state.colorScale}
+            colorScale="warm"
           />
 
           <VictoryPie
-            style={{ ...this.state.style, labels: { padding: 0 } }}
+            theme={VictoryTheme.clean}
+            style={{
+              ...this.state.style,
+              labels: { padding: 0, fill: "white" },
+            }}
             data={this.state.data}
-            innerRadius={100}
-            labelRadius={110}
+            innerRadius={50}
+            labelRadius={100}
+            padding={10}
             animate={{ duration: 2000 }}
-            colorScale={this.state.colorScale}
+            colorScale="cool"
           />
 
           <VictoryPie
-            style={{ ...this.state.style }}
+            theme={VictoryTheme.clean}
+            style={{
+              parent: parentStyle,
+            }}
             endAngle={90}
-            innerRadius={140}
+            innerRadius={80}
             padAngle={5}
             startAngle={-90}
           />
 
           <VictoryPie
+            theme={VictoryTheme.clean}
             data={range(0, 6).map((i) => [i, Math.random()])}
             x={0}
             y={1}
             animate={{ duration: 2000 }}
             style={{
               ...this.state.style,
-              data: { stroke: "#252525", strokeWidth: 2 },
             }}
             colorScale="warm"
           />
 
           <VictoryPie
+            theme={VictoryTheme.clean}
             data={range(0, 6).map((i) => [i, Math.random()])}
             x={0}
             y={1}
-            theme={VictoryTheme.material}
-            style={{ parent: { maxWidth: "40%" } }}
+            style={{ parent: parentStyle }}
             animate={{ duration: 2000 }}
           />
 
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={this.state.style}
             data={range(0, 2).map((i) => [i, Math.random()])}
             x={0}
             y={1}
-            colorScale={["tomato", "orange"]}
             labels={[]}
             cornerRadius={20}
             startAngle={-6}
@@ -310,8 +305,9 @@ export default class VictoryPieDemo extends React.Component<
             innerRadius={140}
           />
           <VictoryPie
-            style={{ parent: parentStyle, labels: { fill: "magenta" } }}
-            radius={100}
+            theme={VictoryTheme.clean}
+            style={{ parent: parentStyle }}
+            radius={80}
             labelPosition="startAngle"
             labelPlacement="parallel"
             labels={({ datum }) => `${datum.l}\ndegrees`}
@@ -327,7 +323,8 @@ export default class VictoryPieDemo extends React.Component<
             ]}
           />
           <VictoryPie
-            style={{ parent: parentStyle, labels: { fill: "magenta" } }}
+            theme={VictoryTheme.clean}
+            style={{ parent: parentStyle }}
             radius={100}
             labelPosition="startAngle"
             labelPlacement="perpendicular"
@@ -343,29 +340,19 @@ export default class VictoryPieDemo extends React.Component<
               { x: 8, y: 1, l: 315 },
             ]}
           />
-          <VictoryPie style={{ parent: parentStyle }} labelIndicator />
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={{ parent: parentStyle }}
-            labelIndicator={
-              <LineSegment
-                style={{ opacity: "1", strokeWidth: "1px", stroke: "red" }}
-              />
-            }
+            labelIndicator
+            colorScale="heatmap"
           />
           <VictoryPie
+            theme={VictoryTheme.clean}
             style={{ parent: parentStyle }}
-            labelIndicator={
-              <LineSegment
-                style={{
-                  opacity: "1",
-                  strokeWidth: "1px",
-                  strokeDasharray: "1",
-                  stroke: "red",
-                }}
-              />
-            }
+            labelIndicator
             labelIndicatorInnerOffset={45}
-            labelIndicatorOuterOffset={15}
+            labelIndicatorOuterOffset={10}
+            colorScale="red"
           />
         </div>
       </div>
diff --git a/demo/ts/components/victory-polar-axis-demo.tsx b/demo/ts/components/victory-polar-axis-demo.tsx
index 4c7792acd..4380ac09f 100644
--- a/demo/ts/components/victory-polar-axis-demo.tsx
+++ b/demo/ts/components/victory-polar-axis-demo.tsx
@@ -13,7 +13,7 @@ import { VictoryGroup } from "victory-group";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryStack } from "victory-stack";
 import { random, range, keys } from "lodash";
-import { VictoryTheme, VictoryLabel } from "victory-core";
+import { VictoryTheme, VictoryLabel, VictoryThemePalette } from "victory-core";
 
 type multiAxisDataListType = {
   strength?: number;
@@ -121,6 +121,9 @@ class App extends React.Component<any, VictoryPolarAxisState> {
       justifyContent: "center",
     };
 
+    const themeColors: VictoryThemePalette =
+      VictoryTheme.clean.palette?.colors || {};
+
     const chartStyle: { [key: string]: React.CSSProperties } = {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
     };
@@ -130,7 +133,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
         <div style={containerStyle}>
           <VictoryChart
             polar
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             domain={{ y: [0, 1] }}
             style={chartStyle}
           >
@@ -139,9 +142,6 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 <VictoryPolarAxis
                   key={i}
                   dependentAxis
-                  style={{
-                    axisLabel: { padding: 10 },
-                  }}
                   tickLabelComponent={
                     <VictoryLabel labelPlacement="vertical" />
                   }
@@ -164,13 +164,12 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryChart
             polar
             theme={VictoryTheme.clean}
-            width={350}
-            height={350}
             style={chartStyle}
             containerComponent={<VictorySelectionContainer />}
           >
             <VictoryPolarAxis labelPlacement="perpendicular" />
             <VictoryGroup
+              colorScale="red"
               data={[
                 { x: 1, y: 5 },
                 { x: 2, y: 3 },
@@ -179,17 +178,15 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 { x: 5, y: 4 },
               ]}
             >
-              <VictoryLine style={{ data: { stroke: "tomato" } }} />
+              <VictoryLine />
               <VictoryScatter
-                style={{
-                  data: { fill: ({ active }) => (active ? "tomato" : "gray") },
-                }}
                 labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
             </VictoryGroup>
 
             <VictoryGroup
+              colorScale="cool"
               data={[
                 { x: 1, y: 3 },
                 { x: 2, y: 5 },
@@ -199,17 +196,15 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 { x: 5, y: 1 },
               ]}
             >
-              <VictoryLine style={{ data: { stroke: "blue" } }} />
+              <VictoryLine />
               <VictoryScatter
-                style={{
-                  data: { fill: ({ active }) => (active ? "blue" : "gray") },
-                }}
                 labels={({ datum }) => `y: ${datum.y}`}
                 labelComponent={<VictoryTooltip />}
               />
             </VictoryGroup>
 
             <VictoryGroup
+              colorScale="warm"
               data={[
                 { x: 1, y: 5 },
                 { x: 2, y: 4 },
@@ -218,22 +213,18 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 { x: 5, y: 2 },
               ]}
             >
-              <VictoryLine style={{ data: { stroke: "black" } }} />
+              <VictoryLine />
               <VictoryScatter
-                style={{
-                  data: { fill: ({ active }) => (active ? "black" : "gray") },
-                }}
                 labels={({ datum }) => datum.y}
                 labelComponent={<VictoryTooltip />}
               />
             </VictoryGroup>
           </VictoryChart>
 
-          <VictoryChart polar theme={VictoryTheme.clean} width={350} height={350} style={chartStyle}>
+          <VictoryChart polar theme={VictoryTheme.clean} style={chartStyle}>
             <VictoryPolarAxis dependentAxis tickValues={[2, 6, 8]} />
-
             <VictoryGroup
-              style={{ data: { width: 10 } }}
+              style={{ data: { width: 10, fillOpacity: 0.5 } }}
               labels={["a", "b", "c"]}
               offset={20}
               colorScale={"qualitative"}
@@ -265,15 +256,12 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryChart
             polar
             theme={VictoryTheme.clean}
-            width={350}
-            height={350}
             style={chartStyle}
             containerComponent={<VictoryVoronoiContainer />}
           >
             <VictoryPolarAxis
               dependentAxis
               labelPlacement="vertical"
-              style={{ axis: { stroke: "none" } }}
               axisAngle={90}
               tickValues={[25, 50, 75]}
             />
@@ -281,10 +269,10 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             <VictoryBar
               style={{
                 data: {
-                  fill: ({ active }) => (active ? "blue" : "tomato"),
-                  fillOpacity: 0.6,
-                  stroke: ({ active }) => (active ? "blue" : "tomato"),
-                  strokeWidth: 2,
+                  fill: ({ active }) =>
+                    active
+                      ? themeColors.blue || "blue"
+                      : themeColors.red || "red",
                 },
               }}
               labelComponent={<VictoryTooltip />}
@@ -298,7 +286,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             />
           </VictoryChart>
 
-          <VictoryChart polar theme={VictoryTheme.material} style={chartStyle}>
+          <VictoryChart polar theme={VictoryTheme.clean} style={chartStyle}>
             <VictoryPolarAxis
               dependentAxis
               labelPlacement="vertical"
@@ -310,11 +298,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             <VictoryBar
               style={{
                 data: {
-                  fill: "tomato",
                   width: 10,
-                  fillOpacity: 0.6,
-                  stroke: "tomato",
-                  strokeWidth: 2,
                 },
               }}
               data={[
@@ -329,7 +313,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
 
           <VictoryChart
             polar
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             domain={{ x: [0, 360] }}
             innerRadius={50}
             style={chartStyle}
@@ -345,7 +329,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                         mutation: () => {
                           return {
                             style: Object.assign({}, props.style, {
-                              fill: "cyan",
+                              fill: themeColors.cyan,
                             }),
                           };
                         },
@@ -355,7 +339,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                         mutation: () => {
                           return {
                             style: Object.assign({}, props.style, {
-                              fill: "blue",
+                              fill: themeColors.blue,
                             }),
                           };
                         },
@@ -389,7 +373,9 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             <VictoryStack>
               <VictoryBar
                 name="bar-1"
-                style={{ data: { fill: "tomato", width: 20 } }}
+                style={{
+                  data: { fill: themeColors.red },
+                }}
                 data={[
                   { x: 45, y: 20 },
                   { x: 90, y: 30 },
@@ -401,7 +387,9 @@ class App extends React.Component<any, VictoryPolarAxisState> {
               />
               <VictoryBar
                 name="bar-2"
-                style={{ data: { fill: "orange", width: 20 } }}
+                style={{
+                  data: { fill: themeColors.orange },
+                }}
                 data={[
                   { x: 45, y: 20 },
                   { x: 90, y: 30 },
@@ -413,8 +401,11 @@ class App extends React.Component<any, VictoryPolarAxisState> {
               />
               <VictoryBar
                 name="bar-3"
-                cornerRadius={{ topLeft: 5 }}
-                style={{ data: { fill: "gold", width: 20 } }}
+                style={{
+                  data: {
+                    fill: themeColors.yellow,
+                  },
+                }}
                 data={[
                   { x: 45, y: 20 },
                   { x: 90, y: 30 },
@@ -429,7 +420,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
 
           <VictoryChart
             polar
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             domain={{ x: [0, 360] }}
             style={chartStyle}
             events={[
@@ -443,8 +434,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                         mutation: () => {
                           return {
                             style: Object.assign({}, props.style, {
-                              fill: "cyan",
-                              stroke: "cyan",
+                              fill: themeColors.cyan,
                             }),
                           };
                         },
@@ -480,10 +470,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 interpolation="cardinal"
                 style={{
                   data: {
-                    fill: "tomato",
-                    stroke: "tomato",
-                    fillOpacity: 0.5,
-                    strokeWidth: 2,
+                    fill: themeColors.red,
                   },
                 }}
                 data={[
@@ -500,10 +487,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 interpolation="cardinal"
                 style={{
                   data: {
-                    fill: "orange",
-                    stroke: "orange",
-                    fillOpacity: 0.5,
-                    strokeWidth: 2,
+                    fill: themeColors.orange,
                   },
                 }}
                 data={[
@@ -520,10 +504,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 interpolation="cardinal"
                 style={{
                   data: {
-                    fill: "gold",
-                    stroke: "gold",
-                    fillOpacity: 0.5,
-                    strokeWidth: 2,
+                    fill: themeColors.yellow,
                   },
                 }}
                 data={[
@@ -541,38 +522,30 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryChart
             polar
             animate={{ duration: 500 }}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             domain={{ y: [0, 10] }}
             style={chartStyle}
           >
             <VictoryPolarAxis
               dependentAxis
               labelPlacement="vertical"
-              style={{ axis: { stroke: "none" } }}
               tickFormat={() => ""}
             />
             <VictoryPolarAxis labelPlacement="parallel" />
-            <VictoryArea
-              interpolation="catmullRom"
-              style={{
-                data: { fill: "tomato" },
-              }}
-              data={this.state.data}
-            />
+            <VictoryArea interpolation="catmullRom" data={this.state.data} />
           </VictoryChart>
 
           <VictoryChart
             polar
             animate={{ duration: 500 }}
             domain={{ y: [0, 10] }}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
             containerComponent={<VictoryVoronoiContainer />}
           >
             <VictoryPolarAxis
               dependentAxis
               labelPlacement="vertical"
-              style={{ axis: { stroke: "none" } }}
               tickFormat={() => ""}
             />
             <VictoryPolarAxis labelPlacement="parallel" />
@@ -580,9 +553,6 @@ class App extends React.Component<any, VictoryPolarAxisState> {
               labelComponent={<VictoryLabel labelPlacement="parallel" />}
               labels={({ datum }: any) => `y: ${Math.round(datum.y)}`}
               interpolation="linear"
-              style={{
-                data: { stroke: "tomato", strokeWidth: 2 },
-              }}
               data={this.state.data}
             />
           </VictoryChart>
@@ -590,7 +560,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryChart
             polar
             animate={{ duration: 2000 }}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
           >
             <VictoryPolarAxis
@@ -603,11 +573,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             <VictoryBar
               style={{
                 data: {
-                  fill: "tomato",
-                  width: 10,
-                  fillOpacity: 0.4,
-                  stroke: "tomato",
-                  strokeWidth: 2,
+                  fill: themeColors.red,
                 },
               }}
               data={this.state.staticData}
@@ -617,7 +583,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryChart
             polar
             animate={{ duration: 2000 }}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
           >
             <VictoryPolarAxis
@@ -630,10 +596,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             <VictoryBar
               style={{
                 data: {
-                  fill: "tomato",
-                  fillOpacity: 0.4,
-                  stroke: "tomato",
-                  strokeWidth: 2,
+                  fill: themeColors.purple,
                 },
               }}
               data={this.state.staticData}
@@ -642,7 +605,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
 
           <VictoryChart
             polar
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             domain={{ x: [0, 360], y: [0, 80] }}
             style={chartStyle}
             containerComponent={<VictoryZoomContainer />}
@@ -661,12 +624,14 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             <VictoryBar
               alignment="start"
               style={{
-                data: { fill: ({ datum }) => datum.fill, opacity: 0.5 },
+                data: {
+                  fill: ({ datum }) => themeColors[datum.fill],
+                },
               }}
               data={[
                 { x: 45, y: 20, label: 1, fill: "red" },
                 { x: 90, y: 30, label: 2, fill: "orange" },
-                { x: 135, y: 65, label: 3, fill: "gold" },
+                { x: 135, y: 65, label: 3, fill: "yellow" },
                 { x: 250, y: 50, label: 4, fill: "blue" },
                 { x: 270, y: 40, label: 5, fill: "cyan" },
                 { x: 295, y: 30, label: 6, fill: "green" },
@@ -685,16 +650,22 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             />
           </VictoryChart>
 
-          <VictoryChart polar theme={VictoryTheme.material} style={chartStyle}>
+          <VictoryChart polar theme={VictoryTheme.clean} style={chartStyle}>
+            <VictoryPolarAxis
+              dependentAxis
+              labelPlacement="vertical"
+              tickValues={[2, 4, 6, 8]}
+            />
+            <VictoryPolarAxis labelPlacement="parallel" />
             <VictoryBar
               alignment="start"
               style={{
-                data: { fill: ({ datum }) => datum.fill, opacity: 0.5 },
+                data: { fill: ({ datum }) => themeColors[datum.fill] },
               }}
               data={[
                 { x: 15, y: 20, label: 1, fill: "red" },
                 { x: 25, y: 30, label: 2, fill: "orange" },
-                { x: 35, y: 65, label: 3, fill: "gold" },
+                { x: 35, y: 65, label: 3, fill: "yellow" },
                 { x: 40, y: 50, label: 4, fill: "blue" },
                 { x: 45, y: 40, label: 5, fill: "cyan" },
                 { x: 50, y: 30, label: 6, fill: "green" },
@@ -713,13 +684,21 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             />
           </VictoryChart>
 
-          <VictoryChart polar theme={VictoryTheme.material} style={chartStyle}>
+          <VictoryChart polar theme={VictoryTheme.clean} style={chartStyle}>
+            <VictoryPolarAxis
+              dependentAxis
+              labelPlacement="vertical"
+              style={{ axis: { stroke: "none" } }}
+              axisAngle={270}
+              tickValues={[1, 3, 5, 7]}
+            />
+            <VictoryPolarAxis labelPlacement="parallel" />
             <VictoryBar
-              style={{ data: { fill: ({ datum }) => datum.fill, width: 10 } }}
+              style={{ data: { fill: ({ datum }) => themeColors[datum.fill] } }}
               data={[
                 { x: 1, y: 2, label: 1, fill: "red" },
                 { x: 2, y: 3, label: 2, fill: "orange" },
-                { x: 3, y: 6, label: 3, fill: "gold" },
+                { x: 3, y: 6, label: 3, fill: "yellow" },
                 { x: 4, y: 5, label: 4, fill: "blue" },
                 { x: 5, y: 4, label: 5, fill: "cyan" },
                 { x: 6, y: 3, label: 6, fill: "green" },
@@ -738,7 +717,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
             />
           </VictoryChart>
 
-          <VictoryChart polar theme={VictoryTheme.material} style={chartStyle}>
+          <VictoryChart polar theme={VictoryTheme.clean} style={chartStyle}>
             <VictoryPolarAxis
               dependentAxis
               labelPlacement="vertical"
@@ -750,20 +729,8 @@ class App extends React.Component<any, VictoryPolarAxisState> {
               labelPlacement="parallel"
               tickValues={[0, 45, 90, 135, 180, 225, 315]}
             />
-            <VictoryScatter
-              style={{ data: { fill: "tomato" } }}
-              size={5}
-              data={[
-                { x: 45, y: 20, label: 1 },
-                { x: 90, y: 30, label: 2 },
-                { x: 135, y: 75, label: 3 },
-                { x: 180, y: 50, label: 4 },
-                { x: 270, y: 40, label: 5 },
-              ]}
-            />
 
             <VictoryArea
-              style={{ data: { fill: "tomato", opacity: 0.6 } }}
               data={[
                 { x: 45, y: 20 },
                 { x: 90, y: 30 },
@@ -772,9 +739,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 { x: 270, y: 40 },
               ]}
             />
-
             <VictoryLine
-              style={{ data: { stroke: "tomato" } }}
               data={[
                 { x: 45, y: 20 },
                 { x: 90, y: 30 },
@@ -783,9 +748,19 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 { x: 270, y: 40 },
               ]}
             />
+            <VictoryScatter
+              size={5}
+              data={[
+                { x: 45, y: 20, label: 1 },
+                { x: 90, y: 30, label: 2 },
+                { x: 135, y: 75, label: 3 },
+                { x: 180, y: 50, label: 4 },
+                { x: 270, y: 40, label: 5 },
+              ]}
+            />
           </VictoryChart>
 
-          <VictoryChart polar theme={VictoryTheme.material} style={chartStyle}>
+          <VictoryChart polar theme={VictoryTheme.clean} style={chartStyle}>
             <VictoryPolarAxis
               dependentAxis
               labelPlacement="vertical"
@@ -803,9 +778,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 "charisma",
               ]}
             />
-            <VictoryScatter
-              style={{ data: { fill: "tomato" } }}
-              size={5}
+            <VictoryArea
               data={[
                 { x: 1, y: 10 },
                 { x: 2, y: 25 },
@@ -814,8 +787,8 @@ class App extends React.Component<any, VictoryPolarAxisState> {
                 { x: 5, y: 50 },
               ]}
             />
-            <VictoryArea
-              style={{ data: { fill: "tomato", opacity: 0.6 } }}
+            <VictoryScatter
+              size={5}
               data={[
                 { x: 1, y: 10 },
                 { x: 2, y: 25 },
@@ -827,7 +800,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           </VictoryChart>
 
           <VictoryPolarAxis
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
             labelPlacement="vertical"
             startAngle={20}
@@ -841,7 +814,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryPolarAxis
             startAngle={0}
             endAngle={180}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
             labelPlacement="perpendicular"
             tickValues={[0, 45, 90, 135, 180]}
@@ -850,14 +823,14 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryPolarAxis
             startAngle={0}
             endAngle={180}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
             labelPlacement="perpendicular"
             tickValues={["Cat", "Dog", "Bird", "Snake"]}
           />
 
           <VictoryPolarAxis
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
             domain={[0, 10]}
             labelPlacement="vertical"
@@ -867,7 +840,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <VictoryPolarAxis
             dependentAxis
             axisAngle={200}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={chartStyle}
             domain={[0, 10]}
             tickValues={[2, 4, 6, 8, 10]}
@@ -876,7 +849,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
           <svg width={350} height={350}>
             <VictoryPolarAxis
               standalone={false}
-              theme={VictoryTheme.material}
+              theme={VictoryTheme.clean}
               style={chartStyle}
               domain={[0, 360]}
               tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}
@@ -886,7 +859,7 @@ class App extends React.Component<any, VictoryPolarAxisState> {
               dependentAxis
               standalone={false}
               axisAngle={200}
-              theme={VictoryTheme.material}
+              theme={VictoryTheme.clean}
               style={chartStyle}
               tickValues={[2, 4, 6, 8, 10]}
             />
diff --git a/demo/ts/components/victory-scatter-demo.tsx b/demo/ts/components/victory-scatter-demo.tsx
index afdcd22d5..8a9f03ac8 100644
--- a/demo/ts/components/victory-scatter-demo.tsx
+++ b/demo/ts/components/victory-scatter-demo.tsx
@@ -40,7 +40,7 @@ interface CatPointInterface {
 }
 
 const getData = () => {
-  const colors = [
+  const colors = VictoryTheme.clean.palette?.qualitative ?? [
     "violet",
     "cornflowerblue",
     "gold",
@@ -58,7 +58,6 @@ const getData = () => {
     "diamond",
     "plus",
   ];
-  // symbol: symbols[scaledIndex],
   return range(100).map((index) => {
     const scaledIndex = Math.floor(index % 7);
     return {
@@ -206,9 +205,8 @@ export default class VictoryScatterDemo extends React.Component<
     return (
       <div className="demo" style={containerStyle}>
         <VictoryScatter
+          theme={VictoryTheme.clean}
           style={style}
-          width={500}
-          height={500}
           domain={[0, 600]}
           animate={{ duration: 2000 }}
           data={this.state.data}
@@ -217,12 +215,12 @@ export default class VictoryScatterDemo extends React.Component<
             <VictoryContainer
               title="Scatter Chart"
               desc="This is a scatter chart with cat data points!"
-              style={Object.assign({}, style.parent, { border: "1px solid red" })}
             />
           }
         />
 
         <VictoryScatter
+          theme={VictoryTheme.clean}
           style={{
             parent: style.parent,
             data: {
@@ -230,51 +228,64 @@ export default class VictoryScatterDemo extends React.Component<
               opacity: ({ datum }) => datum.opacity,
             },
           }}
-          width={500}
-          height={500}
           domain={[0, 600]}
           animate={{ duration: 2000 }}
           data={this.state.data}
         />
 
         <VictoryScatter
+          theme={VictoryTheme.clean}
           style={{
             parent: style.parent,
-            data: { fill: ({ datum }) => (datum.y > 0 ? "red" : "blue") },
+            data: {
+              fill: ({ datum }) =>
+                datum.y > 0
+                  ? VictoryTheme.clean.palette?.colors?.red ?? "red"
+                  : VictoryTheme.clean.palette?.colors?.blue ?? "blue",
+            },
           }}
-          width={500}
-          height={500}
           symbol={({ datum }) => (datum.y > 0 ? "triangleUp" : "triangleDown")}
           y={(d) => Math.sin(2 * Math.PI * d.x)}
           samples={25}
         />
 
         <VictoryScatter
-          style={symbolStyle}
-          width={500}
-          height={500}
-          padding={50}
-          labelComponent={<VictoryLabel style={{ fill: "red" }} />}
+          theme={VictoryTheme.clean}
+          style={{
+            parent: style.parent,
+          }}
+          labelComponent={<VictoryLabel />}
           data={symbolData}
         />
 
         <VictoryScatter
+          theme={VictoryTheme.clean}
           style={{
             parent: style.parent,
-            data: { fill: "blue", opacity: 0.7 },
+            data: {
+              fill: VictoryTheme.clean.palette?.colors?.green ?? "green",
+            },
           }}
-          width={500}
-          height={500}
           bubbleProperty="z"
           maxBubbleSize={20}
           data={bubbleData}
         />
 
-        <svg style={style} width={500} height={300}>
-          <VictoryScatter style={style} standalone={false} />
+        <svg style={style.parent} width={500} height={300}>
+          <VictoryScatter
+            theme={VictoryTheme.clean}
+            style={{
+              parent: style.parent,
+              data: {
+                fill: VictoryTheme.clean.palette?.colors?.cyan ?? "cyan",
+              },
+            }}
+            standalone={false}
+          />
         </svg>
 
         <VictoryScatter
+          theme={VictoryTheme.clean}
           style={{ parent: style.parent, data: this.state.hoverStyle }}
           labels={() => ""}
           data={[
@@ -296,7 +307,9 @@ export default class VictoryScatterDemo extends React.Component<
                     {
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "orange" }),
+                          style: Object.assign({}, props.style, {
+                            fill: "orange",
+                          }),
                           symbol: "circle",
                         };
                       },
@@ -319,8 +332,6 @@ export default class VictoryScatterDemo extends React.Component<
         <VictoryScatter
           style={style}
           theme={VictoryTheme.clean}
-          width={350}
-          height={350}
           data={range(0, 200).map((i) => {
             return {
               a: { b: [{ y: i * Math.sin(i * 0.3) }], x: Math.cos(i * 0.3) },
diff --git a/demo/ts/components/victory-stack-demo.tsx b/demo/ts/components/victory-stack-demo.tsx
index 8935912c9..f12689f5c 100644
--- a/demo/ts/components/victory-stack-demo.tsx
+++ b/demo/ts/components/victory-stack-demo.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { VictoryStack } from "victory-stack";
 import { VictoryArea } from "victory-area";
-import { VictoryTheme } from "victory-core/lib";
+import { VictoryTheme } from "victory-core";
 
 class App extends React.Component {
   render() {
@@ -22,7 +22,11 @@ class App extends React.Component {
         <h3 style={{ textAlign: "center" }}>Standalone Stack</h3>
 
         <div style={containerStyle}>
-          <VictoryStack theme={VictoryTheme.clean} style={chartStyle} aria-label="Victory Stack Demo">
+          <VictoryStack
+            theme={VictoryTheme.clean}
+            style={chartStyle}
+            aria-label="Victory Stack Demo"
+          >
             <VictoryArea
               data={[
                 { x: "a", y: 2 },
@@ -46,7 +50,11 @@ class App extends React.Component {
             />
           </VictoryStack>
 
-          <VictoryStack style={chartStyle} colorScale={"warm"}>
+          <VictoryStack
+            theme={VictoryTheme.clean}
+            style={chartStyle}
+            colorScale="warm"
+          >
             <VictoryArea
               data={[
                 { x: new Date(2006, 1, 1), y: null },
diff --git a/packages/victory-core/src/victory-theme/clean.tsx b/packages/victory-core/src/victory-theme/clean.tsx
index 70360c2e7..7251a3dfb 100644
--- a/packages/victory-core/src/victory-theme/clean.tsx
+++ b/packages/victory-core/src/victory-theme/clean.tsx
@@ -73,17 +73,27 @@ const green = {
   "900": "#338A17",
 };
 
-const colors = [
-  blue["500"],
-  pink["500"],
-  teal["500"],
-  purple["500"],
-  green["500"],
-  orange["500"],
-  cyan["500"],
-  red["500"],
-  yellow["500"],
-];
+const colors = {
+  blue: blue["500"],
+  pink: pink["500"],
+  teal: teal["500"],
+  purple: purple["500"],
+  green: green["500"],
+  orange: orange["500"],
+  cyan: cyan["500"],
+  red: red["500"],
+  yellow: yellow["500"],
+};
+
+const colorScale = Object.values(colors);
+const grayscale = [gray["200"], gray["400"], gray["600"], gray["900"]];
+const warm = [yellow["500"], orange["500"], red["500"], pink["500"]];
+const cool = [cyan["500"], teal["500"], blue["500"], purple["500"]];
+const heatmap = [green["500"], yellow["500"], red["500"]];
+const redPalette = [red["500"], red["300"], red["100"]];
+const greenPalette = [green["500"], green["300"], green["100"]];
+const bluePalette = [blue["500"], blue["300"], blue["100"]];
+
 // *
 // * Typography
 // *
@@ -99,7 +109,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors,
+  colorScale,
 };
 // *
 // * Labels
@@ -130,11 +140,24 @@ const borderRadius = 1;
 // * Theme
 // *
 export const clean: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative: colorScale,
+    heatmap,
+    warm,
+    cool,
+    red: redPalette,
+    green: greenPalette,
+    blue: bluePalette,
+  },
   area: Object.assign(
     {
       style: {
         data: {
-          fill: cyan["500"],
+          fill: blue["500"],
+          strokeWidth: 2,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -146,7 +169,7 @@ export const clean: VictoryThemeDefinition = {
       style: {
         axis: {
           fill: "transparent",
-          stroke: gray["300"],
+          stroke: gray["500"],
           strokeWidth: 1,
           strokeLinecap,
           strokeLinejoin,
@@ -173,10 +196,10 @@ export const clean: VictoryThemeDefinition = {
   polarAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"],
+        stroke: gray["500"],
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -185,7 +208,7 @@ export const clean: VictoryThemeDefinition = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin,
@@ -196,10 +219,10 @@ export const clean: VictoryThemeDefinition = {
   polarDependentAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"],
+        stroke: gray["500"],
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -208,7 +231,7 @@ export const clean: VictoryThemeDefinition = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["300"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin,
@@ -222,7 +245,8 @@ export const clean: VictoryThemeDefinition = {
         data: {
           fill: blue["500"],
           padding,
-          strokeWidth: 0,
+          strokeWidth: 1,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -239,9 +263,9 @@ export const clean: VictoryThemeDefinition = {
         medianLabels: Object.assign({}, baseLabelStyles, { padding: 3 }),
         min: { padding, stroke: gray["400"], strokeWidth: 2 },
         minLabels: Object.assign({}, baseLabelStyles, { padding: 3 }),
-        q1: { padding, fill: teal["500"], rx: borderRadius },
+        q1: { padding, fill: teal["500"], rx: borderRadius, strokeWidth: 2 },
         q1Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
-        q3: { padding, fill: teal["500"], rx: borderRadius },
+        q3: { padding, fill: cyan["500"], rx: borderRadius },
         q3Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
       },
       boxWidth: 20,
@@ -285,7 +309,7 @@ export const clean: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -294,8 +318,7 @@ export const clean: VictoryThemeDefinition = {
       style: {
         data: {
           fill: cyan["500"],
-          stroke: "transparent",
-          strokeWidth: 0,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -306,7 +329,7 @@ export const clean: VictoryThemeDefinition = {
   ),
   label: baseLabelStyles,
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -325,7 +348,7 @@ export const clean: VictoryThemeDefinition = {
         data: {
           fill: "transparent",
           opacity: 1,
-          stroke: pink["500"],
+          stroke: blue["500"],
           strokeWidth: 2,
           strokeLinecap,
           strokeLinejoin,
@@ -338,14 +361,22 @@ export const clean: VictoryThemeDefinition = {
   pie: Object.assign(
     {
       style: {
+        parent: {
+          backgroundColor: gray.white,
+        },
         data: {
           padding,
           stroke: gray.white,
           strokeWidth: 1,
         },
-        labels: Object.assign({}, baseLabelStyles, { padding: 20 }),
+        labels: {
+          ...baseLabelStyles,
+          padding: 20,
+          fill: gray["600"],
+          fontSize: 10,
+        },
       },
-      colorScale: colors,
+      colorScale,
       cornerRadius: borderRadius,
     },
     baseProps,
@@ -359,14 +390,17 @@ export const clean: VictoryThemeDefinition = {
           stroke: "transparent",
           strokeWidth: 0,
         },
-        labels: baseLabelStyles,
+        labels: {
+          ...baseLabelStyles,
+          padding: 20,
+        },
       },
     },
     baseProps,
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -376,7 +410,7 @@ export const clean: VictoryThemeDefinition = {
       pointerEvents: "none",
     }),
     flyoutStyle: {
-      stroke: gray["500"],
+      stroke: gray["300"],
       strokeWidth: 2,
       fill: gray.white,
       pointerEvents: "none",
diff --git a/packages/victory-core/src/victory-theme/grayscale.tsx b/packages/victory-core/src/victory-theme/grayscale.tsx
index 857123e13..0440befaf 100644
--- a/packages/victory-core/src/victory-theme/grayscale.tsx
+++ b/packages/victory-core/src/victory-theme/grayscale.tsx
@@ -3,7 +3,19 @@ import { VictoryThemeDefinition } from "./types";
 // *
 // * Colors
 // *
-const colors = [
+const colors = {
+  blue: "#4F7DA1",
+  pink: "#E2A37F",
+  teal: "#00796B",
+  purple: "#DF948A",
+  green: "#8BC34A",
+  orange: "#F4511E",
+  cyan: "#006064",
+  red: "#DF5A49",
+  yellow: "#FFF59D",
+};
+
+const colorScale = [
   "#252525",
   "#525252",
   "#737373",
@@ -15,6 +27,26 @@ const colors = [
 
 const charcoal = "#252525";
 const grey = "#969696";
+
+const qualitative = [
+  "#334D5C",
+  "#45B29D",
+  "#EFC94C",
+  "#E27A3F",
+  "#DF5A49",
+  "#4F7DA1",
+  "#55DBC1",
+  "#EFDA97",
+  "#E2A37F",
+  "#DF948A",
+];
+const heatmap = ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"];
+const warm = ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"];
+const cool = ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"];
+const red = ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"];
+const green = ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"];
+const blue = ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"];
+
 // *
 // * Typography
 // *
@@ -28,7 +60,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors,
+  colorScale,
 };
 // *
 // * Labels
@@ -53,6 +85,17 @@ const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
 export const grayscale: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale: colorScale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue,
+  },
   area: Object.assign(
     {
       style: {
@@ -156,7 +199,7 @@ export const grayscale: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -174,7 +217,7 @@ export const grayscale: VictoryThemeDefinition = {
     baseProps,
   ),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -208,7 +251,7 @@ export const grayscale: VictoryThemeDefinition = {
       },
       labels: Object.assign({}, baseLabelStyles, { padding: 20 }),
     },
-    colorScale: colors,
+    colorScale,
     width: 400,
     height: 400,
     padding: 50,
@@ -228,7 +271,7 @@ export const grayscale: VictoryThemeDefinition = {
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
diff --git a/packages/victory-core/src/victory-theme/material.tsx b/packages/victory-core/src/victory-theme/material.tsx
index 1241d0659..fa04572ae 100644
--- a/packages/victory-core/src/victory-theme/material.tsx
+++ b/packages/victory-core/src/victory-theme/material.tsx
@@ -1,4 +1,4 @@
-import { VictoryThemeDefinition } from "./types";
+import { VictoryThemeDefinition, VictoryThemePalette } from "./types";
 
 // *
 // * Colors
@@ -9,7 +9,7 @@ const lime300 = "#DCE775";
 const lightGreen500 = "#8BC34A";
 const teal700 = "#00796B";
 const cyan900 = "#006064";
-const colors = [
+const colorScale = [
   deepOrange600,
   yellow200,
   lime300,
@@ -21,6 +21,39 @@ const blueGrey50 = "#ECEFF1";
 const blueGrey300 = "#90A4AE";
 const blueGrey700 = "#455A64";
 const grey900 = "#212121";
+
+const colors: VictoryThemePalette = {
+  blue: "#4F7DA1",
+  pink: "#E2A37F",
+  teal: teal700,
+  purple: "#DF948A",
+  green: lightGreen500,
+  orange: deepOrange600,
+  cyan: cyan900,
+  red: "#DF5A49",
+  yellow: yellow200,
+};
+
+const grayscale = [blueGrey50, blueGrey300, blueGrey700, grey900];
+const qualitative = [
+  "#334D5C",
+  "#45B29D",
+  "#EFC94C",
+  "#E27A3F",
+  "#DF5A49",
+  "#4F7DA1",
+  "#55DBC1",
+  "#EFDA97",
+  "#E2A37F",
+  "#DF948A",
+];
+const heatmap = ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"];
+const warm = ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"];
+const cool = ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"];
+const red = ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"];
+const green = ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"];
+const blue = ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"];
+
 // *
 // * Typography
 // *
@@ -61,6 +94,17 @@ const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
 export const material: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue,
+  },
   area: Object.assign(
     {
       style: {
@@ -182,7 +226,7 @@ export const material: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -200,7 +244,7 @@ export const material: VictoryThemeDefinition = {
     baseProps,
   ),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -228,7 +272,7 @@ export const material: VictoryThemeDefinition = {
   ),
   pie: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
       style: {
         data: {
           padding,
@@ -256,7 +300,7 @@ export const material: VictoryThemeDefinition = {
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
diff --git a/packages/victory-core/src/victory-theme/types.ts b/packages/victory-core/src/victory-theme/types.ts
index cc92cb998..33287dadd 100644
--- a/packages/victory-core/src/victory-theme/types.ts
+++ b/packages/victory-core/src/victory-theme/types.ts
@@ -72,7 +72,33 @@ export interface VictoryAxisCommonProps {
 export type VerticalAnchorType = "start" | "middle" | "end";
 // #region Victory Theme
 // Note: Many SVG attributes are missed in CSSProperties interface
+type VictoryThemePaletteKeys =
+  | "blue"
+  | "pink"
+  | "teal"
+  | "purple"
+  | "green"
+  | "orange"
+  | "cyan"
+  | "red"
+  | "yellow";
+
+export type VictoryThemePalette = {
+  [key in VictoryThemePaletteKeys]?: string;
+};
+
 export interface VictoryThemeDefinition {
+  palette?: {
+    colors?: VictoryThemePalette;
+    grayscale?: string[];
+    qualitative?: string[];
+    heatmap?: string[];
+    warm?: string[];
+    cool?: string[];
+    red?: string[];
+    blue?: string[];
+    green?: string[];
+  };
   area?: {
     style?: {
       data?: VictoryStyleObject;
diff --git a/packages/victory-core/src/victory-util/style.ts b/packages/victory-core/src/victory-util/style.ts
index f6ebb8d1e..0a25f0b94 100644
--- a/packages/victory-core/src/victory-util/style.ts
+++ b/packages/victory-core/src/victory-util/style.ts
@@ -1,3 +1,8 @@
+import {
+  VictoryTheme,
+  VictoryThemeDefinition,
+} from "../victory-theme/victory-theme";
+
 /**
  * Given an object with CSS/SVG transform definitions, return the string value
  * for use with the `transform` CSS property or SVG attribute. Note that we
@@ -33,29 +38,39 @@ export const toTransformString = function (obj, ...more) {
  * of 5 hex string values in that color scale. If no 'name' parameter
  * is given, it will return the Victory default grayscale.
  * @param {String} name The name of the color scale to return (optional).
+ * @param {Object} theme The theme object to retrieve the color scale from (optional).
  * @returns {Array} An array of 5 hex string values composing a color scale.
  */
-export function getColorScale(name) {
-  const scales = {
-    grayscale: ["#cccccc", "#969696", "#636363", "#252525"],
-    qualitative: [
-      "#334D5C",
-      "#45B29D",
-      "#EFC94C",
-      "#E27A3F",
-      "#DF5A49",
-      "#4F7DA1",
-      "#55DBC1",
-      "#EFDA97",
-      "#E2A37F",
-      "#DF948A",
-    ],
-    heatmap: ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"],
-    warm: ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"],
-    cool: ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"],
-    red: ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"],
-    blue: ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"],
-    green: ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"],
+export function getColorScale(
+  name?: string,
+  theme: VictoryThemeDefinition = VictoryTheme.material,
+) {
+  const {
+    palette: {
+      grayscale = ["#cccccc", "#969696", "#636363", "#252525"],
+      qualitative = [],
+      heatmap = [],
+      warm = [],
+      cool = [],
+      red = [],
+      blue = [],
+      green = [],
+    } = {},
+  } = theme;
+
+  const scales: Record<string, string[]> = {
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    blue,
+    green,
   };
-  return name ? scales[name] : scales.grayscale;
+
+  const selectedScale =
+    name && scales[name]?.length ? scales[name] : scales.grayscale;
+
+  return selectedScale;
 }
diff --git a/packages/victory-core/src/victory-util/wrapper.tsx b/packages/victory-core/src/victory-util/wrapper.tsx
index f0f3bea8a..790af7abe 100644
--- a/packages/victory-core/src/victory-util/wrapper.tsx
+++ b/packages/victory-core/src/victory-util/wrapper.tsx
@@ -298,7 +298,8 @@ export function getAllEvents(props) {
   return events || [];
 }
 
-export function getColor(calculatedProps, child, index) {
+// eslint-disable-next-line max-params
+export function getColor(calculatedProps, child, index, theme) {
   // check for styles first
   const { style } = calculatedProps;
   let { colorScale, color } = calculatedProps;
@@ -313,7 +314,7 @@ export function getColor(calculatedProps, child, index) {
   }
   const colors = Array.isArray(colorScale)
     ? colorScale
-    : Style.getColorScale(colorScale);
+    : Style.getColorScale(colorScale, theme);
   return color || colors[index % colors.length];
 }
 
@@ -323,7 +324,8 @@ export function getStyle(theme, style, role) {
   return Helpers.getStyles(style, defaultStyle);
 }
 
-export function getChildStyle(child, index, calculatedProps) {
+// eslint-disable-next-line max-params
+export function getChildStyle(child, index, calculatedProps, theme) {
   const { style, role } = calculatedProps;
   const childStyle = child.props.style || {};
   if (Array.isArray(childStyle)) {
@@ -331,7 +333,9 @@ export function getChildStyle(child, index, calculatedProps) {
   }
   const childRole = child.type && child.type.role;
   const defaultFill =
-    childRole === "stack" ? undefined : getColor(calculatedProps, child, index);
+    childRole === "stack"
+      ? undefined
+      : getColor(calculatedProps, child, index, theme);
   const defaultColor =
     childRole === "line"
       ? { fill: "none", stroke: defaultFill }
diff --git a/packages/victory-group/src/helper-methods.tsx b/packages/victory-group/src/helper-methods.tsx
index dac620485..5cb97b3c1 100644
--- a/packages/victory-group/src/helper-methods.tsx
+++ b/packages/victory-group/src/helper-methods.tsx
@@ -193,7 +193,7 @@ export function getChildren(initialProps, childComponents?, calculatedProps?) {
   const newCalculatedProps =
     calculatedProps || getCalculatedProps(props, children);
   const { datasets } = newCalculatedProps;
-  const { labelComponent, polar } = props;
+  const { labelComponent, polar, theme } = props;
   const childProps = getChildProps(props, newCalculatedProps);
   const parentName = props.name || "group";
   return children.map((child, index) => {
@@ -204,7 +204,7 @@ export function getChildren(initialProps, childComponents?, calculatedProps?) {
     const style =
       role === "voronoi" || role === "tooltip" || role === "label"
         ? child.props.style
-        : Wrapper.getChildStyle(child, index, newCalculatedProps);
+        : Wrapper.getChildStyle(child, index, newCalculatedProps, theme);
     const labels = props.labels
       ? getLabels(props, datasets, index)
       : child.props.labels;
diff --git a/packages/victory-legend/src/helper-methods.ts b/packages/victory-legend/src/helper-methods.ts
index f149f7f59..e8b7995df 100644
--- a/packages/victory-legend/src/helper-methods.ts
+++ b/packages/victory-legend/src/helper-methods.ts
@@ -3,9 +3,9 @@ import { Helpers, Style, TextSize } from "victory-core";
 import { VictoryLegendProps } from "./victory-legend";
 
 const getColorScale = (props) => {
-  const { colorScale } = props;
+  const { colorScale, theme } = props;
   return typeof colorScale === "string"
-    ? Style.getColorScale(colorScale)
+    ? Style.getColorScale(colorScale, theme)
     : colorScale || [];
 };
 
diff --git a/packages/victory-pie/src/helper-methods.ts b/packages/victory-pie/src/helper-methods.ts
index e44667e01..143ee3cd5 100644
--- a/packages/victory-pie/src/helper-methods.ts
+++ b/packages/victory-pie/src/helper-methods.ts
@@ -60,12 +60,12 @@ const getSlices = (props, data) => {
 };
 
 const getCalculatedValues = (props) => {
-  const { colorScale } = props;
+  const { colorScale, theme } = props;
   const styleObject = Helpers.getDefaultStyles(props, "pie");
   const style = Helpers.getStyles(props.style, styleObject);
   const colors = Array.isArray(colorScale)
     ? colorScale
-    : Style.getColorScale(colorScale);
+    : Style.getColorScale(colorScale, theme);
   const padding = Helpers.getPadding(props);
   const defaultRadius = getRadius(props, padding);
   const origin = getOrigin(props, padding);
diff --git a/packages/victory-stack/src/helper-methods.tsx b/packages/victory-stack/src/helper-methods.tsx
index bfa3730c3..acf76e96b 100644
--- a/packages/victory-stack/src/helper-methods.tsx
+++ b/packages/victory-stack/src/helper-methods.tsx
@@ -242,10 +242,16 @@ export function getChildren(initialProps, childComponents, calculatedProps) {
   const { datasets } = newCalculatedProps;
   const childProps = getChildProps(props, newCalculatedProps);
   const parentName = props.name || "stack";
+  const { theme } = props;
   return children.map((child, index) => {
     const role = child.type && child.type.role;
     const data = datasets[index];
-    const style = Wrapper.getChildStyle(child, index, newCalculatedProps);
+    const style = Wrapper.getChildStyle(
+      child,
+      index,
+      newCalculatedProps,
+      theme,
+    );
     const labels = props.labels
       ? getLabels(props, datasets, index)
       : child.props.labels;