From d381fd15758081540e1c60e93e348a1b2ab471bc Mon Sep 17 00:00:00 2001
From: Andrei Gherghescu <8067229+andrei-ng@users.noreply.github.com>
Date: Thu, 19 Jun 2025 18:44:15 +0100
Subject: [PATCH 1/2] adding extra themes

Signed-off-by: Andrei Gherghescu <8067229+andrei-ng@users.noreply.github.com>
---
 examples/themes/Cargo.toml               |  10 +
 examples/themes/assets/gapminder2007.csv | 143 ++++++++++++
 examples/themes/src/main.rs              | 154 +++++++++++++
 plotly/src/layout/themes.rs              | 278 ++++++++++++++++++++++-
 4 files changed, 583 insertions(+), 2 deletions(-)
 create mode 100644 examples/themes/Cargo.toml
 create mode 100644 examples/themes/assets/gapminder2007.csv
 create mode 100644 examples/themes/src/main.rs

diff --git a/examples/themes/Cargo.toml b/examples/themes/Cargo.toml
new file mode 100644
index 00000000..421b4dbf
--- /dev/null
+++ b/examples/themes/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "themes"
+version = "0.1.0"
+authors = ["Andrei Gherghescu andrei-ng@protonmail.com"]
+edition = "2021"
+
+[dependencies]
+ndarray = "0.16"
+csv = "1.1"
+plotly = { path = "../../plotly" }
diff --git a/examples/themes/assets/gapminder2007.csv b/examples/themes/assets/gapminder2007.csv
new file mode 100644
index 00000000..044ac396
--- /dev/null
+++ b/examples/themes/assets/gapminder2007.csv
@@ -0,0 +1,143 @@
+country,pop,continent,lifeExp,gdpPercap
+Afghanistan,31889923.0,Asia,43.828,974.5803384
+Albania,3600523.0,Europe,76.423,5937.029525999999
+Algeria,33333216.0,Africa,72.301,6223.367465
+Angola,12420476.0,Africa,42.731,4797.231267
+Argentina,40301927.0,Americas,75.32,12779.379640000001
+Australia,20434176.0,Oceania,81.235,34435.367439999995
+Austria,8199783.0,Europe,79.829,36126.4927
+Bahrain,708573.0,Asia,75.635,29796.048339999998
+Bangladesh,150448339.0,Asia,64.062,1391.253792
+Belgium,10392226.0,Europe,79.441,33692.60508
+Benin,8078314.0,Africa,56.728,1441.284873
+Bolivia,9119152.0,Americas,65.554,3822.1370840000004
+Bosnia and Herzegovina,4552198.0,Europe,74.852,7446.298803
+Botswana,1639131.0,Africa,50.728,12569.851770000001
+Brazil,190010647.0,Americas,72.39,9065.800825
+Bulgaria,7322858.0,Europe,73.005,10680.79282
+Burkina Faso,14326203.0,Africa,52.295,1217.032994
+Burundi,8390505.0,Africa,49.58,430.07069160000003
+Cambodia,14131858.0,Asia,59.723,1713.7786859999999
+Cameroon,17696293.0,Africa,50.43,2042.0952399999999
+Canada,33390141.0,Americas,80.653,36319.235010000004
+Central African Republic,4369038.0,Africa,44.74100000000001,706.016537
+Chad,10238807.0,Africa,50.651,1704.0637239999999
+Chile,16284741.0,Americas,78.553,13171.63885
+China,1318683096.0,Asia,72.961,4959.1148539999995
+Colombia,44227550.0,Americas,72.889,7006.580419
+Comoros,710960.0,Africa,65.152,986.1478792000001
+"Congo, Dem. Rep.",64606759.0,Africa,46.461999999999996,277.55185869999997
+"Congo, Rep.",3800610.0,Africa,55.321999999999996,3632.557798
+Costa Rica,4133884.0,Americas,78.782,9645.06142
+Cote d'Ivoire,18013409.0,Africa,48.328,1544.750112
+Croatia,4493312.0,Europe,75.748,14619.222719999998
+Cuba,11416987.0,Americas,78.273,8948.102923
+Czech Republic,10228744.0,Europe,76.486,22833.30851
+Denmark,5468120.0,Europe,78.332,35278.41874
+Djibouti,496374.0,Africa,54.791000000000004,2082.4815670000003
+Dominican Republic,9319622.0,Americas,72.235,6025.374752000001
+Ecuador,13755680.0,Americas,74.994,6873.262326000001
+Egypt,80264543.0,Africa,71.33800000000001,5581.180998
+El Salvador,6939688.0,Americas,71.878,5728.353514
+Equatorial Guinea,551201.0,Africa,51.57899999999999,12154.08975
+Eritrea,4906585.0,Africa,58.04,641.3695236000001
+Ethiopia,76511887.0,Africa,52.946999999999996,690.8055759
+Finland,5238460.0,Europe,79.313,33207.0844
+France,61083916.0,Europe,80.657,30470.0167
+Gabon,1454867.0,Africa,56.735,13206.48452
+Gambia,1688359.0,Africa,59.448,752.7497265
+Germany,82400996.0,Europe,79.406,32170.37442
+Ghana,22873338.0,Africa,60.022,1327.60891
+Greece,10706290.0,Europe,79.483,27538.41188
+Guatemala,12572928.0,Americas,70.259,5186.050003
+Guinea,9947814.0,Africa,56.007,942.6542111
+Guinea-Bissau,1472041.0,Africa,46.388000000000005,579.2317429999999
+Haiti,8502814.0,Americas,60.916000000000004,1201.637154
+Honduras,7483763.0,Americas,70.19800000000001,3548.3308460000003
+"Hong Kong, China",6980412.0,Asia,82.208,39724.97867
+Hungary,9956108.0,Europe,73.33800000000001,18008.94444
+Iceland,301931.0,Europe,81.757,36180.789189999996
+India,1110396331.0,Asia,64.69800000000001,2452.210407
+Indonesia,223547000.0,Asia,70.65,3540.6515640000002
+Iran,69453570.0,Asia,70.964,11605.71449
+Iraq,27499638.0,Asia,59.545,4471.061906
+Ireland,4109086.0,Europe,78.885,40675.99635
+Israel,6426679.0,Asia,80.745,25523.2771
+Italy,58147733.0,Europe,80.546,28569.7197
+Jamaica,2780132.0,Americas,72.567,7320.880262000001
+Japan,127467972.0,Asia,82.603,31656.06806
+Jordan,6053193.0,Asia,72.535,4519.461171
+Kenya,35610177.0,Africa,54.11,1463.249282
+"Korea, Dem. Rep.",23301725.0,Asia,67.297,1593.06548
+"Korea, Rep.",49044790.0,Asia,78.623,23348.139730000003
+Kuwait,2505559.0,Asia,77.58800000000001,47306.98978
+Lebanon,3921278.0,Asia,71.993,10461.05868
+Lesotho,2012649.0,Africa,42.592,1569.331442
+Liberia,3193942.0,Africa,45.678000000000004,414.5073415
+Libya,6036914.0,Africa,73.952,12057.49928
+Madagascar,19167654.0,Africa,59.443000000000005,1044.770126
+Malawi,13327079.0,Africa,48.303000000000004,759.3499101
+Malaysia,24821286.0,Asia,74.241,12451.6558
+Mali,12031795.0,Africa,54.467,1042.581557
+Mauritania,3270065.0,Africa,64.164,1803.1514960000002
+Mauritius,1250882.0,Africa,72.801,10956.99112
+Mexico,108700891.0,Americas,76.195,11977.57496
+Mongolia,2874127.0,Asia,66.803,3095.7722710000003
+Montenegro,684736.0,Europe,74.543,9253.896111
+Morocco,33757175.0,Africa,71.164,3820.17523
+Mozambique,19951656.0,Africa,42.082,823.6856205
+Myanmar,47761980.0,Asia,62.068999999999996,944.0
+Namibia,2055080.0,Africa,52.906000000000006,4811.060429
+Nepal,28901790.0,Asia,63.785,1091.359778
+Netherlands,16570613.0,Europe,79.762,36797.93332
+New Zealand,4115771.0,Oceania,80.204,25185.00911
+Nicaragua,5675356.0,Americas,72.899,2749.320965
+Niger,12894865.0,Africa,56.867,619.6768923999999
+Nigeria,135031164.0,Africa,46.858999999999995,2013.9773050000001
+Norway,4627926.0,Europe,80.196,49357.19017
+Oman,3204897.0,Asia,75.64,22316.19287
+Pakistan,169270617.0,Asia,65.483,2605.94758
+Panama,3242173.0,Americas,75.53699999999999,9809.185636
+Paraguay,6667147.0,Americas,71.752,4172.838464
+Peru,28674757.0,Americas,71.421,7408.905561
+Philippines,91077287.0,Asia,71.688,3190.481016
+Poland,38518241.0,Europe,75.563,15389.924680000002
+Portugal,10642836.0,Europe,78.098,20509.64777
+Puerto Rico,3942491.0,Americas,78.74600000000001,19328.70901
+Reunion,798094.0,Africa,76.442,7670.122558
+Romania,22276056.0,Europe,72.476,10808.47561
+Rwanda,8860588.0,Africa,46.242,863.0884639000001
+Sao Tome and Principe,199579.0,Africa,65.528,1598.435089
+Saudi Arabia,27601038.0,Asia,72.777,21654.83194
+Senegal,12267493.0,Africa,63.062,1712.4721359999999
+Serbia,10150265.0,Europe,74.002,9786.534714
+Sierra Leone,6144562.0,Africa,42.568000000000005,862.5407561000001
+Singapore,4553009.0,Asia,79.972,47143.179639999995
+Slovak Republic,5447502.0,Europe,74.663,18678.31435
+Slovenia,2009245.0,Europe,77.926,25768.25759
+Somalia,9118773.0,Africa,48.159,926.1410683
+South Africa,43997828.0,Africa,49.339,9269.657808
+Spain,40448191.0,Europe,80.941,28821.0637
+Sri Lanka,20378239.0,Asia,72.396,3970.0954070000003
+Sudan,42292929.0,Africa,58.556000000000004,2602.394995
+Swaziland,1133066.0,Africa,39.613,4513.480643
+Sweden,9031088.0,Europe,80.884,33859.74835
+Switzerland,7554661.0,Europe,81.70100000000001,37506.419069999996
+Syria,19314747.0,Asia,74.143,4184.548089
+Taiwan,23174294.0,Asia,78.4,28718.27684
+Tanzania,38139640.0,Africa,52.516999999999996,1107.482182
+Thailand,65068149.0,Asia,70.616,7458.3963269999995
+Togo,5701579.0,Africa,58.42,882.9699437999999
+Trinidad and Tobago,1056608.0,Americas,69.819,18008.50924
+Tunisia,10276158.0,Africa,73.923,7092.923025
+Turkey,71158647.0,Europe,71.777,8458.276384
+Uganda,29170398.0,Africa,51.542,1056.3801210000001
+United Kingdom,60776238.0,Europe,79.425,33203.26128
+United States,301139947.0,Americas,78.242,42951.65309
+Uruguay,3447496.0,Americas,76.384,10611.46299
+Venezuela,26084662.0,Americas,73.747,11415.805690000001
+Vietnam,85262356.0,Asia,74.249,2441.576404
+West Bank and Gaza,4018332.0,Asia,73.422,3025.349798
+"Yemen, Rep.",22211743.0,Asia,62.698,2280.769906
+Zambia,11746035.0,Africa,42.38399999999999,1271.211593
+Zimbabwe,12311143.0,Africa,43.486999999999995,469.70929810000007
diff --git a/examples/themes/src/main.rs b/examples/themes/src/main.rs
new file mode 100644
index 00000000..f185e332
--- /dev/null
+++ b/examples/themes/src/main.rs
@@ -0,0 +1,154 @@
+#![allow(dead_code)]
+
+use plotly::{
+    common::{Marker, Mode, Title},
+    layout::Layout,
+    Plot, Scatter,
+};
+
+use plotly::layout::themes::BuiltinTheme;
+
+use std::fs::File;
+use std::io::BufReader;
+
+use csv::ReaderBuilder;
+
+// Read Gapminder 2007 data from CSV
+fn read_gapminder_data_from_csv() -> (Vec<f64>, Vec<f64>, Vec<f64>, Vec<String>, Vec<String>) {
+    let file = File::open("assets/gapminder2007.csv").expect("Cannot open gapminder2007.csv");
+    let mut rdr = ReaderBuilder::new().has_headers(true).from_reader(BufReader::new(file));
+    let mut gdp_per_capita = Vec::new();
+    let mut life_expectancy = Vec::new();
+    let mut population = Vec::new();
+    let mut continents = Vec::new();
+    let mut countries = Vec::new();
+    for result in rdr.records() {
+        let record = result.expect("CSV record error");
+        countries.push(record[0].to_string());
+        population.push(record[1].parse::<f64>().unwrap_or(0.0));
+        continents.push(record[2].to_string());
+        life_expectancy.push(record[3].parse::<f64>().unwrap_or(0.0));
+        gdp_per_capita.push(record[4].parse::<f64>().unwrap_or(0.0));
+    }
+    (gdp_per_capita, life_expectancy, population, continents, countries)
+}
+
+fn create_gapminder_scatter_plot(theme: BuiltinTheme, show: bool) {
+    let (gdp, life_exp, pop, continents, countries) = read_gapminder_data_from_csv();
+
+    let mut plot = Plot::new();
+    let continent_colors = vec![
+        ("Asia", "#1f77b4"),
+        ("Europe", "#ff7f0e"),
+        ("Africa", "#2ca02c"),
+        ("Americas", "#d62728"),
+        ("Oceania", "#9467bd"),
+    ];
+
+    for (continent, color) in &continent_colors {
+        let indices: Vec<usize> = continents
+            .iter()
+            .enumerate()
+            .filter(|(_, c)| c == continent)
+            .map(|(idx, _)| idx)
+            .collect();
+        if indices.is_empty() {
+            continue;
+        }
+        let continent_gdp: Vec<f64> = indices.iter().map(|&idx| gdp[idx]).collect();
+        let continent_life: Vec<f64> = indices.iter().map(|&idx| life_exp[idx]).collect();
+        let continent_pop: Vec<f64> = indices.iter().map(|&idx| pop[idx]).collect();
+        let continent_countries: Vec<String> = indices.iter().map(|&idx| countries[idx].clone()).collect();
+        let trace = Scatter::new(continent_gdp, continent_life)
+            .mode(Mode::Markers)
+            .name(continent.to_string())
+            .text_array(continent_countries)
+            .marker(
+                Marker::new()
+                    .size_array(
+                        continent_pop
+                            .iter()
+                            .map(|&p| ((p / 1_000_000.0).min(60.0)) as usize)
+                            .collect(),
+                    )
+                    .color(*color)
+                    .opacity(0.6)
+                    .line(plotly::common::Line::new().width(1.0).color("white")),
+            );
+        plot.add_trace(trace);
+    }
+
+    let theme_template = theme.build();
+    plot.set_layout(
+        Layout::new()
+            .template(theme_template)
+            .title(Title::from(format!(
+                "Gapminder 2007: '{}' theme",
+                theme_name(theme)
+            )))
+            .x_axis(
+                plotly::layout::Axis::new()
+                    .title("GDP per capita (log scale)")
+                    .type_(plotly::layout::AxisType::Log),
+            )
+            .y_axis(plotly::layout::Axis::new().title("Life Expectancy"))
+            .width(800)
+            .height(600)
+            .show_legend(true),
+    );
+
+    let path = write_example_to_html(
+        &plot,
+        &format!("gapminder_{}", theme_name(theme).to_lowercase()),
+    );
+    if show {
+        plot.show_html(path);
+    }
+}
+
+fn theme_name(theme: BuiltinTheme) -> &'static str {
+    match theme {
+        BuiltinTheme::Default => "plotly",
+        BuiltinTheme::PlotlyWhite => "plotly_white",
+        BuiltinTheme::PlotlyDark => "plotly_dark",
+        BuiltinTheme::Seaborn => "seaborn",
+        BuiltinTheme::SeabornWhitegrid => "seaborn_whitegrid",
+        BuiltinTheme::SeabornDark => "seaborn_dark",
+        BuiltinTheme::Matplotlib => "matplotlib",
+        BuiltinTheme::Plotnine => "plotnine",
+    }
+}
+
+fn write_example_to_html(plot: &Plot, name: &str) -> String {
+    std::fs::create_dir_all("./output").unwrap();
+    // Write inline HTML
+    let html = plot.to_inline_html(Some(name));
+    let path = format!("./output/inline_{}.html", name);
+    std::fs::write(path, html).unwrap();
+    // Write standalone HTML
+    let path = format!("./output/{}.html", name);
+    plot.write_html(&path);
+    path
+}
+
+fn main() {
+    // Create Gapminder-style plots with different themes, matching the Plotly documentation
+    // Based on: https://plotly.com/python/templates/
+
+    // Create plots for each theme
+    let themes = vec![
+        BuiltinTheme::Default,
+        BuiltinTheme::PlotlyWhite,
+        BuiltinTheme::PlotlyDark,
+        BuiltinTheme::Seaborn,
+        BuiltinTheme::Matplotlib,
+        BuiltinTheme::Plotnine,
+    ];
+
+    for theme in themes {
+        create_gapminder_scatter_plot(theme, false);
+    }
+
+    // Show one example (the default theme)
+    create_gapminder_scatter_plot(BuiltinTheme::Default, true);
+}
diff --git a/plotly/src/layout/themes.rs b/plotly/src/layout/themes.rs
index 6d010295..ec08c056 100644
--- a/plotly/src/layout/themes.rs
+++ b/plotly/src/layout/themes.rs
@@ -2,7 +2,7 @@ use once_cell::sync::Lazy;
 
 use crate::{
     common::{ColorBar, ColorScale, ColorScaleElement, Font, Label, Title},
-    layout::{Axis, ColorAxis, HoverMode, LayoutColorScale, LayoutTemplate, Template},
+    layout::{Axis, ColorAxis, HoverMode, LayoutColorScale, LayoutTemplate, Template, TicksDirection},
 };
 
 pub static DEFAULT: Lazy<Template> = Lazy::new(|| {
@@ -86,7 +86,7 @@ pub static PLOTLY_WHITE: Lazy<Template> = Lazy::new(|| {
 
 pub static PLOTLY_DARK: Lazy<Template> = Lazy::new(|| {
     // the following are unimplemented: layout.autotypenumbers, layout.polar,
-    // layout.ternary, layout.scene, layout.geo, layout.mapbox, layout.*defaults
+    // layout.ternary, layout.scene, layout.*defaults
     let layout_template = LayoutTemplate::new()
         .color_axis(ColorAxis::new().color_bar(ColorBar::new().outline_width(0)))
         .color_scale(
@@ -160,6 +160,199 @@ pub static PLOTLY_DARK: Lazy<Template> = Lazy::new(|| {
     Template::new().layout(layout_template)
 });
 
+pub static SEABORN: Lazy<Template> = Lazy::new(|| {
+    // Based on seaborn's "darkgrid" style and "deep" color palette
+    let layout_template = LayoutTemplate::new()
+        .font(Font::new().family("DejaVu Sans").size(12).color("#333333"))
+        .colorway(vec![
+            "#4c72b0", "#55a868", "#c44e52", "#8172b2", "#ccb974", "#64b5cd",
+        ])
+        .paper_background_color("#EAEAF2")
+        .plot_background_color("#EAEAF2")
+        .hover_label(Label::new().align("left"))
+        .hover_mode(HoverMode::Closest)
+        .x_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#D3D3D3")
+                .line_color("#CCCCCC")
+                .zero_line_color("#D3D3D3")
+                .zero_line_width(1),
+        )
+        .y_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#D3D3D3")
+                .line_color("#CCCCCC")
+                .zero_line_color("#D3D3D3")
+                .zero_line_width(1),
+        );
+    Template::new().layout(layout_template)
+});
+
+pub static SEABORN_WHITEGRID: Lazy<Template> = Lazy::new(|| {
+    // Seaborn "whitegrid" style
+    let layout_template = LayoutTemplate::new()
+        .font(Font::new().family("DejaVu Sans").size(12).color("#333333"))
+        .colorway(vec![
+            "#4c72b0", "#55a868", "#c44e52", "#8172b2", "#ccb974", "#64b5cd",
+        ])
+        .paper_background_color("#FFFFFF")
+        .plot_background_color("#FFFFFF")
+        .hover_label(Label::new().align("left"))
+        .hover_mode(HoverMode::Closest)
+        .x_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#E5E5E5")
+                .line_color("#CCCCCC")
+                .zero_line_color("#E5E5E5")
+                .zero_line_width(1),
+        )
+        .y_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#E5E5E5")
+                .line_color("#CCCCCC")
+                .zero_line_color("#E5E5E5")
+                .zero_line_width(1),
+        );
+    Template::new().layout(layout_template)
+});
+
+pub static SEABORN_DARK: Lazy<Template> = Lazy::new(|| {
+    // Seaborn "dark" style
+    let layout_template = LayoutTemplate::new()
+        .font(Font::new().family("DejaVu Sans").size(12).color("#eaeaf2"))
+        .colorway(vec![
+            "#4c72b0", "#55a868", "#c44e52", "#8172b2", "#ccb974", "#64b5cd",
+        ])
+        .paper_background_color("#222222")
+        .plot_background_color("#222222")
+        .hover_label(Label::new().align("left"))
+        .hover_mode(HoverMode::Closest)
+        .x_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#444444")
+                .line_color("#888888")
+                .zero_line_color("#444444")
+                .zero_line_width(1),
+        )
+        .y_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#444444")
+                .line_color("#888888")
+                .zero_line_color("#444444")
+                .zero_line_width(1),
+        );
+    Template::new().layout(layout_template)
+});
+
+pub static MATPLOTLIB: Lazy<Template> = Lazy::new(|| {
+    // Based on matplotlib's classic style with publication-ready formatting
+    // Inspired by: https://medium.com/swlh/formatting-a-plotly-figure-with-matplotlib-style-fa56ddd97539
+    let layout_template = LayoutTemplate::new()
+        .font(Font::new().family("Arial").size(26).color("black"))
+        .colorway(vec![
+            "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b",
+            "#e377c2", "#7f7f7f", "#bcbd22", "#17becf",
+        ])
+        .paper_background_color("white")
+        .plot_background_color("white")
+        .hover_label(Label::new().align("left"))
+        .hover_mode(HoverMode::Closest)
+        .x_axis(
+            Axis::new()
+                .auto_margin(true)
+                .show_line(true)
+                .line_color("black")
+                .line_width(2)
+                .ticks(TicksDirection::Outside)
+                .tick_width(2)
+                .tick_color("black")
+                .mirror(true)
+                .grid_color("#e5e5e5")
+                .zero_line_color("#e5e5e5")
+                .zero_line_width(1),
+        )
+        .y_axis(
+            Axis::new()
+                .auto_margin(true)
+                .show_line(true)
+                .line_color("black")
+                .line_width(2)
+                .ticks(TicksDirection::Outside)
+                .tick_width(2)
+                .tick_color("black")
+                .mirror(true)
+                .grid_color("#e5e5e5")
+                .zero_line_color("#e5e5e5")
+                .zero_line_width(1),
+        );
+    Template::new().layout(layout_template)
+});
+
+pub static PLOTNINE: Lazy<Template> = Lazy::new(|| {
+    // Based on plotnine's default theme (ggplot2-inspired)
+    let layout_template = LayoutTemplate::new()
+        .font(Font::new().family("DejaVu Sans").size(12).color("#525252"))
+        .colorway(vec![
+            "#F8766D", "#7CAE00", "#00BFC4", "#C77CFF", "#E58700", "#00B0F6", "#FF61C3",
+        ])
+        .paper_background_color("#EBEBEB")
+        .plot_background_color("#EBEBEB")
+        .hover_label(Label::new().align("left"))
+        .hover_mode(HoverMode::Closest)
+        .x_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#FFFFFF")
+                .line_color("#CCCCCC")
+                .zero_line_color("#FFFFFF")
+                .zero_line_width(1),
+        )
+        .y_axis(
+            Axis::new()
+                .auto_margin(true)
+                .grid_color("#FFFFFF")
+                .line_color("#CCCCCC")
+                .zero_line_color("#FFFFFF")
+                .zero_line_width(1),
+        );
+    Template::new().layout(layout_template)
+});
+
+/// Enum for all built-in themes.
+#[derive(Clone, Copy, Debug)]
+pub enum BuiltinTheme {
+    Default,
+    PlotlyWhite,
+    PlotlyDark,
+    Seaborn,
+    SeabornWhitegrid,
+    SeabornDark,
+    Matplotlib,
+    Plotnine,
+}
+
+impl BuiltinTheme {
+    /// Get a reference to the template for this theme.
+    pub fn build(&self) -> &'static Template {
+        match self {
+            BuiltinTheme::Default => &DEFAULT,
+            BuiltinTheme::PlotlyWhite => &PLOTLY_WHITE,
+            BuiltinTheme::PlotlyDark => &PLOTLY_DARK,
+            BuiltinTheme::Seaborn => &SEABORN,
+            BuiltinTheme::SeabornWhitegrid => &SEABORN_WHITEGRID,
+            BuiltinTheme::SeabornDark => &SEABORN_DARK,
+            BuiltinTheme::Matplotlib => &MATPLOTLIB,
+            BuiltinTheme::Plotnine => &PLOTNINE,
+        }
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -201,4 +394,85 @@ mod tests {
         let expected = r##"{"template":{"layout":{"title":{"x":0.05},"font":{"color":"#f2f5fa"}"##; // etc...
         assert!(plot.to_json().contains(expected));
     }
+
+    #[test]
+    fn seaborn() {
+        let template = &*SEABORN;
+        let layout = Layout::new().template(template);
+        let mut plot = Plot::new();
+        plot.set_layout(layout);
+        plot.add_trace(Bar::new(vec![0], vec![1]));
+
+        let expected = r##""paper_bgcolor":"#EAEAF2""##;
+        assert!(plot.to_json().contains(expected));
+    }
+
+    #[test]
+    fn seaborn_whitegrid() {
+        let template = &*SEABORN_WHITEGRID;
+        let layout = Layout::new().template(template);
+        let mut plot = Plot::new();
+        plot.set_layout(layout);
+        plot.add_trace(Bar::new(vec![0], vec![1]));
+
+        let expected = r##""paper_bgcolor":"#FFFFFF""##;
+        assert!(plot.to_json().contains(expected));
+    }
+
+    #[test]
+    fn seaborn_dark() {
+        let template = &*SEABORN_DARK;
+        let layout = Layout::new().template(template);
+        let mut plot = Plot::new();
+        plot.set_layout(layout);
+        plot.add_trace(Bar::new(vec![0], vec![1]));
+
+        let expected = r##""paper_bgcolor":"#222222""##;
+        assert!(plot.to_json().contains(expected));
+    }
+
+    #[test]
+    fn matplotlib() {
+        let template = &*MATPLOTLIB;
+        let layout = Layout::new().template(template);
+        let mut plot = Plot::new();
+        plot.set_layout(layout);
+        plot.add_trace(Bar::new(vec![0], vec![1]));
+
+        let expected = r##""paper_bgcolor":"#ffffff""##;
+        assert!(plot.to_json().contains(expected));
+    }
+
+    #[test]
+    fn plotnine() {
+        let template = &*PLOTNINE;
+        let layout = Layout::new().template(template);
+        let mut plot = Plot::new();
+        plot.set_layout(layout);
+        plot.add_trace(Bar::new(vec![0], vec![1]));
+
+        let expected = r##""paper_bgcolor":"#EBEBEB""##;
+        assert!(plot.to_json().contains(expected));
+    }
+
+    #[test]
+    fn theme_enum() {
+        for theme in [
+            BuiltinTheme::Default,
+            BuiltinTheme::PlotlyWhite,
+            BuiltinTheme::PlotlyDark,
+            BuiltinTheme::Seaborn,
+            BuiltinTheme::SeabornWhitegrid,
+            BuiltinTheme::SeabornDark,
+            BuiltinTheme::Matplotlib,
+            BuiltinTheme::Plotnine,
+        ] {
+            let template = theme.build();
+            let layout = Layout::new().template(template);
+            let mut plot = Plot::new();
+            plot.set_layout(layout);
+            plot.add_trace(Bar::new(vec![0], vec![1]));
+            assert!(!plot.to_json().is_empty());
+        }
+    }
 }

