diff --git a/packages/ui/styles/themes/dark.css b/packages/ui/styles/themes/dark.css
new file mode 100644
index 0000000000..e5c39f3f3d
--- /dev/null
+++ b/packages/ui/styles/themes/dark.css
@@ -0,0 +1,6 @@
+.dark {
+  --background-color-default: #232323;
+  --background-color-body: #1c1c1c;
+  --border-color-default: #282828;
+  --border-color-body: #282828;
+}
\ No newline at end of file
diff --git a/packages/ui/styles/themes/light.css b/packages/ui/styles/themes/light.css
new file mode 100644
index 0000000000..4f757374f1
--- /dev/null
+++ b/packages/ui/styles/themes/light.css
@@ -0,0 +1,6 @@
+:root {
+  --background-color-default: #fbfcfd;
+  --background-color-body: #f8f9fa;
+  --border-color-default: #eceef0;
+  --border-color-body: #e6e8eb;
+}
\ No newline at end of file
diff --git a/packages/ui/styles/tw-extend/color.js b/packages/ui/styles/tw-extend/color.js
new file mode 100644
index 0000000000..1ca9ea944d
--- /dev/null
+++ b/packages/ui/styles/tw-extend/color.js
@@ -0,0 +1,6 @@
+module.exports = {
+"backgroundColor-DEFAULT": "var(--background-color-default, #232323);",
+"backgroundColor-body": "var(--background-color-body, #1c1c1c);",
+"borderColor-DEFAULT": "var(--border-color-default, #282828);",
+"borderColor-body": "var(--border-color-body, #282828);"
+}
\ No newline at end of file