diff --git a/src/App.vue b/src/App.vue
index 8b7740d..27eb3e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,8 @@
 <template>
-  <s-page theme="auto" id="soberpage">
+  <s-page :theme="theme.initialValue" id="soberpage" ref="soberPage" :class="theme.value">
     <s-drawer>
       <Navbar @toggle-drawer="toogleDrawer" />
       <s-drawer
-        theme="auto"
         id="content"
         :class="{ onDrawerResize }"
         ref="innerDrawer"
@@ -27,9 +26,16 @@ import Navbar from "./ui/navbar.vue";
 import Graph from "./graph/index.vue";
 import Editor from "./editor/index.vue";
 
-import { ref } from "vue";
-
-
+import { ref, watchEffect } from "vue";
+import { useTheme } from "@/consts";
+const theme = useTheme();
+const soberPage = ref<HTMLElementTagNameMap["s-page"]>();
+watchEffect(() =>
+  soberPage.value?.toggle(
+    theme.value,
+    document.getElementById("themeTrigger") ?? undefined
+  )
+);
 
 // Drawer toogle
 const innerDrawer = ref<HTMLElementTagNameMap["s-drawer"]>();
diff --git a/src/consts.ts b/src/consts.ts
index 8af5782..a7baa42 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -108,6 +108,7 @@ export function toOriginalDatum(items: InternalDatum[], forExport?: boolean) {
       delete (<any>item).graphType;
     }
     delete (<any>item).key;
+    delete (<any>item).hidden;
     return item;
   }) as FunctionPlotDatum[];
 }
@@ -385,14 +386,34 @@ export const fnTypeArr = [
   },
 ] as const satisfies FnType[];
 
-
 // Datum define
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 export const useProfile = defineStore("profile", () => {
   const data = ref<InternalDatum[]>([
     { fnType: "linear", graphType: "polyline", fn: "x^2", key: 1 },
   ]);
-  const getOriginalCopy = () => toOriginalDatum(data.value);
+  const getOriginalCopy = (forExport?: boolean) =>
+    toOriginalDatum(data.value, forExport);
   return { data, getOriginalCopy };
-});
\ No newline at end of file
+});
+
+// Theme define
+export const useTheme = defineStore("theme", () => {
+  const themeValues = ["auto", "dark", "light"] as const;
+  const initialIndex = (() => {
+    if (typeof localStorage !== "undefined") {
+      const savedTheme = Number(localStorage.getItem("theme"));
+      if ([0, 1, 2].includes(savedTheme)) return savedTheme as 0 | 1 | 2;
+    }
+    return 0;
+  })();
+  const index = ref(initialIndex);
+  const initialValue = themeValues[initialIndex];
+  const value = computed(() => themeValues[index.value]);
+  const toogle = () => {
+    index.value = ((index.value + 1) % themeValues.length) as 0 | 1 | 2;
+    localStorage.setItem("theme", index.value.toString());
+  };
+  return { initialIndex,initialValue, index, value, toogle };
+});
diff --git a/src/editor/datum.vue b/src/editor/datum.vue
index 94157ff..780b3af 100644
--- a/src/editor/datum.vue
+++ b/src/editor/datum.vue
@@ -1,110 +1,114 @@
 <template>
-  <div class="plot-data" v-if="dataItem" ref="block">
-    <div class="selectors">
-      <s-picker
-        :label="t('inputs.fnType')"
-        v-model.lazy="dataItem.fnType"
-        @change="fnTypeChange(dataItem)"
-      >
-        <s-picker-item
-          v-for="(type, index) in fnTypeArr"
-          :value="type.value"
-          :selected="index === 0"
+  <s-fold :folded="hidden" v-if="dataItem" class="plot-data-fold">
+    <div class="plot-data" ref="block" :class="{ hidden: dataItem.hidden }">
+      <div class="selectors">
+        <s-picker
+          :label="t('inputs.fnType')"
+          v-model.lazy="dataItem.fnType"
+          @change="fnTypeChange(dataItem)"
+          :key="selectKey"
         >
