diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
index 2f98825a..f1a0315d 100644
--- a/src/lib/core/Plot.svelte
+++ b/src/lib/core/Plot.svelte
@@ -92,12 +92,14 @@
         class: className = '',
         css = DEFAULTS.css,
         width: fixedWidth,
+        theme,
         ...initialOpts
     }: Partial<PlotOptions> = $props();
 
     let width = $state(DEFAULTS.initialWidth);
 
     setContext('svelteplot/_defaults', DEFAULTS);
+    setContext('svelteplot/theme', theme);
 
     // information that influences the default plot options
     type PlotOptionsParameters = {
diff --git a/src/lib/index.ts b/src/lib/index.ts
index b6db48f5..454f0f7d 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,6 +1,8 @@
 export { default as Plot } from './Plot.svelte';
 export { default as PlotCore } from './core/Plot.svelte';
 
+export { demoTheme } from './themes/demoTheme';
+
 export * from './marks/index.js';
 export * from './transforms/index.js';
 
diff --git a/src/lib/marks/AreaY.svelte b/src/lib/marks/AreaY.svelte
index e607e40a..ed13992a 100644
--- a/src/lib/marks/AreaY.svelte
+++ b/src/lib/marks/AreaY.svelte
@@ -4,6 +4,7 @@
     import { stackY } from '$lib/transforms/stack.js';
     import { recordizeY } from '$lib/transforms/recordize.js';
     import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+    import { getContext } from 'svelte';
 
     /**
      * AreaY mark foo
@@ -19,7 +20,10 @@
         y?: ChannelAccessor;
     } & AreaMarkProps;
 
-    let { data, stack, ...options }: AreaYProps = $props();
+    let { data, stack, ...opts }: AreaYProps = $props();
+
+    const theme = getContext('svelteplot/theme');
+    const options = $derived({...(theme?.marks?.areaY || {}), ...opts})
 
     const args = $derived(
         renameChannels<AreaYProps>(
diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
index 45cf8caf..96c1b583 100644
--- a/src/lib/marks/AxisX.svelte
+++ b/src/lib/marks/AxisX.svelte
@@ -42,6 +42,9 @@
         tickClass?: ConstantAccessor<string>;
     };
 
+    const theme = getContext('svelteplot/theme');
+
+    const p = $props();
     let {
         data = [],
         automatic = false,
@@ -56,7 +59,7 @@
         tickFormat,
         tickClass,
         ...options
-    }: AxisXProps = $props();
+    }: AxisXProps = { ...(theme?.marks?.axisX || {}), ...p };
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
index 88915d05..784497ff 100644
--- a/src/lib/marks/AxisY.svelte
+++ b/src/lib/marks/AxisY.svelte
@@ -40,6 +40,8 @@
         tickClass?: ConstantAccessor<string>;
     };
 
+    const theme = getContext('svelteplot/theme');
+    const p = $props();
     let {
         data = [],
         automatic = false,
@@ -53,7 +55,7 @@
         tickFormat,
         tickClass,
         ...options
-    }: AxisYProps = $props();
+    }: AxisYProps = { ...(theme?.marks?.axisY || {}), ...p };
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/Dot.svelte b/src/lib/marks/Dot.svelte
index f7189ec7..317b8b2d 100644
--- a/src/lib/marks/Dot.svelte
+++ b/src/lib/marks/Dot.svelte
@@ -49,9 +49,12 @@
         inParams = undefined,
         out: tOut = undefined,
         outParams = undefined,
-        ...options
+        ...opts
     }: DotProps = $props();
 
+    const theme = getContext('svelteplot/theme');
+    const options = $derived({...(theme?.marks?.dot || {}), ...opts})
+
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
diff --git a/src/lib/marks/Line.svelte b/src/lib/marks/Line.svelte
index 9c54ffff..feb8dc59 100644
--- a/src/lib/marks/Line.svelte
+++ b/src/lib/marks/Line.svelte
@@ -67,9 +67,12 @@
         canvas = false,
         class: className = null,
         lineClass = null,
-        ...options
+        ...opts
     }: LineMarkProps = $props();
 
+    const theme = getContext('svelteplot/theme');
+    const options = $derived({...(theme?.marks?.line || {}), ...opts})
+
     const args = $derived(sort(recordizeXY({ data, ...options })));
 
     function groupIndex(data: ScaledDataRecord[], groupByKey) {
diff --git a/src/lib/marks/RuleX.svelte b/src/lib/marks/RuleX.svelte
index ad0fbcce..b66d45b5 100644
--- a/src/lib/marks/RuleX.svelte
+++ b/src/lib/marks/RuleX.svelte
@@ -24,7 +24,14 @@
         dy?: ConstantAccessor<number>;
     };
 
-    let { data = [{}], class: className = null, ...options }: RuleXMarkProps = $props();
+    let {
+        data = [{}],
+        class: className = null,
+        ...opts
+    }: RuleXMarkProps = $props();
+
+    const theme = getContext('svelteplot/theme');
+    const options = $derived({...(theme?.marks?.ruleX || {}), ...opts})
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/RuleY.svelte b/src/lib/marks/RuleY.svelte
index 4312d1e6..2133d8ab 100644
--- a/src/lib/marks/RuleY.svelte
+++ b/src/lib/marks/RuleY.svelte
@@ -24,7 +24,14 @@
         dy?: ConstantAccessor<number>;
     };
 
-    let { data = [{}], class: className = null, ...options }: RuleYMarkProps = $props();
+    let {
+        data = [{}],
+        class: className = null,
+        ...opts
+    }: RuleYMarkProps = $props();
+
+    const theme = getContext('svelteplot/theme');
+    const options = $derived({...(theme?.marks?.ruleY || {}), ...opts})
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/themes/demoTheme.js b/src/lib/themes/demoTheme.js
new file mode 100644
index 00000000..856f60a9
--- /dev/null
+++ b/src/lib/themes/demoTheme.js
@@ -0,0 +1,52 @@
+import { get } from 'svelte/store';
+
+export const demoTheme = {
+    marks: {
+        axisX: {
+            textPadding: 0,
+            tickSize: 0,
+            labelAnchor: 'top',
+            labelArrow: 'none',
+            labelOffset: 0,
+            lineAnchor: 'bottom'
+        },
+
+        axisY: {
+            textAnchor: 'start',
+            // textPadding: 0,
+            tickSize: 0,
+            labelAnchor: 'top',
+            labelArrow: 'none',
+            //  labelOffset: 0,
+            lineAnchor: 'bottom',
+            dy: -4,
+            dx: 8
+        },
+
+        dot: {
+            stroke: null,
+            fill: '#007acc', //get(currentTheme).color.data.primary,
+            fillOpacity: 0.7,
+            strokeWidth: 2,
+            r: 2
+        },
+
+        line: {
+            stroke: '#007acc',
+            strokeWidth: 2
+        },
+        ruleX: {
+            stroke: '#007acc'
+        },
+        ruleY: {
+            stroke: '#007acc'
+        },
+
+        areaY: {
+            stroke: '#007acc',
+            strokeWidth: 0,
+            fill: '#007acc',
+            fillOpacity: 0.2
+        }
+    }
+};
diff --git a/src/routes/why-svelteplot/+page.md b/src/routes/why-svelteplot/+page.md
index b0fb163b..d17f0e11 100644
--- a/src/routes/why-svelteplot/+page.md
+++ b/src/routes/why-svelteplot/+page.md
@@ -13,12 +13,16 @@ This means there is no "scatterplot" component in SveltePlot, but you can use th
 
 ```svelte live
 <script>
-    import { Plot, Dot } from 'svelteplot';
+    import { demoTheme, Plot, Dot } from 'svelteplot';
     import { page } from '$app/state';
     let { penguins } = $derived(page.data.data);
 </script>
 
-<Plot grid color={{ legend: true }} testid="penguins">
+<Plot
+    grid
+    color={{ legend: true }}
+    testid="penguins"
+    theme={demoTheme}>
     <Dot
         data={penguins}
         x="culmen_length_mm"
@@ -45,7 +49,13 @@ You can think of marks as the building blocks for your visualizations -- or the
 
 ```svelte live
 <script>
-    import { Plot, Dot, GridY, AxisX } from 'svelteplot';
+    import {
+        demoTheme,
+        Plot,
+        Dot,
+        GridY,
+        AxisX
+    } from 'svelteplot';
     import { page } from '$app/state';
     const { languages } = $derived(page.data.data);
 </script>
@@ -53,10 +63,11 @@ You can think of marks as the building blocks for your visualizations -- or the
 <Plot
     x={{
         type: 'log',
-        insetLeft: 20,
+        insetLeft: 40,
         insetRight: 20,
         axis: 'top'
     }}
+    theme={demoTheme}
     y={{ type: 'point', label: '' }}>
     <GridY strokeDasharray="1,3" strokeOpacity="0.5" />
     <Dot
@@ -65,16 +76,16 @@ You can think of marks as the building blocks for your visualizations -- or the
         )}
         x="Total speakers"
         y="Language"
-        fill
         sort={{ channel: '-x' }} />
 </Plot>
 ```
 
 ```svelte
 <Plot
+    theme={demoTheme}
     x={{
         type: 'log',
-        insetLeft: 20,
+        insetLeft: 40,
         insetRight: 20,
         axis: 'top'
     }}
@@ -86,7 +97,6 @@ You can think of marks as the building blocks for your visualizations -- or the
         data={languages}
         x="Total speakers"
         y="Language"
-        fill
         sort={{ channel: '-x' }} />
 </Plot>
 ```
@@ -97,7 +107,13 @@ This makes it a lot easier to iterate over different ideas for visualizations. F
 
 ```svelte live
 <script>
-    import { Plot, Dot, Line, GridY } from 'svelteplot';
+    import {
+        demoTheme,
+        Plot,
+        Dot,
+        Line,
+        GridY
+    } from 'svelteplot';
     import { page } from '$app/state';
     let { languages: allLanguages } = $derived(
         page.data.data
@@ -110,10 +126,11 @@ This makes it a lot easier to iterate over different ideas for visualizations. F
 </script>
 
 <Plot
+    theme={demoTheme}
     x={{
         type: 'log',
         axis: 'top',
-        insetLeft: 20,
+        insetLeft: 40,
         insetRight: 20
     }}
     y={{ type: 'point', label: '' }}>
@@ -127,7 +144,6 @@ This makes it a lot easier to iterate over different ideas for visualizations. F
         data={languages}
         x="Total speakers"
         y="Language"
-        fill
         sort={{ channel: '-x' }} />
 </Plot>
 ```
@@ -144,7 +160,6 @@ This makes it a lot easier to iterate over different ideas for visualizations. F
         data={languages}
         x="Total speakers"
         y="Language"
-        fill
         sort={{ channel: '-x' }} />
 </Plot>
 ```
@@ -154,6 +169,7 @@ And if we wanted to add uncertainty ranges, we can add a [Rule mark](/marks/rule
 ```svelte live
 <script>
     import {
+        demoTheme,
         Plot,
         Dot,
         Line,
@@ -173,10 +189,11 @@ And if we wanted to add uncertainty ranges, we can add a [Rule mark](/marks/rule
 </script>
 
 <Plot
+    theme={demoTheme}
     x={{
         type: 'log',
         axis: 'top',
-        insetLeft: 20,
+        insetLeft: 40,
         insetRight: 20
     }}
     y={{ type: 'point', label: '' }}>
@@ -198,7 +215,6 @@ And if we wanted to add uncertainty ranges, we can add a [Rule mark](/marks/rule
         data={languages}
         x="Total speakers"
         y="Language"
-        fill
         sort={{ channel: '-x' }} />
 </Plot>
 ```
@@ -219,7 +235,7 @@ Take the following example, where you can filter the data using the [filter](/tr
 
 ```svelte live
 <script>
-    import { Plot, Dot } from 'svelteplot';
+    import { demoTheme, Plot, Dot } from 'svelteplot';
     import { Slider } from '$lib/ui';
     import { page } from '$app/state';
     const { cars } = $derived(page.data.data);
@@ -233,8 +249,13 @@ Take the following example, where you can filter the data using the [filter](/tr
     label="min economy (mpg)"
     max={50} />
 
-<Plot grid testid="cars" color={{ type: 'linear' }}>
+<Plot
+    grid
+    testid="cars"
+    color={{ type: 'linear' }}
+    theme={demoTheme}>
     <Dot
+        fill={null}
         data={cars}
         filter={(d) => d['economy (mpg)'] > min}
         y="weight (lb)"
@@ -249,6 +270,7 @@ Here's an example where we're binding a live-updated dataset to a [Line mark](/m
 ```svelte live
 <script lang="ts">
     import {
+        demoTheme,
         Plot,
         LineY,
         RuleY,
@@ -292,6 +314,7 @@ Here's an example where we're binding a live-updated dataset to a [Line mark](/m
 </script>
 
 <Plot
+    theme={demoTheme}
     grid
     marginRight={10}
     marginLeft={35 + Math.log10(mag) * 5}
@@ -302,17 +325,8 @@ Here's an example where we're binding a live-updated dataset to a [Line mark](/m
     height={250}>
     <RuleY data={[0]} />
     {#if rand.length > 1}
-        <AreaY
-            data={rand}
-            x="x"
-            y="y"
-            fill="currentColor"
-            opacity={0.1} />
-        <LineY
-            data={rand}
-            x="x"
-            y="y"
-            stroke="currentColor" />
+        <AreaY data={rand} x="x" y="y" />
+        <LineY data={rand} x="x" y="y" />
         <Dot
             data={[rand.at(-1)]}
             x="x"
@@ -405,7 +419,7 @@ You can extend SveltePlot by injecting regular Svelte snippets. For instance, th
 
 ```svelte live
 <script lang="ts">
-    import { Plot, Line } from 'svelteplot';
+    import { demoTheme, Plot, Line } from 'svelteplot';
     import { fly, fade } from 'svelte/transition';
 
     import { page } from '$app/state';
@@ -421,7 +435,7 @@ You can extend SveltePlot by injecting regular Svelte snippets. For instance, th
     });
 </script>
 
-<Plot grid height={300}>
+<Plot grid height={300} theme={demoTheme}>
     <Line
         data={aapl.slice(-40)}
         curve="basis"

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/59.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/59.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/59.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/59.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>