Merge branch 'dev' into feat/mermaid

2023-04-13 21:22:19 +08:00 · 2023-04-13 21:22:19 +08:00 · 9bc7cf282f
parent a6b31f87b8 63756f659c
commit 9bc7cf282f
37 changed files with 2596 additions and 180 deletions
--- a/data/showcase.json
+++ b/data/showcase.json
@ -11,5 +11,6 @@
  51585, 48937, 51379, 51460, 51084, 51509, 51478, 51639, 48910, 51139, 39329,
  51683, 51077, 51374, 49120, 47356, 17096, 50708, 51430, 51935, 51756, 6558,
  49392, 52186, 52055, 52282, 52270, 5825, 51351, 52233, 51308, 52388, 52280,
-  52718, 52951, 52103, 52314, 52336, 52816, 52766, 52760, 660, 52728, 52683
+  52718, 52951, 52103, 52314, 52336, 52816, 52766, 52760, 660, 52728, 52683,
+  51617, 53087, 53081
 ]
--- a/data/titles.json
+++ b/data/titles.json
@ -4,7 +4,7 @@
    "link": "https://github.com/Crossbell-Box/xLog/graphs/contributors",
    "list": [
      10, 30, 12, 32022, 32179, 45, 19, 4583, 4381, 32168, 33446, 33492, 52055,
-      153, 50143, 51470, 31132
+      153, 50143, 51470, 31132, 45089
    ]
  }
 ]
--- a/data/topics.json
+++ b/data/topics.json
@ -3,6 +3,9 @@
    "name": "xLog",
    "description": "Let's talk about xLog, whether to praise or criticize it.",
    "notes": [
+      "25531-1",
+      "52800-29",
+      "53172-1",
      "45089-31",
      "52683-1",
      "51829-2",
@ -69,6 +72,7 @@
    "name": "ChatGPT",
    "description": "The world is undergoing a fusion, and we are in the center of it.",
    "notes": [
+      "33795-1",
      "51191-15",
      "50161-58",
      "53014-1",
--- a/package.json
+++ b/package.json
@ -28,14 +28,16 @@
    "@codemirror/lang-markdown": "6.1.0",
    "@codemirror/language": "6.6.0",
    "@codemirror/state": "6.2.0",
+    "@codemirror/theme-one-dark": "6.1.1",
    "@codemirror/view": "6.9.4",
-    "@crossbell/connect-kit": "0.0.63",
-    "@crossbell/contract": "0.0.63",
-    "@crossbell/indexer": "0.0.63",
-    "@crossbell/notification": "0.0.63",
-    "@crossbell/ui": "0.0.63",
-    "@crossbell/util-hooks": "0.0.63",
-    "@dqbd/tiktoken": "^1.0.4",
+    "@crossbell/connect-kit": "0.0.64",
+    "@crossbell/contract": "0.0.64",
+    "@crossbell/indexer": "0.0.64",
+    "@crossbell/notification": "0.0.64",
+    "@crossbell/ui": "0.0.64",
+    "@crossbell/util-hooks": "0.0.64",
+    "@ddietr/codemirror-themes": "1.4.0",
+    "@dqbd/tiktoken": "^1.0.6",
    "@emoji-mart/data": "1.1.2",
    "@emoji-mart/react": "1.1.1",
    "@floating-ui/react": "^0.23.0",
@ -55,7 +57,7 @@
    "canvas-confetti": "^1.6.0",
    "chroma-js": "^2.4.2",
    "clsx": "1.2.1",
-    "crossbell.js": "0.19.7",
+    "crossbell.js": "0.19.8",
    "dayjs": "1.11.7",
    "dotenv": "16.0.3",
    "emoji-mart": "5.5.2",
@ -86,6 +88,7 @@
    "react-parallax-tilt": "^1.7.127",
    "react-scroll": "1.8.9",
    "react-sortablejs": "6.1.4",
+    "react-string-replace": "^1.1.0",
    "refractor": "4.8.1",
    "rehype-autolink-headings": "6.1.1",
    "rehype-infer-description-meta": "^1.1.0",
@ -116,7 +119,8 @@
    "unist-util-visit": "4.1.2",
    "use-onclickoutside": "0.4.1",
    "uuid": "9.0.0",
-    "wagmi": "0.12.10"
+    "wagmi": "0.12.10",
+    "zustand": "^4.3.7"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "13.3.0",
@ -129,7 +133,7 @@
    "@types/mjml": "4.7.1",
    "@types/node": "18.15.11",
    "@types/prismjs": "1.26.0",
-    "@types/react": "18.0.34",
+    "@types/react": "18.0.35",
    "@types/react-dom": "18.0.11",
    "@types/react-infinite-scroller": "1.2.3",
    "@types/react-scroll": "1.8.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -13,30 +13,36 @@ dependencies:
  '@codemirror/state':
    specifier: 6.2.0
    version: 6.2.0
+  '@codemirror/theme-one-dark':
+    specifier: 6.1.1
+    version: 6.1.1
  '@codemirror/view':
    specifier: 6.9.4
    version: 6.9.4
  '@crossbell/connect-kit':
-    specifier: 0.0.63
-    version: 0.0.63(@tanstack/react-query@4.29.1)(@types/react@18.0.34)(ethers@5.7.2)(react-dom@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
+    specifier: 0.0.64
+    version: 0.0.64(@tanstack/react-query@4.29.1)(@types/react@18.0.35)(ethers@5.7.2)(react-dom@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
  '@crossbell/contract':
-    specifier: 0.0.63
-    version: 0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
+    specifier: 0.0.64
+    version: 0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
  '@crossbell/indexer':
-    specifier: 0.0.63
-    version: 0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
+    specifier: 0.0.64
+    version: 0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
  '@crossbell/notification':
-    specifier: 0.0.63
-    version: 0.0.63(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@tanstack/react-query@4.29.1)(@types/react@18.0.34)(ethers@5.7.2)(immer@9.0.21)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
+    specifier: 0.0.64
+    version: 0.0.64(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@tanstack/react-query@4.29.1)(@types/react@18.0.35)(ethers@5.7.2)(immer@9.0.21)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
  '@crossbell/ui':
-    specifier: 0.0.63
-    version: 0.0.63(@types/react@18.0.34)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
+    specifier: 0.0.64
+    version: 0.0.64(@types/react@18.0.35)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
  '@crossbell/util-hooks':
-    specifier: 0.0.63
-    version: 0.0.63(react-dom@18.2.0)(react@18.2.0)
+    specifier: 0.0.64
+    version: 0.0.64(react-dom@18.2.0)(react@18.2.0)
+  '@ddietr/codemirror-themes':
+    specifier: 1.4.0
+    version: 1.4.0
  '@dqbd/tiktoken':
-    specifier: ^1.0.4
-    version: 1.0.4
+    specifier: ^1.0.6
+    version: 1.0.6
  '@emoji-mart/data':
    specifier: 1.1.2
    version: 1.1.2
@ -57,7 +63,7 @@ dependencies:
    version: 1.1.5
  '@mantine/core':
    specifier: ^6.0.7
-    version: 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.34)(react-dom@18.2.0)(react@18.2.0)
+    version: 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.35)(react-dom@18.2.0)(react@18.2.0)
  '@monaco-editor/react':
    specifier: 4.5.0
    version: 4.5.0(monaco-editor@0.37.1)(react-dom@18.2.0)(react@18.2.0)
@ -95,8 +101,8 @@ dependencies:
    specifier: 1.2.1
    version: 1.2.1
  crossbell.js:
-    specifier: 0.19.7
-    version: 0.19.7
+    specifier: 0.19.8
+    version: 0.19.8
  dayjs:
    specifier: 1.11.7
    version: 1.11.7
@ -187,6 +193,9 @@ dependencies:
  react-sortablejs:
    specifier: 6.1.4
    version: 6.1.4(@types/sortablejs@1.15.1)(react-dom@18.2.0)(react@18.2.0)(sortablejs@1.15.0)
+  react-string-replace:
+    specifier: ^1.1.0
+    version: 1.1.0
  refractor:
    specifier: 4.8.1
    version: 4.8.1
@ -207,7 +216,7 @@ dependencies:
    version: 6.1.1
  rehype-react:
    specifier: 7.1.2
-    version: 7.1.2(@types/react@18.0.34)
+    version: 7.1.2(@types/react@18.0.35)
  rehype-sanitize:
    specifier: 5.0.1
    version: 5.0.1
@ -273,13 +282,16 @@ dependencies:
    version: 4.1.2
  use-onclickoutside:
    specifier: 0.4.1
-    version: 0.4.1(@types/react@18.0.34)(react@18.2.0)
+    version: 0.4.1(@types/react@18.0.35)(react@18.2.0)
  uuid:
    specifier: 9.0.0
    version: 9.0.0
  wagmi:
    specifier: 0.12.10
    version: 0.12.10(@babel/core@7.21.4)(@types/node@18.15.11)(ethers@5.7.2)(immer@9.0.21)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)
+  zustand:
+    specifier: ^4.3.7
+    version: 4.3.7(immer@9.0.21)(react@18.2.0)

 devDependencies:
  '@next/bundle-analyzer':
@ -313,8 +325,8 @@ devDependencies:
    specifier: 1.26.0
    version: 1.26.0
  '@types/react':
-    specifier: 18.0.34
-    version: 18.0.34
+    specifier: 18.0.35
+    version: 18.0.35
  '@types/react-dom':
    specifier: 18.0.11
    version: 18.0.11
@ -1768,28 +1780,28 @@ packages:
      - utf-8-validate
    dev: false

-  /@crossbell/connect-kit@0.0.63(@tanstack/react-query@4.29.1)(@types/react@18.0.34)(ethers@5.7.2)(react-dom@18.2.0)(typescript@5.0.4)(wagmi@0.12.10):
-    resolution: {integrity: sha512-fZ1/twjdkbF3uF7bPStP32zpCSOpRl75gX2meLDL1H0arbypeBOAhqZNnuXG/iceSPdCAd81bh9jg5UAK1tVAg==}
+  /@crossbell/connect-kit@0.0.64(@tanstack/react-query@4.29.1)(@types/react@18.0.35)(ethers@5.7.2)(react-dom@18.2.0)(typescript@5.0.4)(wagmi@0.12.10):
+    resolution: {integrity: sha512-+62LVfWa3NPBCuY/mprS9FxrCyUNroiJvtnXb6AZC7eMmLRXCWHTs7Y4ETA7t/4XaKSQ2PD41NUz159bXQSmDA==}
    peerDependencies:
      '@tanstack/react-query': ^4
      ethers: ^5
      wagmi: ^0.12
    dependencies:
-      '@crossbell/contract': 0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
-      '@crossbell/indexer': 0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
-      '@crossbell/ui': 0.0.63(@types/react@18.0.34)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
-      '@crossbell/util-ethers': 0.0.63
-      '@crossbell/util-hooks': 0.0.63(react-dom@18.2.0)(react@18.2.0)
-      '@crossbell/util-metadata': 0.0.63
-      '@emotion/react': 11.10.6(@types/react@18.0.34)(react@18.2.0)
-      '@mantine/core': 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.34)(react-dom@18.2.0)(react@18.2.0)
+      '@crossbell/contract': 0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
+      '@crossbell/indexer': 0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
+      '@crossbell/ui': 0.0.64(@types/react@18.0.35)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
+      '@crossbell/util-ethers': 0.0.64
+      '@crossbell/util-hooks': 0.0.64(react-dom@18.2.0)(react@18.2.0)
+      '@crossbell/util-metadata': 0.0.64
+      '@emotion/react': 11.10.6(@types/react@18.0.35)(react@18.2.0)
+      '@mantine/core': 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.35)(react-dom@18.2.0)(react@18.2.0)
      '@mantine/hooks': 6.0.7(react@18.2.0)
      '@mantine/notifications': 6.0.7(@mantine/core@6.0.7)(@mantine/hooks@6.0.7)(react-dom@18.2.0)(react@18.2.0)
      '@tanstack/react-query': 4.29.1(react-dom@18.2.0)(react@18.2.0)
      canvas-confetti: 1.6.0
      check-password-strength: 2.0.7
      classnames: 2.3.2
