diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
index 630708c6..47c21809 100644
--- a/apps/storybook/.storybook/preview.tsx
+++ b/apps/storybook/.storybook/preview.tsx
@@ -1,5 +1,6 @@
-import '../styles/index.css';
 import 'the-new-css-reset/css/reset.css';
+import '../styles/index.css';
+import '@boolti/ui/theme.css'
 
 import { themes } from '@storybook/theming';
 import { BooltiUIProvider } from '@boolti/ui';
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8a1d0a4e..eb7326ea 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -9,6 +9,10 @@
     "lint": "TIMING=1 eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "TIMING=1 eslint . --ext ts,tsx --fix"
   },
+  "exports": {
+    ".": "./src/index.ts",
+    "./theme.css": "./src/theme.css"
+  },
   "dependencies": {
     "@boolti/icon": "*",
     "@emotion/react": "^11.11.3",
diff --git a/packages/ui/src/systems/palette.ts b/packages/ui/src/systems/palette.ts
index 32609f04..dee7b1d5 100644
--- a/packages/ui/src/systems/palette.ts
+++ b/packages/ui/src/systems/palette.ts
@@ -1,81 +1,81 @@
 const palette = {
   primary: {
-    o0: '#FFCFBA',
-    o1: '#FF5A14',
-    o2: '#E94600',
-    o3: '#C93E02',
+    o0: 'var(--color-primary-o0)',
+    o1: 'var(--color-primary-o1)',
+    o2: 'var(--color-primary-o2)',
+    o3: 'var(--color-primary-o3)',
   },
   status: {
-    error: '#FF4D4F',
-    warning: '#FAAD14',
-    success: '#52C41A',
-    link: '#1890FF',
+    error: 'var(--color-status-error)',
+    warning: 'var(--color-status-warning)',
+    success: 'var(--color-status-success)',
+    link: 'var(--color-status-link)',
   },
   purple: {
-    main: '#B150FF',
-    sub: '#E6C8FE',
+    main: 'var(--color-purple-main)',
+    sub: 'var(--color-purple-sub)',
   },
   blue: {
-    main: '#2B7BE9',
-    sub: '#C8E7FE',
+    main: 'var(--color-blue-main)',
+    sub: 'var(--color-blue-sub)',
   },
   green: {
-    main: '#52C41A',
-    sub: '#CCF3BA',
+    main: 'var(--color-green-main)',
+    sub: 'var(--color-green-sub)',
   },
   red: {
-    main: '#FF5A14',
-    sub: '#FFCFBA',
+    main: 'var(--color-red-main)',
+    sub: 'var(--color-red-sub)',
   },
   yellow: {
-    main: '#E09500',
-    sub: '#FFE2A9',
+    main: 'var(--color-yellow-main)',
+    sub: 'var(--color-yellow-sub)',
   },
   grey: {
-    main: '#888D9D',
-    sub: '#F3F5F9',
-    w: '#FFFFFF',
-    g00: '#F3F5F9',
-    g10: '#E7EAF2',
-    g20: '#D8DBE5',
-    g30: '#C8CCDC',
-    g40: '#A2A5B4',
-    g50: '#888D9D',
-    g60: '#6F7485',
-    g70: '#595D6D',
-    g80: '#434753',
-    g90: '#282B33',
-    g100: '#121215',
-    b: '#000000',
+    main: 'var(--color-grey-main)',
+    sub: 'var(--color-grey-sub)',
+    w: 'var(--color-grey-w)',
+    g00: 'var(--color-grey-g00)',
+    g10: 'var(--color-grey-g10)',
+    g20: 'var(--color-grey-g20)',
+    g30: 'var(--color-grey-g30)',
+    g40: 'var(--color-grey-g40)',
+    g50: 'var(--color-grey-g50)',
+    g60: 'var(--color-grey-g60)',
+    g70: 'var(--color-grey-g70)',
+    g80: 'var(--color-grey-g80)',
+    g90: 'var(--color-grey-g90)',
+    g100: 'var(--color-grey-g100)',
+    b: 'var(--color-grey-b)',
   },
   dim: {
-    dialog: 'rgba(86, 86, 86, 0.25)',
+    dialog: 'var(--color-dim-dialog)',
   },
-  shadow: 'rgba(136, 141, 157, 0.15)',
+  shadow: 'var(--color-shadow)',
   mobile: {
     primary: {
-      o1: '#FF6827',
+      o1: 'var(--color-mobile-primary-o1)',
     },
     status: {
-      error: '#FF4D4F',
-      success: '#52C41A',
+      error: 'var(--color-mobile-status-error)',
+      success: 'var(--color-mobile-status-success)',
     },
     grey: {
-      w: '#FFFFFF',
-      g05: '#F6F7FF',
-      g10: '#E7EAF2',
-      g15: '#D8DBE5',
-      g20: '#BEC1CE',
-      g30: '#A2A5B4',
-      g40: '#888D9D',
-      g50: '#6F7485',
-      g60: '#595D6D',
-      g70: '#434753',
-      g80: '#2E303A',
-      g85: '#1B1D23',
-      g90: '#121318',
-      g95: '#090A0B',
-      b: '#000000',
+      w: 'var(--color-mobile-grey-w)',
+      g05: 'var(--color-mobile-grey-g05)',
+      g10: 'var(--color-mobile-grey-g10)',
+      g15: 'var(--color-mobile-grey-g15)',
+      g20: 'var(--color-mobile-grey-g20)',
+      g30: 'var(--color-mobile-grey-g30)',
+      g40: 'var(--color-mobile-grey-g40)',
+      g50: 'var(--color-mobile-grey-g50)',
+      g60: 'var(--color-mobile-grey-g60)',
+      g70: 'var(--color-mobile-grey-g70)',
+      g80: 'var(--color-mobile-grey-g80)',
+      g85: 'var(--color-mobile-grey-g85)',
+      g90: 'var(--color-mobile-grey-g90)',
+      g95: 'var(--color-mobile-grey-g95)',
+      b: 'var(--color-mobile-grey-b)',
     },
   },
   opacity: {
diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css
new file mode 100644
index 00000000..a012012c
--- /dev/null
+++ b/packages/ui/src/theme.css
@@ -0,0 +1,133 @@
+:root {
+    --color-primary-o0: #FFCFBA;
+    --color-primary-o1: #FF5A14;
+    --color-primary-o2: #E94600;
+    --color-primary-o3: #C93E02;
+
+    --color-status-error: #FF4D4F;
+    --color-status-warning: #FAAD14;
+    --color-status-success: #52C41A;
+    --color-status-link: #1890FF;
+
+    --color-purple-main: #B150FF;
+    --color-purple-sub: #E6C8FE;
+
+    --color-blue-main: #2B7BE9;
+    --color-blue-sub: #C8E7FE;
+
+    --color-green-main: #52C41A;
+    --color-green-sub: #CCF3BA;
+
+    --color-red-main: #FF5A14;
+    --color-red-sub: #FFCFBA;
+
+    --color-yellow-main: #E09500;
+    --color-yellow-sub: #FFE2A9;
+
+    --color-grey-main: #888D9D;
+    --color-grey-sub: #F3F5F9;
+    --color-grey-w: #FFFFFF;
+    --color-grey-g00: #F3F5F9;
+    --color-grey-g10: #E7EAF2;
+    --color-grey-g20: #D8DBE5;
+    --color-grey-g30: #C8CCDC;
+    --color-grey-g40: #A2A5B4;
+    --color-grey-g50: #888D9D;
+    --color-grey-g60: #6F7485;
+    --color-grey-g70: #595D6D;
+    --color-grey-g80: #434753;
+    --color-grey-g90: #282B33;
+    --color-grey-g100: #121215;
+    --color-grey-b: #000000;
+
+    --color-dim-dialog: rgba(86, 86, 86, 0.25);
+
+    --color-shadow: rgba(136, 141, 157, 0.15);
+
+    --color-mobile-primary-o1: #FF6827;
+
+    --color-mobile-status-error: #FF4D4F;
+    --color-mobile-status-success: #52C41A;
+
+    --color-mobile-grey-w: #FFFFFF;
+    --color-mobile-grey-g05: #F6F7FF;
+    --color-mobile-grey-g10: #E7EAF2;
+    --color-mobile-grey-g15: #D8DBE5;
+    --color-mobile-grey-g20: #BEC1CE;
+    --color-mobile-grey-g30: #A2A5B4;
+    --color-mobile-grey-g40: #888D9D;
+    --color-mobile-grey-g50: #6F7485;
+    --color-mobile-grey-g60: #595D6D;
+    --color-mobile-grey-g70: #434753;
+    --color-mobile-grey-g80: #2E303A;
+    --color-mobile-grey-g85: #1B1D23;
+    --color-mobile-grey-g90: #121318;
+    --color-mobile-grey-g95: #090A0B;
+    --color-mobile-grey-b: #000000;
+}
+
+@media(prefers-color-scheme: dark) {
+    :root {
+        --color-primary-o0: #391a00;
+        --color-primary-o1: #a83600;
+        --color-primary-o2: #c93b00;
+        --color-primary-o3: #e54803;
+
+        --color-status-error: #c40008;
+        --color-status-warning: #4e3302;
+        --color-status-success: #1d5005;
+        --color-status-link: #0061b1;
+
+        --color-purple-main: #a500fb;
+        --color-purple-sub: #42035b;
+        --color-blue-main: #266fd3;
+        --color-blue-sub: #021e2b;
+        --color-green-main: #1d5005;
+        --color-green-sub: #121a0f;
+        --color-red-main: #a83600;
+        --color-red-sub: #391a00;
+        --color-yellow-main: #6b4500;
+        --color-yellow-sub: #211800;
+
+        --color-grey-main: #5d616e;
+        --color-grey-sub: #080d14;
+        --color-grey-w: #000000;
+        --color-grey-g00: #080d14;
+        --color-grey-g10: #111621;
+        --color-grey-g20: #1d202b;
+        --color-grey-g30: #262b3c;
+        --color-grey-g40: #484b5a;
+        --color-grey-g50: #5d616e;
+        --color-grey-g60: #74798b;
+        --color-grey-g70: #8d91a2;
+        --color-grey-g80: #a6aab9;
+        --color-grey-g90: #cacdd6;
+        --color-grey-g100: #efeff0;
+        --color-grey-b: #ffffff;
+
+        --color-dim-dialog: rgba(86, 86, 86, 0.25);
+
+        --color-shadow: rgba(136, 141, 157, 0.15);
+
+        --color-mobile-primary-o1: #9a3800;
+
+        --color-mobile-status-error: #c40008;
+        --color-mobile-status-success: #1d5005;
+
+        --color-mobile-grey-w: #000000;
+        --color-mobile-grey-g05: #000726;
+        --color-mobile-grey-g10: #111621;
+        --color-mobile-grey-g15: #1d202b;
+        --color-mobile-grey-g20: #303441;
+        --color-mobile-grey-g30: #484b5a;
+        --color-mobile-grey-g40: #5d616e;
+        --color-mobile-grey-g50: #74798b;
+        --color-mobile-grey-g60: #8d91a2;
+        --color-mobile-grey-g70: #a6aab9;
+        --color-mobile-grey-g80: #c4c6cf;
+        --color-mobile-grey-g85: #dfe0e5;
+        --color-mobile-grey-g90: #edeef0;
+        --color-mobile-grey-g95: #f7f7f8;
+        --color-mobile-grey-b: #ffffff;
+    }
+}
\ No newline at end of file