From bed9b917e5c7a57bc68c8bd4e6941efea46d891e Mon Sep 17 00:00:00 2001
From: Andrei Gherghescu <8067229+andrei-ng@users.noreply.github.com>
Date: Thu, 19 Jun 2025 20:15:15 +0100
Subject: [PATCH 2/2] refactor examples and add themes example to mdbook

Signed-off-by: Andrei Gherghescu <8067229+andrei-ng@users.noreply.github.com>
---
 .github/workflows/ci.yml                |   3 +
 docs/book/src/SUMMARY.md                |   1 +
 docs/book/src/recipes/themes.md         |  66 ++++++++
 examples/3d_charts/Cargo.toml           |   1 +
 examples/3d_charts/src/main.rs          |  13 +-
 examples/Cargo.toml                     |   2 +-
 examples/basic_charts/Cargo.toml        |   1 +
 examples/basic_charts/src/main.rs       |  13 +-
 examples/custom_controls/Cargo.toml     |   1 +
 examples/custom_controls/src/main.rs    |  13 +-
 examples/customization/Cargo.toml       |   1 +
 examples/customization/src/main.rs      |  13 +-
 examples/financial_charts/Cargo.toml    |   1 +
 examples/financial_charts/src/main.rs   |  13 +-
 examples/images/Cargo.toml              |   2 +
 examples/images/src/main.rs             |  13 +-
 examples/maps/Cargo.toml                |   1 +
 examples/maps/src/main.rs               |  13 +-
 examples/ndarray/Cargo.toml             |   1 +
 examples/ndarray/src/main.rs            |  13 +-
 examples/plotly_utils/Cargo.toml        |   7 +
 examples/plotly_utils/src/lib.rs        |  27 ++++
 examples/scientific_charts/Cargo.toml   |   1 +
 examples/scientific_charts/src/main.rs  |  13 +-
 examples/shapes/Cargo.toml              |   1 +
 examples/shapes/src/main.rs             |  13 +-
 examples/statistical_charts/Cargo.toml  |   1 +
 examples/statistical_charts/src/main.rs |  13 +-
 examples/subplots/Cargo.toml            |   1 +
 examples/subplots/src/main.rs           |  13 +-
 examples/themes/Cargo.toml              |   1 +
 examples/themes/src/main.rs             | 198 ++++++++++++++++--------
 plotly/src/common/mod.rs                |  12 +-
 plotly/src/layout/themes.rs             |  19 ++-
 34 files changed, 280 insertions(+), 225 deletions(-)
 create mode 100644 docs/book/src/recipes/themes.md
 create mode 100644 examples/plotly_utils/Cargo.toml
 create mode 100644 examples/plotly_utils/src/lib.rs

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c52e2db9..5322232e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -95,6 +95,7 @@ jobs:
           3d_charts,
           basic_charts,
           custom_controls,
