diff --git a/package.json b/package.json
index 3d0f946e..4e998c13 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,9 @@
     "start": "next start -p 3000",
     "start:with-migrate": "npm run db:generate && npm run db:deploy && next start -p 3000",
     "cp-widget-lang": "mkdir -p public/js/widget/lang && cp -r widget/lang public/js/widget",
-    "build:widget": "vite build --config vite.widget.config.js && npm run cp-widget-lang",
-    "build:sdk": "vite build --config vite.sdk.config.js"
+    "build:widget": "vite build --config vite.widget.config.js && npm run cp-widget-lang && npm run build:iframe",
+    "build:sdk": "vite build --config vite.sdk.config.js",
+    "build:iframe": "vite build --config vite.iframe.config.js"
   },
   "prettier": "@egoist/prettier-config",
   "dependencies": {
diff --git a/postcss.config.js b/postcss.config.js
index de3b257b..72c558c9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,15 @@
 module.exports = {
   plugins: {
     tailwindcss: {
-      prefix: 'comment'
+      purge: [
+        "widget/**/*.svelte"
+      ],
+      darkMode: 'class',
+      variants: {
+        extend: {
+          outline: ['dark']
+        }
+      }
     },
     autoprefixer: {},
   },
diff --git a/public/doc/advanced/sdk.md b/public/doc/advanced/sdk.md
index 6574d6dc..71274f06 100644
--- a/public/doc/advanced/sdk.md
+++ b/public/doc/advanced/sdk.md
@@ -50,25 +50,3 @@ Render widget to specific DOM element.
 #### window.CUSDIS.setTheme(theme: 'dark' | 'light' | 'auto')
 
 Manually set theme. 
-
-## Style customization
-
-We use css variables to define our style. Here is the available variables you can override:
-
-```css
-:root {
-  --cusdis--color-text-default: rgba(0, 0, 0, 0.8);
-  --cusdis--color-input-border: #ddd;
-  --cusdis--color-btn-text: rgba(0, 0, 0, 0.8);
-  --cusdis--color-btn-bg-default: #ddd;
-  --cusdis--color-btn-bg-disabled: rgba(0, 0, 0, 0.5);
-  --cusdis--color-btn-border: none;
-  --cusdis--color-message-text: #fff;
-  --cusdis--color-message-bg: #046582;
-  --cusdis--color-pagination-bg-selected: #ddd;
-  --cusdis--color-comment-indicator-border: #ddd;
-  --cusdis--color-comment-username-text: #000;
-  --cusdis--color-mod-text: rgba(0, 0, 0, 0.8);
-  --cusdis--color-mod-bg: #ddd;
-}
-```
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 6df71384..b3dca3bc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,9 @@
 module.exports = {
   root: "widget",
   server: {
+    hmr: {
+      host: 'localhost'
+    },
     port: 3001,
   },
   plugins: [
diff --git a/vite.iframe.config.js b/vite.iframe.config.js
new file mode 100644
index 00000000..1a4357e4
--- /dev/null
+++ b/vite.iframe.config.js
@@ -0,0 +1,19 @@
+import path from 'path'
+
+module.exports = {
+  root: 'widget',
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'widget', 'iframe.js'),
+      name: 'iframe',
+      fileName: 'iframe',
+      formats: ['umd']
+    },
+    outDir: path.resolve(__dirname, 'public', 'js'),
+  },
+  plugins: [
+    require('rollup-plugin-svelte')({
+      emitCss: false,
+    }),
+  ],
+}
diff --git a/widget/Widget.svelte b/widget/Widget.svelte
index 0420eca0..c417fbdc 100644
--- a/widget/Widget.svelte
+++ b/widget/Widget.svelte
@@ -1,4 +1,5 @@
 <script>
+  import './theme.css'
   import { onMount, setContext } from 'svelte'
   import axios from 'redaxios'
   import Comment from './components/Comment.svelte'
@@ -26,9 +27,28 @@
     message = msg
   }
 
-  window.CUSDIS.setTheme = function(themeName) {
-    theme = themeName
-  }
+  onMount(() => {
+
+    function onMessage(e) {
+      try {
+        const msg = JSON.parse(e.data)
+        if (msg.from === 'cusdis') {
+          switch (msg.event) {
+            case 'setTheme':
+              {
+                theme = msg.data
+              }
+              break
+          }
+        }
+      } catch (e) {}
+    }
+    window.addEventListener('message', onMessage)
+
+    return () => {
+      window.removeEventListener('message', onMessage)
+    }
+  })
 
   setContext('api', api)
   setContext('attrs', attrs)