-          {{ t(type.label) }}
-        </s-picker-item>
-      </s-picker>
-      <s-picker
-        :label="t('inputs.graphType')"
-        v-model.lazy="dataItem.graphType"
-        v-if="dataItem.graphType !== 'text'"
-        @change="graphTypeChange(dataItem)"
-      >
-        <s-picker-item
-          v-for="(type, index) in allowedGraphType"
-          :value="type.value"
-          :selected="index === 0"
-        >
-          {{ t(type.label) }}
-        </s-picker-item>
-      </s-picker>
-      <div style="flex-grow: 1"></div>
-      <div class="dataBlockBtns">
-        <s-tooltip>
-          <s-icon-button
-            slot="trigger"
-            @click="emit('delete')"
-            style="color: var(--s-color-error)"
-          >
-            <SIconDelete />
-          </s-icon-button>
-          {{ t("buttons.del") }}
-        </s-tooltip>
-        <s-tooltip>
-          <s-icon-button
-            slot="trigger"
-            @click="dataItem.hidden = !dataItem.hidden"
-            :type="dataItem.hidden ? 'filled-tonal' : 'standard'"
+          <s-picker-item
+            v-for="(type, index) in fnTypeArr"
+            :value="type.value"
+            :selected="index === 0"
           >
-            <SIconHide />
-          </s-icon-button>
-          {{ t("buttons.hide") }}
-        </s-tooltip>
-        <s-tooltip>
-          <s-icon-button
-            slot="trigger"
-            @click="
-              blockFolded = !blockFolded;
-              console.log(foldShell);
-            "
+            {{ t(type.label) }}
+          </s-picker-item>
+        </s-picker>
+        <s-picker
+          :label="t('inputs.graphType')"
+          v-model.lazy="dataItem.graphType"
+          v-if="dataItem.graphType !== 'text'"
+          @change="graphTypeChange(dataItem)"
+          :key="selectKey"
+        >
+          <s-picker-item
+            v-for="(type, index) in allowedGraphType"
+            :value="type.value"
+            :selected="index === 0"
           >