+          customization,
           financial_charts,
           images,
           kaleido,
@@ -103,6 +104,7 @@ jobs:
           scientific_charts,
           shapes,
           subplots,
+          themes,
         ]
     runs-on: ubuntu-latest
     steps:
@@ -140,5 +142,6 @@ jobs:
           cd ${{ github.workspace }}/examples/3d_charts && cargo run
           cd ${{ github.workspace }}/examples/subplots && cargo run
           cd ${{ github.workspace }}/examples/shapes && cargo run
+          cd ${{ github.workspace }}/examples/themes && cargo run
       - name: Build book 
         run: mdbook build docs/book
\ No newline at end of file
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index 4b0e8577..1c996f7f 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -29,3 +29,4 @@
     - [Subplots](./recipes/subplots.md)
         - [Subplots](./recipes/subplots/subplots.md)
         - [Multiple Axes](./recipes/subplots/multiple_axes.md)
+    - [Themes](./recipes/themes.md)
diff --git a/docs/book/src/recipes/themes.md b/docs/book/src/recipes/themes.md
new file mode 100644
index 00000000..fa77b5b0
--- /dev/null
+++ b/docs/book/src/recipes/themes.md
@@ -0,0 +1,66 @@
+# Themes
+
+The complete source code for the following examples can also be found [here](https://github.com/plotly/plotly.rs/tree/main/examples/themes).
+
+# Use different theme templates
+
+Similar to [Plotly Python templates](https://plotly.com/python/templates/), plotly.rs provides several built-in themes that can be applied to your plots.
+
+```rust,no_run
+use plotly::{
+    common::{Marker, Mode, Title},
+    layout::{Layout, BuiltinTheme},
+    Plot, Scatter,
+};
+```
+
+The `to_inline_html` method is used to produce the html plot displayed in this page.
+
+## Default Theme (Plotly)
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotly.html}}
+
+## Plotly White Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotly_white.html}}
+
+## Plotly Dark Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotly_dark.html}}
+
+## Seaborn Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_seaborn.html}}
+
+## Matplotlib Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_matplotlib.html}}
+
+## Plotnine Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotnine.html}}
+
+## Available Themes
+
+The following built-in themes are available in plotly.rs:
+
+- `BuiltinTheme::Default` - Default Plotly theme
+- `BuiltinTheme::PlotlyWhite` - Clean white background theme
+- `BuiltinTheme::PlotlyDark` - Dark theme
+- `BuiltinTheme::Seaborn` - Seaborn-style theme
+- `BuiltinTheme::SeabornWhitegrid` - Seaborn with white grid
+- `BuiltinTheme::SeabornDark` - Dark Seaborn theme
+- `BuiltinTheme::Matplotlib` - Matplotlib-style theme
+- `BuiltinTheme::Plotnine` - Plotnine-style theme
+
+## Using Themes
+
+To apply a theme to your plot, use the `template()` method on the layout:
+
+```rust
+let theme = BuiltinTheme::Seaborn;
+let layout = Layout::new().template(theme.build());
+plot.set_layout(layout);
+```
+
+The example above uses real Gapminder 2007 data showing the relationship between GDP per capita, life expectancy, and population size across different continents, with marker sizes representing population and colors representing continents.
diff --git a/examples/3d_charts/Cargo.toml b/examples/3d_charts/Cargo.toml
index 01f56c64..c464f4b9 100644
--- a/examples/3d_charts/Cargo.toml
+++ b/examples/3d_charts/Cargo.toml
@@ -8,3 +8,4 @@ edition = "2021"
 ndarray = "0.16"
 rand = "0.9"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
