diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx
index 5aa5d995b..8a0888e3b 100644
--- a/demo/ts/app.tsx
+++ b/demo/ts/app.tsx
@@ -203,7 +203,7 @@ class App extends React.Component<any, AppState> {
     super(props);
 
     this.state = {
-      route: window.location.hash.substr(1),
+      route: window.location.hash.slice(1),
     };
 
     if (this.state.route === "") {
@@ -280,9 +280,7 @@ class App extends React.Component<any, AppState> {
               </main>
             </>
           ) : (
-            <main style={mainStyle}>
-              <Child />
-            </main>
+            <Child />
           )}
         </div>
       </div>
diff --git a/demo/ts/components/theme-builder.tsx b/demo/ts/components/theme-builder.tsx
deleted file mode 100644
index 8800596c6..000000000
--- a/demo/ts/components/theme-builder.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import { VictoryTheme } from "victory-core";
-
-const ThemeBuilder = () => {
-  const [theme, setTheme] = React.useState<any>(VictoryTheme.material);
-
-  return <div>Theme Builder</div>;
-};
-export default ThemeBuilder;
diff --git a/demo/ts/components/theme-builder/config-preview.tsx b/demo/ts/components/theme-builder/config-preview.tsx
new file mode 100644
index 000000000..8c415742e
--- /dev/null
+++ b/demo/ts/components/theme-builder/config-preview.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { VictoryThemeDefinition } from "victory-core/lib";
+
+type ConfigPreviewProps = {
+  config: VictoryThemeDefinition;
+  onClose: () => void;
+};
+
+const containerStyles: React.CSSProperties = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  width: "100%",
+  padding: 20,
+  backgroundColor: "rgba(255, 255, 255, 0.9)",
+  zIndex: 1000,
+};
+
+const copyButtonContainerStyles: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  marginBottom: 20,
+};
+
+const copyStatusStyles: React.CSSProperties = {
+  color: "#666",
+  fontSize: 12,
+  fontStyle: "italic",
+};
+
+const codeStyles: React.CSSProperties = {
+  overflow: "auto",
+  maxHeight: 600,
+  border: "1px solid #ccc",
+  padding: 10,
+  backgroundColor: "#f9f9f9",
+};
+
+const closeButtonStyles: React.CSSProperties = {
+  position: "absolute",
+  top: 10,
+  right: 10,
+  background: "transparent",
+  border: "none",
+  fontSize: "20px",
+  cursor: "pointer",
+};
+
+const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
+  const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
+
+  const handleCopyThemeConfig = () => {
+    navigator.clipboard
+      .writeText(JSON.stringify(config, null, 2))
+      .then(() => {
+        setCopyStatus("Copied successfully.");
+        return "Theme config copied to clipboard";
+      })
+      .catch(() => {
+        setCopyStatus("Failed to copy.");
+      });
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <div style={containerStyles}>
+      <div style={copyButtonContainerStyles}>
+        <button onClick={handleCopyThemeConfig}>Copy Theme Config</button>
+        {copyStatus && <span style={copyStatusStyles}>{copyStatus}</span>}
+      </div>
+      <h2>Theme Config Preview</h2>
+      <pre style={codeStyles}>{JSON.stringify(config, null, 2)}</pre>
+      <button onClick={handleClose} style={closeButtonStyles}>
+        &times;
+      </button>
+    </div>
+  );
+};
+export default ConfigPreview;
diff --git a/demo/ts/components/theme-builder/custom-options.tsx b/demo/ts/components/theme-builder/custom-options.tsx
new file mode 100644
index 000000000..aaef4a441
--- /dev/null
+++ b/demo/ts/components/theme-builder/custom-options.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { ThemeOption } from ".";
+import ConfigPreview from "./config-preview";
+
+type ColorChangeArgs = {
+  event: React.ChangeEvent<HTMLInputElement>;
+  index: number;
+  colorScale: string;
+};
+
+type CustomOptionsProps = {
+  activeTheme: ThemeOption;
+  onColorChange: (args: ColorChangeArgs) => void;
+};
+
+const colorContainer: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(4, 1fr)",
+  gap: 20,
+};
+
+const colorPickerStyles: React.CSSProperties = {
+  width: 50,
+  height: 50,
+};
+
+const CustomOptions = ({ activeTheme, onColorChange }: CustomOptionsProps) => {
+  const [showThemeConfigPreview, setShowThemeConfigPreview] =
+    React.useState(false);
+
+  const onThemeConfigPreviewOpen = () => {
+    setShowThemeConfigPreview(true);
+  };
+
+  const onThemeConfigPreviewClose = () => {
+    setShowThemeConfigPreview(false);
+  };
+  return (
+    <>
+      <div>
+        <button onClick={onThemeConfigPreviewOpen}>
+          See Custom Config JSON
+        </button>
+        <section>
+          <h2>Color Scales</h2>
+          <h3>Qualitative</h3>
+          <div style={colorContainer}>
+            {activeTheme.config?.palette?.qualitative?.map((color, index) => (
+              <input
+                key={index}
+                style={colorPickerStyles}
+                type="color"
+                value={color}
+                onChange={(event) =>
+                  onColorChange({
+                    event,
+                    index,
+                    colorScale: "qualitative",
+                  })
+                }
+              />
+            ))}
+          </div>
+        </section>
+      </div>
+
+      {showThemeConfigPreview && activeTheme.config && (
+        <ConfigPreview
+          config={activeTheme.config}
+          onClose={onThemeConfigPreviewClose}
+        />
+      )}
+    </>
+  );
+};
+export default CustomOptions;
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
new file mode 100644
index 000000000..85905c4a1
--- /dev/null
+++ b/demo/ts/components/theme-builder/index.tsx
@@ -0,0 +1,228 @@
+import React from "react";
+import {
+  ColorScalePropType,
+  VictoryTheme,
+  VictoryThemeDefinition,
+} from "victory-core";
+import ThemePicker from "./theme-picker";
+import { VictoryChart } from "victory-chart";
+import { VictoryAxis } from "victory-axis";
+import { VictoryStack } from "victory-stack";
+import { VictoryBar } from "victory-bar";
+import { VictoryArea } from "victory-area";
+import CustomOptions from "./custom-options";
+
+export type ThemeOption = {
+  name: string;
+  config?: VictoryThemeDefinition;
+};
+
+const themes: ThemeOption[] = [
+  { name: "Clean", config: VictoryTheme.clean },
+  { name: "Material", config: VictoryTheme.material },
+  { name: "Grayscale", config: VictoryTheme.grayscale },
+];
+
+const sampleStackData = [
+  {
+    x: 1,
+    y: 2,
+  },
+  {
+    x: 2,
+    y: 3,
+  },
+  {
+    x: 3,
+    y: 5,
+  },
+  {
+    x: 4,
+    y: 4,
+  },
+  {
+    x: 5,
+    y: 7,
+  },
+];
+
+const containerStyles: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  alignItems: "flex-start",
+  justifyContent: "flex-start",
+  width: "100%",
+};
+
+const sidebarStyles: React.CSSProperties = {
+  height: "100%",
+  borderRight: "1px solid #ccc",
+  padding: "20px",
+  width: 300,
+};
+
+const tabContainerStyles: React.CSSProperties = {
+  display: "flex",
+  cursor: "pointer",
+  marginBottom: 20,
+  fontSize: 14,
+};
+
+const previewContainerStyles: React.CSSProperties = {
+  flex: 1,
+  padding: "0 20px",
+};
+
+const getTabStyles = (isActive): React.CSSProperties => ({
+  padding: "10px 20px",
+  borderBottom: "2px solid lightgray",
+  fontWeight: "bold",
+  color: "gray",
+  ...(isActive && {
+    borderBottom: "2px solid black",
+    color: "#2165E3",
+  }),
+});
+
+const chartsGridStyles: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: 20,
+};
+
+const chartStyle: { [key: string]: React.CSSProperties } = {
+  parent: {
+    border: "1px solid #ccc",
+    width: "100%",
+    height: 400,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+};
+
+const tabConfig = [
+  {
+    name: "themes",
+    label: "Default Themes",
+    Children: ThemePicker,
+  },
+  {
+    name: "customize",
+    label: "Customize",
+    Children: CustomOptions,
+  },
+];
+
+const ThemeBuilder = () => {
+  const [activeTheme, setActiveTheme] = React.useState<ThemeOption>(themes[0]);
+  const [activeColorScale] = React.useState<ColorScalePropType | undefined>(
+    "qualitative",
+  );
+  const [activeTab, setActiveTab] = React.useState(tabConfig[0].name);
+
+  const handleTabChange = (tabName: string) => {
+    setActiveTab(tabName);
+  };
+
+  const handleThemeSelect = (selectedTheme: ThemeOption) => {
+    if (!selectedTheme) return;
+    setActiveTheme(selectedTheme);
+  };
+
+  const handleColorChange = ({ event, index, colorScale }) => {
+    const newColor = event.target.value;
+    const customTheme = {
+      ...activeTheme,
+      name: "Custom",
+      config: {
+        ...activeTheme.config,
+        palette: {
+          ...activeTheme.config?.palette,
+          [colorScale]: activeTheme.config?.palette?.[colorScale]?.map(
+            (color, i) => (i === index ? newColor : color),
+          ),
+        },
+      },
+    };
+    setActiveTheme(customTheme);
+  };
+
+  return (
+    <div style={containerStyles}>
+      <aside style={sidebarStyles}>
+        <div style={tabContainerStyles}>
+          {tabConfig.map((tab, i) => (
+            <div
+              key={i}
+              onClick={() => handleTabChange(tab.name)}
+              style={getTabStyles(activeTab === tab.name)}
+            >
+              {tab.label}
+            </div>
+          ))}
+        </div>
+        <div>
+          {tabConfig.map(({ name, Children }) => (
+            <div key={name}>
+              {activeTab === name && (
+                <Children
+                  key={name}
+                  themes={themes}
+                  activeTheme={activeTheme}
+                  onColorChange={handleColorChange}
+                  onSelect={handleThemeSelect}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </aside>
+      <main style={previewContainerStyles}>
+        <h2>Example Charts</h2>
+        <div style={chartsGridStyles}>
+          <div>
+            <h3>Bar Chart</h3>
+            <VictoryChart
+              theme={activeTheme.config}
+              domainPadding={20}
+              style={chartStyle}
+            >
+              <VictoryAxis label="X Axis" />
+              <VictoryAxis dependentAxis label="Y Axis" />
+              <VictoryStack
+                colorScale={activeColorScale}
+                aria-label="Victory Stack Demo"
+              >
+                {[...Array(5)].map((_, i) => (
+                  <VictoryBar data={sampleStackData} key={i} />
+                ))}
+              </VictoryStack>
+            </VictoryChart>
+          </div>
+          <div>
+            <h3>Area Chart</h3>
+            <VictoryChart
+              theme={activeTheme.config}
+              domainPadding={20}
+              style={chartStyle}
+            >
+              <VictoryAxis label="X Axis" />
+              <VictoryAxis dependentAxis label="Y Axis" />
+              <VictoryStack
+                colorScale={activeColorScale}
+                aria-label="Victory Stack Demo"
+              >
+                {[...Array(5)].map((_, i) => (
+                  <VictoryArea data={sampleStackData} key={i} />
+                ))}
+              </VictoryStack>
+            </VictoryChart>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+export default ThemeBuilder;
diff --git a/demo/ts/components/theme-builder/theme-picker.tsx b/demo/ts/components/theme-builder/theme-picker.tsx
new file mode 100644
index 000000000..26f8116f4
--- /dev/null
+++ b/demo/ts/components/theme-builder/theme-picker.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { ThemeOption } from ".";
+
+type ThemePickerProps = {
+  themes: ThemeOption[];
+  activeTheme: ThemeOption;
+  onSelect?: (theme: ThemeOption) => void;
+};
+
+const buttonStyle: React.CSSProperties = {
+  padding: "5px 10px",
+  margin: "5px",
+  cursor: "pointer",
+  border: "none",
+  borderRadius: "5px",
+  background: "none",
+};
+
+const activeButtonStyle: React.CSSProperties = {
+  ...buttonStyle,
+  background: "#eee",
+  color: "#2165E3",
+};
+
+const ThemePicker = ({ themes, activeTheme, onSelect }: ThemePickerProps) => {
+  const handleSelect = (theme: ThemeOption) => {
+    if (onSelect) {
+      onSelect(theme);
+    }
+  };
+
+  return (
+    <>
+      {themes.map((theme, i) => (
+        <button
+          key={`${name}-${i}`}
+          onClick={() => handleSelect(theme)}
+          style={
+            theme.name === activeTheme.name ? activeButtonStyle : buttonStyle
+          }
+        >
+          <span>{theme.name}</span>
+        </button>
+      ))}
+    </>
+  );
+};
+export default ThemePicker;