@@ -40,7 +60,7 @@
     try {
       const res = await api.get(`/api/open/comments`, {
         headers: {
-          'x-timezone-offset': -new Date().getTimezoneOffset()
+          'x-timezone-offset': -new Date().getTimezoneOffset(),
         },
         params: {
           page: p,
@@ -64,24 +84,24 @@
   onMount(() => {
     getComments()
   })
+
 </script>
 
 {#if !error}
-  <div class='cusdis-comment-main' class:dark={theme === 'dark'} class:auto={theme === 'auto'}>
+  <div class:dark={theme === 'dark'}>
     {#if message}
-      <div class="cusdis-message">
+      <div class="p-2 mb-4 bg-blue-500 text-white">
         {message}
       </div>
     {/if}
 
     <Reply />
 
-    <div>
+    <div class="my-8" />
+
+    <div class="mt-4">
       {#if loadingComments}
-        <div
-          class="cusdis-loading-text"
-          style="text-align: center; font-size: .8em;"
-        >
+        <div>
           {t('loading')}...
         </div>
       {:else}
@@ -89,11 +109,11 @@
           <Comment {comment} firstFloor={true} />
         {/each}
         {#if commentsResult.pageCount > 1}
-          <div class="cusdis-paginator">
+          <div>
             {#each Array(commentsResult.pageCount) as _, index}
               <button
-                class:selected={page === index + 1}
-                class="cusdis-pagination-button"
+                class="px-2 py-1 text-sm mr-2 dark:text-gray-200"
+                class:underline={page === index + 1}
                 on:click={(_) => onClickPage(index + 1)}>{index + 1}</button
               >
             {/each}
@@ -102,102 +122,10 @@
       {/if}
     </div>
 
-    <div class="cusdis-footer">
-      <a style="text-decoration: none;" href="https://cusdis.com"
-        >{t('powered_by')}</a
-      >
+    <div class="my-8" />
+
+    <div class="text-center text-sm text-gray-900 dark:text-gray-100">
+      <a class="underline " href="https://cusdis.com">{t('powered_by')}</a>
     </div>
   </div>
 {/if}
-
-<style>
-  :root {
-    --cusdis--color-text-default: rgba(0, 0, 0, 0.8);
-    --cusdis--color-input-border: #ddd;
-    --cusdis--color-btn-text: rgba(0, 0, 0, 0.8);
-    --cusdis--color-btn-bg-default: #ddd;
-    --cusdis--color-btn-bg-disabled: rgba(0, 0, 0, 0.5);
-    --cusdis--color-btn-border: none;
-    --cusdis--color-message-text: #fff;
-    --cusdis--color-message-bg: #046582;
-    --cusdis--color-pagination-bg-selected: #ddd;
-    --cusdis--color-comment-indicator-border: #ddd;
-    --cusdis--color-comment-username-text: #000;
-    --cusdis--color-mod-text: rgba(0, 0, 0, 0.8);
-    --cusdis--color-mod-bg: #ddd;
-  }
-
-  .dark {
-    --cusdis--color-text-default: rgba(243, 244, 246, 0.8);
-    --cusdis--color-input-border: rgb(229, 231, 235);
-    --cusdis--color-btn-text: var(--cusdis--color-text-default);
-    --cusdis--color-btn-bg-default: rgb(229, 231, 235, 0);
-    --cusdis--color-btn-bg-disabled: rgba(55, 65, 81, 0.5);
-    --cusdis--color-btn-border: 2px solid var(--cusdis--color-text-default);
-    --cusdis--color-message-text: rgba(243, 244, 246, 0.8);
-    --cusdis--color-pagination-bg-selected: rgb(229, 231, 235);
-    --cusdis--color-comment-indicator-border: rgb(229, 231, 235);
-    --cusdis--color-comment-username-text: #fff;
-    --cusdis--color-mod-text: rgba(55, 65, 81, 0.8);
-    --cusdis--color-mod-bg: rgb(229, 231, 235);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .auto {
-      --cusdis--color-text-default: rgba(243, 244, 246, 0.8);
-      --cusdis--color-input-border: rgb(229, 231, 235);
-      --cusdis--color-btn-text: var(--cusdis--color-text-default);
-      --cusdis--color-btn-bg-default: rgb(229, 231, 235, 0);
-      --cusdis--color-btn-bg-disabled: rgba(55, 65, 81, 0.5);
-      --cusdis--color-btn-border: 2px solid var(--cusdis--color-text-default);
-      --cusdis--color-message-text: rgba(243, 244, 246, 0.8);
-      --cusdis--color-message-bg: #046582; /* no need change for now */
-      --cusdis--color-pagination-bg-selected: rgb(229, 231, 235);
-      --cusdis--color-comment-indicator-border: rgb(229, 231, 235);
-      --cusdis--color-comment-username-text: #fff;
-      --cusdis--color-mod-text: rgba(55, 65, 81, 0.8);
-      --cusdis--color-mod-bg: rgb(229, 231, 235);
-    }
-  }
-
-  .cusdis-footer {
-    margin-top: 1em;
-    font-size: 0.8em;
-    text-align: center;
-    color: var(--cusdis--color-text-default);
-  }
-
-  .cusdis-loading-text {
-    color: var(--cusdis--color-text-default);
-  }
-  .cusdis-comment-main {
-    font-size: 17px;
-  }
-  .cusdis-message {
-    background-color: var(--cusdis--color-message-bg);
-    color: var(--cusdis--color-message-text);
-    padding: 0.5em;
-    font-size: 1em;
-  }
-
-  .cusdis-paginator {
-    display: flex;
-  }
-
-  .cusdis-pagination-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    margin-right: 0.5em;
-    padding: 0.2em 0.5em;
-    box-sizing: border-box;
-  }
-
-  .cusdis-pagination-button.selected {
-    background-color: var(--cusdis--color-pagination-bg-selected);
-  }
-
-  .cusdis-footer a {
-    color: var(--cusdis--color-text-default);
-  }
-</style>
diff --git a/widget/components/Comment.svelte b/widget/components/Comment.svelte
index bf351158..a4ebbfbc 100644
--- a/widget/components/Comment.svelte
+++ b/widget/components/Comment.svelte
@@ -5,101 +5,66 @@
   import Reply from './Reply.svelte'
   export let comment
   export let showReplyForm = false
+  export let isChild = false
 
   const { showIndicator } = getContext('attrs')
+
 </script>
 
 <div
-  class:cusdis-padding={true}
+  class="my-4"
+  class:pl-4={isChild}
+  class:border-l-2={isChild}
+  class:border-color-gray-200={isChild}
   class:cusdis-indicator={showIndicator}
-  style="margin-top: 2em; margin-bottom: 2em;"
 >
-  <div style="margin-bottom: .5em;">
-    <div class="cusdis-comment-nickname cusdis-inline cusdis-font-bold">
+  <div class="flex items-center">
+    <div class="mr-2 font-medium dark:text-gray-100">
       {comment.by_nickname}
     </div>
+
     {#if comment.moderatorId}
-      <span class="cusdis-mod">MOD</span>
+      <div class="mr-2 dark:bg-gray-500 bg-gray-200 text-xs py-0.5 px-1 rounded dark:text-gray-100">
+        <span>MOD</span>
+      </div>
     {/if}
-    <div class="cusdis-comment-date cusdis-inline">
-      {comment.parsedCreatedAt}
-    </div>
   </div>
 
-  <div class="cusdis-comment-content" style="margin-bottom: .5em;">
-    {@html comment.parsedContent}
+  <div class="text-gray-500 text-sm dark:text-gray-400">
+    {comment.parsedCreatedAt}
   </div>
 
-  <div style="margin-top: .25em; margin-bottom: .25em;">
-    <button style="" type="button" on:click={_ => { showReplyForm = !showReplyForm }} class="cusdis-link-btn">{t('reply_btn')}</button>
+  <div class="text-gray-500 my-2 dark:text-gray-200">
+    {@html comment.parsedContent}
   </div>
 
-  {#if showReplyForm}
-    <Reply
-      parentId={comment.id}
-      onSuccess={() => {
-        showReplyForm = false
-      }}
-    />
-  {/if}
-
   {#if comment.replies.data.length > 0}
     {#each comment.replies.data as child (child.id)}
-      <svelte:self comment={child} />
+      <svelte:self isChild={true} comment={child} />
     {/each}
   {/if}
-</div>
 
-<style>
-  .cusdis-padding {
-    padding-left: 1em;
-  }
-
-  .cusdis-indicator {
-    border-left: 2px solid;
-    border-left-color: var(--cusdis--color-comment-indicator-border);
-  }
-  .cusdis-font-bold {
-    font-weight: bold;
-  }
-
-  .cusdis-inline {
-    display: inline-block;
-  }
-
-  .cusdis-comment-nickname {
-    font-size: 1em;
-    color: var(--cusdis--color-comment-username-text);
-  }
+  <div>
+    <button
+      class="font-medium text-sm text-gray-500 dark:bg-transparent dark:text-gray-100"
+      type="button"
+      on:click={(_) => {
+        showReplyForm = !showReplyForm
+      }}>{t('reply_btn')}</button
+    >
+  </div>
 
-  .cusdis-comment-content {
-    color: var(--cusdis--color-text-default);
-    font-size: 1em;
-  }
 
-  .cusdis-comment-date {
-    color: var(--cusdis--color-text-default);
-    font-size: 0.8em;
-  }
+  {#if showReplyForm}
+    <div class="mt-4 pl-4 border-l-2 border-gray-200">
+      <Reply
+        parentId={comment.id}
+        onSuccess={() => {
+          showReplyForm = false
+        }}
+      />
+    </div>
+  {/if}
 
-  .cusdis-link-btn {
-    font-size: 0.8em;
-    text-decoration: underline;
-    cursor: pointer;
-    border: 0;
-    margin: 0;
-    background: none;
-    padding: 0;
-    color: var(--cusdis--color-text-default);
-  }
 
-  .cusdis-mod {
-    background-color: var(--cusdis--color-mod-bg);
-    font-size: 0.8em;
-    box-sizing: border-box;
-    padding: 0.15em 0.4em;
-    border-radius: 4px;
-    font-weight: bold;
-    color: var(--cusdis--color-mod-text);
-  }
-</style>
+</div>
diff --git a/widget/components/Reply.svelte b/widget/components/Reply.svelte
index 45fcab2c..7f938755 100644
--- a/widget/components/Reply.svelte
+++ b/widget/components/Reply.svelte
@@ -56,23 +56,23 @@
   }
 </script>
 
-<div style="margin-top: 1em;">
-  <div class="cusdis-reply-info cusdis-field">
+<div class="grid grid-cols-1 gap-4">
+  <div class="grid grid-cols-2 gap-4">
     <div>
-      <input type="text" placeholder={t('nickname')} bind:value={nickname} />
+      <input class="w-full p-2 border border-gray-100 dark:bg-transparent dark:text-gray-100 dark:outline-none" type="text" placeholder={t('nickname')} bind:value={nickname} />
     </div>
     <div>
-      <input type="text" placeholder={t('email')} bind:value={email} />
+      <input class="w-full p-2 border border-gray-100 dark:bg-transparent  dark:text-gray-100 dark:outline-none" type="text" placeholder={t('email')} bind:value={email} />
     </div>
   </div>
 
-  <div class="cusdis-field">
-    <textarea bind:value={content} placeholder={t('reply_placeholder')} />
+  <div>
+    <textarea class="w-full p-2 border border-gray-100 h-24 dark:bg-transparent dark:text-gray-100 dark:outline-none" bind:value={content} placeholder={t('reply_placeholder')} />
   </div>
 
-  <div class="cusdis-field">
+  <div>
     <button
-      class="submit-btn"
+      class="text-sm bg-gray-200 p-2 px-4 font-bold"
       class:cusdis-disabled={loading}
       on:click={addComment}>{loading ? t('sending') : t('post_comment')}</button
     >
@@ -80,7 +80,7 @@
 </div>
 
 <style>
-  textarea,
+  /* textarea,
   input {
     width: 100%;
     border: 2px solid;
@@ -141,5 +141,5 @@
   .cusdis-field {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
-  }
+  } */
 </style>
diff --git a/widget/iframe.js b/widget/iframe.js
new file mode 100644
index 00000000..80960944
--- /dev/null
+++ b/widget/iframe.js
@@ -0,0 +1,50 @@
+import Widget from './Widget.svelte'
+
+window.CUSDIS = {}
+
+const parent = window.parent
+const target = document.querySelector('#root')
+
+const dataset = window.__DATA__
+const widget = new Widget({
+  target,
+  props: {
+    attrs: dataset,
+  },
+})
+
+function postMessage(event, data = {}) {
+  parent.postMessage(
+    JSON.stringify({
+      from: 'cusdis',
+      event,
+      data,
+    }),
+  )
+}
+
+postMessage('onload')
+requestResize()
+
+function requestResize() {
+  postMessage('resize', document.documentElement.offsetHeight)
+}
+
+const resizeObserve = new MutationObserver(() => {
+  requestResize()
+})
+
+resizeObserve.observe(target, {
+  childList: true,
+  subtree: true
+})
+
+window.addEventListener('message', (e) => {
+  const msg = JSON.parse(e.data)
+
+  switch (msg.event) {
+    case 'dataset': {
+      
+    }
+  }
+})
diff --git a/widget/index.html b/widget/index.html
index 3367c836..f290ca33 100644
--- a/widget/index.html
+++ b/widget/index.html
@@ -7,6 +7,7 @@
   <style>
     :root {
       --bg-color: white;
+
     }
 
     @media (prefers-color-scheme: dark) {
@@ -20,8 +21,8 @@
 
 <body style="background-color: var(--bg-color);">
   <div style="width: 70%; margin: 0 auto;">
-    <div id="cusdis_thread" data-theme="auto" data-host="http://localhost:3000" data-app-id="ae2609bf-7976-498a-a380-cc290e02e56a"
-      data-page-id="svelte" data-show-indicator="true"></div>
+    <div id="cusdis_thread" data-theme="auto" data-page-title="testing" data-iframe="http://localhost:3001/iframe.js" data-host="http://localhost:3000"
+      data-app-id="b6e722e4-fa20-471c-aec0-23ae67537c84" data-page-id="lalala" data-show-indicator="true"></div>
     <script src="http://localhost:3000/js/widget/lang/zh-cn.js"></script>
     <script type="module" async src="/index.js"></script>
     <!-- <script async src="http://localhost:3000/js/cusdis.es.js"></script> -->
diff --git a/widget/index.js b/widget/index.js
index 4e362263..d35254cf 100644
--- a/widget/index.js
+++ b/widget/index.js
@@ -1,16 +1,105 @@
-import Widget from "./Widget.svelte";
-
 window.CUSDIS = {}
 
+const makeIframeContent = (target) => {
+  const host = target.dataset.host || 'https://cusdis.com'
+  const iframeJsPath = target.dataset.iframe || `${host}/js/iframe.umd.js`
+  const cssPath = `${host}/js/style.css`
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="${cssPath}">
+    <base target="_parent" />
+    <link>
+    <script>
+      window.CUSDIS_LOCALE = ${JSON.stringify(window.CUSDIS_LOCALE)}
+      window.__DATA__ = ${JSON.stringify(target.dataset)}
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="${iframeJsPath}" type="module">
+      
+    </script>
+  </body>
+</html>`
+}
+
+let singleTonIframe
+function createIframe(target) {
+  if (!singleTonIframe) {
+    singleTonIframe = document.createElement('iframe')
+    listenEvent(singleTonIframe, target)
+  }
+  // srcdoc dosen't work on IE11
+  singleTonIframe.srcdoc = makeIframeContent(target)
+  singleTonIframe.style.width = '100%'
+  singleTonIframe.style.border = '0'
+
+  return singleTonIframe
+}
+
+function postMessage(event, data) {
+  if (singleTonIframe) {
+    singleTonIframe.contentWindow.postMessage(
+      JSON.stringify({
+        from: 'cusdis',
+        event,
+        data,
+      }),
+    )
+  }
+}
+
+function listenEvent(iframe, target) {
+  const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+  const onMessage = (e) => {
+    try {
+      const msg = JSON.parse(e.data)
+      if (msg.from === 'cusdis') {
+        switch (msg.event) {
+          case 'onload':
+            {
+              if (target.dataset.theme === 'auto') {
+                postMessage(
+                  'setTheme',
+                  darkModeQuery.matches ? 'dark' : 'light',
+                )
+              }
+            }
+            break
+          case 'resize':
+            {
+              iframe.style.height = msg.data + 'px'
+            }
+            break
+        }
+      }
+    } catch (e) {}
+  }
+
+  window.addEventListener('message', onMessage)
+
+  function onChangeColorScheme(e) {
+    const isDarkMode = e.matches
+    if (target.dataset.theme === 'auto') {
+      postMessage('setTheme', isDarkMode ? 'dark' : 'light')
+    }
+  }
+
+  darkModeQuery.addEventListener('change', onChangeColorScheme)
+
+  return () => {
+    darkModeQuery.removeEventListener('change', onChangeColorScheme)
+    window.removeEventListener('message', onMessage)
+  }
+}
+
 function render(target) {
   if (target) {
     target.innerHTML = ''
-    new Widget({
-      target,
-      props: {
-        attrs: target.dataset,
-      },
-    });
+    const iframe = createIframe(target)
+    target.appendChild(iframe)
   }
 }
 
@@ -19,6 +108,10 @@ window.renderCusdis = render
 
 window.CUSDIS.renderTo = render
 
+window.CUSDIS.setTheme = function (theme) {
+  postMessage('setTheme', theme)
+}
+
 function initial() {
   let target
 
@@ -44,4 +137,4 @@ function initial() {
 // initialize
 window.CUSDIS.initial = initial
 
-initial()
\ No newline at end of file
+initial()
diff --git a/widget/lang/en.js b/widget/lang/en.js
index 3df76a0c..d89782a8 100644
--- a/widget/lang/en.js
+++ b/widget/lang/en.js
@@ -1,6 +1,6 @@
 export default {
   powered_by: 'Powered by Cusdis',
-  post_comment: 'Post Comment',
+  post_comment: 'Comment',
   loading: 'Loading',
 
   // comment
diff --git a/widget/theme.css b/widget/theme.css
index 91955fc3..9bb37ee6 100644
--- a/widget/theme.css
+++ b/widget/theme.css
@@ -1,64 +1,4 @@
-.comment-main {
-  --color-text-default: rgba(0, 0, 0, 0.8);
-  --color-input-border: #ddd;
-  --color-btn-text: rgba(0, 0, 0, 0.8);
-  --color-btn-bg-default: #ddd;
-  --color-btn-bg-disabled: rgba(0, 0, 0, 0.5);
-  --color-btn-border: none;
-  --color-message-text: #fff;
-  --color-message-bg: #046582;
-  --color-pagination-bg-selected: #ddd;
-  --color-comment-indicator-border: #ddd;
-  --color-comment-username-text: #000;
-  --color-mod-text: rgba(0, 0, 0, 0.8);
-  --color-mod-bg: #ddd;
-}
 
-.dark {
-  --color-text-default: rgba(243, 244, 246, 0.8);
-  --color-input-border: rgb(229, 231, 235);
-  --color-btn-text: var(--color-text-default);
-  --color-btn-bg-default: rgb(229, 231, 235, 0);
-  --color-btn-bg-disabled: rgba(55, 65, 81, 0.5);
-  --color-btn-border: 2px solid var(--color-text-default);
-  --color-message-text: rgba(243, 244, 246, 0.8);
-  --color-message-bg: #046582; /* no need change for now */
-  --color-pagination-bg-selected: rgb(229, 231, 235);
-  --color-comment-indicator-border: rgb(229, 231, 235);
-  --color-comment-username-text: #fff;
-  --color-mod-text: rgba(55, 65, 81, 0.8);
-  --color-mod-bg: rgb(229, 231, 235);
-}
-
-.auto {
-  --color-text-default: rgba(0, 0, 0, 0.8);
-  --color-input-border: #ddd;
-  --color-btn-text: rgba(0, 0, 0, 0.8);
-  --color-btn-bg-default: #ddd;
-  --color-btn-bg-disabled: rgba(0, 0, 0, 0.5);
-  --color-btn-border: none;
-  --color-message-text: #fff;
-  --color-message-bg: #046582;
-  --color-pagination-bg-selected: #ddd;
-  --color-comment-indicator-border: #ddd;
-  --color-comment-username-text: #000;
-  --color-mod-text: rgba(0, 0, 0, 0.8);
-  --color-mod-bg: #ddd;
-}
-@media (prefers-color-scheme: dark) {
-  .auto {
-    --color-text-default: rgba(243, 244, 246, 0.8);
-    --color-input-border: rgb(229, 231, 235);
-    --color-btn-text: var(--color-text-default);
-    --color-btn-bg-default: rgb(229, 231, 235, 0);
-    --color-btn-bg-disabled: rgba(55, 65, 81, 0.5);
-    --color-btn-border: 2px solid var(--color-text-default);
-    --color-message-text: rgba(243, 244, 246, 0.8);
-    --color-message-bg: #046582; /* no need change for now */
-    --color-pagination-bg-selected: rgb(229, 231, 235);
-    --color-comment-indicator-border: rgb(229, 231, 235);
-    --color-comment-username-text: #fff;
-    --color-mod-text: rgba(55, 65, 81, 0.8);
-    --color-mod-bg: rgb(229, 231, 235);
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;