diff --git a/examples/3d_charts/src/main.rs b/examples/3d_charts/src/main.rs
index 30e57baf..95b4d179 100644
--- a/examples/3d_charts/src/main.rs
+++ b/examples/3d_charts/src/main.rs
@@ -7,6 +7,7 @@ use plotly::{
     layout::{Axis, Camera, Layout, LayoutScene, Legend, Margin, ProjectionType},
     Mesh3D, Plot, Scatter3D, Surface,
 };
+use plotly_utils::write_example_to_html;
 use rand::Rng;
 
 // 3D Scatter Plots
@@ -259,18 +260,6 @@ fn colorscale_plot(show: bool, file_name: &str) {
 }
 // ANCHOR_END: colorscale_plot
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
     // Scatter3D Plots
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index b65c8592..7839492e 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -1,4 +1,4 @@
 [workspace]
-members = ["*"]
+members = ["*", "plotly_utils"]
 resolver = "2"
 exclude = ["jupyter", "target", "wasm-yew"]
diff --git a/examples/basic_charts/Cargo.toml b/examples/basic_charts/Cargo.toml
index c89e6adf..78118001 100644
--- a/examples/basic_charts/Cargo.toml
+++ b/examples/basic_charts/Cargo.toml
@@ -7,5 +7,6 @@ edition = "2021"
 [dependencies]
 ndarray = "0.16"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
 rand = "0.9"
 rand_distr = "0.5"