-      crossbell.js: 0.19.7
+      crossbell.js: 0.19.8
      detect-browser: 5.3.0
      embla-carousel-react: 7.1.0(react@18.2.0)
      ethers: 5.7.2
@ -1813,16 +1825,16 @@ packages:
      - utf-8-validate
    dev: false

-  /@crossbell/contract@0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10):
-    resolution: {integrity: sha512-yzNYtfLUc/BUp3U0xsqAp/h+nWJ+rGo80jyLEYFIkYLWYYFFj1qJ5o97XV8IzZ9ENJnH8EipDxxkLnrchV0KMA==}
+  /@crossbell/contract@0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10):
+    resolution: {integrity: sha512-GJEFQ4Bhhw9n034w7Q+oKASQwQ5odfnalV3NSHTlrugs4cPg9UAk+VXfAAx322WhGUu5crYeqVPg89iZSBWEYg==}
    peerDependencies:
      ethers: ^5
      react: ^18
      wagmi: ^0.12
    dependencies:
-      '@crossbell/indexer': 0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
-      '@crossbell/util-hooks': 0.0.63(react-dom@18.2.0)(react@18.2.0)
-      crossbell.js: 0.19.7
+      '@crossbell/indexer': 0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
+      '@crossbell/util-hooks': 0.0.64(react-dom@18.2.0)(react@18.2.0)
+      crossbell.js: 0.19.8
      ethers: 5.7.2
      react: 18.2.0
      wagmi: 0.12.10(@babel/core@7.21.4)(@types/node@18.15.11)(ethers@5.7.2)(immer@9.0.21)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)
@ -1834,14 +1846,14 @@ packages:
      - utf-8-validate
    dev: false

-  /@crossbell/indexer@0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10):
-    resolution: {integrity: sha512-beN6iH6en+nb7HFDu0rle7zlGCIg7xrDcz6OZ9S8JsPcUHJEx05LAE442LTFGkZblec0iFFdgdjQQItsvAVxNg==}
+  /@crossbell/indexer@0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10):
+    resolution: {integrity: sha512-hgnYP0Ir+8mw5VY/UEEMNkWZrcl9sM5xBm83oycRVAVZj3wqorqDkM2XKxYtVZzkUJTRmJImym/STuUUJO+AuA==}
    peerDependencies:
      ethers: ^5
      wagmi: ^0.12
    dependencies:
      '@tanstack/react-query': 4.29.1(react-dom@18.2.0)(react@18.2.0)
-      crossbell.js: 0.19.7
+      crossbell.js: 0.19.8
      dayjs: 1.11.7
      ethers: 5.7.2
      lodash.compact: 3.0.1
@ -1860,20 +1872,20 @@ packages:
    resolution: {integrity: sha512-AYGDrwiSKqCGNDi0mEPP1k+96loWik+Pd40xH0MzRNM4RtCutPbwm4o+Sj5iWu0tlHoQC2bTs1XcufsLiv+WYw==}
    dev: false

-  /@crossbell/notification@0.0.63(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@tanstack/react-query@4.29.1)(@types/react@18.0.34)(ethers@5.7.2)(immer@9.0.21)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10):
-    resolution: {integrity: sha512-xKdUC6PfBUgxxDbpVvrqS+so6H+ax0FW0fxYp02V7daYUV5Ff/nbKHKd50dVe+49Qd2Y+uZF8/GVao3jAlaEew==}
+  /@crossbell/notification@0.0.64(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@tanstack/react-query@4.29.1)(@types/react@18.0.35)(ethers@5.7.2)(immer@9.0.21)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10):
+    resolution: {integrity: sha512-Dvt0lCGrueDczf9zZvnaxOTK53MuvQ66Q39OhEX/QI/e3HC/CCy0YcSvqJQ1Fj/cyNTSBDGG6fUIXMWmwP7zcw==}
    peerDependencies:
      '@tanstack/react-query': ^4
      ethers: ^5
      react: ^18
      wagmi: ^0.12
    dependencies:
-      '@crossbell/connect-kit': 0.0.63(@tanstack/react-query@4.29.1)(@types/react@18.0.34)(ethers@5.7.2)(react-dom@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
-      '@crossbell/indexer': 0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
-      '@crossbell/ui': 0.0.63(@types/react@18.0.34)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
-      '@crossbell/util-hooks': 0.0.63(react-dom@18.2.0)(react@18.2.0)
-      '@crossbell/util-metadata': 0.0.63
-      '@mantine/core': 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.34)(react-dom@18.2.0)(react@18.2.0)
+      '@crossbell/connect-kit': 0.0.64(@tanstack/react-query@4.29.1)(@types/react@18.0.35)(ethers@5.7.2)(react-dom@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
+      '@crossbell/indexer': 0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
+      '@crossbell/ui': 0.0.64(@types/react@18.0.35)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10)
+      '@crossbell/util-hooks': 0.0.64(react-dom@18.2.0)(react@18.2.0)
+      '@crossbell/util-metadata': 0.0.64
+      '@mantine/core': 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.35)(react-dom@18.2.0)(react@18.2.0)
      '@tanstack/react-query': 4.29.1(react-dom@18.2.0)(react@18.2.0)
      classnames: 2.3.2
      dayjs: 1.11.7
@ -1895,23 +1907,23 @@ packages:
      - utf-8-validate
    dev: false

-  /@crossbell/ui@0.0.63(@types/react@18.0.34)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10):
-    resolution: {integrity: sha512-+JRqJVw2nCvMjmpdS/SrV3WzvCPXlOWWboqLtn0R24ps4oFltbsw048nrAyTQeVIn2zEXbVgsKqAGU/ORFlLeA==}
+  /@crossbell/ui@0.0.64(@types/react@18.0.35)(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)(wagmi@0.12.10):
+    resolution: {integrity: sha512-nB/0kH3LMpq6MMnGlpl7Img5wl9rYTXK2ApHQXxQM/GsEprceMm3RBw1GIu5h6Pw3+CS6vy22N7Ibb+Qo79DSg==}
    peerDependencies:
      react: ^18
      react-dom: ^18
    dependencies:
-      '@crossbell/indexer': 0.0.63(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
-      '@crossbell/util-hooks': 0.0.63(react-dom@18.2.0)(react@18.2.0)
-      '@crossbell/util-metadata': 0.0.63
+      '@crossbell/indexer': 0.0.64(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(wagmi@0.12.10)
+      '@crossbell/util-hooks': 0.0.64(react-dom@18.2.0)(react@18.2.0)
+      '@crossbell/util-metadata': 0.0.64
      '@tanstack/react-query': 4.29.1(react-dom@18.2.0)(react@18.2.0)
      classnames: 2.3.2
-      crossbell.js: 0.19.7
+      crossbell.js: 0.19.8
      facepaint: 1.2.1
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
      react-intersection-observer: 9.4.3(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.0.34)(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.0.35)(react@18.2.0)
      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
      ts-essentials: 9.3.1(typescript@5.0.4)
    transitivePeerDependencies:
@ -1925,17 +1937,17 @@ packages:
      - wagmi
    dev: false

-  /@crossbell/util-ethers@0.0.63:
-    resolution: {integrity: sha512-gtQUhWaB0Ldgz8PGebw5rnA7eMnSyIG+gMfCp+WgwByuug0quwEmAmr2mc4ehFkgXOsSvD20Qpju+J1XCdCFow==}
+  /@crossbell/util-ethers@0.0.64:
+    resolution: {integrity: sha512-GA9Mhca0WsFLdG1AkOnG2wlw2pemz2Wby570iB/+zVwEFmS4kUWW0SAIMcOgzL9icfyQ9LsDfL3G+UOVP00j6A==}
    dev: false

-  /@crossbell/util-hooks@0.0.63(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-VPjiXI0/Lnp4JnFiYtjz43e31jlShuoT61F/pjT8rvHQicCqgXxKKee+Rw7ZRU1wgWRCjqlaESE1XYWhjDkySA==}
+  /@crossbell/util-hooks@0.0.64(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-tOTIajzkWesycAON4oeB66jQeNszGgSvfuQThMYjXZXX7yHDPHLCMwgpgoglLFQe1iORgCOv3OIwkiwpmxxKiQ==}
    peerDependencies:
      react: ^18
    dependencies:
      '@tanstack/react-query': 4.29.1(react-dom@18.2.0)(react@18.2.0)
-      crossbell.js: 0.19.7
+      crossbell.js: 0.19.8
      react: 18.2.0
    transitivePeerDependencies:
      - bufferutil
@ -1945,12 +1957,12 @@ packages:
      - utf-8-validate
    dev: false

-  /@crossbell/util-metadata@0.0.63:
-    resolution: {integrity: sha512-7FeSdTrE+DiJs9iF76M3fEP6dbjr9hnG/4z73xf7t2GjL2Rbmqe7U76HS9uscShYJL48avZYncmZUu3YFMnhBA==}
+  /@crossbell/util-metadata@0.0.64:
+    resolution: {integrity: sha512-mJKCl3rbahtKrY5ushRG5hMca9X1fiztO/ta6qWvUAFVtaemxL6HmVsIECeccBcCavijWGOAuU7gRDJOw2jwOg==}
    dependencies:
-      '@crossbell/util-ethers': 0.0.63
+      '@crossbell/util-ethers': 0.0.64
      '@fastify/deepmerge': 1.3.0
-      crossbell.js: 0.19.7
+      crossbell.js: 0.19.8
    transitivePeerDependencies:
      - bufferutil
      - supports-color
@ -1964,8 +1976,17 @@ packages:
      '@jridgewell/trace-mapping': 0.3.9
    dev: false

-  /@dqbd/tiktoken@1.0.4:
-    resolution: {integrity: sha512-C0HrJj2RNlsB3wslfNHGNH8xN7QQMki+y4JkUor/GE+oIfPvH7yVep9l1/2powam8AAH6+gdv5MggA5gsszweg==}
+  /@ddietr/codemirror-themes@1.4.0:
+    resolution: {integrity: sha512-FPEHcpK3FusL5cDxZk8rgw89Y2VR1BtUEhClsDE11VwusHONjWTctrPxj1zlRWiP8aujCV0PHUYyTqDErL1C/g==}
+    dependencies:
+      '@codemirror/language': 6.6.0
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.9.4
+      '@lezer/highlight': 1.1.4
+    dev: false
+
+  /@dqbd/tiktoken@1.0.6:
+    resolution: {integrity: sha512-umSdeZTy/SbPPKVuZKV/XKyFPmXSN145CcM3iHjBbmhlohBJg7vaDp4cPCW+xNlWL6L2U1sp7T2BD+di2sUKdA==}
    dev: false

  /@emoji-mart/data@1.1.2:
@ -2016,7 +2037,7 @@ packages:
    resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
    dev: false

-  /@emotion/react@11.10.6(@types/react@18.0.34)(react@18.2.0):
+  /@emotion/react@11.10.6(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==}
    peerDependencies:
      '@types/react': '*'
@ -2032,7 +2053,7 @@ packages:
      '@emotion/use-insertion-effect-with-fallbacks': 1.0.0(react@18.2.0)
      '@emotion/utils': 1.2.0
      '@emotion/weak-memoize': 0.3.0
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      hoist-non-react-statics: 3.3.2
      react: 18.2.0
    dev: false
@ -2905,7 +2926,7 @@ packages:
      '@lit-labs/ssr-dom-shim': 1.1.0
    dev: false

-  /@mantine/core@6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.34)(react-dom@18.2.0)(react@18.2.0):
+  /@mantine/core@6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.35)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-yk2ojsfdADte55T5nQTGRdwLttPYC98k7D9eMn9vLWnoSB3OPjlJhIcNstqL3jXSklZhlDLYjCeZyrOb7+HRaA==}
    peerDependencies:
      '@mantine/hooks': 6.0.7