-            <s-icon :name="blockFolded ? 'chevron_down' : 'chevron_up'">
-            </s-icon>
-          </s-icon-button>
-          {{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
-        </s-tooltip>
-        <span class="datablock-drag">
-          <SIconDrag />
-        </span>
+            {{ t(type.label) }}
+          </s-picker-item>
+        </s-picker>
+        <div style="flex-grow: 1"></div>
+        <div class="dataBlockBtns">
+          <s-tooltip>
+            <s-icon-button
+              slot="trigger"
+              @click="deleteDatum"
+              style="color: var(--s-color-error)"
+            >
+              <SIconDelete />
+            </s-icon-button>
+            {{ t("buttons.del") }}
+          </s-tooltip>
+          <s-tooltip>
+            <s-icon-button
+              slot="trigger"
+              @click="dataItem.hidden = !dataItem.hidden"
+              :type="dataItem.hidden ? 'filled-tonal' : 'standard'"
+            >
+              <SIconHide />
+            </s-icon-button>
+            {{ t("buttons.hide") }}
+          </s-tooltip>
+          <s-tooltip>
+            <s-icon-button
+              slot="trigger"
+              @click="
+                blockFolded = !blockFolded;
+                console.log(foldShell);
+              "
+            >
+              <s-icon :name="blockFolded ? 'chevron_down' : 'chevron_up'">
+              </s-icon>
+            </s-icon-button>
+            {{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
+          </s-tooltip>
+          <span class="datablock-drag">
+            <SIconDrag />
+          </span>
+        </div>
       </div>
-    </div>
 
-    <div class="inputs">
-      <StrInputs
-        :dataItem="dataItem"
-        :fnType="fnType"
-        :blockFolded="blockFolded"
-      />
-      <CoordInputs
-        v-if="fnType.coord"
-        :dataItem="dataItem"
-        :fnType="fnType"
-        :blockFolded="blockFolded"
-      />
-      <CoordArrInputs
-        v-if="fnType.coordArr"
-        :dataItem="dataItem"
-        :fnType="fnType"
-        :blockFolded="blockFolded"
-      />
-      <OptInputs
-        v-if="fnType.optInput"
-        :dataItem="dataItem"
-        :fnType="fnType"
-        :blockFolded="blockFolded"
-      />
-      <SwitchInputs
-        v-if="fnType.switches"
-        :dataItem="dataItem"
-        :fnType="fnType"
-        :blockFolded="blockFolded"
-      />
+      <div class="inputs">
+        <StrInputs
+          :dataItem="dataItem"
+          :fnType="fnType"
+          :blockFolded="blockFolded"
+        />
+        <CoordInputs
+          v-if="fnType.coord"
+          :dataItem="dataItem"
+          :fnType="fnType"
+          :blockFolded="blockFolded"
+        />
+        <CoordArrInputs
+          v-if="fnType.coordArr"
+          :dataItem="dataItem"
+          :fnType="fnType"
+          :blockFolded="blockFolded"
+        />
+        <OptInputs
+          v-if="fnType.optInput"
+          :dataItem="dataItem"
+          :fnType="fnType"
+          :blockFolded="blockFolded"
+        />
+        <SwitchInputs
+          v-if="fnType.switches"
+          :dataItem="dataItem"
+          :fnType="fnType"
+          :blockFolded="blockFolded"
+        />
+      </div>
     </div>
-  </div>
+  </s-fold>
 </template>
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 import {
   fnTypeArr,
@@ -113,7 +117,7 @@ import {
   getFnType,
   InternalDatum,
 } from "../consts";
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import StrInputs from "./inputs/strInputs.vue";
 import CoordInputs from "./inputs/coordInputs.vue";
 import SwitchInputs from "./inputs/switchInputs.vue";
@@ -124,13 +128,36 @@ import SIconDelete from "@/ui/icons/delete.vue";
 import SIconHide from "@/ui/icons/hide.vue";
 import SIconDrag from "@/ui/icons/drag.vue";
 
-const emit = defineEmits(["delete"]);
 const dataItem = defineModel<InternalDatum>();
+const props = defineProps<{ index: number }>();
 const block = ref<HTMLDivElement>();
 const blockFolded = ref(true);
 
 const foldShell = ref<HTMLElementTagNameMap["s-fold"]>();
 
+const hidden = ref(true);
+
+onMounted(() => setTimeout(() => (hidden.value = false), 0));
+import { Snackbar } from "sober";
+import { useProfile } from "../consts";
+const profile = useProfile();
+function deleteDatum() {
+  hidden.value = true;
+  const backup = cloneDeep(dataItem.value)!;
+  setTimeout(() => {
+    profile.data.splice(props.index, 1);
+  }, 200);
+  Snackbar.builder({
+    text: t("title.deleteSuccess"),
+    action: {
+      text: t("buttons.undo"),
+      click: () => {
+        profile.data.splice(props.index, 0, backup);
+      },
+    },
+  });
+}
+
 function fnTypeChange(dataItem: InternalDatum) {
   console.log(dataItem);
   inputTypeArr.forEach((key) => delete dataItem[key]);
@@ -149,6 +176,7 @@ function fnTypeChange(dataItem: InternalDatum) {
 const scatteredSet = new WeakSet<InternalDatum>();
 
 import emitter from "@/mitt";
+import { cloneDeep } from "lodash-es";
 function graphTypeChange(dataItem: InternalDatum) {
   if (dataItem.graphType === "scatter") {
     if (!scatteredSet.has(dataItem)) {
@@ -166,14 +194,27 @@ const fnType = computed(() => getFnType(dataItem.value?.fnType));
 const allowedGraphType = computed(() =>
   getAllowedGraphType(dataItem.value?.fnType)
 );
+
+import { watch } from "vue";
+const selectKey = ref(0);
+watch(locale, () => selectKey.value++);
 </script>
 
 <style>
 .plot-data {
-  border-bottom: var(--s-color-outline-variant) 1px solid;
   position: relative;
   padding: 20px 15px;
   overflow-x: hidden;
+  transition:
+    opacity 0.15s,
+    filter 0.15s;
+}
+.plot-data.hidden {
+  opacity: 0.6;
+  filter: contrast(0.6) saturate(0.8);
+}
+.plot-data-fold {
+  border-bottom: var(--s-color-outline-variant) 1px solid;
 }
 .selectors {
   margin-bottom: 10px;
diff --git a/src/editor/import.vue b/src/editor/import.vue
index fd2b2fc..b84ea63 100644
--- a/src/editor/import.vue
+++ b/src/editor/import.vue
@@ -58,6 +58,9 @@ import { Snackbar } from "sober";
 function handleImport() {
   if (importStr.value !== "") {
     try {
+      const parsed = JSON5.parse(importStr.value);
+      if (typeof parsed !== "object" || parsed === null) throw null;
+      if(typeof parsed.data !== "object" || !Array.isArray(parsed.data)) throw null;
       profile.data = toInternalDatum(
         (JSON5.parse(importStr.value).data as FunctionPlotDatum[]) ?? []
       );
diff --git a/src/editor/index.vue b/src/editor/index.vue
index 81b1e7f..071bc34 100644
--- a/src/editor/index.vue
+++ b/src/editor/index.vue
@@ -5,12 +5,11 @@
         v-model="profile.data"
         :animation="200"
         handle=".datablock-drag"
-        :key="draggerKey"
       >
         <Datum
           v-for="(dataItem, i) in profile.data"
           v-model="profile.data[i]"
-          @delete="profile.data.splice(i, 1)"
+          :index="i"
           :key="dataItem.key"
         />
       </VueDraggable>
@@ -27,7 +26,7 @@
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
 import { VueDraggable } from "vue-draggable-plus";
 import ImportBtn from "./import.vue";
@@ -37,8 +36,4 @@ import OutputDrawer from "./output.vue";
 import { getNewDatum } from "@/consts";
 import { useProfile } from "@/consts";
 const profile = useProfile();
-
-import { ref, watch } from "vue";
-const draggerKey = ref(0);
-watch(locale, () => draggerKey.value++);
 </script>
diff --git a/src/editor/output.vue b/src/editor/output.vue
index e04e33e..753b5b7 100644
--- a/src/editor/output.vue
+++ b/src/editor/output.vue
@@ -9,6 +9,16 @@
         ></s-icon>
         {{ t(folded ? "buttons.expand" : "buttons.collapse") }}
       </s-button>
+
+      <s-tooltip align="right">
+        <s-icon-button
+          slot="trigger"
+          @click="copyCode"
+        >
+          <SIconCopy />
+        </s-icon-button>
+        {{ t("buttons.copy") }}
+      </s-tooltip>
     </div>
     <s-fold :folded="folded">
       <s-scroll-view id="formattedCode">
@@ -22,6 +32,8 @@
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
+import SIconCopy from "@/ui/icons/copy.vue";
+
 import JSON5 from "json5";
 import prettier from "prettier/standalone";
 import prettierPluginBabel from "prettier/plugins/babel";
@@ -35,7 +47,7 @@ watch(
   profile,
   () => {
     prettier
-      .format(JSON5.stringify({ data: profile.data }), {
+      .format(JSON5.stringify({ data: profile.getOriginalCopy(true) }), {
         parser: "json5",
         printWidth: 40,
         plugins: [prettierPluginBabel, prettierPluginEstree],
@@ -46,6 +58,15 @@ watch(
 );
 
 const folded = ref(true);
+
+import { Snackbar } from "sober";
+function copyCode() {
+  navigator.clipboard.writeText(formatted.value);
+  Snackbar.builder({
+    text: t("title.copySuccess"),
+    type: "success",
+  });
+}
 </script>
 
 <style>
@@ -78,12 +99,13 @@ const folded = ref(true);
 }
 
 .plot-data.output pre {
-  user-select: all;
+  user-select: text;
+  cursor: text;
   margin: 0;
 }
 
 ::selection {
-  background-color: var(--s-color-primary);
-  color: var(--s-color-scrim);
+  background: var(--s-color-primary);
+  color: var(--s-color-on-primary);
 }
 </style>
diff --git a/src/graph/graph.vue b/src/graph/graph.vue
index 3efe914..4f73496 100644
--- a/src/graph/graph.vue
+++ b/src/graph/graph.vue
@@ -101,12 +101,18 @@ onMounted(async () => {
   margin: auto;
   color: black;
   user-select: none;
+  transition: filter 1ms;
 }
+
 @media (prefers-color-scheme: dark) {
-  #graphRender {
+  s-page.auto #graphRender {
     filter: invert(100%) hue-rotate(180deg) brightness(133%);
   }
 }
+s-page.dark #graphRender {
+  filter: invert(100%) hue-rotate(180deg) brightness(133%);
+}
+
 .onresize #graphRender {
   left: 50%;
   right: unset;
diff --git a/src/graph/index.vue b/src/graph/index.vue
index 740a5db..001340a 100644
--- a/src/graph/index.vue
+++ b/src/graph/index.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import Graph from "./graph.vue";
 import { computed, onMounted, ref } from "vue";
-import { debounce } from "lodash-es";
+import { throttle } from "lodash-es";
 import { useProfile } from "@/consts";
 
 const graphWidth = ref(0),
@@ -24,10 +24,10 @@ const fullUpdateState = ref(false);
 const shellRef = ref<HTMLDivElement>();
 onMounted(() => {
   const observer = new ResizeObserver(
-    debounce(() => {
+    throttle(() => {
       graphWidth.value = shellRef.value!.clientWidth;
       graphHeight.value = shellRef.value!.clientHeight;
-    }, 250)
+    }, 180)
   );
   observer.observe(shellRef.value!);
 });
@@ -45,7 +45,7 @@ emitter.on("require-full-update", () => {
   fullUpdateState.value = true;
   graphKey.value++;
 });
-emitter.on('require-post-update', () => {
+emitter.on("require-post-update", () => {
   graphKey.value++;
 });
 </script>
diff --git a/src/i18n.ts b/src/i18n.ts
index 8cd1ea0..83b6296 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -19,6 +19,9 @@ export default {
         confirm: "确定",
         language: "语言",
         repo: "GitHub 仓库",
+        toogleTheme: "切换主题",
+        copy: "复制",
+        undo: "撤销",
       },
       graphType: {
         interval: "默认",
@@ -54,6 +57,8 @@ export default {
         source: "数据源",
         importSuccess: "导入成功",
         importFail: "导入失败",
+        copySuccess: "已复制",
+        deleteSuccess: "已删除",
       },
     },
     "en-US": {
@@ -70,6 +75,9 @@ export default {
         confirm: "Confirm",
         language: "Language",
         repo: "GitHub Repo",
+        toogleTheme: "Toggle Theme",
+        copy: "Copy",
+        undo: "Undo",
       },
       graphType: {
         interval: "Interval",
@@ -105,6 +113,8 @@ export default {
         source: "Data Source",
         importSuccess: "Import success",
         importFail: "Import failed",
+        copySuccess: "Copied",
+        deleteSuccess: "Deleted",
       },
     },
   },
diff --git a/src/ui/icons/autotheme.vue b/src/ui/icons/autotheme.vue
new file mode 100644
index 0000000..2d6a084
--- /dev/null
+++ b/src/ui/icons/autotheme.vue
@@ -0,0 +1,9 @@
+<template>
+  <s-icon>
+    <svg viewBox="0 -960 960 960">
+      <path
+        d="M440-200q52 0 99-21t81-60q-128-8-214-99.5T320-600q0-13 1-25.5t3-24.5q-57 32-90.5 88T200-440q0 100 70 170t170 70Zm0 80q-134 0-227-93t-93-227q0-134 93-227t227-93q5 0 10 .5t10 .5q-29 32-44.5 73T400-600q0 100 70 170t170 70q31 0 60.5-7.5T756-390q-18 118-108 194t-208 76Zm112-400 128-360h80l128 360h-76l-28-80H656l-28 80h-76Zm122-134h92l-46-146-46 146ZM407-381Z"
+      ></path>
+    </svg>
+  </s-icon>
+</template>
diff --git a/src/ui/icons/copy.vue b/src/ui/icons/copy.vue
new file mode 100644
index 0000000..4238a06
--- /dev/null
+++ b/src/ui/icons/copy.vue
@@ -0,0 +1,9 @@
+<template>
+  <s-icon>
+    <svg viewBox="0 -960 960 960">
+      <path
+        d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"
+      ></path>
+    </svg>
+  </s-icon>
+</template>
diff --git a/src/ui/navbar.vue b/src/ui/navbar.vue
index 96be87a..a58a5f3 100644
--- a/src/ui/navbar.vue
+++ b/src/ui/navbar.vue
@@ -9,15 +9,30 @@
       </span>
     </div>
 
+    <s-tooltip slot="action" id="themeTrigger">
+      <s-icon-button slot="trigger" @click="theme.toogle">
+        <SIconAutoTheme v-if="theme.index === 0" />
+        <s-icon
+          v-else
+          :name="theme.index - 1 ? 'light_mode' : 'dark_mode'"
+        ></s-icon>
+      </s-icon-button>
+      {{ t("buttons.toogleTheme") }}
+    </s-tooltip>
+
     <s-picker
       slot="action"
       v-model.lazy="locale"
       id="language"
       :label="t('inputs.language')"
     >
-      <s-icon-button slot="trigger">
-        <SIconLanguage />
-      </s-icon-button>
+      <s-tooltip slot="trigger">
+        <s-icon-button slot="trigger">
+          <SIconLanguage />
+        </s-icon-button>
+        {{ t("buttons.language") }}
+      </s-tooltip>
+
       <s-picker-item value="zh-CN" selected>简体中文</s-picker-item>
       <s-picker-item value="en-US">English</s-picker-item>
     </s-picker>
@@ -31,23 +46,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from "vue";
+import { onMounted, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { locale, t } = useI18n();
+onMounted(() => {
+  const localLocale = localStorage.getItem("lang");
+  const lang = localLocale ?? navigator.language;
+  if (lang.startsWith("zh")) locale.value = "zh-CN";
+  if (lang.startsWith("en")) locale.value = "en-US";
+  document.documentElement.setAttribute("lang", locale.value);
+  watch(locale, () => {
+    document.documentElement.setAttribute("lang", locale.value);
+    localStorage.setItem("lang", locale.value);
+  });
+});
 
 import SIconLanguage from "@/ui/icons/language.vue";
 import SIconGtihub from "@/ui/icons/github.vue";
-
-const lang = ref("");
-
-watchEffect(() => console.log(lang.value));
+import SIconAutoTheme from "@/ui/icons/autotheme.vue";
 
 function openGithub() {
   window.open("https://github.com/Linho1219/function-plot-GUI");
 }
 
 const emit = defineEmits(["toggleDrawer"]);
+
+import { useTheme } from "@/consts";
+const theme = useTheme();
 </script>
 
 <style>
@@ -56,6 +82,10 @@ const emit = defineEmits(["toggleDrawer"]);
   z-index: 9;
 }
 
+#themeTrigger s-icon {
+  z-index: -1;
+}
+
 .nav-title {
   font-size: 20px;
   font-weight: bold;