diff --git a/examples/basic_charts/src/main.rs b/examples/basic_charts/src/main.rs
index 16df3f72..3270dea1 100644
--- a/examples/basic_charts/src/main.rs
+++ b/examples/basic_charts/src/main.rs
@@ -15,6 +15,7 @@ use plotly::{
     traces::table::{Cells, Header},
     Bar, Pie, Plot, Sankey, Scatter, ScatterPolar, Table,
 };
+use plotly_utils::write_example_to_html;
 use rand_distr::{Distribution, Normal, Uniform};
 
 // Scatter Plots
@@ -996,18 +997,6 @@ fn grouped_donout_pie_charts(show: bool, file_name: &str) {
 }
 // ANCHOR_END: grouped_donout_pie_charts
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
 
diff --git a/examples/custom_controls/Cargo.toml b/examples/custom_controls/Cargo.toml
index 4d70ff5d..08ca3305 100644
--- a/examples/custom_controls/Cargo.toml
+++ b/examples/custom_controls/Cargo.toml
@@ -7,3 +7,4 @@ edition = "2021"
 [dependencies]
 itertools = "0.10"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
diff --git a/examples/custom_controls/src/main.rs b/examples/custom_controls/src/main.rs
index d243a640..49d4fc2c 100644
--- a/examples/custom_controls/src/main.rs
+++ b/examples/custom_controls/src/main.rs
@@ -9,6 +9,7 @@ use plotly::{
     },
     Bar, HeatMap, Layout, Plot,
 };
+use plotly_utils::write_example_to_html;
 
 /// Display a bar chart with an associated dropdown selector to show different
 /// data.
@@ -117,18 +118,6 @@ fn bar_chart_with_modifiable_bar_mode(show: bool, file_name: &str) {
 }
 // ANCHOR_END: colorscale_plot
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
 
diff --git a/examples/customization/Cargo.toml b/examples/customization/Cargo.toml
index 74bc5cd9..fa5f9a54 100644
--- a/examples/customization/Cargo.toml
+++ b/examples/customization/Cargo.toml
@@ -9,3 +9,4 @@ build_html = "2.5.0"
 rand = "0.9"
 ndarray = "0.16"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
diff --git a/examples/customization/src/main.rs b/examples/customization/src/main.rs
index f8b55e62..791eea82 100644
--- a/examples/customization/src/main.rs
+++ b/examples/customization/src/main.rs
@@ -11,6 +11,7 @@ use plotly::{
     layout::{Center, DragMode, Mapbox, MapboxStyle, Margin},
     Configuration, DensityMapbox, Layout, Plot, Scatter, Scatter3D,
 };