@ -2919,8 +2940,8 @@ packages:
      '@radix-ui/react-scroll-area': 1.0.2(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.0.34)(react@18.2.0)
-      react-textarea-autosize: 8.3.4(@types/react@18.0.34)(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.0.35)(react@18.2.0)
+      react-textarea-autosize: 8.3.4(@types/react@18.0.35)(react@18.2.0)
    transitivePeerDependencies:
      - '@emotion/react'
      - '@types/react'
@ -2942,7 +2963,7 @@ packages:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'
    dependencies:
-      '@mantine/core': 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.34)(react-dom@18.2.0)(react@18.2.0)
+      '@mantine/core': 6.0.7(@emotion/react@11.10.6)(@mantine/hooks@6.0.7)(@types/react@18.0.35)(react-dom@18.2.0)(react@18.2.0)
      '@mantine/hooks': 6.0.7(react@18.2.0)
      '@mantine/utils': 6.0.7(react@18.2.0)
      react: 18.2.0
@ -2957,7 +2978,7 @@ packages:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'
    dependencies:
-      '@emotion/react': 11.10.6(@types/react@18.0.34)(react@18.2.0)
+      '@emotion/react': 11.10.6(@types/react@18.0.35)(react@18.2.0)
      clsx: 1.1.1
      csstype: 3.0.9
      react: 18.2.0
@ -3987,7 +4008,7 @@ packages:
  /@types/hoist-non-react-statics@3.3.1:
    resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      hoist-non-react-statics: 3.3.2
    dev: false

@ -4075,23 +4096,23 @@ packages:
  /@types/react-dom@18.0.11:
    resolution: {integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==}
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
    dev: true

  /@types/react-infinite-scroller@1.2.3:
    resolution: {integrity: sha512-l60JckVoO+dxmKW2eEG7jbliEpITsTJvRPTe97GazjF5+ylagAuyYdXl8YY9DQsTP9QjhqGKZROknzgscGJy0A==}
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
    dev: true

  /@types/react-scroll@1.8.6:
    resolution: {integrity: sha512-aMTiNgcmA7dwn1yjoHsiL78RfRnKCXzFyMbv63VrZTXloSfNePBdKtVObC3/My6irwDf0Oz0U4VjEC/vrv6/9w==}
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
    dev: true

-  /@types/react@18.0.34:
-    resolution: {integrity: sha512-NO1UO8941541CJl1BeOXi8a9dNKFK09Gnru5ZJqkm4Q3/WoQJtHvmwt0VX0SB9YCEwe7TfSSxDuaNmx6H2BAIQ==}
+  /@types/react@18.0.35:
+    resolution: {integrity: sha512-6Laome31HpetaIUGFWl1VQ3mdSImwxtFZ39rh059a1MNnKGqBpC88J6NJ8n/Is3Qx7CefDGLgf/KhN/sYCf7ag==}
    dependencies:
      '@types/prop-types': 15.7.5
      '@types/scheduler': 0.16.3
@ -5871,8 +5892,8 @@ packages:
  /caniuse-lite@1.0.30001466:
    resolution: {integrity: sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w==}

-  /caniuse-lite@1.0.30001477:
-    resolution: {integrity: sha512-lZim4iUHhGcy5p+Ri/G7m84hJwncj+Kz7S5aD4hoQfslKZJgt0tHc/hafVbqHC5bbhHb+mrW2JOUHkI5KH7toQ==}
+  /caniuse-lite@1.0.30001478:
+    resolution: {integrity: sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==}

  /canvas-confetti@1.6.0:
    resolution: {integrity: sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA==}
@ -6302,11 +6323,14 @@ packages:
      which: 2.0.2
    dev: true

-  /crossbell.js@0.19.7:
-    resolution: {integrity: sha512-Wa1uDUSISZJOSQdnhZ+SQYT9HkdimBzKMF1Tfp109/HEoVfjXw8Mg95RCPUsjc8M2x7MKZfASsY3ohYWbH1gMA==}
+  /crossbell.js@0.19.8:
+    resolution: {integrity: sha512-4x52UGfiTIs65JjHku0k+R4JrlB6JVRGDqgMW43DqDVQlJz2F8BVvxG7n3kKb5hZbXXQCMh41CMWc7bfiTn+3g==}
    dependencies:
      '@crossbell/ipfs-fetch': 0.0.15
+      '@ethersproject/abi': 5.7.0
+      '@ethersproject/providers': 5.7.2
      async-retry: 1.3.3
+      bn.js: 5.2.1
      ethers: 5.7.2
      fetch-undici: 3.0.1
      p-limit: 3.1.0
@ -7447,7 +7471,7 @@ packages:
    resolution: {integrity: sha512-UHHu1HqW22ZhK6C/1Zmjf7mQpOwPwLYZ+xcsOgpzistONU8QqvCop6Od29p/kw1GUVoq2Ihu6ItpKLtlojx4FQ==}
    engines: {node: '>=16'}
    dependencies:
-      undici: 5.21.0
+      undici: 5.21.2
    dev: false

  /file-entry-cache@6.0.1:
@ -8809,7 +8833,7 @@ packages:
        optional: true
    dependencies:
      '@anthropic-ai/sdk': 0.4.3
-      '@dqbd/tiktoken': 1.0.4
+      '@dqbd/tiktoken': 1.0.6
      binary-extensions: 2.2.0
      browser-or-node: 2.1.1
      expr-eval: 2.0.2
@ -9864,7 +9888,7 @@ packages:
    dependencies:
      '@next/env': 13.2.4
      '@swc/helpers': 0.4.14
-      caniuse-lite: 1.0.30001477
+      caniuse-lite: 1.0.30001478
      postcss: 8.4.14
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
@ -10840,7 +10864,7 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

-  /react-remove-scroll-bar@2.3.4(@types/react@18.0.34)(react@18.2.0):
+  /react-remove-scroll-bar@2.3.4(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
    engines: {node: '>=10'}
    peerDependencies:
@ -10850,13 +10874,13 @@ packages:
      '@types/react':
        optional: true
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      react: 18.2.0
-      react-style-singleton: 2.2.1(@types/react@18.0.34)(react@18.2.0)
+      react-style-singleton: 2.2.1(@types/react@18.0.35)(react@18.2.0)
      tslib: 2.5.0
    dev: false

-  /react-remove-scroll@2.5.5(@types/react@18.0.34)(react@18.2.0):
+  /react-remove-scroll@2.5.5(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
    engines: {node: '>=10'}
    peerDependencies:
@ -10866,13 +10890,13 @@ packages:
      '@types/react':
        optional: true
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      react: 18.2.0
-      react-remove-scroll-bar: 2.3.4(@types/react@18.0.34)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.0.34)(react@18.2.0)
+      react-remove-scroll-bar: 2.3.4(@types/react@18.0.35)(react@18.2.0)
+      react-style-singleton: 2.2.1(@types/react@18.0.35)(react@18.2.0)
      tslib: 2.5.0
-      use-callback-ref: 1.3.0(@types/react@18.0.34)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.0.34)(react@18.2.0)
+      use-callback-ref: 1.3.0(@types/react@18.0.35)(react@18.2.0)
+      use-sidecar: 1.1.2(@types/react@18.0.35)(react@18.2.0)
    dev: false

  /react-scroll@1.8.9(react-dom@18.2.0)(react@18.2.0):
@ -10903,7 +10927,12 @@ packages:
      tiny-invariant: 1.2.0
    dev: false

