diff --git a/src/com/fr/plugin/demo/DemoChart.java b/src/com/fr/plugin/demo/DemoChart.java
index 05c6818..de8d864 100644
--- a/src/com/fr/plugin/demo/DemoChart.java
+++ b/src/com/fr/plugin/demo/DemoChart.java
@@ -33,6 +33,16 @@ public class DemoChart extends AbstractChart<DemoDataConfig>{
 
     private BaseFormula titleFormula;
 
+    private ThemeType themeType = ThemeType.DARK;
+
+    public ThemeType getThemeType() {
+        return themeType;
+    }
+
+    public void setThemeType(ThemeType themeType) {
+        this.themeType = themeType;
+    }
+
     public BaseFormula getTitleFormula() {
         return titleFormula;
     }
@@ -44,12 +54,14 @@ public class DemoChart extends AbstractChart<DemoDataConfig>{
     @Override
     protected void readAttr(XMLableReader reader) {
         super.readAttr(reader);
+        this.setThemeType(ThemeType.parseInt(reader.getAttrAsInt("theme", 0)));
         this.setTitleFormula(ExtendedHelper.readFormula(reader, "title"));
     }
 
     @Override
     protected void writeAttr(XMLPrintWriter writer) {
         super.writeAttr(writer);
+        writer.attr("theme", getThemeType().ordinal());
         ExtendedHelper.writeFormula(this.getTitleFormula(), writer, "title");
     }
 
@@ -59,6 +71,7 @@ public class DemoChart extends AbstractChart<DemoDataConfig>{
         if (getTitleFormula() != null) {
             result.setTitleFormula(this.getTitleFormula().clone());
         }
+        result.setThemeType(this.getThemeType());
         return result;
     }
 
@@ -67,6 +80,7 @@ public class DemoChart extends AbstractChart<DemoDataConfig>{
         return super.equals(ob)
                 && ob instanceof DemoChart
                 && ComparatorUtils.equals(this.getTitleFormula(), ((DemoChart) ob).getTitleFormula())
+                && ComparatorUtils.equals(this.getThemeType(), ((DemoChart) ob).getThemeType())
                 ;
     }
 
@@ -88,6 +102,7 @@ public class DemoChart extends AbstractChart<DemoDataConfig>{
     @ExecuteFunctionRecord
     @Override
     protected void addJSON(DemoDataConfig dataConfig, JSONObject jsonObject, Repository repo) throws JSONException {
+        jsonObject.put("theme", getThemeType() == ThemeType.DARK ? "dark" : "sth whatever");
 
         jsonObject.put("title", JSONFactory.createJSON(JSON.OBJECT).put("text", ExtendedHelper.getFormulaResult(titleFormula)));
 
diff --git a/src/com/fr/plugin/demo/DemoTypePane.java b/src/com/fr/plugin/demo/DemoTypePane.java
new file mode 100644
index 0000000..7467d8e
--- /dev/null
+++ b/src/com/fr/plugin/demo/DemoTypePane.java
@@ -0,0 +1,34 @@
+package com.fr.plugin.demo;
+
+import com.fr.extended.chart.ExtendedTypePane;
+
+/**
+ * Created by shine on 2018/4/19.
+ */
+public class DemoTypePane extends ExtendedTypePane<DemoChart> {
+    @Override
+    protected String[] getTypeIconPath() {
+        return new String[]{
+                "com/fr/plugin/demo/dark.png",
+                "com/fr/plugin/demo/white.png"
+        };
+    }
+
+    @Override
+    protected String[] getTypeTipName() {
+        return new String[]{
+                "深色主题",
+                "浅色主题"
+        };
+    }
+
+    @Override
+    protected int getTypeIndex(DemoChart chart) {
+        return chart.getThemeType().ordinal();
+    }
+
+    @Override
+    protected void setType(DemoChart chart, int index) {
+        chart.setThemeType(ThemeType.parseInt(index));
+    }
+}
diff --git a/src/com/fr/plugin/demo/DemoUI.java b/src/com/fr/plugin/demo/DemoUI.java
index 95a1571..60f6763 100644
--- a/src/com/fr/plugin/demo/DemoUI.java
+++ b/src/com/fr/plugin/demo/DemoUI.java
@@ -3,6 +3,7 @@ package com.fr.plugin.demo;
 import com.fr.design.gui.frpane.AttributeChangeListener;
 import com.fr.design.mainframe.chart.AbstractChartAttrPane;
 import com.fr.design.mainframe.chart.gui.data.report.AbstractReportDataContentPane;
+import com.fr.design.mainframe.chart.gui.type.AbstractChartTypePane;
 import com.fr.extended.chart.AbstractExtendedChartTableDataPane;
 import com.fr.extended.chart.AbstractExtendedChartUIProvider;
 import com.fr.extended.chart.ExtendedOtherPane;
@@ -11,6 +12,12 @@ import com.fr.extended.chart.ExtendedOtherPane;
  * Created by shine on 2018/3/24.
  */
 public class DemoUI extends AbstractExtendedChartUIProvider {
+
+    @Override
+    public AbstractChartTypePane getPlotTypePane() {
+        return new DemoTypePane();
+    }
+
     @Override
     protected AbstractExtendedChartTableDataPane getTableDataSourcePane() {
         return new DemoTableDataPane();
diff --git a/src/com/fr/plugin/demo/ThemeType.java b/src/com/fr/plugin/demo/ThemeType.java
new file mode 100644
index 0000000..ae70e16
--- /dev/null
+++ b/src/com/fr/plugin/demo/ThemeType.java
@@ -0,0 +1,18 @@
+package com.fr.plugin.demo;
+
+/**
+ * Created by shine on 2018/4/19.
+ */
+public enum ThemeType {
+    DARK,
+    WHITE;
+
+    public static ThemeType parseInt(int index) {
+        for (ThemeType type : ThemeType.values()) {
+            if (type.ordinal() == index) {
+                return type;
+            }
+        }
+        return DARK;
+    }
+}
diff --git a/src/com/fr/plugin/demo/dark.png b/src/com/fr/plugin/demo/dark.png
new file mode 100644
index 0000000..0e96bfb
Binary files /dev/null and b/src/com/fr/plugin/demo/dark.png differ
diff --git a/src/com/fr/plugin/demo/white.png b/src/com/fr/plugin/demo/white.png
new file mode 100644
index 0000000..3708bc5
Binary files /dev/null and b/src/com/fr/plugin/demo/white.png differ