+use plotly_utils::write_example_to_html;
 const DEFAULT_HTML_APP_NOT_FOUND: &str = "Could not find default application for HTML files.";
 
 fn density_mapbox_responsive_autofill(show: bool, file_name: &str) {
@@ -130,18 +131,6 @@ fn show_with_default_app(temp_path: &str) {
         .expect(DEFAULT_HTML_APP_NOT_FOUND);
 }
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Switch the boolean flag to `true` to display the example, otherwise manually
     // open the generated file in the `output` folder.
diff --git a/examples/financial_charts/Cargo.toml b/examples/financial_charts/Cargo.toml
index 980fd5af..57d628ac 100644
--- a/examples/financial_charts/Cargo.toml
+++ b/examples/financial_charts/Cargo.toml
@@ -7,4 +7,5 @@ edition = "2021"
 [dependencies]
 csv = "1.1"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
 serde = "1.0"
diff --git a/examples/financial_charts/src/main.rs b/examples/financial_charts/src/main.rs
index d893b074..51949880 100644
--- a/examples/financial_charts/src/main.rs
+++ b/examples/financial_charts/src/main.rs
@@ -6,6 +6,7 @@ use std::path::PathBuf;
 use plotly::common::TickFormatStop;
 use plotly::layout::{Axis, RangeSelector, RangeSlider, SelectorButton, SelectorStep, StepMode};
 use plotly::{Candlestick, Layout, Ohlc, Plot, Scatter};
+use plotly_utils::write_example_to_html;
 use serde::Deserialize;
 
 #[derive(Deserialize)]
@@ -319,18 +320,6 @@ fn simple_ohlc_chart(show: bool, file_name: &str) {
 }
 // ANCHOR_END: simple_ohlc_chart
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
 
diff --git a/examples/images/Cargo.toml b/examples/images/Cargo.toml
index 1fe4fb39..0c3a4cb0 100644
--- a/examples/images/Cargo.toml
+++ b/examples/images/Cargo.toml
@@ -11,3 +11,5 @@ plotly = { path = "../../plotly", features = [
     "plotly_image",
     "plotly_ndarray",
 ] }
+
+plotly_utils = { path = "../plotly_utils" }
\ No newline at end of file
diff --git a/examples/images/src/main.rs b/examples/images/src/main.rs
index f290e256..01a6a9a0 100644
--- a/examples/images/src/main.rs
+++ b/examples/images/src/main.rs
@@ -2,6 +2,7 @@
 
 use ndarray::arr2;
 use plotly::{color::Rgb, image::ColorModel, Image, Plot};
+use plotly_utils::write_example_to_html;
 
 fn basic_image(show: bool, file_name: &str) {
     let w = Rgb::new(255, 255, 255);
@@ -102,18 +103,6 @@ fn trace_from_ndarray_rgba(show: bool, file_name: &str) {
     }
 }
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
     basic_image(false, "basic_image");
diff --git a/examples/maps/Cargo.toml b/examples/maps/Cargo.toml
index 709423cc..2427ea8e 100644
--- a/examples/maps/Cargo.toml
+++ b/examples/maps/Cargo.toml
@@ -6,6 +6,7 @@ edition = "2021"
 
 [dependencies]
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
 csv = "1.3"
 reqwest = { version = "0.11", features = ["blocking"] }
 
diff --git a/examples/maps/src/main.rs b/examples/maps/src/main.rs
index a286d66b..73428b9c 100644
--- a/examples/maps/src/main.rs
+++ b/examples/maps/src/main.rs
@@ -8,6 +8,7 @@ use plotly::{
     },
     DensityMapbox, Layout, Plot, ScatterGeo, ScatterMapbox,
 };
+use plotly_utils::write_example_to_html;
 
 fn scatter_mapbox(show: bool, file_name: &str) {
     let trace = ScatterMapbox::new(vec![45.5017], vec![-73.5673])
@@ -159,18 +160,6 @@ fn density_mapbox(show: bool, file_name: &str) {
     }
 }
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
     scatter_mapbox(false, "scatter_mapbox");
diff --git a/examples/ndarray/Cargo.toml b/examples/ndarray/Cargo.toml
index 6668428e..e3f624ba 100644
--- a/examples/ndarray/Cargo.toml
+++ b/examples/ndarray/Cargo.toml
@@ -7,3 +7,4 @@ edition = "2021"
 [dependencies]
 ndarray = "0.16"
 plotly = { path = "../../plotly", features = ["plotly_ndarray"] }
+plotly_utils = { path = "../plotly_utils" }
diff --git a/examples/ndarray/src/main.rs b/examples/ndarray/src/main.rs
index b8c3ced1..2f611205 100644
--- a/examples/ndarray/src/main.rs
+++ b/examples/ndarray/src/main.rs
@@ -4,6 +4,7 @@ use ndarray::{Array, Ix1, Ix2};
 use plotly::common::Mode;
 use plotly::ndarray::ArrayTraces;
 use plotly::{Plot, Scatter};
+use plotly_utils::write_example_to_html;
 
 fn single_ndarray_trace(show: bool, file_name: &str) {
     let n: usize = 11;
@@ -73,18 +74,6 @@ fn multiple_ndarray_traces_over_rows(show: bool, file_name: &str) {
     }
 }
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
     single_ndarray_trace(false, "single_ndarray_trace");
diff --git a/examples/plotly_utils/Cargo.toml b/examples/plotly_utils/Cargo.toml
new file mode 100644
index 00000000..ef759e32
--- /dev/null
+++ b/examples/plotly_utils/Cargo.toml
@@ -0,0 +1,7 @@
+[package]
+name = "plotly_utils"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+plotly = { path = "../../plotly" } 
\ No newline at end of file
diff --git a/examples/plotly_utils/src/lib.rs b/examples/plotly_utils/src/lib.rs
new file mode 100644
index 00000000..4f172a5a
--- /dev/null
+++ b/examples/plotly_utils/src/lib.rs
@@ -0,0 +1,27 @@
+use plotly::Plot;
+
+/// Write a plot to HTML files for documentation and display
+///
+/// This function creates both an inline HTML file (for mdbook inclusion) and
+/// a standalone HTML file (for direct viewing). The inline file is prefixed
+/// with "inline_" and both files are placed in the "./output" directory.
+///
+/// # Arguments
+///
+/// * `plot` - The plot to write to HTML
+/// * `name` - The base name for the HTML files (without extension)
+///
+/// # Returns
+///
+/// The path to the standalone HTML file
+pub fn write_example_to_html(plot: &Plot, name: &str) -> String {
+    std::fs::create_dir_all("./output").unwrap();
+    // Write inline HTML
+    let html = plot.to_inline_html(Some(name));
+    let path = format!("./output/inline_{}.html", name);
+    std::fs::write(path, html).unwrap();
+    // Write standalone HTML
+    let path = format!("./output/{}.html", name);
+    plot.write_html(&path);
+    path
+}
diff --git a/examples/scientific_charts/Cargo.toml b/examples/scientific_charts/Cargo.toml
index 4f12010d..da48e8af 100644
--- a/examples/scientific_charts/Cargo.toml
+++ b/examples/scientific_charts/Cargo.toml
@@ -6,3 +6,4 @@ edition = "2021"
 
 [dependencies]
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
diff --git a/examples/scientific_charts/src/main.rs b/examples/scientific_charts/src/main.rs
index bcd9718b..1b4069f8 100644
--- a/examples/scientific_charts/src/main.rs
+++ b/examples/scientific_charts/src/main.rs
@@ -5,6 +5,7 @@ use std::f64::consts::PI;
 use plotly::common::{ColorScale, ColorScalePalette, Font};
 use plotly::contour::Contours;
 use plotly::{Contour, HeatMap, Layout, Plot};
+use plotly_utils::write_example_to_html;
 
 // Contour Plots
 // ANCHOR: simple_contour_plot
@@ -176,18 +177,6 @@ fn customized_heat_map(show: bool, file_name: &str) {
 }
 // ANCHOR_END: customized_heat_map
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
     // Contour Plots
diff --git a/examples/shapes/Cargo.toml b/examples/shapes/Cargo.toml
index 927e0540..94ddef7e 100644
--- a/examples/shapes/Cargo.toml
+++ b/examples/shapes/Cargo.toml
@@ -7,5 +7,6 @@ edition = "2021"
 [dependencies]
 ndarray = "0.16"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
 rand = "0.9"
 rand_distr = "0.5"
diff --git a/examples/shapes/src/main.rs b/examples/shapes/src/main.rs
index b9fe5a6a..574cc148 100644
--- a/examples/shapes/src/main.rs
+++ b/examples/shapes/src/main.rs
@@ -9,6 +9,7 @@ use plotly::{
     },
     Bar, Plot, Scatter,
 };
+use plotly_utils::write_example_to_html;
 use rand_distr::{num_traits::Float, Distribution, Normal};
 
 // ANCHOR: filled_area_chart
@@ -772,18 +773,6 @@ fn svg_paths(show: bool, file_name: &str) {
 }
 // ANCHOR_END: svg_paths
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
 
diff --git a/examples/statistical_charts/Cargo.toml b/examples/statistical_charts/Cargo.toml
index 0dffe48e..929aa1e3 100644
--- a/examples/statistical_charts/Cargo.toml
+++ b/examples/statistical_charts/Cargo.toml
@@ -7,5 +7,6 @@ edition = "2021"
 [dependencies]
 ndarray = "0.16"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
 rand = "0.9"
 rand_distr = "0.5"