-  /react-style-singleton@2.2.1(@types/react@18.0.34)(react@18.2.0):
+  /react-string-replace@1.1.0:
+    resolution: {integrity: sha512-N6RalSDFGbOHs0IJi1H611WbZsvk3ZT47Jl2JEXFbiS3kTwsdCYij70Keo/tWtLy7sfhDsYm7CwNM/WmjXIaMw==}
+    engines: {node: '>=0.12.0'}
+    dev: false
+
+  /react-style-singleton@2.2.1(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
    engines: {node: '>=10'}
    peerDependencies:
@ -10913,14 +10942,14 @@ packages:
      '@types/react':
        optional: true
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      get-nonce: 1.0.1
      invariant: 2.2.4
      react: 18.2.0
      tslib: 2.5.0
    dev: false

-  /react-textarea-autosize@8.3.4(@types/react@18.0.34)(react@18.2.0):
+  /react-textarea-autosize@8.3.4(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==}
    engines: {node: '>=10'}
    peerDependencies:
@ -10929,7 +10958,7 @@ packages:
      '@babel/runtime': 7.21.0
      react: 18.2.0
      use-composed-ref: 1.3.0(react@18.2.0)
-      use-latest: 1.2.1(@types/react@18.0.34)(react@18.2.0)
+      use-latest: 1.2.1(@types/react@18.0.35)(react@18.2.0)
    transitivePeerDependencies:
      - '@types/react'
    dev: false
@ -11149,14 +11178,14 @@ packages:
      unified: 10.1.2
    dev: false

-  /rehype-react@7.1.2(@types/react@18.0.34):
+  /rehype-react@7.1.2(@types/react@18.0.35):
    resolution: {integrity: sha512-IWsFMS2M4NTbvWzumBBKhdb39ElV+r5YQHA2HafDDRrH84bEryJA2YPPNbF9he4QzAFOssaMJ9buSC6cDcJTLw==}
    peerDependencies:
      '@types/react': '>=17'
    dependencies:
      '@mapbox/hast-util-table-cell-style': 0.2.0
      '@types/hast': 2.3.4
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      hast-to-hyperscript: 10.0.3
      hast-util-whitespace: 2.0.1
      unified: 10.1.2
@ -12480,8 +12509,8 @@ packages:
      jiti: 1.18.2
    dev: true

-  /undici@5.21.0:
-    resolution: {integrity: sha512-HOjK8l6a57b2ZGXOcUsI5NLfoTrfmbOl90ixJDl0AEFG4wgHNDQxtZy15/ZQp7HhjkpaGlp/eneMgtsu1dIlUA==}
+  /undici@5.21.2:
+    resolution: {integrity: sha512-f6pTQ9RF4DQtwoWSaC42P/NKlUjvezVvd9r155ohqkwFNRyBKM3f3pcty3ouusefNRyM25XhIQEbeQ46sZDJfQ==}
    engines: {node: '>=12.18'}
    dependencies:
      busboy: 1.6.0
@ -12517,7 +12546,7 @@ packages:
      '@urql/core': 4.0.4(graphql@16.6.0)
      axios: 1.3.5
      axios-retry: 3.4.0
-      crossbell.js: 0.19.7
+      crossbell.js: 0.19.8
      ethers: 5.7.2
      graphql: 16.6.0
      lodash: 4.17.21
@ -12707,7 +12736,7 @@ packages:
      punycode: 2.2.0
    dev: true

-  /use-callback-ref@1.3.0(@types/react@18.0.34)(react@18.2.0):
+  /use-callback-ref@1.3.0(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
    engines: {node: '>=10'}
    peerDependencies:
@ -12717,7 +12746,7 @@ packages:
      '@types/react':
        optional: true
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      react: 18.2.0
      tslib: 2.5.0
    dev: false
@ -12730,7 +12759,7 @@ packages:
      react: 18.2.0
    dev: false

-  /use-isomorphic-layout-effect@1.1.2(@types/react@18.0.34)(react@18.2.0):
+  /use-isomorphic-layout-effect@1.1.2(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
    peerDependencies:
      '@types/react': '*'
@ -12739,11 +12768,11 @@ packages:
      '@types/react':
        optional: true
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      react: 18.2.0
    dev: false

-  /use-latest@1.2.1(@types/react@18.0.34)(react@18.2.0):
+  /use-latest@1.2.1(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
    peerDependencies:
      '@types/react': '*'
@ -12752,24 +12781,24 @@ packages:
      '@types/react':
        optional: true
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      react: 18.2.0
-      use-isomorphic-layout-effect: 1.1.2(@types/react@18.0.34)(react@18.2.0)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.0.35)(react@18.2.0)
    dev: false

-  /use-onclickoutside@0.4.1(@types/react@18.0.34)(react@18.2.0):
+  /use-onclickoutside@0.4.1(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-hAo1viJ9D2mPffUig4EWCwE4as7fq84HANk3MCkY3rhXk5oMl0mjLCLF/OhzWIhTaITcAcDDcnaxRdMHPq+sww==}
    peerDependencies:
      react: ^16.8.0 || ^17.0.0 || ^18.0.0
    dependencies:
      are-passive-events-supported: 1.1.1
      react: 18.2.0
-      use-latest: 1.2.1(@types/react@18.0.34)(react@18.2.0)
+      use-latest: 1.2.1(@types/react@18.0.35)(react@18.2.0)
    transitivePeerDependencies:
      - '@types/react'
    dev: false

-  /use-sidecar@1.1.2(@types/react@18.0.34)(react@18.2.0):
+  /use-sidecar@1.1.2(@types/react@18.0.35)(react@18.2.0):
    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
    engines: {node: '>=10'}
    peerDependencies:
@ -12779,7 +12808,7 @@ packages:
      '@types/react':
        optional: true
    dependencies:
-      '@types/react': 18.0.34
+      '@types/react': 18.0.35
      detect-node-es: 1.1.0
      react: 18.2.0
      tslib: 2.5.0
--- a/scripts/tw/generate-css-var.js
+++ b/scripts/tw/generate-css-var.js
@ -0,0 +1,50 @@
+const {
+  transformColorObjectOfDarkmode,
+  generateCSSByVar,
+} = require("./transform")
+
+const fs = require("fs")
+const path = require("path")
+
+const [colorObject, cssVar, cssVarDark] = transformColorObjectOfDarkmode()
+
+const normalCSS = generateCSSByVar(cssVar)
+const darkCSS = generateCSSByVar(cssVarDark)
+
+const cssString = `
+:root {
+${normalCSS}
+}
+
+html.dark {
+${darkCSS}
+}
+
+html.light {
+${normalCSS}
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light) {
+  ${darkCSS}
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html:not(.dark) {
+  ${normalCSS}
+  }
+}
+`
+
+fs.writeFileSync(
+  path.resolve(__dirname, "../../src/css/css-var.css"),
+  cssString,
+  "utf-8",
+)
+
+fs.writeFileSync(
+  path.resolve(__dirname, "../../tw-colors.js"),
+  `export default ${JSON.stringify(colorObject, null, 2)}`,
+  "utf-8",
+)
--- a/scripts/tw/transform.js
+++ b/scripts/tw/transform.js
@ -0,0 +1,97 @@
+const colors = require("tailwindcss/colors")
+
+const colorKeys = Object.keys(colors)
+const colorObject = {}
+
+const hexToRGB = (hex) => {
+  hex = hex.replace("#", "")
+
+  let r = parseInt(hex.substring(0, 2), 16)
+  let g = parseInt(hex.substring(2, 4), 16)
+  let b = parseInt(hex.substring(4, 6), 16)
+
+  return `${r}, ${g}, ${b}`
+}
+
+const deprecatedColorKeyMap = {
+  lightBlue: "sky",
+  warmGray: "stone",
+  trueGray: "neutral",
+  coolGray: "gray",
+  blueGray: "slate",
+}
+for (const key of colorKeys) {
+  if (typeof colors[key] === "object") {
+    if (deprecatedColorKeyMap[key]) {
+      colorObject[deprecatedColorKeyMap[key]] = colors[key]
+      continue
+    }
+
+    colorObject[key] = colors[key]
+  }
+}
+
+const transformColorObjectOfDarkmode = () => {
+  const cssVar = {}
+  const cssVarDark = {}
+  const nextColorObject = {}
+  // slate: {
+  //   50: '#f8fafc',
+  // }
+  // to
+  // slate: {
+  //   50: 'rgb(var(--tw-colors-i-slate-50) / <alpha-value>)',
+  // ...
+  // }
+  for (const colorKey of Object.keys(colorObject)) {
+    const color = colorObject[colorKey]
+
+    if (typeof color === "object") {
+      const nextColor = {}
+
+      for (const colorNumberKey of Object.keys(color)) {
+        const cssVarKey = `--tw-colors-i-${colorKey}-${colorNumberKey}`
+        // @see https://tailwindcss.com/docs/customizing-colors#using-the-default-colors
+        nextColor[colorNumberKey] = `rgba(var(${cssVarKey}), <alpha-value>)`
+
+        cssVar[cssVarKey] = hexToRGB(color[colorNumberKey])
+        // 50 -> 950, 100 -> 900, 200 -> 800, ...
+
+        // colorKey:
+        const reverseColorNumberKey = 1000 - parseInt(colorNumberKey)
+        cssVarDark[cssVarKey] = hexToRGB(color[reverseColorNumberKey])
+      }
+
+      nextColorObject[colorKey] = nextColor
+    }
+  }
+
+  // merge const color
+  Object.assign(nextColorObject, {
+    inherit: "inherit",
+    current: "currentColor",
+    transparent: "transparent",
+    black: "var(--tw-colors-i-black)",
+    white: "var(--tw-colors-i-white)",
+  })
+  cssVar["--tw-colors-i-black"] = "0, 0, 0"
+  cssVar["--tw-colors-i-white"] = "255, 255, 255"
+  cssVarDark["--tw-colors-i-black"] = "255, 255, 255"
+  cssVarDark["--tw-colors-i-white"] = "0, 0, 0"
+
+  return [nextColorObject, cssVar, cssVarDark]
+}
+
+function generateCSSByVar(cssVar) {
+  let css = ""
+  for (const key of Object.keys(cssVar)) {
+    css += `  ${key}: ${cssVar[key]};\n`
+  }
+
+  return css
+}
+
+module.exports = {
+  transformColorObjectOfDarkmode,
+  generateCSSByVar,
+}
--- a/src/components/common/Monaco/index.tsx
+++ b/src/components/common/Monaco/index.tsx
@ -0,0 +1,7 @@
+import Editor, { EditorProps } from "@monaco-editor/react"
+import { useMonacoTheme } from "./use-theme"
+
+export function MonacoEditor(props: EditorProps) {
+  useMonacoTheme()
+  return <Editor {...props} />
+}
--- a/src/components/common/Monaco/theme/dark.json
+++ b/src/components/common/Monaco/theme/dark.json
@ -0,0 +1,244 @@
+{
+  "base": "vs-dark",
+  "inherit": true,
+  "rules": [
+    {
+      "background": "000000",
+      "token": ""
+    },
+    {
+      "foreground": "969896",
+      "token": "comment"
+    },
+    {
+      "foreground": "eeeeee",
+      "token": "keyword.operator.class"
+    },
+    {
+      "foreground": "eeeeee",
+      "token": "constant.other"
+    },
+    {
+      "foreground": "eeeeee",
+      "token": "source.php.embedded.line"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "variable"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "support.other.variable"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "string.other.link"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "string.regexp"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "entity.other.attribute-name"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "meta.tag"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "declaration.tag"
+    },
+    {
+      "foreground": "d54e53",
+      "token": "markup.deleted.git_gutter"
+    },
+    {
+      "foreground": "e78c45",
+      "token": "constant.numeric"
+    },
+    {
+      "foreground": "e78c45",
+      "token": "constant.language"
+    },
+    {
+      "foreground": "e78c45",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "e78c45",
+      "token": "constant.character"
+    },
+    {
+      "foreground": "e78c45",
+      "token": "variable.parameter"
+    },
+    {
+      "foreground": "e78c45",
+      "token": "punctuation.section.embedded"
+    },
+    {
+      "foreground": "e78c45",
+      "token": "keyword.other.unit"
+    },
+    {
+      "foreground": "e7c547",
+      "token": "entity.name.class"
+    },
+    {
+      "foreground": "e7c547",
+      "token": "entity.name.type.class"
+    },
+    {
+      "foreground": "e7c547",
+      "token": "support.type"
+    },
+    {
+      "foreground": "e7c547",
+      "token": "support.class"
+    },
+    {
+      "foreground": "b9ca4a",
+      "token": "string"
+    },
+    {
+      "foreground": "b9ca4a",
+      "token": "constant.other.symbol"
+    },
+    {
+      "foreground": "b9ca4a",
+      "token": "entity.other.inherited-class"
+    },
+    {
+      "foreground": "b9ca4a",
+      "token": "markup.heading"
+    },
+    {
+      "foreground": "b9ca4a",
+      "token": "markup.inserted.git_gutter"
+    },
+    {
+      "foreground": "70c0b1",
+      "token": "keyword.operator"
+    },
+    {
+      "foreground": "70c0b1",
+      "token": "constant.other.color"
+    },
+    {
+      "foreground": "7aa6da",
+      "token": "entity.name.function"
+    },
+    {
+      "foreground": "7aa6da",
+      "token": "meta.function-call"
+    },
+    {
+      "foreground": "7aa6da",
+      "token": "support.function"
+    },
+    {
+      "foreground": "7aa6da",
+      "token": "keyword.other.special-method"
+    },
+    {
+      "foreground": "7aa6da",
+      "token": "meta.block-level"
+    },
+    {
+      "foreground": "7aa6da",
+      "token": "markup.changed.git_gutter"
+    },
+    {
+      "foreground": "c397d8",
+      "token": "keyword"
+    },
+    {
+      "foreground": "c397d8",
+      "token": "storage"
+    },
+    {
+      "foreground": "c397d8",
+      "token": "storage.type"
+    },
+    {
+      "foreground": "c397d8",
+      "token": "entity.name.tag.css"
+    },
+    {
+      "foreground": "ced2cf",
+      "background": "df5f5f",
+      "token": "invalid"
+    },
+    {
+      "foreground": "ced2cf",
+      "background": "82a3bf",
+      "token": "meta.separator"
+    },
+    {
+      "foreground": "ced2cf",
+      "background": "b798bf",
+      "token": "invalid.deprecated"
+    },
+    {
+      "foreground": "ffffff",
+      "token": "markup.inserted.diff"
+    },
+    {
+      "foreground": "ffffff",
+      "token": "markup.deleted.diff"
+    },
+    {
+      "foreground": "ffffff",
+      "token": "meta.diff.header.to-file"
+    },
+    {
+      "foreground": "ffffff",
+      "token": "meta.diff.header.from-file"
+    },
+    {
+      "foreground": "718c00",
+      "token": "markup.inserted.diff"
+    },
+    {
+      "foreground": "718c00",
+      "token": "meta.diff.header.to-file"
+    },
+    {
+      "foreground": "c82829",
+      "token": "markup.deleted.diff"
+    },
+    {
+      "foreground": "c82829",
+      "token": "meta.diff.header.from-file"
+    },
+    {
+      "foreground": "ffffff",
+      "background": "4271ae",
+      "token": "meta.diff.header.from-file"
+    },
+    {
+      "foreground": "ffffff",
+      "background": "4271ae",
+      "token": "meta.diff.header.to-file"
+    },
+    {
+      "foreground": "3e999f",
+      "fontStyle": "italic",
+      "token": "meta.diff.range"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#DEDEDE",
+    "editor.background": "#00000000",
+    "editor.selectionBackground": "#424242",
+    "editor.lineHighlightBackground": "#2A2A2A",
+    "editorCursor.foreground": "#9F9F9F",
+    "editorWhitespace.foreground": "#343434"
+  }
+}
--- a/src/components/common/Monaco/theme/light.json
+++ b/src/components/common/Monaco/theme/light.json
@ -0,0 +1,98 @@
+{
+  "base": "vs",
+  "inherit": true,
+  "rules": [
+    {
+      "background": "FFFFFF",
+      "token": ""
+    },
+    {
+      "foreground": "008e00",
+      "token": "comment"
+    },
+    {
+      "foreground": "7d4726",
+      "token": "meta.preprocessor"
+    },
+    {
+      "foreground": "7d4726",
+      "token": "keyword.control.import"
+    },
+    {
+      "foreground": "df0002",
+      "token": "string"
+    },
+    {
+      "foreground": "3a00dc",
+      "token": "constant.numeric"
+    },
+    {
+      "foreground": "c800a4",
+      "token": "constant.language"
+    },
+    {
+      "foreground": "275a5e",
+      "token": "constant.character"
+    },
+    {
+      "foreground": "275a5e",
+      "token": "constant.other"
+    },
+    {
+      "foreground": "c800a4",
+      "token": "variable.language"
+    },
+    {
+      "foreground": "c800a4",
+      "token": "variable.other"
+    },
+    {
+      "foreground": "c800a4",
+      "token": "keyword"
+    },
+    {
+      "foreground": "c900a4",
+      "token": "storage"
+    },
+    {
+      "foreground": "438288",
+      "token": "entity.name.class"
+    },
+    {
+      "foreground": "790ead",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "450084",
+      "token": "entity.other.attribute-name"
+    },
+    {
+      "foreground": "450084",
+      "token": "support.function"
+    },
+    {
+      "foreground": "450084",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "790ead",
+      "token": "support.type"
+    },
+    {
+      "foreground": "790ead",
+      "token": "support.class"
+    },
+    {
+      "foreground": "790ead",
+      "token": "support.other.variable"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#000000",
+    "editor.background": "#FFFFFF00",
+    "editor.selectionBackground": "#B5D5FF",
+    "editor.lineHighlightBackground": "#00000012",
+    "editorCursor.foreground": "#000000",
+    "editorWhitespace.foreground": "#BFBFBF"
+  }
+}
--- a/src/components/common/Monaco/use-theme.ts
+++ b/src/components/common/Monaco/use-theme.ts
@ -0,0 +1,32 @@
+import { useMonaco } from "@monaco-editor/react"
+import { useEffect } from "react"
+import { useMediaStore } from "~/hooks/useDarkMode"
+import Dark from "./theme/dark.json"
+import Light from "./theme/light.json"
+
+const set = new Set()
+const useDefineTheme = (theme: string, json: any) => {
+  const monaco = useMonaco()
+  useEffect(() => {
+    if (set.has(theme)) {
+      return
+    }
+
+    if (monaco) {
+      monaco.editor.defineTheme(theme, json)
+
+      set.add(theme)
+    }
+  }, [monaco, theme])
+}
+
+export const useMonacoTheme = () => {
+  useDefineTheme("light", Light)
+  useDefineTheme("dark", Dark)
+  const isDark = useMediaStore((state) => state.isDark)
+  const monaco = useMonaco()
+
+  useEffect(() => {
+    monaco?.editor.setTheme(isDark ? "dark" : "light")
+  }, [monaco, isDark])
+}
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/src/components/dashboard/DashboardLayout.tsx
@ -349,7 +349,7 @@ export function DashboardLayout({
            </DashboardSidebar>
          )}

-          <div className={`${isMobileLayout ? "pt-16" : "flex-1"}`}>
+          <div className={`${isMobileLayout ? "pt-16 flex-1" : "flex-1"}`}>
            {children}
          </div>
        </div>
--- a/src/components/dashboard/DashboardMain.tsx
+++ b/src/components/dashboard/DashboardMain.tsx
@ -12,7 +12,7 @@ export const DashboardMain: React.FC<{
  const isMobileLayout = useMobileLayout()

  return (
-    <div className="flex-1 overflow-scroll">
+    <div className="flex-1">
      <div
        className={cn(
          fullWidth ? "relative" : "min-w-[270px] relative px-5 py-5 md:px-10",
--- a/src/components/dashboard/DashboardSidebar.tsx
+++ b/src/components/dashboard/DashboardSidebar.tsx
@ -23,19 +23,25 @@ export const DashboardSidebar: React.FC<{
    <div
      className={`${
        isOpen ? `w-sidebar` : "w-20"
-      } relative bg-slate-50 z-10 h-full transition-all flex flex-col`}
+      } transition-[width] relative flex-shrink-0`}
    >
-      {children(isOpen)}
-      <div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
      <div
-        className="absolute top-5 -right-3 bg-accent rounded-full cursor-pointer text-white w-6 h-6"
-        onClick={() => setIsOpen(!isOpen)}
+        className={`${
+          isOpen ? `w-sidebar` : "w-20"
+        } transition-[width] fixed bg-slate-50 z-10 h-full flex flex-col`}
      >
-        {isOpen ? (
-          <i className="i-mingcute:left-line text-2xl inline-block w-6 h-6" />
-        ) : (
-          <i className="i-mingcute:right-line text-2xl inline-block w-6 h-6" />
-        )}
+        {children(isOpen)}
+        <div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
+        <div
+          className="absolute top-5 -right-3 bg-accent rounded-full cursor-pointer text-white w-6 h-6"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? (
+            <i className="i-mingcute:left-line text-2xl inline-block w-6 h-6" />
+          ) : (
+            <i className="i-mingcute:right-line text-2xl inline-block w-6 h-6" />
+          )}
+        </div>
      </div>
    </div>
  )
--- a/src/components/main/MainFeed.tsx
+++ b/src/components/main/MainFeed.tsx
@ -5,7 +5,7 @@ import { useRouter } from "next/router"
 import { Image } from "~/components/ui/Image"
 import { useTranslation } from "next-i18next"
 import { useGetFeed } from "~/queries/home"
-import type { FeedType } from "~/models/home.model"
+import type { FeedType, SearchType } from "~/models/home.model"
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
 import { useAccountState } from "@crossbell/connect-kit"
 import InfiniteScroll from "react-infinite-scroller"
@ -16,13 +16,16 @@ import { setStorage, getStorage } from "~/lib/storage"
 import { Tooltip } from "~/components/ui/Tooltip"
 import { Titles } from "~/components/common/Titles"
 import { Tabs } from "~/components/ui/Tabs"
+import reactStringReplace from "react-string-replace"

 const Post = ({
  post,
  filtering,
+  keyword,
 }: {
  post: ExpandedNote
  filtering: number
+  keyword?: string
 }) => {
  const router = useRouter()
  const { t } = useTranslation(["common", "site"])
@ -118,7 +121,17 @@ const Post = ({
              wordBreak: "break-word",
            }}
          >
-            {post.metadata?.content?.summary}
+            {keyword
+              ? reactStringReplace(
+                  post.metadata?.content?.summary || "",
+                  keyword,
+                  (match, i) => (
+                    <span key={i} className="bg-yellow-200">
+                      {match}
+                    </span>
+                  ),
+                )
+              : post.metadata?.content?.summary}
            {post.metadata?.content?.summary && "..."}
          </div>
        </div>
@ -149,13 +162,15 @@ export const MainFeed: React.FC<{
  )

  const [hotInterval, setHotInterval] = useState(7)
+  const [searchType, setSearchType] = useState<SearchType>("latest")

  const feed = useGetFeed({
    type: type,
    characterId: currentCharacterId,
    noteIds: noteIds,
    daysInterval: hotInterval,
-    keyword: keyword,
+    searchKeyword: keyword,
+    searchType,
  })

  const hasFiltering = type === "latest"
@ -166,7 +181,7 @@ export const MainFeed: React.FC<{
    setAiFiltering(getStorage("ai_filtering")?.enabled || true)
  }, [])

-  const tabs = [
+  const hotTabs = [
    {
      text: "Today",
      onClick: () => setHotInterval(1),
@ -189,6 +204,19 @@ export const MainFeed: React.FC<{
    },
  ]

+  const searchTabs = [
+    {
+      text: "Latest",
+      onClick: () => setSearchType("latest"),
+      active: searchType === "latest",
+    },
+    {
+      text: "Hottest",
+      onClick: () => setSearchType("hot"),
+      active: searchType === "hot",
+    },
+  ]
+
  return (
    <>
      <InfiniteScroll
@ -239,7 +267,10 @@ export const MainFeed: React.FC<{
          </div>
        )}
        {type === "hot" && (
-          <Tabs items={tabs} className="border-none text-sm -my-4"></Tabs>
+          <Tabs items={hotTabs} className="border-none text-sm -my-4"></Tabs>
+        )}
+        {type === "search" && (
+          <Tabs items={searchTabs} className="border-none text-sm -my-4"></Tabs>
        )}
        {feed.isLoading ? (
          <div className="text-center text-zinc-600">{t("Loading")}...</div>
@ -254,6 +285,7 @@ export const MainFeed: React.FC<{
                    key={`${post.characterId}-${post.noteId}`}
                    post={post}
                    filtering={aiFiltering ? 60 : 0}
+                    keyword={keyword}
                  />
                )
              }),
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@ -22,6 +22,7 @@ import { Tooltip } from "~/components/ui/Tooltip"
 import { PatronButton } from "~/components/common/PatronButton"
 import { Modal } from "~/components/ui/Modal"
 import { SearchInput } from "~/components/common/SearchInput"
+import { useMediaStore } from "~/hooks/useDarkMode"

 type HeaderLinkType = {
  icon?: React.ReactNode
@ -132,6 +133,7 @@ export const SiteHeader: React.FC<{
  const avatarRef = useRef<HTMLImageElement>(null)
  const bannerRef = useRef<HTMLImageElement | HTMLVideoElement>(null)

+  const isDark = useMediaStore((state) => state.isDark)
  const [averageColor, setAverageColor] = useState<string>()
  const [autoHoverColor, setAutoHoverColor] = useState<string>()
  const [autoThemeColor, setAutoThemeColor] = useState<string>()
@ -141,8 +143,13 @@ export const SiteHeader: React.FC<{
      fac
        .getColorAsync(bannerRef.current)
        .then((color) => {
-          setAverageColor(chroma(color.hex).hex())
-          setAutoHoverColor(chroma(color.hex).luminance(0.8).hex())
+          if (isDark) {
+            setAverageColor(chroma(color.hex).luminance(0.007).hex())
+            setAutoHoverColor(chroma(color.hex).luminance(0.02).hex())
+          } else {
+            setAverageColor(chroma(color.hex).hex())
+            setAutoHoverColor(chroma(color.hex).luminance(0.8).hex())
+          }
          setAutoThemeColor(chroma(color.hex).saturate(3).luminance(0.3).hex())
        })
        .catch((e) => {
@ -152,15 +159,20 @@ export const SiteHeader: React.FC<{
      fac
        .getColorAsync(avatarRef.current)
        .then((color) => {
-          setAverageColor(chroma(color.hex).luminance(0.95).hex())
-          setAutoHoverColor(chroma(color.hex).luminance(0.8).hex())
+          if (isDark) {
+            setAverageColor(chroma(color.hex).luminance(0.007).hex())
+            setAutoHoverColor(chroma(color.hex).luminance(0.02).hex())
+          } else {
+            setAverageColor(chroma(color.hex).luminance(0.95).hex())
+            setAutoHoverColor(chroma(color.hex).luminance(0.8).hex())
+          }
          setAutoThemeColor(chroma(color.hex).saturate(3).luminance(0.3).hex())
        })
        .catch((e) => {
          console.warn(e)
        })
    }
-  }, [bannerRef, avatarRef])
+  }, [bannerRef, avatarRef, isDark])

  return (
    <header className="xlog-header border-b border-zinc-100 relative">
--- a/src/components/site/SiteLayout.tsx
+++ b/src/components/site/SiteLayout.tsx
@ -1,20 +1,18 @@
+import { useAccountState } from "@crossbell/connect-kit"
+import { useRouter } from "next/router"
 import React, { useEffect } from "react"
+import { BlockchainInfo } from "~/components/common/BlockchainInfo"
+import { useUserRole } from "~/hooks/useUserRole"
+import { IS_PROD } from "~/lib/constants"
+import { OUR_DOMAIN, SITE_URL } from "~/lib/env"
+import { toGateway } from "~/lib/ipfs-parser"
 import { getUserContentsUrl } from "~/lib/user-contents"
+import { cn } from "~/lib/utils"
+import { useCheckLike, useCheckMint, useGetPage } from "~/queries/page"
+import { useGetSite, useGetSubscription } from "~/queries/site"
 import { SEOHead } from "../common/SEOHead"
 import { SiteFooter } from "./SiteFooter"
 import { SiteHeader } from "./SiteHeader"
-import { useRouter } from "next/router"
-import { BlockchainInfo } from "~/components/common/BlockchainInfo"
-import { useGetSite } from "~/queries/site"
-import { useGetPage } from "~/queries/page"
-import { OUR_DOMAIN, SITE_URL } from "~/lib/env"
-import { IS_PROD } from "~/lib/constants"
-import { toGateway } from "~/lib/ipfs-parser"
-import { useUserRole } from "~/hooks/useUserRole"
-import { useGetSubscription } from "~/queries/site"
-import { cn } from "~/lib/utils"
-import { useCheckLike, useCheckMint } from "~/queries/page"
-import { useAccountState } from "@crossbell/connect-kit"

 export type SiteLayoutProps = {
  children: React.ReactNode
--- a/src/components/site/SiteSearch.tsx
+++ b/src/components/site/SiteSearch.tsx
@ -7,6 +7,7 @@ import { Image } from "~/components/ui/Image"
 import { Button } from "~/components/ui/Button"
 import { useTranslation } from "next-i18next"
 import { useEffect, useState } from "react"
+import reactStringReplace from "react-string-replace"

 export const SiteSearch: React.FC<{
  postPages?: {
@ -17,7 +18,14 @@ export const SiteSearch: React.FC<{
  fetchNextPage: () => void
  hasNextPage?: boolean
  isFetchingNextPage?: boolean
-}> = ({ postPages, fetchNextPage, hasNextPage, isFetchingNextPage }) => {
+  keyword?: string
+}> = ({
+  postPages,
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
+  keyword,
+}) => {
  const router = useRouter()
  const { t } = useTranslation(["common", "site"])
  const date = useDate()
@ -96,7 +104,17 @@ export const SiteSearch: React.FC<{
                        wordBreak: "break-word",
                      }}
                    >
-                      {post.metadata.content.summary}
+                      {keyword
+                        ? reactStringReplace(
+                            post.metadata?.content?.summary || "",
+                            keyword,
+                            (match, i) => (
+                              <span key={i} className="bg-yellow-200">
+                                {match}
+                              </span>
+                            ),
+                          )
+                        : post.metadata?.content?.summary}
                      {post.metadata.content.summary && "..."}
                    </div>
                  </div>
--- a/src/components/ui/Editor.tsx
+++ b/src/components/ui/Editor.tsx
@ -6,6 +6,11 @@ import type { EditorState } from "@codemirror/state"
 import { useState, useEffect, useMemo } from "react"
 import { useTranslation } from "next-i18next"
 import { useMobileLayout } from "~/hooks/useMobileLayout"
+import {
+  codemirrorReconfigureExtension,
+  useCodeMirrorAutoToggleTheme,
+} from "~/hooks/useCodemirrorTheme"
+import { useMediaStore } from "~/hooks/useDarkMode"

 export const Editor: React.FC<{
  value: string
@ -27,6 +32,9 @@ export const Editor: React.FC<{
  const { t } = useTranslation("dashboard")
  const [extensions, setExtensions] = useState<any>([])
  const isMobileLayout = useMobileLayout()
+  const [editor, setCmEditor] = useState<EditorView | null>(null)
+  const isDark = useMediaStore((state) => state.isDark)
+  useCodeMirrorAutoToggleTheme(editor, isDark)
  useEffect(() => {
    setExtensions([
      markdown(),
@ -46,6 +54,7 @@ export const Editor: React.FC<{
        },
        "&.cm-editor": {
          height: "100%",
+          backgroundColor: "transparent",
        },
      }),
      EditorView.domEventHandlers({
@ -82,6 +91,7 @@ export const Editor: React.FC<{
        },
      }),
      EditorView.lineWrapping,
+      ...codemirrorReconfigureExtension,
    ])
  }, [onScroll, handleDropFile])

@ -93,7 +103,10 @@ export const Editor: React.FC<{
        }`}
        value={value}
        extensions={extensions}
-        onCreateEditor={onCreateEditor}
+        onCreateEditor={(view, state) => {
+          setCmEditor(view)
+          onCreateEditor?.(view, state)
+        }}
        basicSetup={{
          lineNumbers: false,
          foldGutter: false,
--- a/src/css/css-var.css
+++ b/src/css/css-var.css
--- a/src/css/main.css
+++ b/src/css/main.css
@ -3,5 +3,6 @@
@import "./prose.css";
@import "./code.css";
@import "./prism-dark.css";
+@import "./css-var.css";

@import url("https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css");
--- a/src/css/prose.css
+++ b/src/css/prose.css
@ -106,7 +106,7 @@

 .prose .table-wrapper {
  @apply min-w-full rounded-xl text-sm my-7 whitespace-nowrap overflow-auto;
-  @apply shadow-sm ring-1 ring-zinc-700 ring-opacity-10;
+  @apply border border-border;
 }

 .prose table {
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@ -8,6 +8,11 @@
    @apply fill-zinc-800;
    font-family: var(--font-fans);
  }
+
+  input,
+  textarea {
+    @apply bg-white;
+  }
 }

 *,
@ -17,7 +22,7 @@
 }

 body {
-  @apply break-words;
+  @apply break-words bg-white;
 }

 .container {
--- a/src/css/variables.css
+++ b/src/css/variables.css
@ -1,4 +1,4 @@
-:root {
+html {
  --border-color: #eee;
  --font-fans: theme("fontFamily.sans");
  --theme-color: var(--auto-theme-color, theme("colors.orange.500"));
@ -7,3 +7,19 @@
  /* Accent color for form controls */
  accent-color: var(--theme-color);
 }
+
+html.dark {
+  --border-color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  html.not(.light) {
+    --border-color: #333;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html.not(.dark) {
+    --border-color: #eee;
+  }
+}
--- a/src/hooks/useCodemirrorTheme.ts
+++ b/src/hooks/useCodemirrorTheme.ts
@ -0,0 +1,33 @@
+import type { Extension } from "@codemirror/state"
+import { Compartment } from "@codemirror/state"
+import { EditorView } from "@codemirror/view"
+import { useEffect } from "react"
+
+import { oneDark } from "@codemirror/theme-one-dark"
+import { githubLight } from "@ddietr/codemirror-themes/theme/github-light"
+
+const extensionMap = {
+  theme: new Compartment(),
+}
+
+export const codemirrorReconfigureExtension: Extension[] = [
+  extensionMap.theme.of([]),
+]
+
+export const useCodeMirrorAutoToggleTheme = (
+  view: EditorView | null,
+  isDark: boolean,
+) => {
+  useEffect(() => {
+    if (!view) return
+    if (isDark) {
+      view.dispatch({
+        effects: [extensionMap.theme.reconfigure(oneDark)],
+      })
+    } else {
+      view.dispatch({
+        effects: [extensionMap.theme.reconfigure(githubLight)],
+      })
+    }
+  }, [view, isDark])
+}
--- a/src/hooks/useDarkMode.ts
+++ b/src/hooks/useDarkMode.ts
@ -0,0 +1,157 @@
+import { useEffect, useState } from "react"
+
+import { create } from "zustand"
+
+export const useMediaStore = create<{
+  isDark: boolean
+  setDark: (isDark: boolean) => void
+}>((set) => {
+  return {
+    isDark: false,
+    setDark: (isDark: boolean) => set({ isDark }),
+  }
+})
+
+const isServerSide = () => typeof window === "undefined"
+
+interface DarkModeConfig {
+  classNameDark?: string // A className to set "dark mode". Default = "dark-mode".
+  classNameLight?: string // A className to set "light mode". Default = "light-mode".
+  element?: HTMLElement | undefined | null // The element to apply the className. Default = `document.body`
+  storageKey?: string // Specify the `localStorage` key. Default = "darkMode". Sewt to `null` to disable persistent storage.
+}
+
+const useDarkMode = (
+  initialState: boolean | undefined,
+  options: DarkModeConfig,
+) => {
+  const {
+    classNameDark = "dark",
+    classNameLight = "light",
+    storageKey,
+    element,
+  } = options
+
+  const [darkMode, setDarkMode] = useState(initialState)
+
+  useEffect(() => {
+    const presentedDarkMode = storageKey
+      ? isServerSide()
+        ? null
+        : localStorage.getItem(storageKey)
+      : null
+
+    if (presentedDarkMode !== null) {
+      if (presentedDarkMode === "true") {
+        setDarkMode(true)
+      } else if (presentedDarkMode === "false") {
+        setDarkMode(false)
+      }
+    } else if (typeof initialState === "undefined") {
+      setDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches)
+    }
+  }, [storageKey])
+
+  useEffect(() => {
+    const handler = (e: MediaQueryListEvent) => {
+      const storageValue = localStorage.getItem(storageKey || "darkMode")
+      if (storageValue === null) {
+        setDarkMode(e.matches)
+      }
+    }
+
+    const focusHandler = () => {
+      const storageValue = localStorage.getItem(storageKey || "darkMode")
+      if (storageValue === null) {
+        setDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches)
+      }
+    }
+
+    window.addEventListener("focus", focusHandler)
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", handler)
+
+    return () => {
+      window.removeEventListener("focus", focusHandler)
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", handler)
+    }
+  }, [storageKey])
+
+  useEffect(() => {
+    if (isServerSide()) {
+      return
+    }
+
+    const $el = element || document.documentElement
+    if (darkMode) {
+      $el.classList.remove(classNameLight)
+      $el.classList.add(classNameDark)
+    } else {
+      $el.classList.remove(classNameDark)
+      $el.classList.add(classNameLight)
+    }
+  }, [classNameDark, classNameLight, darkMode, element])
+
+  if (isServerSide()) {
+    return {
+      toggle: () => {},
+      value: false,
+    }
+  }
+
+  return {
+    value: darkMode,
+    toggle: () => {
+      setDarkMode((d) => {
+        if (storageKey && !isServerSide()) {
+          localStorage.setItem(storageKey, String(!d))
+        }
+
+        return !d
+      })
+    },
+  }
+}
+
+const noop = () => {}
+
+const mockElement = {
+  classList: {
+    add: noop,
+    remove: noop,
+  },
+}
+const darkModeKey = "darkMode"
+export const useMediaToggle = () => {
+  const { toggle, value } = useDarkMode(undefined, {
+    classNameDark: "dark",
+    classNameLight: "light",
+    storageKey: darkModeKey,
+    element: (globalThis.document && document.documentElement) || mockElement,
+  })
+
+  useEffect(() => {
+    useMediaStore.getState().setDark(value ? true : false)
+  }, [value])
+
+  useEffect(() => {
+    const handler = () => {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches === value) {
+        localStorage.removeItem(darkModeKey)
+      }
+    }
+    window.addEventListener("beforeunload", handler)
+
+    return () => {
+      window.removeEventListener("beforeunload", handler)
+    }
+  }, [value])
+
+  return {
+    toggle,
+    value,
+  }
+}
--- a/src/lib/expand-unit.ts
+++ b/src/lib/expand-unit.ts
@ -92,13 +92,24 @@ export const expandCrossbellNote = async (
  page: ExpandedNote,
  useStat?: boolean,
  useScore?: boolean,
+  keyword?: string,
 ) => {
  if (page.metadata?.content) {
    if (page.metadata?.content?.content) {
      const { renderPageContent } = await import("~/markdown")
      const rendered = renderPageContent(page.metadata.content.content, true)
-      if (!page.metadata.content.summary) {
-        page.metadata.content.summary = rendered.excerpt
+      if (keyword) {
+        const position = page.metadata.content.content
+          .toLowerCase()
+          .indexOf(keyword.toLowerCase())
+        page.metadata.content.summary = `...${page.metadata.content.content.slice(
+          position - 10,
+          position + 100,
+        )}`
+      } else {
+        if (!page.metadata.content.summary) {
+          page.metadata.content.summary = rendered.excerpt
+        }
      }
      page.metadata.content.cover = rendered.cover
      if (page.metadata) {
--- a/src/models/home.model.ts
+++ b/src/models/home.model.ts
@ -5,6 +5,7 @@ import dayjs from "dayjs"
 import { expandCrossbellNote } from "~/lib/expand-unit"

 export type FeedType = "latest" | "following" | "topic" | "hot" | "search"
+export type SearchType = "latest" | "hot"

 export async function getFeed({
  type,
@ -13,7 +14,8 @@ export async function getFeed({
  characterId,
  noteIds,
  daysInterval,
-  keyword,
+  searchKeyword,
+  searchType,
 }: {
  type?: FeedType
  cursor?: string
@ -21,9 +23,10 @@ export async function getFeed({
  characterId?: number
  noteIds?: string[]
  daysInterval?: number
-  keyword?: string
+  searchKeyword?: string
+  searchType?: SearchType
 }) {
-  if (type === "search" && !keyword) {
+  if (type === "search" && !searchKeyword) {
    type = "latest"
  }
  switch (type) {
@ -217,16 +220,18 @@ export async function getFeed({
      }
    }
    case "search": {
-      const result = await indexer.searchNotes(keyword!, {
+      const result = await indexer.searchNotes(searchKeyword!, {
        sources: ["xlog"],
        tags: ["post"],
        limit: limit,
        cursor,
+        includeCharacterMetadata: true,
+        orderBy: searchType === "hot" ? "viewCount" : "createdAt",
      })

      const list = await Promise.all(
        result.list.map(async (page: any) => {
-          return await expandCrossbellNote(page)
+          return await expandCrossbellNote(page, false, false, searchKeyword)
        }),
      )

--- a/src/models/page.model.ts
+++ b/src/models/page.model.ts
@ -306,11 +306,12 @@ export async function getSearchPagesBySite(input: {
    characterId: input.characterId,
    tags: ["post"],
    sources: ["xlog"],
+    orderBy: "publishedAt",
  })

  const list: ExpandedNote[] = await Promise.all(
    result.list.map(async (page: any) => {
-      return await expandCrossbellNote(page, true)
+      return await expandCrossbellNote(page, true, false, input.keyword)
    }),
  )

--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -20,6 +20,7 @@ import { toGateway } from "~/lib/ipfs-parser"
 import { createIDBPersister } from "~/lib/persister.client"
 import { urlComposer } from "~/lib/url-composer"
 import { AppPropsWithLayout } from "types/next"
+import { useMediaToggle } from "~/hooks/useDarkMode"

 Network.setIpfsGateway(IPFS_GATEWAY)

@ -38,6 +39,7 @@ const persister = createIDBPersister()
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)

+  useMediaToggle()
  return (
    <WagmiConfig client={wagmiClient}>
      <PersistQueryClientProvider
--- a/src/pages/_site/[site]/search.tsx
+++ b/src/pages/_site/[site]/search.tsx
@ -56,6 +56,7 @@ function SiteSearchPage({ domainOrSubdomain }: { domainOrSubdomain: string }) {
          fetchNextPage={posts.fetchNextPage}
          hasNextPage={posts.hasNextPage}
          isFetchingNextPage={posts.isFetchingNextPage}
+          keyword={keyword}
        />
      )}
    </>
--- a/src/pages/dashboard/[subdomain]/editor.tsx
+++ b/src/pages/dashboard/[subdomain]/editor.tsx
@ -635,7 +635,7 @@ export default function SubdomainEditor() {
                        }
                      }}
                      onChange={(e) => updateValue("title", e.target.value)}
-                      className="h-12 ml-1 inline-flex items-center border-none text-3xl font-bold w-full focus:outline-none"
+                      className="h-12 ml-1 inline-flex items-center border-none text-3xl font-bold w-full focus:outline-none bg-white"
                      placeholder={t("Title goes here...") || ""}
                    />
                  </div>
--- a/src/pages/dashboard/[subdomain]/index.tsx
+++ b/src/pages/dashboard/[subdomain]/index.tsx
@ -74,7 +74,7 @@ export default function SubdomainIndex() {
  const showcaseSites = useGetSites(showcase)

  return (
-    <DashboardMain title="Dashboard">
+    <DashboardMain title="Dashboard" className="max-w-screen-2xl">
      <div className="min-w-[270px] flex flex-col xl:flex-row space-y-8 xl:space-y-0">
        <div className="flex-1 space-y-8">
          <div className="grid gap-4 sm:grid-cols-3 grid-cols-2">
--- a/src/pages/dashboard/[subdomain]/settings/css.tsx
+++ b/src/pages/dashboard/[subdomain]/settings/css.tsx
@ -5,13 +5,14 @@ import { DashboardLayout } from "~/components/dashboard/DashboardLayout"
 import { SettingsLayout } from "~/components/dashboard/SettingsLayout"
 import { Button } from "~/components/ui/Button"
 import { useGetSite, useUpdateSite } from "~/queries/site"
-import Editor from "@monaco-editor/react"
+
 import { FieldLabel } from "~/components/ui/FieldLabel"
 import type { ReactElement } from "react"
 import { useTranslation } from "next-i18next"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
 import { GetServerSideProps } from "next"
 import { serverSidePropsHandler } from "~/lib/server-side-props"
+import { MonacoEditor } from "~/components/common/Monaco"

 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
  async (ctx) => {
@ -106,13 +107,14 @@ export default function SettingsCSSPage() {
            </p>
          </div>
          <FieldLabel label={t("Custom CSS")} />
-          <Editor
+          <MonacoEditor
            className="w-full h-96 border outline-none py-3 rounded-lg inline-flex items-center overflow-hidden"
            defaultLanguage="css"
            defaultValue={css}
            onChange={(value) => setCss(value || "")}
            options={{
              fontSize: 14,
+              minimap: { enabled: false },
            }}
          />
        </div>
--- a/src/queries/home.ts
+++ b/src/queries/home.ts
@ -8,7 +8,8 @@ export const useGetFeed = (data?: {
  limit?: number
  noteIds?: string[]
  daysInterval?: number
-  keyword?: string
+  searchKeyword?: string
+  searchType?: homeModel.SearchType
 }) => {
  return useInfiniteQuery({
    queryKey: ["getFeed", data],
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,7 +1,11 @@
+const twColors = require("./tw-colors")
+const alwaysColor = require("tailwindcss/colors")
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ["./src/**/*.tsx"],
  theme: {
+    colors: twColors,
    extend: {
      boxShadow: {
        modal: `rgb(0 0 0 / 20%) 0px 0px 1px, rgb(0 0 0 / 20%) 0px 20px 40px`,
@ -13,6 +17,7 @@ module.exports = {
        border: "var(--border-color)",
        accent: "var(--theme-color)",
        hover: "var(--hover-color)",
+        always: alwaysColor,
      },
      spacing: {
        sidebar: `240px`,
--- a/tw-colors.js
+++ b/tw-colors.js
@ -0,0 +1,293 @@
+export default {
+  slate: {
+    50: "rgba(var(--tw-colors-i-slate-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-slate-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-slate-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-slate-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-slate-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-slate-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-slate-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-slate-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-slate-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-slate-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-slate-950), <alpha-value>)",
+  },
+  gray: {
+    50: "rgba(var(--tw-colors-i-gray-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-gray-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-gray-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-gray-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-gray-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-gray-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-gray-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-gray-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-gray-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-gray-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-gray-950), <alpha-value>)",
+  },
+  zinc: {
+    50: "rgba(var(--tw-colors-i-zinc-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-zinc-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-zinc-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-zinc-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-zinc-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-zinc-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-zinc-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-zinc-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-zinc-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-zinc-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-zinc-950), <alpha-value>)",
+  },
+  neutral: {
+    50: "rgba(var(--tw-colors-i-neutral-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-neutral-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-neutral-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-neutral-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-neutral-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-neutral-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-neutral-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-neutral-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-neutral-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-neutral-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-neutral-950), <alpha-value>)",
+  },
+  stone: {
+    50: "rgba(var(--tw-colors-i-stone-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-stone-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-stone-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-stone-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-stone-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-stone-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-stone-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-stone-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-stone-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-stone-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-stone-950), <alpha-value>)",
+  },
+  red: {
+    50: "rgba(var(--tw-colors-i-red-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-red-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-red-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-red-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-red-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-red-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-red-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-red-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-red-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-red-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-red-950), <alpha-value>)",
+  },
+  orange: {
+    50: "rgba(var(--tw-colors-i-orange-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-orange-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-orange-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-orange-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-orange-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-orange-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-orange-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-orange-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-orange-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-orange-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-orange-950), <alpha-value>)",
+  },
+  amber: {
+    50: "rgba(var(--tw-colors-i-amber-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-amber-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-amber-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-amber-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-amber-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-amber-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-amber-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-amber-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-amber-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-amber-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-amber-950), <alpha-value>)",
+  },
+  yellow: {
+    50: "rgba(var(--tw-colors-i-yellow-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-yellow-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-yellow-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-yellow-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-yellow-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-yellow-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-yellow-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-yellow-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-yellow-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-yellow-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-yellow-950), <alpha-value>)",
+  },
+  lime: {
+    50: "rgba(var(--tw-colors-i-lime-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-lime-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-lime-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-lime-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-lime-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-lime-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-lime-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-lime-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-lime-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-lime-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-lime-950), <alpha-value>)",
+  },
+  green: {
+    50: "rgba(var(--tw-colors-i-green-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-green-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-green-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-green-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-green-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-green-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-green-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-green-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-green-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-green-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-green-950), <alpha-value>)",
+  },
+  emerald: {
+    50: "rgba(var(--tw-colors-i-emerald-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-emerald-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-emerald-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-emerald-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-emerald-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-emerald-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-emerald-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-emerald-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-emerald-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-emerald-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-emerald-950), <alpha-value>)",
+  },
+  teal: {
+    50: "rgba(var(--tw-colors-i-teal-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-teal-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-teal-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-teal-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-teal-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-teal-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-teal-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-teal-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-teal-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-teal-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-teal-950), <alpha-value>)",
+  },
+  cyan: {
+    50: "rgba(var(--tw-colors-i-cyan-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-cyan-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-cyan-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-cyan-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-cyan-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-cyan-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-cyan-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-cyan-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-cyan-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-cyan-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-cyan-950), <alpha-value>)",
+  },
+  sky: {
+    50: "rgba(var(--tw-colors-i-sky-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-sky-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-sky-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-sky-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-sky-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-sky-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-sky-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-sky-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-sky-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-sky-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-sky-950), <alpha-value>)",
+  },
+  blue: {
+    50: "rgba(var(--tw-colors-i-blue-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-blue-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-blue-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-blue-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-blue-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-blue-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-blue-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-blue-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-blue-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-blue-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-blue-950), <alpha-value>)",
+  },
+  indigo: {
+    50: "rgba(var(--tw-colors-i-indigo-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-indigo-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-indigo-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-indigo-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-indigo-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-indigo-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-indigo-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-indigo-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-indigo-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-indigo-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-indigo-950), <alpha-value>)",
+  },
+  violet: {
+    50: "rgba(var(--tw-colors-i-violet-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-violet-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-violet-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-violet-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-violet-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-violet-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-violet-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-violet-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-violet-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-violet-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-violet-950), <alpha-value>)",
+  },
+  purple: {
+    50: "rgba(var(--tw-colors-i-purple-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-purple-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-purple-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-purple-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-purple-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-purple-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-purple-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-purple-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-purple-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-purple-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-purple-950), <alpha-value>)",
+  },
+  fuchsia: {
+    50: "rgba(var(--tw-colors-i-fuchsia-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-fuchsia-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-fuchsia-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-fuchsia-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-fuchsia-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-fuchsia-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-fuchsia-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-fuchsia-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-fuchsia-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-fuchsia-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-fuchsia-950), <alpha-value>)",
+  },
+  pink: {
+    50: "rgba(var(--tw-colors-i-pink-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-pink-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-pink-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-pink-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-pink-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-pink-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-pink-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-pink-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-pink-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-pink-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-pink-950), <alpha-value>)",
+  },
+  rose: {
+    50: "rgba(var(--tw-colors-i-rose-50), <alpha-value>)",
+    100: "rgba(var(--tw-colors-i-rose-100), <alpha-value>)",
+    200: "rgba(var(--tw-colors-i-rose-200), <alpha-value>)",
+    300: "rgba(var(--tw-colors-i-rose-300), <alpha-value>)",
+    400: "rgba(var(--tw-colors-i-rose-400), <alpha-value>)",
+    500: "rgba(var(--tw-colors-i-rose-500), <alpha-value>)",
+    600: "rgba(var(--tw-colors-i-rose-600), <alpha-value>)",
+    700: "rgba(var(--tw-colors-i-rose-700), <alpha-value>)",
+    800: "rgba(var(--tw-colors-i-rose-800), <alpha-value>)",
+    900: "rgba(var(--tw-colors-i-rose-900), <alpha-value>)",
+    950: "rgba(var(--tw-colors-i-rose-950), <alpha-value>)",
+  },
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: "rgba(var(--tw-colors-i-black), <alpha-value>)",
+  white: "rgba(var(--tw-colors-i-white), <alpha-value>)",
+}