diff --git a/examples/statistical_charts/src/main.rs b/examples/statistical_charts/src/main.rs
index 07795365..f4947cc7 100644
--- a/examples/statistical_charts/src/main.rs
+++ b/examples/statistical_charts/src/main.rs
@@ -9,6 +9,7 @@ use plotly::{
     layout::{Axis, BarMode, BoxMode, Layout, Margin},
     Bar, BoxPlot, Histogram, Plot, Scatter,
 };
+use plotly_utils::write_example_to_html;
 use rand_distr::{Distribution, Normal, Uniform};
 
 // Error Bars
@@ -691,18 +692,6 @@ fn specify_binning_function(show: bool, file_name: &str) {
 }
 // ANCHOR_END: specify_binning_function
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
 
diff --git a/examples/subplots/Cargo.toml b/examples/subplots/Cargo.toml
index 79c9e582..1d839ff8 100644
--- a/examples/subplots/Cargo.toml
+++ b/examples/subplots/Cargo.toml
@@ -6,3 +6,4 @@ edition = "2021"
 
 [dependencies]
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
diff --git a/examples/subplots/src/main.rs b/examples/subplots/src/main.rs
index 235ec573..54c8af55 100644
--- a/examples/subplots/src/main.rs
+++ b/examples/subplots/src/main.rs
@@ -6,6 +6,7 @@ use plotly::layout::{
 };
 use plotly::Configuration;
 use plotly::{color::Rgb, Plot, Scatter};
+use plotly_utils::write_example_to_html;
 
 // Subplots
 // ANCHOR: simple_subplot
@@ -385,18 +386,6 @@ fn many_subplots_with_titles(show: bool, file_name: &str) {
 }
 // ANCHOR_END: many_subplots_with_titles
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
     // Subplots
diff --git a/examples/themes/Cargo.toml b/examples/themes/Cargo.toml
index 421b4dbf..eed36232 100644
--- a/examples/themes/Cargo.toml
+++ b/examples/themes/Cargo.toml
@@ -8,3 +8,4 @@ edition = "2021"
 ndarray = "0.16"
 csv = "1.1"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
diff --git a/examples/themes/src/main.rs b/examples/themes/src/main.rs
index f185e332..84e468cc 100644
--- a/examples/themes/src/main.rs
+++ b/examples/themes/src/main.rs
@@ -1,22 +1,85 @@
 #![allow(dead_code)]
 
+use std::fs::File;
+use std::io::BufReader;
+
+use csv::ReaderBuilder;
+use plotly::layout::themes::BuiltinTheme;
 use plotly::{
     common::{Marker, Mode, Title},
     layout::Layout,
     Plot, Scatter,
 };
+use plotly_utils::write_example_to_html;
+
+// Distinct types for Gapminder data components
+type GdpPerCapita = Vec<f64>;
+type LifeExpectancy = Vec<f64>;
+type Population = Vec<f64>;
+type Continents = Vec<String>;
+type Countries = Vec<String>;
+
+#[derive(Debug)]
+struct GapminderData {
+    gdp_per_capita: GdpPerCapita,
+    life_expectancy: LifeExpectancy,
+    population: Population,
+    continents: Continents,
+    countries: Countries,
+}
 
-use plotly::layout::themes::BuiltinTheme;
+#[derive(Debug)]
+struct ContinentData {
+    gdp_per_capita: Vec<f64>,
+    life_expectancy: Vec<f64>,
+    population: Vec<f64>,
+    countries: Vec<String>,
+}
 
-use std::fs::File;
-use std::io::BufReader;
+impl GapminderData {
+    /// Get data for a specific continent
+    fn get_continent_data(&self, continent: &str) -> Option<ContinentData> {
+        let indices: Vec<usize> = self
+            .continents
+            .iter()
+            .enumerate()
+            .filter(|(_, c)| c.as_str() == continent)
+            .map(|(idx, _)| idx)
+            .collect();
 
-use csv::ReaderBuilder;
+        if indices.is_empty() {
+            return None;
+        }
+
+        let gdp: Vec<f64> = indices
+            .iter()
+            .map(|&idx| self.gdp_per_capita[idx])
+            .collect();
+        let life_exp: Vec<f64> = indices
+            .iter()
+            .map(|&idx| self.life_expectancy[idx])
+            .collect();
+        let pop: Vec<f64> = indices.iter().map(|&idx| self.population[idx]).collect();
+        let countries: Vec<String> = indices
+            .iter()
+            .map(|&idx| self.countries[idx].clone())
+            .collect();
+
+        Some(ContinentData {
+            gdp_per_capita: gdp,
+            life_expectancy: life_exp,
+            population: pop,
+            countries,
+        })
+    }
+}
 
 // Read Gapminder 2007 data from CSV
-fn read_gapminder_data_from_csv() -> (Vec<f64>, Vec<f64>, Vec<f64>, Vec<String>, Vec<String>) {
+fn read_gapminder_data_from_csv() -> GapminderData {
     let file = File::open("assets/gapminder2007.csv").expect("Cannot open gapminder2007.csv");
-    let mut rdr = ReaderBuilder::new().has_headers(true).from_reader(BufReader::new(file));
+    let mut rdr = ReaderBuilder::new()
+        .has_headers(true)
+        .from_reader(BufReader::new(file));
     let mut gdp_per_capita = Vec::new();
     let mut life_expectancy = Vec::new();
     let mut population = Vec::new();
@@ -30,12 +93,53 @@ fn read_gapminder_data_from_csv() -> (Vec<f64>, Vec<f64>, Vec<f64>, Vec<String>,
         life_expectancy.push(record[3].parse::<f64>().unwrap_or(0.0));
         gdp_per_capita.push(record[4].parse::<f64>().unwrap_or(0.0));
     }
-    (gdp_per_capita, life_expectancy, population, continents, countries)
+    GapminderData {
+        gdp_per_capita,
+        life_expectancy,
+        population,
+        continents,
+        countries,
+    }
 }
 
-fn create_gapminder_scatter_plot(theme: BuiltinTheme, show: bool) {
-    let (gdp, life_exp, pop, continents, countries) = read_gapminder_data_from_csv();
+// ANCHOR: gapminder_plot_plotly
+fn gapminder_plot_plotly(show: bool, file_name: &str) {
+    gapminder_plot_with_theme(BuiltinTheme::Default, show, file_name);
+}
+// ANCHOR_END: gapminder_plot_plotly
 
+// ANCHOR: gapminder_plot_plotly_white
+fn gapminder_plot_plotly_white(show: bool, file_name: &str) {
+    gapminder_plot_with_theme(BuiltinTheme::PlotlyWhite, show, file_name);
+}
+// ANCHOR_END: gapminder_plot_plotly_white
+
+// ANCHOR: gapminder_plot_plotly_dark
+fn gapminder_plot_plotly_dark(show: bool, file_name: &str) {
+    gapminder_plot_with_theme(BuiltinTheme::PlotlyDark, show, file_name);
+}
+// ANCHOR_END: gapminder_plot_plotly_dark
+
+// ANCHOR: gapminder_plot_seaborn
+fn gapminder_plot_seaborn(show: bool, file_name: &str) {
+    gapminder_plot_with_theme(BuiltinTheme::Seaborn, show, file_name);
+}
+// ANCHOR_END: gapminder_plot_seaborn
+
+// ANCHOR: gapminder_plot_matplotlib
+fn gapminder_plot_matplotlib(show: bool, file_name: &str) {
+    gapminder_plot_with_theme(BuiltinTheme::Matplotlib, show, file_name);
+}
+// ANCHOR_END: gapminder_plot_matplotlib
+
+// ANCHOR: gapminder_plot_plotnine
+fn gapminder_plot_plotnine(show: bool, file_name: &str) {
+    gapminder_plot_with_theme(BuiltinTheme::Plotnine, show, file_name);
+}
+// ANCHOR_END: gapminder_plot_plotnine
+
+fn gapminder_plot_with_theme(theme: BuiltinTheme, show: bool, file_name: &str) {
+    let data = read_gapminder_data_from_csv();
     let mut plot = Plot::new();
     let continent_colors = vec![
         ("Asia", "#1f77b4"),
@@ -44,40 +148,31 @@ fn create_gapminder_scatter_plot(theme: BuiltinTheme, show: bool) {
         ("Americas", "#d62728"),
         ("Oceania", "#9467bd"),
     ];
-
     for (continent, color) in &continent_colors {
-        let indices: Vec<usize> = continents
-            .iter()
-            .enumerate()
-            .filter(|(_, c)| c == continent)
-            .map(|(idx, _)| idx)
-            .collect();
-        if indices.is_empty() {
-            continue;
-        }
-        let continent_gdp: Vec<f64> = indices.iter().map(|&idx| gdp[idx]).collect();
-        let continent_life: Vec<f64> = indices.iter().map(|&idx| life_exp[idx]).collect();
-        let continent_pop: Vec<f64> = indices.iter().map(|&idx| pop[idx]).collect();
-        let continent_countries: Vec<String> = indices.iter().map(|&idx| countries[idx].clone()).collect();
-        let trace = Scatter::new(continent_gdp, continent_life)
+        if let Some(continent_data) = data.get_continent_data(continent) {
+            let trace = Scatter::new(
+                continent_data.gdp_per_capita,
+                continent_data.life_expectancy,
+            )
             .mode(Mode::Markers)
-            .name(continent.to_string())
-            .text_array(continent_countries)
+            .name(continent)
+            .text_array(continent_data.countries)
             .marker(
                 Marker::new()
                     .size_array(
-                        continent_pop
+                        continent_data
+                            .population
                             .iter()
                             .map(|&p| ((p / 1_000_000.0).min(60.0)) as usize)
                             .collect(),
                     )
                     .color(*color)
                     .opacity(0.6)
-                    .line(plotly::common::Line::new().width(1.0).color("white")),
+                    .line(plotly::common::Line::new().width(1.0).color("#FFFFFF")),
             );
-        plot.add_trace(trace);
+            plot.add_trace(trace);
+        }
     }
-
     let theme_template = theme.build();
     plot.set_layout(
         Layout::new()
@@ -96,11 +191,7 @@ fn create_gapminder_scatter_plot(theme: BuiltinTheme, show: bool) {
             .height(600)
             .show_legend(true),
     );
-
-    let path = write_example_to_html(
-        &plot,
-        &format!("gapminder_{}", theme_name(theme).to_lowercase()),
-    );
+    let path = write_example_to_html(&plot, file_name);
     if show {
         plot.show_html(path);
     }
@@ -119,36 +210,11 @@ fn theme_name(theme: BuiltinTheme) -> &'static str {
     }
 }
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
-    // Create Gapminder-style plots with different themes, matching the Plotly documentation
-    // Based on: https://plotly.com/python/templates/
-
-    // Create plots for each theme
-    let themes = vec![
-        BuiltinTheme::Default,
-        BuiltinTheme::PlotlyWhite,
-        BuiltinTheme::PlotlyDark,
-        BuiltinTheme::Seaborn,
-        BuiltinTheme::Matplotlib,
-        BuiltinTheme::Plotnine,
-    ];
-
-    for theme in themes {
-        create_gapminder_scatter_plot(theme, false);
-    }
-
-    // Show one example (the default theme)
-    create_gapminder_scatter_plot(BuiltinTheme::Default, true);
+    gapminder_plot_plotly(false, "gapminder_plotly");
+    gapminder_plot_plotly_white(false, "gapminder_plotly_white");
+    gapminder_plot_plotly_dark(false, "gapminder_plotly_dark");
+    gapminder_plot_seaborn(false, "gapminder_seaborn");
+    gapminder_plot_matplotlib(false, "gapminder_matplotlib");
+    gapminder_plot_plotnine(false, "gapminder_plotnine");
 }
diff --git a/plotly/src/common/mod.rs b/plotly/src/common/mod.rs
index 96a5f8cd..c1e117e4 100644
--- a/plotly/src/common/mod.rs
+++ b/plotly/src/common/mod.rs
@@ -2141,7 +2141,7 @@ mod tests {
             .smoothing(1.0)
             .dash(DashType::Dash)
             .simplify(true)
-            .color("#ffffff")
+            .color("#FFFFFF")
             .cauto(true)
             .cmin(0.0)
             .cmax(1.0)
@@ -2158,7 +2158,7 @@ mod tests {
             "smoothing": 1.0,
             "dash": "dash",
             "simplify": true,
-            "color": "#ffffff",
+            "color": "#FFFFFF",
             "cauto": true,
             "cmin": 0.0,
             "cmax": 1.0,
@@ -2226,12 +2226,12 @@ mod tests {
     #[test]
     #[rustfmt::skip]
     fn serialize_gradient() {
-        let gradient = Gradient::new(GradientType::Horizontal, "#ffffff");
-        let expected = json!({"color": "#ffffff", "type": "horizontal"});
+        let gradient = Gradient::new(GradientType::Horizontal, "#FFFFFF");
+        let expected = json!({"color": "#FFFFFF", "type": "horizontal"});
         assert_eq!(to_value(gradient).unwrap(), expected);
 
-        let gradient = Gradient::new_array(GradientType::Horizontal, vec!["#ffffff"]);
-        let expected = json!({"color": ["#ffffff"], "type": "horizontal"});
+        let gradient = Gradient::new_array(GradientType::Horizontal, vec!["#FFFFFF"]);
+        let expected = json!({"color": ["#FFFFFF"], "type": "horizontal"});
         assert_eq!(to_value(gradient).unwrap(), expected);
     }
 
diff --git a/plotly/src/layout/themes.rs b/plotly/src/layout/themes.rs
index ec08c056..494b7454 100644
--- a/plotly/src/layout/themes.rs
+++ b/plotly/src/layout/themes.rs
@@ -2,7 +2,9 @@ use once_cell::sync::Lazy;
 
 use crate::{
     common::{ColorBar, ColorScale, ColorScaleElement, Font, Label, Title},
-    layout::{Axis, ColorAxis, HoverMode, LayoutColorScale, LayoutTemplate, Template, TicksDirection},
+    layout::{
+        Axis, ColorAxis, HoverMode, LayoutColorScale, LayoutTemplate, Template, TicksDirection,
+    },
 };
 
 pub static DEFAULT: Lazy<Template> = Lazy::new(|| {
@@ -60,8 +62,8 @@ pub static PLOTLY_WHITE: Lazy<Template> = Lazy::new(|| {
         .font(Font::new().color("#2a3f5f"))
         .hover_label(Label::new().align("left"))
         .hover_mode(HoverMode::Closest)
-        .paper_background_color("#ffffff")
-        .plot_background_color("#ffffff")
+        .paper_background_color("#FFFFFF")
+        .plot_background_color("#FFFFFF")
         .title(Title::new().x(0.05))
         .x_axis(
             Axis::new()
@@ -256,11 +258,11 @@ pub static MATPLOTLIB: Lazy<Template> = Lazy::new(|| {
     let layout_template = LayoutTemplate::new()
         .font(Font::new().family("Arial").size(26).color("black"))
         .colorway(vec![
-            "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b",
-            "#e377c2", "#7f7f7f", "#bcbd22", "#17becf",
+            "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f",
+            "#bcbd22", "#17becf",
         ])
-        .paper_background_color("white")
-        .plot_background_color("white")
+        .paper_background_color("#FFFFFF")
+        .plot_background_color("#FFFFFF")
         .hover_label(Label::new().align("left"))
         .hover_mode(HoverMode::Closest)
         .x_axis(
@@ -439,7 +441,8 @@ mod tests {
         plot.set_layout(layout);
         plot.add_trace(Bar::new(vec![0], vec![1]));
 
-        let expected = r##""paper_bgcolor":"#ffffff""##;
+        let expected = r##""paper_bgcolor":"#FFFFFF""##;
+        dbg!(plot.to_json());
         assert!(plot.to_json().contains(expected));
     }