From c0150fd3cc5a790b3c55d91c9a1aa57ef3a03ed3 Mon Sep 17 00:00:00 2001
From: NekoWings <NekoWings@outlook.com>
Date: Tue, 23 Sep 2025 19:32:25 +0800
Subject: [PATCH 1/9] feat(Darkmode): introduce darkmode theme with color
 variables

- Update components with new theme variables
- Add ThemeSelector for light, dark and system mode
- Fix some ui layouts
---
 app.config.ts                                 |   4 +-
 assets/icons/logo-ollama.svg                  |  10 +-
 assets/icons/md-highlight-action.svg          |   5 +
 assets/icons/md-search-action.svg             |   5 +
 assets/icons/md-summarize-action.svg          |   5 +
 components/AutoExpandTextArea.vue             |   2 +-
 components/Checkbox.vue                       |   4 +-
 components/ConfirmPanel.vue                   |   2 +-
 components/IconSelector.vue                   |   6 +-
 components/Input.vue                          |  12 +-
 components/Loading.vue                        |   6 +-
 components/Logo.vue                           |   2 +-
 components/MarkdownViewer.vue                 |  16 +-
 components/Modal.vue                          |   2 +-
 components/ModelLogo.vue                      |   2 +-
 components/ModelSelector.vue                  |   8 +-
 components/ProgressBar.vue                    |   4 +-
 components/RadioGroup.vue                     |   6 +-
 components/RootProvider.vue                   |   9 +
 components/ScrollContainer.vue                |   2 +-
 components/ScrollTarget.vue                   |   2 +-
 components/Selector.vue                       |   8 +-
 components/StatusBadge.vue                    |   8 +-
 components/Textarea.vue                       |  12 +-
 components/ThemeSelector.vue                  |  29 ++
 components/ToastGroup.vue                     |   9 +-
 components/UILanguageSelector.vue             |   2 +-
 components/ui/Button.vue                      |  14 +-
 components/ui/Divider.vue                     |   2 +-
 components/ui/Text.vue                        |   2 +-
 components/ui/Tooltip.vue                     |   8 +-
 components/web-components/reading-task.ts     |  16 +-
 composables/useConfirm.tsx                    |   8 +-
 .../GmailTools/GmailComposeCard.vue           |  28 +-
 .../components/GmailTools/GmailReplyCard.vue  |  16 +-
 .../content/components/GmailTools/index.vue   |  14 +-
 .../components/WritingTools/EditableEntry.vue |  14 +-
 .../WritingTools/SuggestionCard.vue           |  10 +-
 .../content/components/WritingTools/index.vue |  10 +-
 .../content/components/WritingTools/style.css |  12 +-
 .../utils/page-injection/gmail-tools.ts       | 337 ++++++++++--------
 .../utils/translator/utils/dom-utils.ts       |  24 +-
 entrypoints/settings/components/Block.vue     |   4 +-
 .../ChatSettings/QuickAction/EditCard.vue     |   2 +-
 .../components/CollapsibleSection.vue         |   4 +-
 .../components/DebugSettings/Block.vue        |   2 +-
 .../components/DebugSettings/index.vue        |  98 ++---
 .../Blocks/LMStudioConfiguration.vue          |   4 +-
 .../Blocks/ModelManagement/Card.vue           |   6 +-
 .../Blocks/ModelManagement/LMStudio.vue       |   6 +-
 .../Blocks/ModelManagement/Ollama.vue         |  12 +-
 .../Blocks/OllamaConfiguration.vue            |   9 +-
 .../components/GeneralSettings/index.vue      |  25 +-
 entrypoints/settings/components/Layout.vue    |  10 +-
 .../components/OllamaDownloadModal.vue        |   8 +-
 entrypoints/settings/components/Sidebar.vue   |   4 +-
 .../components/TranslationSettings/index.vue  |   2 +-
 .../components/WebLLMDownloadModal.vue        |  10 +-
 .../components/AttachmentSelector.vue         |  36 +-
 .../components/Chat/Messages/Action.vue       |   9 +-
 .../Chat/Messages/AgentTaskGroup.vue          |   4 +-
 .../components/Chat/Messages/Assistant.vue    |   8 +-
 .../components/Chat/Messages/Task.vue         |   2 +-
 .../components/Chat/OnlineSearchSwitch.vue    |   2 +-
 .../components/Chat/ThinkingModeSwitch.vue    |   2 +-
 .../sidepanel/components/Chat/index.vue       |  22 +-
 .../components/ChatHistory/ChatItem.vue       |  22 +-
 .../components/ChatHistory/index.vue          |   8 +-
 entrypoints/sidepanel/components/Main.vue     |  20 +-
 .../Onboarding/BackendDownloadModal.vue       |   8 +-
 .../Onboarding/BackendModelDownloader.vue     |  10 +-
 .../BackendSelectionTutorialCard.vue          |  14 +-
 .../components/Onboarding/SloganCard.vue      |   2 +-
 .../Onboarding/WebLLMTutorialCard.vue         |   4 +-
 .../sidepanel/components/Onboarding/index.vue |   6 +-
 .../sidepanel/utils/chat/side-effects.ts      |   2 +-
 entrypoints/sidepanel/utils/chat/texts.ts     |   2 +-
 .../sidepanel/utils/chat/tool-calls/index.ts  |  10 +-
 .../sidepanel/utils/markdown/content.ts       |   6 +
 .../utils/translator/utils/dom-utils.ts       |  24 +-
 locales/de.json                               |   5 +-
 locales/en.json                               |   5 +-
 locales/es.json                               |   5 +-
 locales/fr.json                               |   5 +-
 locales/id.json                               |   5 +-
 locales/ja.json                               |   5 +-
 locales/ko.json                               |   5 +-
 locales/pt.json                               |   5 +-
 locales/ru.json                               |   5 +-
 locales/th.json                               |   5 +-
 locales/vi.json                               |   5 +-
 locales/zh-CN.json                            |   5 +-
 locales/zh-TW.json                            |   5 +-
 styles/style.css                              | 213 ++++++++++-
 tests/html/writing-tools/input.html           |   2 +-
 utils/icon.ts                                 |   6 +
 utils/theme/composable.ts                     |  98 +++++
 utils/theme/index.ts                          |   2 +
 utils/user-config/index.ts                    |   5 +
 99 files changed, 1013 insertions(+), 504 deletions(-)
 create mode 100644 assets/icons/md-highlight-action.svg
 create mode 100644 assets/icons/md-search-action.svg
 create mode 100644 assets/icons/md-summarize-action.svg
 create mode 100644 components/ThemeSelector.vue
 create mode 100644 utils/theme/composable.ts
 create mode 100644 utils/theme/index.ts

diff --git a/app.config.ts b/app.config.ts
index f93afc06..0c9b0137 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -3,10 +3,10 @@ import { defineAppConfig } from 'wxt/utils/define-app-config'
 // Define types for your config
 declare module 'wxt/utils/define-app-config' {
   export interface WxtAppConfig {
-    theme?: 'light' | 'dark'
+    theme?: 'light' | 'dark' | 'system'
   }
 }
 
 export default defineAppConfig({
-  theme: 'light',
+  theme: 'system',
 })
diff --git a/assets/icons/logo-ollama.svg b/assets/icons/logo-ollama.svg
index b522b7bc..9afd954a 100644
--- a/assets/icons/logo-ollama.svg
+++ b/assets/icons/logo-ollama.svg
@@ -1,17 +1,17 @@
 <svg viewBox="0 0 646 854" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M140.629 0.239929C132.66 1.52725 123.097 5.69568 116.354 10.845C95.941 26.3541 80.1253 59.2728 73.4435 100.283C70.9302 115.792 69.2138 137.309 69.2138 153.738C69.2138 173.109 71.4819 197.874 74.7309 214.977C75.4665 218.778 75.8343 222.15 75.5278 222.395C75.2826 222.64 72.2788 225.092 68.9072 227.789C57.3827 236.984 44.2029 251.145 35.1304 264.08C17.7209 288.784 6.44151 316.86 1.72133 347.265C-0.117698 359.28 -0.608106 383.555 0.863118 395.57C4.11207 423.278 12.449 446.695 26.7321 468.151L31.391 475.078L30.0424 477.346C20.4794 493.407 12.3264 516.64 8.52575 538.953C5.522 556.608 5.15419 561.328 5.15419 584.99C5.15419 608.837 5.4607 613.557 8.28054 630.047C11.6521 649.786 18.5178 670.689 26.1804 684.605C28.6938 689.141 34.8239 698.581 35.5595 699.072C35.8047 699.194 35.0691 701.462 33.9044 704.098C25.077 723.408 17.537 749.093 14.4106 770.733C12.2038 785.567 11.8973 790.349 11.8973 805.981C11.8973 825.903 13.0007 835.589 17.1692 851.466L17.7822 853.795H44.019H70.3172L68.6007 850.546C57.9957 830.93 57.0149 794.517 66.1487 758.166C70.3172 741.369 75.0374 729.048 83.8647 712.067L89.1366 701.769V695.455C89.1366 689.57 89.014 688.896 87.1137 685.034C85.6424 682.091 83.6808 679.578 80.1866 676.145C74.2404 670.383 69.9494 664.314 66.5165 656.835C51.4365 624.1 48.494 575.489 59.0991 534.049C63.5128 516.762 70.8076 501.376 78.4702 492.978C83.6808 487.215 86.378 480.779 86.378 474.097C86.378 467.17 83.926 461.469 78.4089 455.523C62.5932 438.604 52.8464 418.006 49.3522 394.038C44.3868 359.893 53.3981 322.683 73.8726 293.198C93.9181 264.263 122.055 245.689 153.503 240.724C160.552 239.559 173.732 239.743 181.088 241.092C189.119 242.502 194.145 242.072 199.295 239.62C205.67 236.617 208.858 232.877 212.597 224.295C215.907 216.633 218.482 212.464 225.409 203.821C233.746 193.461 241.776 186.411 254.649 177.89C269.362 168.266 286.097 161.278 302.771 157.906C308.839 156.68 311.659 156.496 323 156.496C334.341 156.496 337.161 156.68 343.229 157.906C367.688 162.872 391.964 175.5 411.335 193.399C415.503 197.261 425.495 209.644 428.683 214.794C429.909 216.816 432.055 221.108 433.403 224.295C437.142 232.877 440.33 236.617 446.705 239.62C451.671 242.011 456.881 242.502 464.605 241.214C476.804 239.13 486.183 239.314 498.137 241.766C538.841 249.98 574.273 283.512 589.966 328.446C603.636 367.862 599.774 409.118 579.422 440.626C575.989 445.96 572.556 450.251 567.591 455.523C556.863 466.986 556.863 481.208 567.53 492.978C585.062 512.165 596.035 559.367 592.724 600.99C590.518 628.453 583.468 653.035 573.782 666.95C572.066 669.402 568.511 673.57 565.813 676.145C562.319 679.578 560.358 682.091 558.886 685.034C556.986 688.896 556.863 689.57 556.863 695.455V701.769L562.135 712.067C570.963 729.048 575.683 741.369 579.851 758.166C588.863 794.027 588.066 829.704 577.767 849.995C576.909 851.711 576.173 853.305 576.173 853.489C576.173 853.673 587.882 853.795 602.226 853.795H628.218L628.892 851.159C629.26 849.75 629.873 847.604 630.179 846.378C630.854 843.681 632.202 835.712 633.306 828.049C634.348 820.325 634.348 791.881 633.306 783.299C629.383 752.158 622.823 727.454 612.096 704.098C610.931 701.462 610.195 699.194 610.44 699.072C610.747 698.888 612.463 696.436 614.302 693.677C627.666 673.448 635.88 648.008 640.049 614.415C641.152 605.158 641.152 565.374 640.049 556.485C637.106 533.559 633.551 517.988 627.666 502.234C625.214 495.675 618.716 481.821 615.958 477.346L614.609 475.078L619.268 468.151C633.551 446.695 641.888 423.278 645.137 395.57C646.608 383.555 646.118 359.28 644.279 347.265C639.497 316.798 628.279 288.845 610.87 264.08C601.797 251.145 588.617 236.984 577.093 227.789C573.721 225.092 570.717 222.64 570.472 222.395C570.166 222.15 570.534 218.778 571.269 214.977C578.687 176.296 578.441 128.053 570.656 90.3524C563.913 57.4951 551.653 31.3808 535.837 16.3008C523.209 4.28578 510.336 -0.863507 494.888 0.11731C459.456 2.20154 430.89 42.9667 419.61 107.21C417.771 117.57 416.178 129.708 416.178 133.018C416.178 134.305 415.932 135.347 415.626 135.347C415.319 135.347 412.929 134.121 410.354 132.589C383.014 116.405 352.608 107.762 323 107.762C293.392 107.762 262.986 116.405 235.646 132.589C233.071 134.121 230.681 135.347 230.374 135.347C230.068 135.347 229.822 134.305 229.822 133.018C229.822 129.585 228.167 117.08 226.39 107.21C216.152 49.5259 192.674 11.3354 161.472 1.71112C157.181 0.423799 144.982 -0.434382 140.629 0.239929ZM151.051 50.139C159.878 57.1273 169.686 77.1114 175.326 99.4863C176.368 103.532 177.471 108.191 177.778 109.907C178.023 111.563 178.697 115.302 179.249 118.183C181.64 131.179 182.743 145.217 182.866 162.32L182.927 179.178L178.697 185.43L174.468 191.744H164.598C153.074 191.744 141.61 193.216 130.637 196.158C126.714 197.139 122.913 198.12 122.178 198.304C121.013 198.549 120.829 198.181 120.155 193.154C116.538 165.875 116.722 135.654 120.707 110.52C125.12 82.5059 135.419 57.1273 145.472 49.6486C147.863 47.8708 148.292 47.9321 151.051 50.139ZM500.589 49.7098C506.658 54.1848 513.34 66.0772 518.305 81.2798C528.297 111.685 531.117 153.431 525.845 193.154C525.171 198.181 524.987 198.549 523.822 198.304C523.087 198.12 519.286 197.139 515.363 196.158C504.39 193.216 492.926 191.744 481.402 191.744H471.532L467.303 185.43L463.073 179.178L463.134 162.32C463.257 138.535 465.464 119.961 470.735 99.3024C476.314 77.1114 486.183 57.1273 494.949 50.139C497.708 47.9321 498.137 47.8708 500.589 49.7098Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M313.498 358.237C300.195 359.525 296.579 360.015 290.203 361.303C279.843 363.448 265.989 368.23 256.365 372.95C222.895 389.317 199.846 416.596 192.796 448.166C191.386 454.419 191.202 456.503 191.202 467.047C191.202 477.468 191.386 479.736 192.735 485.682C202.114 526.938 240.12 557.405 289.284 562.983C299.95 564.148 346.049 564.148 356.715 562.983C396.193 558.508 430.154 537.114 445.418 507.076C449.463 499.046 451.425 493.835 453.264 485.682C454.613 479.736 454.797 477.468 454.797 467.047C454.797 456.503 454.613 454.419 453.203 448.166C442.965 402.313 398.461 366.207 343.903 359.341C336.792 358.483 318.157 357.747 313.498 358.237ZM336.424 391.585C354.631 393.547 372.96 400.045 387.672 409.853C395.58 415.125 406.737 426.159 411.518 433.393C417.403 442.342 420.774 451.476 422.307 462.572C422.981 467.66 422.614 471.522 420.774 479.736C417.893 491.996 408.943 504.808 396.867 513.758C391.227 517.865 379.519 523.812 372.347 526.141C358.738 530.493 349.849 531.29 318.095 531.045C297.376 530.861 293.697 530.677 287.751 529.574C267.461 525.773 251.4 517.681 239.753 505.36C230.312 495.429 226.021 486.357 223.692 471.706C222.65 464.901 224.611 453.622 228.596 444.12C233.439 432.534 245.944 418.129 258.327 409.853C272.671 400.29 291.552 393.486 308.9 391.647C315.582 390.911 329.742 390.911 336.424 391.585Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M299.584 436.336C294.925 438.849 291.676 445.224 292.657 449.944C293.76 455.032 298.235 460.182 305.223 464.412C308.963 466.68 309.208 466.986 309.392 469.254C309.514 470.603 309.024 474.465 308.35 477.898C307.614 481.269 307.062 484.825 307.062 485.806C307.124 488.442 309.576 492.733 312.15 494.817C314.419 496.656 314.848 496.717 321.223 496.901C327.047 497.085 328.273 496.962 330.602 495.859C336.61 492.916 338.142 487.522 335.935 477.162C334.096 468.519 334.464 467.17 339.062 464.534C343.904 461.714 349.054 456.749 350.586 453.377C353.529 446.941 350.831 439.646 344.333 436.274C342.74 435.477 340.778 435.11 337.897 435.11C333.422 435.11 330.541 436.152 325.269 439.523L322.265 441.424L320.365 440.259C312.58 435.661 311.17 435.11 306.449 435.171C303.078 435.171 301.239 435.477 299.584 436.336Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M150.744 365.165C139.894 368.598 131.802 376.567 127.634 387.908C125.611 393.303 124.63 401.824 125.488 406.421C127.511 417.394 136.522 427.386 146.76 430.145C159.633 433.516 169.257 431.309 177.778 422.85C182.743 418.007 185.441 413.777 188.138 406.911C190.099 402.069 190.222 401.211 190.222 394.345L190.283 386.989L187.709 381.717C183.601 373.38 176.184 367.188 167.602 364.92C162.759 363.694 154.974 363.756 150.744 365.165Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M478.153 364.982C469.755 367.25 462.276 373.502 458.291 381.717L455.717 386.989L455.778 394.345C455.778 401.211 455.901 402.069 457.862 406.911C460.56 413.777 463.257 418.007 468.222 422.85C476.743 431.309 486.367 433.516 499.241 430.145C506.658 428.183 514.075 421.93 517.631 414.635C520.696 408.444 521.431 403.969 520.451 396.919C518.183 380.797 508.742 369.089 494.704 364.982C490.597 363.756 482.628 363.756 478.153 364.982Z"
-    fill="black" />
+    fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/assets/icons/md-highlight-action.svg b/assets/icons/md-highlight-action.svg
new file mode 100644
index 00000000..29cc63e3
--- /dev/null
+++ b/assets/icons/md-highlight-action.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M2.16211 5.50586C2.09961 5.55664 2.03711 5.57617 1.97461 5.56445C1.91602 5.55273 1.86914 5.52148 1.83398 5.4707C1.80273 5.41602 1.80078 5.34961 1.82812 5.27148L2.01562 4.69141L1.5293 4.32812C1.4707 4.28516 1.4375 4.23242 1.42969 4.16992C1.42578 4.10742 1.44336 4.05469 1.48242 4.01172C1.52148 3.96484 1.57617 3.94141 1.64648 3.94141H2.25586L2.45508 3.31445C2.47461 3.24805 2.51172 3.20508 2.56641 3.18555C2.625 3.16211 2.68164 3.16211 2.73633 3.18555C2.79102 3.20898 2.82812 3.25195 2.84766 3.31445L3.04688 3.94141H3.65039C3.7207 3.94141 3.77539 3.96484 3.81445 4.01172C3.85352 4.05469 3.86914 4.10742 3.86133 4.16992C3.85742 4.23242 3.82617 4.28516 3.76758 4.32812L3.28711 4.69141L3.47461 5.27148C3.50195 5.34961 3.49805 5.41602 3.46289 5.4707C3.43164 5.52148 3.38477 5.55273 3.32227 5.56445C3.25977 5.57617 3.19531 5.55664 3.12891 5.50586L2.6543 5.14844L2.16211 5.50586ZM2.16211 9.09766C2.09961 9.14844 2.03711 9.16797 1.97461 9.15625C1.91602 9.14062 1.86914 9.10742 1.83398 9.05664C1.80273 9.00586 1.80078 8.94141 1.82812 8.86328L2.01562 8.2832L1.5293 7.91992C1.4707 7.87695 1.4375 7.82617 1.42969 7.76758C1.42578 7.70508 1.44336 7.65234 1.48242 7.60938C1.52148 7.5625 1.57617 7.53906 1.64648 7.53906H2.25586L2.45508 6.90625C2.47461 6.84375 2.51172 6.80078 2.56641 6.77734C2.625 6.75391 2.68164 6.75391 2.73633 6.77734C2.79102 6.79688 2.82812 6.83984 2.84766 6.90625L3.04688 7.53906H3.65039C3.7207 7.53906 3.77539 7.5625 3.81445 7.60938C3.85352 7.65234 3.86914 7.70508 3.86133 7.76758C3.85742 7.82617 3.82617 7.87695 3.76758 7.91992L3.28711 8.27734L3.47461 8.86328C3.50195 8.94141 3.49805 9.00586 3.46289 9.05664C3.43164 9.10742 3.38477 9.14062 3.32227 9.15625C3.25977 9.16797 3.19531 9.14844 3.12891 9.09766L2.6543 8.74023L2.16211 9.09766ZM2.16211 12.7012C2.09961 12.752 2.03711 12.7715 1.97461 12.7598C1.91602 12.748 1.86914 12.7148 1.83398 12.6602C1.80273 12.6094 1.80078 12.5469 1.82812 12.4727L2.01562 11.8867L1.5293 11.5234C1.4707 11.4805 1.4375 11.4297 1.42969 11.3711C1.42578 11.3086 1.44336 11.2559 1.48242 11.2129C1.52148 11.166 1.57617 11.1426 1.64648 11.1426H2.25586L2.45508 10.5098C2.47461 10.4473 2.51172 10.4043 2.56641 10.3809C2.625 10.3574 2.68164 10.3574 2.73633 10.3809C2.79102 10.4043 2.82812 10.4473 2.84766 10.5098L3.04688 11.1426H3.65039C3.7207 11.1426 3.77539 11.166 3.81445 11.2129C3.85352 11.2559 3.86914 11.3086 3.86133 11.3711C3.85742 11.4297 3.82617 11.4805 3.76758 11.5234L3.28711 11.8867L3.47461 12.4727C3.50195 12.5469 3.49805 12.6094 3.46289 12.6602C3.43164 12.7148 3.38477 12.748 3.32227 12.7598C3.25977 12.7715 3.19531 12.752 3.12891 12.7012L2.6543 12.3438L2.16211 12.7012ZM5.60156 5.04297C5.44531 5.04297 5.3125 4.98828 5.20312 4.87891C5.09766 4.76953 5.04492 4.63867 5.04492 4.48633C5.04492 4.33398 5.09766 4.20312 5.20312 4.09375C5.3125 3.98437 5.44531 3.92969 5.60156 3.92969H13.0137C13.166 3.92969 13.2969 3.98437 13.4062 4.09375C13.5156 4.19922 13.5703 4.33008 13.5703 4.48633C13.5703 4.63867 13.5156 4.76953 13.4062 4.87891C13.2969 4.98828 13.166 5.04297 13.0137 5.04297H5.60156ZM5.60156 8.64062C5.44531 8.64062 5.3125 8.58594 5.20312 8.47656C5.09766 8.36719 5.04492 8.23633 5.04492 8.08398C5.04492 7.92773 5.09766 7.79688 5.20312 7.69141C5.3125 7.58203 5.44531 7.52734 5.60156 7.52734H13.0137C13.166 7.52734 13.2969 7.58203 13.4062 7.69141C13.5156 7.79688 13.5703 7.92773 13.5703 8.08398C13.5703 8.23633 13.5156 8.36719 13.4062 8.47656C13.2969 8.58594 13.166 8.64062 13.0137 8.64062H5.60156ZM5.60156 12.2383C5.44531 12.2383 5.3125 12.1836 5.20312 12.0742C5.09766 11.9648 5.04492 11.834 5.04492 11.6816C5.04492 11.5293 5.09766 11.3984 5.20312 11.2891C5.3125 11.1797 5.44531 11.125 5.60156 11.125H13.0137C13.166 11.125 13.2969 11.1797 13.4062 11.2891C13.5156 11.3945 13.5703 11.5254 13.5703 11.6816C13.5703 11.8379 13.5156 11.9707 13.4062 12.0801C13.2969 12.1855 13.166 12.2383 13.0137 12.2383H5.60156Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/md-search-action.svg b/assets/icons/md-search-action.svg
new file mode 100644
index 00000000..7580cf5f
--- /dev/null
+++ b/assets/icons/md-search-action.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M2.19336 7.45312C2.19336 6.85156 2.30615 6.2876 2.53174 5.76123C2.7609 5.23128 3.07601 4.76579 3.47705 4.36475C3.87809 3.96012 4.3418 3.64502 4.86816 3.41943C5.39811 3.19385 5.96387 3.08105 6.56543 3.08105C7.17057 3.08105 7.73633 3.19385 8.2627 3.41943C8.79264 3.64502 9.25814 3.96012 9.65918 4.36475C10.0602 4.76579 10.3735 5.23128 10.5991 5.76123C10.8283 6.2876 10.9429 6.85156 10.9429 7.45312C10.9429 7.92578 10.8695 8.37516 10.7227 8.80127C10.5794 9.22738 10.3807 9.61589 10.1265 9.9668L12.5757 12.4268C12.6509 12.4984 12.7064 12.5825 12.7422 12.6792C12.7816 12.7759 12.8013 12.8779 12.8013 12.9854C12.8013 13.1357 12.7673 13.2718 12.6992 13.3936C12.6312 13.5153 12.5381 13.6102 12.4199 13.6782C12.3018 13.7498 12.1657 13.7856 12.0117 13.7856C11.9043 13.7856 11.8005 13.766 11.7002 13.7266C11.6035 13.6908 11.5158 13.6335 11.437 13.5547L8.97168 11.0894C8.62793 11.3185 8.25195 11.4993 7.84375 11.6318C7.43913 11.7607 7.01302 11.8252 6.56543 11.8252C5.96387 11.8252 5.39811 11.7124 4.86816 11.4868C4.3418 11.2612 3.87809 10.9479 3.47705 10.5469C3.07601 10.1458 2.7609 9.68213 2.53174 9.15576C2.30615 8.62581 2.19336 8.05827 2.19336 7.45312ZM3.31592 7.45312C3.31592 7.9043 3.39827 8.32682 3.56299 8.7207C3.73128 9.111 3.96403 9.45475 4.26123 9.75195C4.56201 10.0492 4.90934 10.2837 5.30322 10.4556C5.6971 10.6239 6.11784 10.708 6.56543 10.708C7.0166 10.708 7.43734 10.6239 7.82764 10.4556C8.22152 10.2837 8.56706 10.0492 8.86426 9.75195C9.16146 9.45475 9.39421 9.111 9.5625 8.7207C9.73438 8.32682 9.82031 7.9043 9.82031 7.45312C9.82031 7.00553 9.73438 6.5848 9.5625 6.19092C9.39421 5.79704 9.16146 5.4515 8.86426 5.1543C8.56706 4.85352 8.22152 4.62077 7.82764 4.45605C7.43734 4.28776 7.0166 4.20361 6.56543 4.20361C6.11784 4.20361 5.6971 4.28776 5.30322 4.45605C4.90934 4.62077 4.56201 4.85352 4.26123 5.1543C3.96403 5.4515 3.73128 5.79704 3.56299 6.19092C3.39827 6.5848 3.31592 7.00553 3.31592 7.45312ZM4.72852 7.23828V5.98145C4.72852 5.86686 4.75716 5.77734 4.81445 5.71289C4.87174 5.64844 4.94873 5.61621 5.04541 5.61621H6.37207C6.52246 5.61621 6.61377 5.67708 6.646 5.79883C6.67822 5.92057 6.65137 6.0262 6.56543 6.11572L6.14648 6.52393L7.48389 7.87207L7.89209 7.46924C7.97803 7.38688 8.08187 7.36182 8.20361 7.39404C8.32536 7.42269 8.38623 7.51221 8.38623 7.6626V8.91943C8.38623 9.03402 8.35758 9.12174 8.30029 9.18262C8.243 9.24349 8.16602 9.27393 8.06934 9.27393H6.74268C6.59229 9.27393 6.49919 9.21484 6.46338 9.09668C6.43115 8.97493 6.4598 8.87109 6.54932 8.78516L6.97363 8.37158L5.62549 7.02881L5.22266 7.42627C5.13672 7.51221 5.03288 7.53906 4.91113 7.50684C4.78939 7.47461 4.72852 7.38509 4.72852 7.23828Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/md-summarize-action.svg b/assets/icons/md-summarize-action.svg
new file mode 100644
index 00000000..5e2d17ae
--- /dev/null
+++ b/assets/icons/md-summarize-action.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M1.19727 12.5547V7.56836C1.19727 7.1582 1.31836 6.83789 1.56055 6.60742C1.80664 6.37695 2.14453 6.26172 2.57422 6.26172H3.86914V3.64258C3.86914 3.01367 4.03125 2.53906 4.35547 2.21875C4.68359 1.89844 5.16406 1.73828 5.79688 1.73828H12.875C13.5078 1.73828 13.9863 1.89844 14.3105 2.21875C14.6348 2.53906 14.7969 3.01367 14.7969 3.64258V12.5195C14.7969 13.1445 14.6348 13.6172 14.3105 13.9375C13.9863 14.2617 13.5078 14.4238 12.875 14.4238H3.11328C2.48828 14.4238 2.01172 14.2637 1.68359 13.9434C1.35938 13.623 1.19727 13.1602 1.19727 12.5547ZM2.35156 12.4961C2.35156 12.7188 2.42383 12.9023 2.56836 13.0469C2.71289 13.1953 2.89453 13.2695 3.11328 13.2695C3.32812 13.2695 3.50781 13.1973 3.65234 13.0527C3.79688 12.9082 3.86914 12.7227 3.86914 12.4961V7.41016H2.7207C2.60352 7.41016 2.51172 7.44336 2.44531 7.50977C2.38281 7.57617 2.35156 7.66602 2.35156 7.7793V12.4961ZM4.85352 13.2695H12.7988C13.0762 13.2695 13.2871 13.1973 13.4316 13.0527C13.5762 12.9121 13.6484 12.7012 13.6484 12.4199V3.74219C13.6484 3.46094 13.5762 3.24805 13.4316 3.10352C13.2871 2.95898 13.0762 2.88672 12.7988 2.88672H5.86719C5.59375 2.88672 5.38477 2.95898 5.24023 3.10352C5.0957 3.24805 5.02344 3.46094 5.02344 3.74219V12.5078C5.02344 12.793 4.9668 13.0469 4.85352 13.2695ZM6.51172 5.38867C6.39844 5.38867 6.30273 5.34961 6.22461 5.27148C6.15039 5.19336 6.11328 5.09961 6.11328 4.99023C6.11328 4.88477 6.15039 4.79492 6.22461 4.7207C6.30273 4.64648 6.39844 4.60938 6.51172 4.60938H12.166C12.2754 4.60938 12.3672 4.64648 12.4414 4.7207C12.5195 4.79492 12.5586 4.88477 12.5586 4.99023C12.5586 5.09961 12.5195 5.19336 12.4414 5.27148C12.3672 5.34961 12.2754 5.38867 12.166 5.38867H6.51172ZM6.51172 7.41016C6.39844 7.41016 6.30273 7.375 6.22461 7.30469C6.15039 7.23047 6.11328 7.13672 6.11328 7.02344C6.11328 6.91406 6.15039 6.82227 6.22461 6.74805C6.30273 6.66992 6.39844 6.63086 6.51172 6.63086H12.166C12.2754 6.63086 12.3672 6.66992 12.4414 6.74805C12.5195 6.82227 12.5586 6.91406 12.5586 7.02344C12.5586 7.13672 12.5195 7.23047 12.4414 7.30469C12.3672 7.375 12.2754 7.41016 12.166 7.41016H6.51172ZM6.8457 11.4883C6.61523 11.4883 6.43359 11.4238 6.30078 11.2949C6.17188 11.1621 6.10742 10.9824 6.10742 10.7559V9.39648C6.10742 9.16602 6.17188 8.98633 6.30078 8.85742C6.43359 8.72852 6.61523 8.66406 6.8457 8.66406H8.30469C8.53125 8.66406 8.70898 8.72852 8.83789 8.85742C8.9707 8.98633 9.03711 9.16602 9.03711 9.39648V10.7559C9.03711 10.9824 8.9707 11.1621 8.83789 11.2949C8.70898 11.4238 8.53125 11.4883 8.30469 11.4883H6.8457ZM10.0742 9.44336C9.96094 9.44336 9.86719 9.40625 9.79297 9.33203C9.71875 9.25781 9.68164 9.16797 9.68164 9.0625C9.68164 8.94531 9.71875 8.84961 9.79297 8.77539C9.86719 8.70117 9.96094 8.66406 10.0742 8.66406H12.1602C12.2734 8.66406 12.3672 8.70117 12.4414 8.77539C12.5156 8.84961 12.5527 8.94531 12.5527 9.0625C12.5527 9.16797 12.5156 9.25781 12.4414 9.33203C12.3672 9.40625 12.2734 9.44336 12.1602 9.44336H10.0742ZM10.0742 11.4883C9.96094 11.4883 9.86719 11.4512 9.79297 11.377C9.71875 11.3027 9.68164 11.2129 9.68164 11.1074C9.68164 10.9941 9.71875 10.9004 9.79297 10.8262C9.86719 10.748 9.96094 10.709 10.0742 10.709H12.1602C12.2734 10.709 12.3672 10.748 12.4414 10.8262C12.5156 10.9004 12.5527 10.9941 12.5527 11.1074C12.5527 11.2129 12.5156 11.3027 12.4414 11.377C12.3672 11.4512 12.2734 11.4883 12.1602 11.4883H10.0742Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/components/AutoExpandTextArea.vue b/components/AutoExpandTextArea.vue
index 8c3afd73..894459cc 100644
--- a/components/AutoExpandTextArea.vue
+++ b/components/AutoExpandTextArea.vue
@@ -3,7 +3,7 @@
     ref="textareaRef"
     v-model="inputValue"
     rows="1"
-    :class="classNames(props.class, 'field-sizing-content scrollbar-hide wrap-anywhere')"
+    :class="classNames(props.class, 'field-sizing-content scrollbar-hide wrap-anywhere text-text-primary')"
     @input="onInput"
     @paste="emit('paste', $event)"
   />
diff --git a/components/Checkbox.vue b/components/Checkbox.vue
index 8272de46..cdbc6d0c 100644
--- a/components/Checkbox.vue
+++ b/components/Checkbox.vue
@@ -6,8 +6,8 @@
     <div
       class="h-[15px] w-[15px] rounded-[3px] cursor-pointer grow-0 shrink-0"
       :class="classNames({
-        'bg-[#24B960] shadow-[0px_1px_2px_0px_#0E6B33,0px_0px_0px_1px_#24B960]': checked,
-        'bg-bg-component shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]': !checked,
+        'bg-accent-primary shadow-[0px_1px_2px_0px_var(--color-accent-primary-shadow),0px_0px_0px_1px_var(--color-accent-primary)]': checked,
+        'bg-bg-component shadow-[0px_0px_0px_1px_var(--color-shadow-medium),0px_1px_2px_0px_var(--color-shadow-strong)]': !checked,
       }, props.class)"
     >
       <IconTick v-if="checked" />
diff --git a/components/ConfirmPanel.vue b/components/ConfirmPanel.vue
index abc151fe..2e297cbb 100644
--- a/components/ConfirmPanel.vue
+++ b/components/ConfirmPanel.vue
@@ -13,7 +13,7 @@ const emit = defineEmits(['cancel', 'ok'])
 </script>
 
 <template>
-  <div class="bg-white py-4 px-6 rounded-md w-[340px] max-w-full flex flex-col gap-2 text-black text-xs">
+  <div class="bg-bg-primary py-4 px-6 rounded-md w-[340px] max-w-full flex flex-col gap-2 text-text-primary text-xs">
     <div class="font-bold text-base">
       <slot name="title">
         {{ title }}
diff --git a/components/IconSelector.vue b/components/IconSelector.vue
index 91665855..b9a2dc40 100644
--- a/components/IconSelector.vue
+++ b/components/IconSelector.vue
@@ -61,8 +61,8 @@
           <div
             v-for="(option, index) in options"
             :key="index"
-            class="p-2 cursor-pointer hover:bg-[#EAECEF] transition-colors flex items-center gap-2 rounded-sm"
-            :class="{ 'bg-[#DFE1E5]': isSelected(option), 'opacity-50 pointer-events-none': option.disabled }"
+            class="p-2 cursor-pointer hover:bg-bg-hover transition-colors flex items-center gap-2 rounded-sm"
+            :class="{ 'bg-bg-selection': isSelected(option), 'opacity-50 pointer-events-none': option.disabled }"
             @click="selectOption(option)"
           >
             <!-- Option Icon -->
@@ -81,7 +81,7 @@
           </div>
           <div
             v-if="options.length === 0"
-            class="p-2 text-gray-500"
+            class="p-2 text-text-tertiary"
           >
             {{ props.emptyPlaceholder }}
           </div>
diff --git a/components/Input.vue b/components/Input.vue
index cd5d08b8..1a61e592 100644
--- a/components/Input.vue
+++ b/components/Input.vue
@@ -7,16 +7,20 @@
       :type="type"
       :placeholder="placeholder"
       :class="classNames(
-        'relative focus:shadow-[0px_0px_0px_1px_#24B960] rounded-[6px] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)] p-2 outline-none w-full',
+        'relative rounded-[6px] shadow-02 p-2 outline-none w-full focus:shadow-[0px_0px_0px_1px_var(--color-border-accent)] bg-bg-component',
         props.class,
         props.disabled ? 'opacity-50' : '',
-        props.error ? 'shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48] focus:shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48]' : '',
-        isOverLimit ? 'shadow-[0px_0px_0px_1px_#E53232] focus:shadow-[0px_0px_0px_1px_#E53232]' : '',
+        props.error
+          ? 'shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)] focus:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
+          : '',
+        isOverLimit
+          ? 'shadow-[0px_0px_0px_1px_var(--color-border-warning)] focus:shadow-[0px_0px_0px_1px_var(--color-border-warning)]'
+          : '',
       )"
     >
     <div
       v-if="isOverLimit"
-      class="mt-2 text-xs leading-4 text-[#E53232] self-start"
+      class="mt-2 text-xs leading-4 text-[var(--color-border-warning)] self-start"
     >
       {{ $t('errors.max_characters_error', { count: maxlength }) }}
     </div>
diff --git a/components/Loading.vue b/components/Loading.vue
index e093241b..b8e10478 100644
--- a/components/Loading.vue
+++ b/components/Loading.vue
@@ -16,7 +16,7 @@
     class="shrink-0 grow-0"
   >
     <IconLoadingDone
-      class="text-[#60C959]"
+      class="text-accent-success"
       :style="{ width: size + 'px', height: size + 'px' }"
     />
   </div>
@@ -56,13 +56,13 @@ div.spinner div {
   --rotate: calc(360deg / 8 * -1);
   width: 10%;
   height: 26%;
-  background: var(--bar-color, #222);
+  background: var(--bar-color, var(--color-loading-track));
   position: absolute;
   left: 48%;
   top: 36%;
   opacity: 0;
   border-radius: 50px;
-  box-shadow: 0 0 1px rgba(0,0,0,0.2);
+  box-shadow: 0 0 1px var(--color-shadow-ambient);
   animation: fade var(--duration) linear infinite;
 }
 
diff --git a/components/Logo.vue b/components/Logo.vue
index f53cd090..10e1ae8f 100644
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-1 text-[#1F2326]">
+  <div class="flex items-center gap-1 text-text-primary">
     <svg
       width="513"
       height="513"
diff --git a/components/MarkdownViewer.vue b/components/MarkdownViewer.vue
index 8f676205..05f8a033 100644
--- a/components/MarkdownViewer.vue
+++ b/components/MarkdownViewer.vue
@@ -50,7 +50,7 @@ const inlineDirective: DirectiveConfig = {
       const url = token.attrs?.url
       const icon = token.attrs?.icon
       const iconHtml = icon ? `<span class="inline-block mr-1" style="vertical-align: -3px;">${IconMDLink}</span>` : ''
-      return `<a target="_blank" href="${url}" title="${text}" rel="noopener" class="text-blue-600 hover:text-blue-500">${iconHtml}${text}</a>`
+      return `<a target="_blank" href="${url}" title="${text}" rel="noopener" class="text-icon-link hover:text-[var(--color-text-link-hover)]">${iconHtml}${text}</a>`
     }
     else if (token.meta.name === 'icon') {
       const iconName = token.text as IconName
@@ -173,7 +173,7 @@ renderer.link = ({ href, title, text }) => {
   anchor.textContent = text
   anchor.target = '_blank'
   anchor.rel = 'noopener noreferrer'
-  anchor.className = 'text-black hover:text-gray-700 underline'
+  anchor.className = 'text-icon-link hover:text-[var(--color-text-link-hover)] underline'
   return anchor.outerHTML
 }
 
@@ -246,7 +246,7 @@ watch(() => props.text, async () => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #e4e4e7;
+      background: var(--color-scroll-thumb);
       border-radius: 3px;
     }
   }
@@ -259,8 +259,8 @@ watch(() => props.text, async () => {
     font-weight: 600;
   }
   pre {
-    color: var(--color-gray-300);
-    background-color: black;
+    color: var(--color-text-tertiary);
+    background-color: var(--color-bg-overlay-contrast);
     margin-bottom: 8px;
     margin-top: 8px;
     padding: 8px;
@@ -296,7 +296,7 @@ watch(() => props.text, async () => {
   }
   hr {
     margin: 8px 0;
-    border-color: #a7a7a7;
+    border-color: var(--color-border-strong);
   }
   strong {
     font-weight: 600;
@@ -336,7 +336,7 @@ watch(() => props.text, async () => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #9e9e9e;
+      background: var(--color-scroll-thumb);
       border-radius: 5px;
     }
 
@@ -350,7 +350,7 @@ watch(() => props.text, async () => {
   table {
     td {
       padding: 4px;
-      border: 1px solid var(--color-gray-300);
+      border: 1px solid var(--color-border-strong);
     }
   }
 }
diff --git a/components/Modal.vue b/components/Modal.vue
index 1c159abb..a49276da 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -14,7 +14,7 @@
         <div
           v-if="!noMask"
           class="mask absolute inset-0"
-          :class="classNames('bg-[#0000008b]', maskClass, fadeInOpacityAnimation)"
+          :class="classNames('bg-[var(--color-overlay-scrim)]', maskClass, fadeInOpacityAnimation)"
         />
       </slot>
       <div
diff --git a/components/ModelLogo.vue b/components/ModelLogo.vue
index 7ea2d34e..96147405 100644
--- a/components/ModelLogo.vue
+++ b/components/ModelLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('flex items-center justify-center w-4 h-4 rounded-full border border-[#0000000D] bg-white', props.class)">
+  <div :class="classNames('flex items-center justify-center w-4 h-4 rounded-full border border-[var(--color-border-hairline)] bg-white', props.class)">
     <component
       :is="iconComponent"
       class="max-w-3/4 max-h-3/4 w-3/4"
diff --git a/components/ModelSelector.vue b/components/ModelSelector.vue
index 9af8bde6..57098497 100644
--- a/components/ModelSelector.vue
+++ b/components/ModelSelector.vue
@@ -25,7 +25,7 @@
       :placeholder="t('settings.models.no_model')"
       class="text-xs max-w-full"
       :disabled="modelList.length === 0"
-      :dropdownClass="classNames('text-xs text-black w-52', dropdownClass)"
+      :dropdownClass="classNames('text-xs text-text-primary w-52', dropdownClass)"
       :containerClass="classNames('max-w-full', containerClass)"
       :dropdownAlign="dropdownAlign"
       :triggerStyle="props.triggerStyle"
@@ -53,7 +53,7 @@
         </div>
         <div v-else>
           <div
-            class="cursor-pointer text-[13px] text-[#5B5B5B] font-medium px-1 leading-5 flex flex-row gap-1 items-center justify-center"
+            class="cursor-pointer text-[13px] text-text-secondary font-medium px-1 leading-5 flex flex-row gap-1 items-center justify-center"
           >
             <div v-if="modelListUpdating">
               <Loading :size="12" />
@@ -100,13 +100,13 @@
         v-if="showDiscoverMore"
         #bottom
       >
-        <div class="text-gray-500 text-xs">
+        <div class="text-text-tertiary text-xs">
           <Divider />
           <a
             :href="OLLAMA_SEARCH_URL"
             target="_blank"
             rel="noopener noreferrer"
-            class="px-3 flex items-center gap-2 cursor-pointer text-black hover:bg-[#EAECEF] leading-4 py-1 min-h-8"
+            class="px-3 flex items-center gap-2 cursor-pointer text-text-primary hover:bg-bg-hover leading-4 py-1 min-h-8"
           >
             <IconRedirect class="shrink-0" />
             <Text
diff --git a/components/ProgressBar.vue b/components/ProgressBar.vue
index c702ad08..80fe5d8c 100644
--- a/components/ProgressBar.vue
+++ b/components/ProgressBar.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full h-2 bg-gray-200 rounded-md">
+  <div class="w-full h-2 bg-border-light rounded-md">
     <div
-      class="h-full bg-[#24B960] rounded-md transition-all"
+      class="h-full bg-accent-primary rounded-md transition-all"
       :style="{ width: `${(progress) * 100}%` }"
     />
   </div>
diff --git a/components/RadioGroup.vue b/components/RadioGroup.vue
index a86268b0..f97af031 100644
--- a/components/RadioGroup.vue
+++ b/components/RadioGroup.vue
@@ -10,13 +10,13 @@
         <div
           class="h-[15px] w-[15px] rounded-full cursor-pointer grow-0 shrink-0 flex items-center justify-center mt-0.5"
           :class="classNames({
-            'bg-[#24B960] shadow-[0px_1px_2px_0px_#0E6B33,0px_0px_0px_1px_#24B960]': selectedValue === option.value,
-            'bg-bg-component shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]': selectedValue !== option.value,
+            'bg-accent-primary shadow-[0px_1px_2px_0px_var(--color-accent-primary-shadow),0px_0px_0px_1px_var(--color-accent-primary)]': selectedValue === option.value,
+            'bg-bg-component shadow-[0px_0px_0px_1px_var(--color-shadow-medium),0px_1px_2px_0px_var(--color-shadow-strong)]': selectedValue !== option.value,
           }, props.class)"
         >
           <div
             v-if="selectedValue === option.value"
-            class="h-[6px] w-[6px] rounded-full bg-white"
+            class="h-[6px] w-[6px] rounded-full bg-bg-primary"
           />
         </div>
         <div class="flex flex-col">
diff --git a/components/RootProvider.vue b/components/RootProvider.vue
index a7fe2dd2..9d1689b9 100644
--- a/components/RootProvider.vue
+++ b/components/RootProvider.vue
@@ -3,12 +3,21 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+
 import { useInjectContext } from '@/composables/useInjectContext'
+import { useTheme } from '@/utils/theme'
 
 const props = defineProps<{
   rootElement: HTMLElement
 }>()
 
+const { initializeTheme } = useTheme()
+
 useInjectContext('selectorScrollListenElement').provide([props.rootElement])
 useInjectContext('rootElement').provide(props.rootElement)
+
+onMounted(async () => {
+  await initializeTheme()
+})
 </script>
diff --git a/components/ScrollContainer.vue b/components/ScrollContainer.vue
index b2ff7651..66f3a160 100644
--- a/components/ScrollContainer.vue
+++ b/components/ScrollContainer.vue
@@ -60,7 +60,7 @@ type ArrivalShadowInfo = Color | boolean | {
 }
 
 const DEFAULT_SHADOW_SIZE = 16
-const DEFAULT_ARRIVAL_SHADOW_COLOR = '#92929225'
+const DEFAULT_ARRIVAL_SHADOW_COLOR = 'var(--color-arrival-shadow)'
 
 const props = withDefaults(
   defineProps<{
diff --git a/components/ScrollTarget.vue b/components/ScrollTarget.vue
index 9dfe254a..2e9debdd 100644
--- a/components/ScrollTarget.vue
+++ b/components/ScrollTarget.vue
@@ -2,7 +2,7 @@
   <div
     ref="targetRef"
     :class="{
-      'outline-2 outline-gray-600 outline-offset-4 outline-dashed rounded-md': highlighting,
+      'outline-2 outline-[color:var(--color-border-strong)] outline-offset-4 outline-dashed rounded-md': highlighting,
     }"
   >
     <slot />
diff --git a/components/Selector.vue b/components/Selector.vue
index 84d57289..5625a8f4 100644
--- a/components/Selector.vue
+++ b/components/Selector.vue
@@ -86,7 +86,7 @@
         v-if="isOpen"
         ref="dropdownRef"
         data-nativemind-selector-dropdown
-        class="fixed overflow-hidden z-10 bg-bg-component rounded-lg shadow-01"
+        class="fixed overflow-hidden z-10 bg-bg-primary rounded-lg shadow-01"
         :style="{ top: `${dropdownPos.y}px`, left: `${dropdownPos.x}px`, width: dropdownPos.width ? `${dropdownPos.width}px` : undefined, zIndex: String(zIndex) }"
         :class="dropdownClass"
       >
@@ -100,8 +100,8 @@
           <div
             v-for="(option, index) in options"
             :key="index"
-            class="p-2 transition-colors flex items-center rounded-sm"
-            :class="{ 'bg-[#DFE1E5]': isSelected(option), 'opacity-50 pointer-events-none': option.disabled, 'hover:bg-[#EAECEF] cursor-pointer': option.selectable !== false }"
+            class="p-2 cursor-pointer transition-colors flex items-center rounded-sm"
+            :class="{ 'bg-bg-selection': isSelected(option), 'opacity-50 pointer-events-none': option.disabled,'hover:bg-bg-hover cursor-pointer': option.selectable !== false }"
             @click="option.selectable !== false && selectOption(option)"
           >
             <slot
@@ -113,7 +113,7 @@
           </div>
           <div
             v-if="options.length === 0"
-            class="p-2 text-gray-500"
+            class="p-2 text-text-tertiary"
           >
             {{ props.emptyPlaceholder }}
           </div>
diff --git a/components/StatusBadge.vue b/components/StatusBadge.vue
index 562dc2e0..52310f87 100644
--- a/components/StatusBadge.vue
+++ b/components/StatusBadge.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex items-center">
-    <div class="bg-[#FAFAFA] flex gap-[5px] border border-[#E4E4E7] h-5 items-center px-[6px] rounded-md">
+    <div class="bg-bg-tertiary flex gap-[5px] border border-border-strong h-5 items-center px-[6px] rounded-md">
       <div
         class="w-2 h-2 rounded-xs border"
         :class="{
-          'bg-[#10B981] border-[#18181B3D]': status === 'success',
-          'bg-yellow-500 border-[#18181B3D]': status === 'warning',
-          'bg-red-500 border-[#18181B3D]': status === 'error',
+          'bg-accent-success border-[var(--color-border-overlay)]': status === 'success',
+          'bg-[var(--color-text-warning)] border-[var(--color-border-overlay)]': status === 'warning',
+          'bg-[var(--color-danger)] border-[var(--color-border-overlay)]': status === 'error',
         }"
       />
       <Text
diff --git a/components/Textarea.vue b/components/Textarea.vue
index f50b299a..0174b2f5 100644
--- a/components/Textarea.vue
+++ b/components/Textarea.vue
@@ -1,8 +1,10 @@
 <template>
   <div
     :class="classNames(
-      'overflow-hidden relative focus-within:shadow-[0px_0px_0px_1px_#24B960] rounded-[6px] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)]',
-      props.error ? 'shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48] focus-within:shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48]' : '',
+      'overflow-hidden relative rounded-[6px] shadow-02 focus-within:shadow-[0px_0px_0px_1px_var(--color-border-accent)] bg-bg-component',
+      props.error
+        ? 'shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)] focus-within:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
+        : '',
       props.outerClass,
     )"
   >
@@ -11,16 +13,16 @@
       v-model="inputValue"
       :maxlength="maxLength"
       :style="{ height: textareaHeight + 'px' }"
-      class="w-full text-xs leading-4 px-2 pt-1.5 pb-[28px] text-[#6E757C] focus:text-black resize-none"
+      class="w-full text-xs leading-4 px-2 pt-1.5 pb-[28px] text-text-tertiary focus:text-text-primary resize-none"
       :class="classNames('outline-none', props.class)"
     />
 
     <!-- Bottom controls -->
-    <div class="absolute bottom-0 left-0 right-0 px-2 py-1.5 flex items-center justify-end gap-1.5 bg-white">
+    <div class="absolute bottom-0 left-0 right-0 px-2 py-1.5 flex items-center justify-end gap-1.5">
       <!-- Reset to default button -->
       <button
         v-if="showResetButton"
-        class="text-[11px] leading-[16px] text-[#0D80F2] hover:text-[#0B6BBF] font-normal cursor-pointer flex items-center gap-1"
+        class="text-[11px] leading-[16px] text-icon-link hover:text-[var(--color-text-link-hover)] font-normal cursor-pointer flex items-center gap-1"
         @click="resetToDefault"
       >
         {{ t('textarea.reset_to_default') }}
diff --git a/components/ThemeSelector.vue b/components/ThemeSelector.vue
new file mode 100644
index 00000000..fb18e2d0
--- /dev/null
+++ b/components/ThemeSelector.vue
@@ -0,0 +1,29 @@
+<template>
+  <Selector
+    v-model="themeMode"
+    class="grow"
+    containerClass="w-full"
+    dropdownClass="text-xs text-text-primary w-52"
+    dropdownAlign="left"
+    :options="options"
+  />
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+
+import { useI18n } from '@/utils/i18n/index'
+import { useTheme } from '@/utils/theme'
+
+import Selector from './Selector.vue'
+
+const { t } = useI18n()
+const { themeMode } = useTheme()
+
+const options = computed(() => [
+  { id: 'light' as const, label: t('settings.interface.theme_light') },
+  { id: 'dark' as const, label: t('settings.interface.theme_dark') },
+  { id: 'system' as const, label: t('settings.interface.theme_system') },
+])
+</script>
diff --git a/components/ToastGroup.vue b/components/ToastGroup.vue
index 59b02ab8..a7bd9b30 100644
--- a/components/ToastGroup.vue
+++ b/components/ToastGroup.vue
@@ -7,14 +7,15 @@
     <div
       v-for="toast in toasts"
       :key="toast.id"
-      class="max-w-80 bg-white text-black shadow-md rounded-md p-3 transition-all duration-300 text-xs flex items-center gap-2 justify-between"
+      class="max-w-80 bg-bg-primary text-text-primary shadow-02 rounded-md p-3 transition-all duration-300 text-xs flex items-center gap-2 justify-between font-sans"
     >
       <div class="flex items-center gap-2">
         <div>
           <IconWarning
             v-if="toast.options.type === 'error'"
-            class="w-4 h-4 text-red-500"
+            class="w-4 h-4 text-text-critical"
           />
+          <Logo v-else />
         </div>
         <span v-if="!toast.options.isHTML">{{ toast.message }}</span>
         <div
@@ -26,7 +27,7 @@
         class="cursor-pointer"
         @click="toasts = toasts.filter(t => t.id !== toast.id)"
       >
-        <IconClose class="w-5 h-5 rounded-full hover:bg-gray-100 p-1 text-gray-700" />
+        <IconClose class="w-5 h-5 rounded-full hover:bg-bg-hover p-1 text-text-secondary" />
       </button>
     </div>
   </div>
@@ -38,6 +39,8 @@ import { ref } from 'vue'
 import IconClose from '@/assets/icons/close.svg?component'
 import IconWarning from '@/assets/icons/warning.svg?component'
 
+import Logo from './Logo.vue'
+
 export type ToastOptions = {
   duration?: number
   isHTML?: boolean
diff --git a/components/UILanguageSelector.vue b/components/UILanguageSelector.vue
index c42e9a00..8a541691 100644
--- a/components/UILanguageSelector.vue
+++ b/components/UILanguageSelector.vue
@@ -3,7 +3,7 @@
     v-model="locale"
     class="grow"
     containerClass="w-full"
-    dropdownClass="text-xs text-black w-52"
+    dropdownClass="text-xs text-text-primary w-52"
     dropdownAlign="left"
     :options="options"
   />
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index b9914438..5fdb513c 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -29,13 +29,19 @@ const emit = defineEmits<{
 }>()
 
 const classMapping = {
-  primary: classNames('bg-[#24B960] text-white shadow-[0px_0px_0px_1px_#24B960,0px_1px_2px_0px_#00000066,0px_0.75px_0px_0px_#FFFFFF33_inset]', props.hoverStyle ? 'hover:bg-[#089641]' : ''),
-  secondary: classNames('bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)]', props.hoverStyle ? 'hover:bg-[#EAECEF]' : ''),
+  primary: classNames(
+    'bg-accent-primary text-white shadow-[0px_0px_0px_1px_var(--color-accent-primary),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset]',
+    props.hoverStyle ? 'hover:bg-accent-primary-hover' : '',
+  ),
+  secondary: classNames(
+    'bg-bg-clickable text-text-primary shadow-02',
+    props.hoverStyle ? 'hover:bg-bg-hover' : '',
+  ),
 }
 
 const disableClassMapping = {
-  primary: `shadow-[0px_0px_0px_1px_#A0A0A0,0px_1px_2px_0px_#00000066,0px_0.75px_0px_0px_#FFFFFF33_inset] pointer-event-none bg-[#8A8A8A] text-text-disabled`,
-  secondary: `shadow-[0px_0px_0px_1px_#A0A0A0,0px_1px_2px_0px_#00000066,0px_0.75px_0px_0px_#FFFFFF33_inset] pointer-event-none bg-[#CFD4D9] text-text-disabled`,
+  primary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-[var(--color-accent-primary-disabled)] text-text-disabled`,
+  secondary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-[var(--color-surface-disabled)] text-text-disabled`,
 }
 
 const buttonClass = computed(() => `rounded-md cursor-pointer ${classMapping[props.variant]} ${props.disabled ? disableClassMapping[props.variant] : ''}`)
diff --git a/components/ui/Divider.vue b/components/ui/Divider.vue
index e8922073..87bd8d6d 100644
--- a/components/ui/Divider.vue
+++ b/components/ui/Divider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('w-full h-px bg-[#0000001A]', props.class)" />
+  <div :class="classNames('w-full h-px bg-[var(--color-divider)]', props.class)" />
 </template>
 
 <script setup lang="ts">
diff --git a/components/ui/Text.vue b/components/ui/Text.vue
index 56704f02..1a34add7 100644
--- a/components/ui/Text.vue
+++ b/components/ui/Text.vue
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<{
 const colorMapping: Record<Color, string> = {
   primary: 'text-text-primary',
   secondary: 'text-text-secondary',
-  disabled: 'text-[#AEB5BD]',
+  disabled: 'text-text-disabled',
   tertiary: 'text-text-tertiary',
   placeholder: 'text-text-placeholder',
 }
diff --git a/components/ui/Tooltip.vue b/components/ui/Tooltip.vue
index e0c8ffa3..18ff7e7e 100644
--- a/components/ui/Tooltip.vue
+++ b/components/ui/Tooltip.vue
@@ -27,7 +27,7 @@
         role="tooltip"
         :aria-hidden="!isVisible"
         :class="classNames(
-          'absolute z-50 rounded-[8px] border border-black/5 bg-white px-3 py-2 text-xs leading-[14px] text-balance text-black shadow-[0_0_2px_0_rgba(0,0,0,0.08),0_2px_16px_0_rgba(0,0,0,0.08)] whitespace-nowrap',
+          'absolute z-50 rounded-[8px] border border-[color:var(--color-border-hairline)] bg-bg-primary px-3 py-2 text-xs leading-[14px] text-balance text-text-primary shadow-[0_0_2px_0_var(--color-shadow-medium),0_2px_16px_0_var(--color-shadow-medium)] whitespace-nowrap',
           props.class
         )"
         :style="{
@@ -41,11 +41,13 @@
         <template v-if="props.showArrow">
           <div
             v-if="actualPosition === 'top'"
-            class="absolute left-1/2 -translate-x-1/2 bottom-[-4px] w-2 h-2 rotate-45 border-l border-b border-black/5 bg-white"
+            class="absolute left-1/2 -translate-x-1/2 bottom-[-4px] w-2 h-2 rotate-45 border-l border-b bg-bg-primary"
+            style="border-color: var(--color-border-hairline)"
           />
           <div
             v-else-if="actualPosition === 'bottom'"
-            class="absolute left-1/2 -translate-x-1/2 top-[-4px] w-2 h-2 rotate-45 border-l border-t border-black/5 bg-white"
+            class="absolute left-1/2 -translate-x-1/2 top-[-4px] w-2 h-2 rotate-45 border-l border-t bg-bg-primary"
+            style="border-color: var(--color-border-hairline)"
           />
         </template>
       </div>
diff --git a/components/web-components/reading-task.ts b/components/web-components/reading-task.ts
index 65759f6a..e4112d27 100644
--- a/components/web-components/reading-task.ts
+++ b/components/web-components/reading-task.ts
@@ -30,7 +30,7 @@ export function register() {
       }
 
       .task-action{
-        color: #596066;
+        color: var(--color-text-secondary, #596066);
         white-space: nowrap;
       }
 
@@ -39,7 +39,7 @@ export function register() {
         flex-direction: row;
         align-items: center;
         padding: 2px 6px;
-        background: white;
+        background: var(--color-bg-clickable, #ffffff);
         border-radius: 4px;
         flex: 1;
         overflow: hidden;
@@ -51,13 +51,13 @@ export function register() {
         flex-direction: row;
         align-items: center;
         padding: 2px 6px;
-        background: white;
+        background: var(--color-bg-primary, #ffffff);
         border-radius: 4px;
         flex: 1;
         overflow: hidden;
         gap: 4px;
         cursor: pointer;
-        color: #24B960;
+        color: var(--color-accent-primary, #24B960);
         text-decoration: none;
         white-space: nowrap;
       }
@@ -121,7 +121,7 @@ export function register() {
         const partB = this.content.slice(-12)
 
         return html`
-        <div class="task-root" style="color: #9EA3A8;">
+        <div class="task-root" style="color: var(--color-text-quaternary, #9EA3A8);">
           <div class="task-action">
             <slot></slot>
           </div>
@@ -138,7 +138,7 @@ export function register() {
 
       if (this.type === 'tab' && this.content) {
         return html`
-          <div class="task-root" style="color: #9EA3A8;">
+          <div class="task-root" style="color: var(--color-text-quaternary, #9EA3A8);">
             <div class="task-action">
               <slot></slot>
             </div>
@@ -153,7 +153,7 @@ export function register() {
 
       if (this.type === 'page') {
         return html`
-          <div class="task-root" style="color: #24B960;">
+          <div class="task-root" style="color: var(--color-accent-primary, #24B960);">
             <div class="task-action">
               <slot></slot>
             </div>
@@ -169,7 +169,7 @@ export function register() {
       }
 
       return html`
-        <div class="task-root" style="color: #596066;">
+        <div class="task-root" style="color: var(--color-text-secondary, #596066);">
           <div class="task-action">
             <slot></slot>
           </div>
diff --git a/composables/useConfirm.tsx b/composables/useConfirm.tsx
index fafa73e5..eedf7f89 100644
--- a/composables/useConfirm.tsx
+++ b/composables/useConfirm.tsx
@@ -65,15 +65,15 @@ export const initConfirmModal: (rootEl: HTMLElement) => Plugin = (rootEl) => {
             modelValue
             closeByMask
             noCloseButton
-            maskClass="bg-[#00000017]"
+            maskClass="bg-[var(--color-overlay-muted)]"
             onClose={cancel}
           >
             <div class="p-1">
-              <div class="p-8 bg-white rounded-2xl flex flex-col gap-8 w-[520px] max-w-full shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014]">
+              <div class="p-8 bg-bg-primary rounded-2xl flex flex-col gap-8 w-[520px] max-w-full shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]">
                 <div class="absolute right-4 top-4" onClick={cancel}>
-                  <IconClose class="text-[#9EA3A8] w-5 h-5" />
+                  <IconClose class="text-text-quaternary w-5 h-5" />
                 </div>
-                <div class="text-sm">{message}</div>
+                <div class="text-sm text-text-primary">{message}</div>
                 <div class="flex justify-end gap-2 flex-wrap">
                   <Button
                     disabled={loading.value}
diff --git a/entrypoints/content/components/GmailTools/GmailComposeCard.vue b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
index 0cd73738..a82546b7 100644
--- a/entrypoints/content/components/GmailTools/GmailComposeCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
@@ -1,30 +1,30 @@
 <template>
   <div>
-    <div class="card min-w-80 max-w-110 text-xs">
+    <div class="card min-w-80 max-w-110 text-xs bg-bg-component text-text-primary rounded-md shadow-01 border border-border-light">
       <div class="title flex items-center justify-between h-9 px-3">
         <div class="flex items-center gap-1 text-xs font-medium leading-4">
           <SettingsEmailIcon />
           {{ t('gmail_tools.cards.compose.title') }}
         </div>
         <button
-          class="text-[#71717A] cursor-pointer p-1 hover:bg-gray-100 rounded"
+          class="text-text-tertiary cursor-pointer p-1 hover:bg-bg-hover rounded"
           @click="emit('close')"
         >
           <IconClose
-            class="text-[#71717A] cursor-pointer"
+            class="text-text-tertiary cursor-pointer"
           />
         </button>
       </div>
       <Divider />
 
       <!-- Subject Section -->
-      <div class="subject-section p-3 border-b border-gray-100">
-        <div class="bg-[#E8F4FD] rounded-sm p-2 flex gap-2">
+      <div class="subject-section p-3 border-b border-border-light">
+        <div class="bg-bg-info-subtle rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus !== 'pending' && runningStatus !== 'streaming'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -46,17 +46,17 @@
               v-else
               class="relative"
             >
-              <div class="text-[#1565C0] text-sm mr-10">
+              <div class="text-text-info text-sm mr-10">
                 {{ optimizedSubject }}
               </div>
               <!-- Copy Button for Subject -->
               <button
                 v-if="optimizedSubject.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-white/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-[color:var(--color-bg-primary)]/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.compose.copy_subject_to_clipboard')"
                 @click="copySubjectToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-[#1565C0]" />
+                <CopyIcon class="w-4 h-4 text-text-info" />
               </button>
             </div>
           </div>
@@ -65,12 +65,12 @@
 
       <!-- Email Body Section -->
       <div class="body-section p-3">
-        <div class="bg-[#DCFFEA] rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-success-subtle rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus !== 'pending' && runningStatus !== 'streaming'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -93,17 +93,17 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-[#03943D] mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
+                class="text-text-success-strong mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
                 :text="optimizedBody"
               />
               <!-- Copy Button for Body -->
               <button
                 v-if="optimizedBody.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-white/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-[color:var(--color-bg-primary)]/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.compose.copy_body_to_clipboard')"
                 @click="copyBodyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-[#03943D]" />
+                <CopyIcon class="w-4 h-4 text-text-success-strong" />
               </button>
             </div>
           </div>
diff --git a/entrypoints/content/components/GmailTools/GmailReplyCard.vue b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
index b1c35f95..3126b9bb 100644
--- a/entrypoints/content/components/GmailTools/GmailReplyCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
@@ -1,28 +1,28 @@
 <template>
   <div>
-    <div class="card min-w-80 max-w-110 text-xs">
+    <div class="card min-w-80 max-w-110 text-xs bg-bg-component text-text-primary rounded-md shadow-01 border border-border-light">
       <div class="title flex items-center justify-between h-9 px-3">
         <div class="flex items-center gap-1 text-xs font-medium leading-4">
           <ReplySuggestionIcon />
           {{ t('gmail_tools.cards.reply.title') }}
         </div>
         <button
-          class="text-[#71717A] cursor-pointer p-1 hover:bg-gray-100 rounded"
+          class="text-text-tertiary cursor-pointer p-1 hover:bg-bg-hover rounded"
           @click="emit('close')"
         >
           <IconClose
-            class="text-[#71717A] cursor-pointer"
+            class="text-text-tertiary cursor-pointer"
           />
         </button>
       </div>
       <Divider />
       <div class="output p-3 rounded-md">
-        <div class="bg-[#DCFFEA] rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-success-subtle rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus === 'idle'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -36,17 +36,17 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-[#03943D] mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
+                class="text-text-success-strong mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
                 :text="output"
               />
               <!-- Copy Button -->
               <button
                 v-if="output.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-white/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-[color:var(--color-bg-primary)]/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.reply.copy_to_clipboard')"
                 @click="copyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-[#03943D]" />
+                <CopyIcon class="w-4 h-4 text-text-success-strong" />
               </button>
             </div>
           </div>
diff --git a/entrypoints/content/components/GmailTools/index.vue b/entrypoints/content/components/GmailTools/index.vue
index c702fd65..c61f653f 100644
--- a/entrypoints/content/components/GmailTools/index.vue
+++ b/entrypoints/content/components/GmailTools/index.vue
@@ -9,11 +9,14 @@
         class="nativemind-gmail-tools nativemind-style-boundary"
         :style="{'all': 'initial', position: 'fixed', top: '0', left: '0', width: '0px', height: '0px'}"
       >
-        <div class="container bg-white text-black font-inter">
+        <div
+          class="container bg-bg-primary text-text-primary font-inter"
+          :class="{ 'dark': currentTheme === 'dark' }"
+        >
           <div
             v-if="showReplyCard"
             ref="popupRef"
-            class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+            class="popup bg-bg-primary fixed rounded-md z-50 shadow-[0px_8px_16px_0px_var(--color-shadow-medium),0px_4px_8px_0px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]"
             :class="!popupPos ? 'opacity-0' : ''"
             :style="popupPos ? { top: popupPos.top + 'px', left: popupPos.left + 'px' } : {}"
           >
@@ -26,7 +29,7 @@
           <div
             v-if="showComposeCard"
             ref="composePopupRef"
-            class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+            class="popup bg-bg-primary fixed rounded-md z-50 shadow-[0px_8px_16px_0px_var(--color-shadow-medium),0px_4px_8px_0px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]"
             :class="!composePopupPos ? 'opacity-0' : ''"
             :style="composePopupPos ? { top: composePopupPos.top + 'px', left: composePopupPos.left + 'px' } : {}"
           >
@@ -50,6 +53,7 @@ import { ShadowRoot as ShadowRootComponent } from 'vue-shadow-dom'
 import { useDraggable } from '@/composables/useDraggable'
 import { useLogger } from '@/composables/useLogger'
 import { injectStyleSheetToDocument, loadContentScriptStyleSheet } from '@/utils/css'
+import { useTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useRootElement } from '../../composables/useRootElement'
@@ -61,6 +65,10 @@ const rootElement = useRootElement()
 const styleSheet = shallowRef<CSSStyleSheet | null>(null)
 const shadowRootRef = ref<InstanceType<typeof ShadowRoot>>()
 const containerRef = ref<HTMLDivElement>()
+
+// Initialize theme
+const { initializeTheme, currentTheme } = useTheme()
+initializeTheme()
 const popupRef = ref<HTMLDivElement | null>(null)
 const composePopupRef = ref<HTMLDivElement | null>(null)
 const clickedReplyButtonRef = ref<HTMLElement | null>(null) // for navigating current polish button and finding its parent compose dialog
diff --git a/entrypoints/content/components/WritingTools/EditableEntry.vue b/entrypoints/content/components/WritingTools/EditableEntry.vue
index 571ab0ae..9f01b377 100644
--- a/entrypoints/content/components/WritingTools/EditableEntry.vue
+++ b/entrypoints/content/components/WritingTools/EditableEntry.vue
@@ -6,7 +6,7 @@
     <Button
       v-if="isShowToolBarDeferred"
       variant="secondary"
-      class="toolbar bg-white fixed rounded-md overflow-hidden text-xs transition-[width,top,left]"
+      class="toolbar bg-bg-primary fixed rounded-md overflow-hidden text-xs transition-[width,top,left]"
       :style="toolBarPos ? { top: toolBarPos.top + 'px', left: toolBarPos.left + 'px' } : {}"
       @mouseenter="onMouseEnterToolBar"
     >
@@ -17,7 +17,7 @@
         <Text size="small">
           <button
             v-if="props.tools.includes('rewrite')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('rewrite')"
           >
@@ -26,7 +26,7 @@
           </button>
           <button
             v-if="props.tools.includes('proofread')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('proofread')"
           >
@@ -35,7 +35,7 @@
           </button>
           <button
             v-if="props.tools.includes('list')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('list')"
           >
@@ -44,7 +44,7 @@
           </button>
           <button
             v-if="props.tools.includes('sparkle')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('sparkle')"
           >
@@ -52,7 +52,7 @@
             {{ t('writing_tools.sparkle') }}
           </button>
           <!-- <button
-            class="mr-1 text-gray-700 bg-gray-50 hover:bg-gray-100 border-0 cursor-pointer p-1 rounded-full"
+            class="mr-1 text-text-secondary bg-bg-neutral-subtle hover:bg-bg-hover border-0 cursor-pointer p-1 rounded-full"
             @click="onCloseToolBar"
           >
             <IconClose class="w-3 h-3" />
@@ -63,7 +63,7 @@
     <div
       v-if="writingToolType"
       ref="popupRef"
-      class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+      class="popup bg-bg-primary fixed rounded-md z-50 shadow-[0px_8px_16px_0px_var(--color-shadow-medium),0px_4px_8px_0px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]"
       :class="!popupPos ? 'opacity-0' : ''"
       :style="popupPos ? { top: popupPos.top + 'px', left: popupPos.left + 'px' } : {}"
     >
diff --git a/entrypoints/content/components/WritingTools/SuggestionCard.vue b/entrypoints/content/components/WritingTools/SuggestionCard.vue
index 71fb7551..b832ecd4 100644
--- a/entrypoints/content/components/WritingTools/SuggestionCard.vue
+++ b/entrypoints/content/components/WritingTools/SuggestionCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="card w-80 max-w-screen text-xs">
+    <div class="card w-80 max-w-screen text-xs bg-bg-component text-text-primary rounded-md shadow-01 border border-border-light">
       <div class="title flex items-center justify-between h-9 px-3">
         <Text
           size="small"
@@ -38,18 +38,18 @@
           <ExhaustiveError v-else />
         </Text>
         <IconClose
-          class="text-[#71717A] cursor-pointer"
+          class="text-text-tertiary cursor-pointer"
           @click="emit('close')"
         />
       </div>
       <Divider />
       <div class="output p-3 rounded-md">
-        <div class="bg-[#DCFFEA] rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-success-subtle rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus === 'idle'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -63,7 +63,7 @@
               class="max-h-[min(90vh,500px)] overflow-y-auto"
             >
               <MarkdownViewer
-                class="text-[#03943D]"
+                class="text-text-success-strong"
                 :text="output"
               />
             </div>
diff --git a/entrypoints/content/components/WritingTools/index.vue b/entrypoints/content/components/WritingTools/index.vue
index 86a588bd..fac61822 100644
--- a/entrypoints/content/components/WritingTools/index.vue
+++ b/entrypoints/content/components/WritingTools/index.vue
@@ -9,7 +9,10 @@
         class="nativemind-writing-tools nativemind-style-boundary"
         :style="{'all': 'initial', position: 'fixed', top: '0', left: '0', width: '0px', height: '0px'}"
       >
-        <div class="container bg-white text-black font-inter">
+        <div
+          class="container bg-bg-primary text-text-primary font-inter"
+          :class="{ 'dark': currentTheme === 'dark' }"
+        >
           <EditableEntry
             v-for="(el, idx) in elements"
             :key="idx"
@@ -30,6 +33,7 @@ import { useLogger } from '@/composables/useLogger'
 import { useFocusedElements } from '@/composables/useObserverElements'
 import { injectStyleSheetToDocument, loadContentScriptStyleSheet } from '@/utils/css'
 import { isContentEditableElement, isEditorFrameworkElement, shouldExcludeEditableElement } from '@/utils/selection'
+import { useTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useRootElement } from '../../composables/useRootElement'
@@ -41,6 +45,10 @@ const rootElement = useRootElement()
 const styleSheet = shallowRef<CSSStyleSheet | null>(null)
 const shadowRootRef = ref<InstanceType<typeof ShadowRoot>>()
 const userConfig = await getUserConfig()
+
+// Initialize theme
+const { initializeTheme, currentTheme } = useTheme()
+initializeTheme()
 const enabled = userConfig.writingTools.enable.toRef()
 const enableRewrite = userConfig.writingTools.rewrite.enable.toRef()
 const enableProofread = userConfig.writingTools.proofread.enable.toRef()
diff --git a/entrypoints/content/components/WritingTools/style.css b/entrypoints/content/components/WritingTools/style.css
index c6d2c07a..8b0e6854 100644
--- a/entrypoints/content/components/WritingTools/style.css
+++ b/entrypoints/content/components/WritingTools/style.css
@@ -39,7 +39,7 @@
 }
 
 .circle-transition {
-  stroke: #000;
+  stroke: var(--color-foreground-base);
   animation: color-transition 0.6s ease-out forwards;
 }
 
@@ -64,8 +64,8 @@
     font-weight: 600;
   }
   :deep(pre) {
-    color: var(--color-gray-300);
-    background-color: black;
+    color: var(--color-text-tertiary);
+    background-color: var(--color-bg-component);
     margin-bottom: 8px;
     margin-top: 8px;
     padding: 8px;
@@ -101,7 +101,7 @@
   }
   :deep(hr) {
     margin: 8px 0;
-    border-color: #a7a7a7;
+    border-color: var(--color-border-strong);
   }
   :deep(strong) {
     font-weight: 600;
@@ -136,7 +136,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #9e9e9e;
+      background: var(--color-scroll-thumb);
       border-radius: 5px;
     }
 
@@ -150,7 +150,7 @@
   :deep(table) {
     td {
       padding: 4px;
-      border: 1px solid var(--color-gray-300);
+      border: 1px solid var(--color-border-strong);
     }
   }
 }
diff --git a/entrypoints/content/utils/page-injection/gmail-tools.ts b/entrypoints/content/utils/page-injection/gmail-tools.ts
index 6b990710..149d9e93 100644
--- a/entrypoints/content/utils/page-injection/gmail-tools.ts
+++ b/entrypoints/content/utils/page-injection/gmail-tools.ts
@@ -7,6 +7,7 @@ import Logger from '@/utils/logger'
 import { c2bRpc } from '@/utils/rpc'
 import { toggleContainer } from '@/utils/rpc/content-main-world-fns'
 import { sleep } from '@/utils/sleep'
+import { getDocumentTheme, GmailTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useGmailDetector } from '../../composables/useGmailDetector'
@@ -19,84 +20,184 @@ const NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS = 'nativemind-gmail-compose-btn'
 
 const LogoIcon = LogoSvg.replace('<svg', '<svg width="14" height="14" style="display: block;"')
 
+type GmailButtonThemeColors = {
+  background: string
+  text: string
+  hoverBackground: string
+  disabledBackground: string
+  disabledText: string
+  baseShadow: string
+  hoverShadow: string
+  spinnerBar: string
+  spinnerShadow: string
+}
+
+const GMAIL_BUTTON_THEME_COLORS: Record<GmailTheme, GmailButtonThemeColors> = {
+  light: {
+    background: '#FBF8F4',
+    text: '#596066',
+    hoverBackground: '#EAECEF',
+    disabledBackground: '#F2F2F2',
+    disabledText: '#9EA3A8',
+    baseShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    hoverShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    spinnerBar: '#18181B',
+    spinnerShadow: 'rgba(0, 0, 0, 0.2)',
+  },
+  dark: {
+    background: '#8E8C8C',
+    text: '#FFFFFF',
+    hoverBackground: '#7A7777',
+    disabledBackground: '#1F2326',
+    disabledText: '#7D8590',
+    baseShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    hoverShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    spinnerBar: '#F8F9FA',
+    spinnerShadow: 'rgba(0, 0, 0, 0.2)',
+  },
+}
+
+type GmailButtonStyleOptions = {
+  includeSpinner?: boolean
+  extraBaseRules?: string
+}
+
+function buildGmailButtonStyles(className: string, options: GmailButtonStyleOptions = {}) {
+  const lightColors = GMAIL_BUTTON_THEME_COLORS.light
+  const darkColors = GMAIL_BUTTON_THEME_COLORS.dark
+
+  const baseRules = `
+.${className} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 10px;
+  background: ${lightColors.background};
+  color: ${lightColors.text};
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: ${lightColors.baseShadow};
+  transition: all 0.2s ease;
+  font-family: 'Google Sans', Roboto, Arial, sans-serif;
+  white-space: nowrap;
+  ${options.extraBaseRules ?? ''}
+}
+
+.${className}:hover:not(:disabled) {
+  background: ${lightColors.hoverBackground};
+  box-shadow: ${lightColors.hoverShadow};
+}
+
+.${className}:disabled {
+  background: ${lightColors.disabledBackground};
+  color: ${lightColors.disabledText};
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.${className} svg {
+  color: ${lightColors.text};
+}
+
+/* Dark mode styles */
+.${className}.dark {
+  background: ${darkColors.background};
+  color: ${darkColors.text};
+  box-shadow: ${darkColors.baseShadow};
+}
+
+.${className}.dark:hover:not(:disabled) {
+  background: ${darkColors.hoverBackground};
+  box-shadow: ${darkColors.hoverShadow};
+}
+
+.${className}.dark:disabled {
+  background: ${darkColors.disabledBackground};
+  color: ${darkColors.disabledText};
+}
+
+.${className}.dark svg {
+  color: ${darkColors.text};
+}
+`
+
+  if (!options.includeSpinner) {
+    return baseRules
+  }
+
+  return `
+${baseRules}
+
+.nativemind-loading-spinner {
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+}
+
+.nativemind-loading-spinner .bar {
+  --duration: 1s;
+  --delay: calc(var(--duration) / 8 * -1);
+  --rotate: calc(360deg / 8 * -1);
+  width: 10%;
+  height: 26%;
+  background: ${lightColors.spinnerBar};
+  position: absolute;
+  left: 48%;
+  top: 36%;
+  opacity: 0;
+  border-radius: 50px;
+  box-shadow: 0 0 1px ${lightColors.spinnerShadow};
+  animation: nativemind-loading-fade var(--duration) linear infinite;
+  transform: rotate(calc(var(--rotate) * var(--bar-number))) translate(0, -130%);
+  animation-delay: calc(var(--delay) * var(--bar-number));
+}
+
+.${className}.dark .nativemind-loading-spinner .bar {
+  background: ${darkColors.spinnerBar};
+  box-shadow: 0 0 1px ${darkColors.spinnerShadow};
+}
+
+@keyframes nativemind-loading-fade {
+  from { opacity: 1; }
+  to { opacity: 0.25; }
+}
+`
+}
+
+function ensureGmailButtonStyle(styleId: string, className: string, options?: GmailButtonStyleOptions) {
+  const style = document.getElementById(styleId) as HTMLStyleElement | null
+  const cssText = buildGmailButtonStyles(className, options)
+  if (style) {
+    style.textContent = cssText
+    return
+  }
+  const styleEl = document.createElement('style')
+  styleEl.id = styleId
+  styleEl.textContent = cssText
+  document.head.appendChild(styleEl)
+}
+
 function makeSummaryButton(threadElement: HTMLElement, buttonText: string, externalStyle?: string) {
   const button = document.createElement('button')
   button.innerHTML = `
     ${LogoIcon}
     ${buttonText}
   `
-  // Inject CSS styles for the button
-  const styleId = 'nativemind-gmail-summary-btn-styles'
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      .${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS} {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 8px 10px;
-        background: #FBF8F4;
-        color: #3c4043;
-        border: 1px solid #dadce0;
-        border-radius: 6px;
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.1);
-        transition: all 0.2s ease;
-        font-family: 'Google Sans', Roboto, Arial, sans-serif;
-        white-space: nowrap;
-      }
-      
-      .${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS}:hover:not(:disabled) {
-        background: #EAECEF;
-        box-shadow: 0 2px 6px 0 rgba(60, 64, 67, 0.15);
-      }
-      
-      .${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS}:disabled {
-        background: #f1f3f4;
-        color: #5f6368;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-
-      .nativemind-loading-spinner {
-        position: relative;
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-      }
-
-      .nativemind-loading-spinner .bar {
-        --duration: 1s;
-        --delay: calc(var(--duration) / 8 * -1);
-        --rotate: calc(360deg / 8 * -1);
-        width: 10%;
-        height: 26%;
-        background: black;
-        position: absolute;
-        left: 48%;
-        top: 36%;
-        opacity: 0;
-        border-radius: 50px;
-        box-shadow: 0 0 1px rgba(0,0,0,0.2);
-        animation: nativemind-loading-fade var(--duration) linear infinite;
-        transform: rotate(calc(var(--rotate) * var(--bar-number))) translate(0, -130%);
-        animation-delay: calc(var(--delay) * var(--bar-number));
-      }
+  ensureGmailButtonStyle('nativemind-gmail-summary-btn-styles', NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS, { includeSpinner: true })
 
-      @keyframes nativemind-loading-fade {
-        from { opacity: 1; }
-        to { opacity: 0.25; }
-      }
-    `
-    document.head.appendChild(style)
+  if (externalStyle) {
+    button.style.cssText = externalStyle
   }
 
-  button.style.cssText = externalStyle || ''
-  button.className = NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS
+  const currentTheme = getDocumentTheme()
+  button.className = currentTheme === 'dark'
+    ? `${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS} dark`
+    : NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS
 
   button.addEventListener('mousedown', async (ev) => {
     // Return early if button is disabled
@@ -164,49 +265,14 @@ function makeReplyButton(buttonText: string) {
     ${buttonText}
   `
 
-  // Inject CSS styles for the button
-  const styleId = 'nativemind-gmail-reply-btn-styles'
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      .${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS} {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 8px 10px;
-        background: #FBF8F4;
-        color: #3c4043;
-        border: 1px solid #dadce0;
-        border-radius: 6px;
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.1);
-        transition: all 0.2s ease;
-        font-family: 'Google Sans', Roboto, Arial, sans-serif;
-        white-space: nowrap;
-        margin-left: 8px;
-        z-index: 1;
-      }
-      
-      .${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS}:hover:not(:disabled) {
-        background: #EAECEF;
-        box-shadow: 0 2px 6px 0 rgba(60, 64, 67, 0.15);
-      }
-      
-      .${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS}:disabled {
-        background: #f1f3f4;
-        color: #5f6368;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    `
-    document.head.appendChild(style)
-  }
+  ensureGmailButtonStyle('nativemind-gmail-reply-btn-styles', NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS, {
+    extraBaseRules: 'margin-left: 8px; z-index: 1;',
+  })
 
-  button.className = NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS
+  const currentTheme = getDocumentTheme()
+  button.className = currentTheme === 'dark'
+    ? `${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS} dark`
+    : NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS
 
   button.addEventListener('click', async (ev) => {
     ev.stopImmediatePropagation()
@@ -245,49 +311,14 @@ function makeComposeButton(buttonText: string) {
     ${buttonText}
   `
 
-  // Inject CSS styles for the button
-  const styleId = 'nativemind-gmail-compose-btn-styles'
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      .${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS} {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 8px 10px;
-        background: #FBF8F4;
-        color: #3c4043;
-        border: 1px solid #dadce0;
-        border-radius: 6px;
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.1);
-        transition: all 0.2s ease;
-        font-family: 'Google Sans', Roboto, Arial, sans-serif;
-        white-space: nowrap;
-        margin-left: 8px;
-        z-index: 1;
-      }
-      
-      .${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS}:hover:not(:disabled) {
-        background: #EAECEF;
-        box-shadow: 0 2px 6px 0 rgba(60, 64, 67, 0.15);
-      }
-      
-      .${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS}:disabled {
-        background: #f1f3f4;
-        color: #5f6368;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    `
-    document.head.appendChild(style)
-  }
+  ensureGmailButtonStyle('nativemind-gmail-compose-btn-styles', NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS, {
+    extraBaseRules: 'margin-left: 8px; z-index: 1;',
+  })
 
-  button.className = NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS
+  const currentTheme = getDocumentTheme()
+  button.className = currentTheme === 'dark'
+    ? `${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS} dark`
+    : NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS
 
   button.addEventListener('click', async (ev) => {
     ev.stopImmediatePropagation()
diff --git a/entrypoints/content/utils/translator/utils/dom-utils.ts b/entrypoints/content/utils/translator/utils/dom-utils.ts
index 2dd304ee..88bb1e5e 100644
--- a/entrypoints/content/utils/translator/utils/dom-utils.ts
+++ b/entrypoints/content/utils/translator/utils/dom-utils.ts
@@ -374,18 +374,24 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.tintedHighlight: {
-      element.style.color = isBGDark ? '#A8B4FF' : '#2724D8'
+      element.style.color = isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #2724D8)'
       break
     }
     case TranslationDisplayStyle.overlay: {
-      element.style.backgroundColor = isBGDark ? 'rgba(255, 255, 255, 0.16)' : 'rgba(0,0,0,0.08)'
+      element.style.backgroundColor = isBGDark
+        ? 'var(--color-overlay-subtle-on-dark, rgba(255, 255, 255, 0.16))'
+        : 'var(--color-overlay-subtle-on-light, rgba(0, 0, 0, 0.08))'
       element.style.borderRadius = '8px'
       element.style.padding = '8px 12px'
       break
     }
     case TranslationDisplayStyle.tintedOverlay: {
       const innerElement = document.createElement('span')
-      innerElement.style.backgroundColor = isBGDark ? 'rgba(200, 200, 200, 0.3)' : 'rgba(74, 101, 243, 0.1)'
+      innerElement.style.backgroundColor = isBGDark
+        ? 'var(--color-translation-overlay-dark, rgba(200, 200, 200, 0.3))'
+        : 'var(--color-translation-overlay-light, rgba(74, 101, 243, 0.1))'
       innerElement.innerHTML = element.innerHTML
       innerElement.classList.add(translationTargetInnerClass)
       element.innerHTML = ''
@@ -393,11 +399,15 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.wavyLine: {
-      applyUnderlineStyle(element, 'wavy', isBGDark ? '#A8B4FF' : '#322EE5')
+      applyUnderlineStyle(element, 'wavy', isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #322EE5)')
       break
     }
     case TranslationDisplayStyle.dashedLine: {
-      applyUnderlineStyle(element, 'dashed', isBGDark ? 'rgba(255, 255, 255, 0.56)' : 'rgba(0,0,0,0.32)')
+      applyUnderlineStyle(element, 'dashed', isBGDark
+        ? 'var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : 'var(--color-translation-underline-light, rgba(0,0,0,0.32))')
       break
     }
     case TranslationDisplayStyle.divider: {
@@ -406,7 +416,9 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       divider.classList.add(translationTargetDividerClass)
       divider.style.width = '48px'
       divider.style.marginTop = '8px'
-      divider.style.borderBottom = isBGDark ? '1px dashed rgba(255, 255, 255, 0.56)' : '1px dashed rgba(0, 0, 0, 0.32)'
+      divider.style.borderBottom = isBGDark
+        ? '1px dashed var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : '1px dashed var(--color-translation-underline-light, rgba(0, 0, 0, 0.32))'
 
       element.before(divider)
       break
diff --git a/entrypoints/settings/components/Block.vue b/entrypoints/settings/components/Block.vue
index c988530c..5fd7aa52 100644
--- a/entrypoints/settings/components/Block.vue
+++ b/entrypoints/settings/components/Block.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="p-4 bg-white rounded-lg relative overflow-hidden">
+  <div class="p-4 bg-bg-primary rounded-lg relative overflow-hidden">
     <div
       v-if="disabled"
-      class="disable mask z-10 absolute inset-0 bg-[#ffffffaf]"
+      class="disable mask z-10 absolute inset-0 bg-[var(--color-mask-disabled)]"
     />
     <div
       class="flex justify-between items-center"
diff --git a/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue b/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue
index 939efe81..9b070bcf 100644
--- a/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue
+++ b/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg shadow-[0px_0px_0px_1px_#24B96080] p-4">
+  <div class="rounded-lg shadow-[0px_0px_0px_1px_var(--color-border-selection)] p-4">
     <div
       class="flex flex-col gap-2"
     >
diff --git a/entrypoints/settings/components/CollapsibleSection.vue b/entrypoints/settings/components/CollapsibleSection.vue
index 0f2dd26c..2aa7802c 100644
--- a/entrypoints/settings/components/CollapsibleSection.vue
+++ b/entrypoints/settings/components/CollapsibleSection.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-white rounded-lg relative">
+  <div class="bg-transparent rounded-lg relative">
     <div
-      class="flex justify-between items-center cursor-pointer text-text-primary hover:text-[#1f2326c2]"
+      class="flex justify-between items-center cursor-pointer text-text-primary hover:text-text-secondary"
       @click="open = !open"
     >
       <div>
diff --git a/entrypoints/settings/components/DebugSettings/Block.vue b/entrypoints/settings/components/DebugSettings/Block.vue
index f0d21e78..1bd35262 100644
--- a/entrypoints/settings/components/DebugSettings/Block.vue
+++ b/entrypoints/settings/components/DebugSettings/Block.vue
@@ -3,7 +3,7 @@
     <div class="font-bold">
       {{ title }}
     </div>
-    <div class="pt-2 border-l border-gray-200 pl-2">
+    <div class="pt-2 border-l border-border pl-2">
       <slot />
     </div>
   </div>
diff --git a/entrypoints/settings/components/DebugSettings/index.vue b/entrypoints/settings/components/DebugSettings/index.vue
index 820f53f7..23906848 100644
--- a/entrypoints/settings/components/DebugSettings/index.vue
+++ b/entrypoints/settings/components/DebugSettings/index.vue
@@ -6,7 +6,7 @@
       title="Debug"
       description="Debug settings"
     />
-    <div class="p-4 flex flex-col gap-4 bg-white rounded-lg">
+    <div class="p-4 flex flex-col gap-4 bg-bg-primary rounded-lg">
       <div class="flex flex-col gap-4">
         <Block title="UI Language">
           <div class="flex gap-2 flex-col justify-start items-start">
@@ -20,7 +20,7 @@
             </Button>
             <div>Local value: {{ localeInConfig ?? 'not set' }}</div>
             <div
-              class="text-[10px] text-gray-400 font-light"
+              class="text-[10px] text-text-tertiary font-light"
             >
               clear locale setting will reset the UI language to automatically detected language in next page load
               (if local value is set, it will override the auto-detected language)
@@ -31,7 +31,7 @@
           <div class="flex gap-2 flex-col justify-start items-start">
             <div>Reset onboarding</div>
             <button
-              class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+              class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
               @click="resetOnboarding"
             >
               Reset
@@ -43,7 +43,7 @@
             <div>WebLLM model cache status</div>
             <div class="text-xs font-normal">
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
                 @click="checkWebLLMCacheStatus"
               >
                 Refresh
@@ -55,7 +55,7 @@
               >
                 <div>{{ s.modelId }}</div>
                 <button
-                  class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+                  class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
                   @click="deleteWebLLMModelCache(s.modelId)"
                 >
                   <IconDelete class="w-3 h-3" />
@@ -71,7 +71,7 @@
               <Selector
                 v-model="endpointType"
                 :options="modelProviderOptions"
-                dropdownClass="text-xs text-black w-52"
+                dropdownClass="text-xs text-text-primary w-52"
                 containerClass="py-0"
                 dropdownAlign="left"
               />
@@ -82,16 +82,16 @@
                 v-model.number="defaultFirstTokenTimeout"
                 type="number"
                 min="0"
-                class="border-b border-gray-200 py-1 disabled:opacity-50"
+                class="border-b border-border py-1 disabled:opacity-50"
               />
             </div>
             <div class="flex gap-3 justify-start items-center">
               Reasoning
               <Switch
                 v-model="enableReasoning"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border border-border bg-bg-primary"
                 itemClass="h-6 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[
                   {
@@ -101,7 +101,7 @@
                   {
                     label: 'Disable',
                     key: false,
-                    activeThumbClass: 'bg-gray-200',
+                    activeThumbClass: 'bg-border-light',
                   }
                 ]"
               />
@@ -113,7 +113,7 @@
                 class="font-light py-1"
               />
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3"
                 :class="!newModelId.trim() && 'opacity-50 pointer-events-none'"
                 @click="onPullModel"
               >
@@ -131,7 +131,7 @@
                   </span>
                   <span class="font-light"> ({{ pullingModel.status }}) </span>
                   <button
-                    class="text-blue-400 hover:text-blue-600 font-normal text-xs ml-2 cursor-pointer"
+                    class="text-icon-link hover:text-text-info font-normal text-xs ml-2 cursor-pointer"
                     @click="pullingModel.abort"
                   >
                     {{ pullingModel.status !== 'success' ? 'stop' : 'clear' }}
@@ -139,7 +139,7 @@
                 </div>
                 <div
                   v-if="pullingModel.error"
-                  class="font-light text-[8px] text-red-500"
+                  class="font-light text-[8px] text-text-critical"
                 >
                   {{ pullingModel.error }}
                 </div>
@@ -165,7 +165,7 @@
                 <div>translator system prompt</div>
                 <div
                   v-if="translationSystemPromptError"
-                  class="text-red-500 text-[8px]"
+                  class="text-text-critical text-[8px]"
                 >
                   ({{ translationSystemPromptError }})
                 </div>
@@ -240,7 +240,7 @@
                 v-model.number="maxAgentIterations"
                 type="number"
                 min="0"
-                class="border-b border-gray-200 h-5 w-20"
+                class="border-b border-border h-5 w-20"
               />
             </div>
             <div class="flex gap-3 justify-start items-center">
@@ -250,7 +250,7 @@
                     v-model.number="updateEnvironmentDetailsFrequency"
                     type="number"
                     min="0"
-                    class="border-b border-gray-200 w-12 h-5"
+                    class="border-b border-border w-12 h-5"
                   /> messages (including user and assistant messages)
                 </div>
               </Block>
@@ -258,14 +258,14 @@
           </div>
         </Block>
         <Block title="Chrome AI Polyfill">
-          <div class="text-[8px] text-gray-400 mb-1">
+          <div class="text-[8px] text-text-tertiary mb-1">
             needs to refresh the page to take effect
           </div>
           <div class="flex gap-3 justify-start items-stretch">
             <Switch
               v-model="enabledChromeAIPolyfill"
-              slotClass="rounded-lg border-gray-200 border bg-white"
-              thumbClass="bg-blue-500 w-4 h-4 rounded-md"
+              slotClass="rounded-lg border-border border bg-bg-primary"
+              thumbClass="bg-accent-primary w-4 h-4 rounded-md"
               activeItemClass="text-white"
               :items="[
                 {
@@ -275,7 +275,7 @@
                 {
                   label: 'Disable',
                   key: false,
-                  activeThumbClass: 'bg-gray-200',
+                  activeThumbClass: 'bg-border-light',
                 },
               ]"
             >
@@ -296,9 +296,9 @@
               </div>
               <Switch
                 v-model="enableBrowserUse"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'Enable',key: true},{label: 'Disable',key: false}]"
               />
@@ -310,9 +310,9 @@
               </div>
               <Switch
                 v-model="highlightInteractiveElements"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'True',key: true},{label: 'False',key: false}]"
               />
@@ -324,9 +324,9 @@
               </div>
               <Switch
                 v-model="simulateClickOnLink"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'True',key: true},{label: 'False',key: false}]"
               />
@@ -338,9 +338,9 @@
               </div>
               <Switch
                 v-model="closeTabOpenedByAgent"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'True',key: true},{label: 'False',key: false}]"
               />
@@ -353,24 +353,24 @@
               <Input
                 v-model.number="contentFilterThreshold"
                 type="number"
-                class="border-b border-gray-200 w-20 h-6"
+                class="border-b border-border w-20 h-6"
               />
             </div>
             <div class="flex gap-3 items-center">
               <Input
                 v-model="browserUseOpenUrl"
                 placeholder="Enter URL"
-                class="border-b border-gray-200 py-1 disabled:opacity-50 w-80"
+                class="border-b border-border py-1 disabled:opacity-50 w-80"
               />
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
                 @click="getAccessibleContent"
               >
                 Get accessible content
               </button>
               <button
                 v-if="browserUseParsedResults.length > 0"
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
                 @click="downloadBrowserUseParsedResults"
               >
                 Download
@@ -381,7 +381,7 @@
               :key="idx"
               class="mt-2 text-[8px] overflow-auto max-w-full max-h-96 font-light"
             >
-              <pre class="border border-gray-200 p-2 whitespace-pre-wrap">
+              <pre class="border border-border p-2 whitespace-pre-wrap">
                   {{ item?.content ?? 'N/A' }}
                 </pre>
             </div>
@@ -393,7 +393,7 @@
               <div class="flex gap-3 justify-start items-center">
                 document parser
                 <button
-                  class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3"
+                  class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3"
                   @click="parseAllDocuments"
                 >
                   parse
@@ -403,7 +403,7 @@
             <details
               v-for="(article, idx) of articles"
               :key="idx"
-              class="border border-gray-200 rounded-md p-2 &[open]:bg-gray-50 hover:bg-gray-100 open:hover:bg-transparent transition-all"
+              class="border border-border rounded-md p-2 &[open]:bg-bg-neutral-subtle hover:bg-bg-hover open:hover:bg-transparent transition-all"
             >
               <summary
                 class="flex justify-start items-stretch text-xs cursor-pointer wrap-anywhere"
@@ -413,17 +413,17 @@
               </summary>
               <div class="flex flex-col gap-3 mt-2">
                 <div class="flex flex-col gap-3 justify-start items-stretch">
-                  <pre class="text-[8px] font-light border border-gray-200 min-h-4 p-2 whitespace-pre-wrap">{{ article?.title ?? 'N/A' }}</pre>
+                  <pre class="text-[8px] font-light border border-border min-h-4 p-2 whitespace-pre-wrap">{{ article?.title ?? 'N/A' }}</pre>
                   <div class="text-[10px]">
                     URL
                   </div>
-                  <pre class="text-[8px] font-light border border-gray-200 min-h-4 p-2 whitespace-pre-wrap">{{ article?.url ?? 'N/A' }}</pre>
+                  <pre class="text-[8px] font-light border border-border min-h-4 p-2 whitespace-pre-wrap">{{ article?.url ?? 'N/A' }}</pre>
                 </div>
                 <div class="flex flex-col gap-3 justify-start items-stretch">
                   <div class="text-[10px]">
                     Text
                   </div>
-                  <pre class="text-[8px] font-light border border-gray-200 min-h-4 p-2 whitespace-pre-wrap max-h-72 overflow-auto">{{
+                  <pre class="text-[8px] font-light border border-border min-h-4 p-2 whitespace-pre-wrap max-h-72 overflow-auto">{{
                     article?.content ?? 'N/A'
                   }}</pre>
                 </div>
@@ -434,7 +434,7 @@
                   <div class="text-[10px]">
                     HTML
                   </div>
-                  <div class="text-[8px] font-light border border-gray-200 min-h-4 p-2 max-h-72 overflow-auto [&_img]:max-w-14! [&_svg]:max-w-14!">
+                  <div class="text-[8px] font-light border border-border min-h-4 p-2 max-h-72 overflow-auto [&_img]:max-w-14! [&_svg]:max-w-14!">
                     <div v-html="article?.html ?? 'N/A'" />
                   </div>
                 </div>
@@ -451,9 +451,9 @@
               Enable
               <Switch
                 v-model="enableTranslationCache"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-6 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[
                   {
@@ -463,7 +463,7 @@
                   {
                     label: 'Disable',
                     key: false,
-                    activeThumbClass: 'bg-gray-200',
+                    activeThumbClass: 'bg-border-light',
                   }
                 ]"
               />
@@ -475,7 +475,7 @@
                   v-model.number="cacheRetentionDays"
                   type="number"
                   min="1"
-                  class="border-b border-gray-200 py-1 disabled:opacity-50 w-20"
+                  class="border-b border-border py-1 disabled:opacity-50 w-20"
                 />
               </div>
             </div>
@@ -490,7 +490,7 @@
               <div>
                 Total Entries
               </div>
-              <div class="font-normal text-gray-600">
+              <div class="font-normal text-text-secondary">
                 {{ cacheStats?.totalEntries ?? 'N/A' }}
               </div>
             </div>
@@ -498,7 +498,7 @@
               <div>
                 Total Size (MB)
               </div>
-              <div class="font-normal text-gray-600">
+              <div class="font-normal text-text-secondary">
                 {{ cacheStats?.totalSizeMB.toFixed(2) ?? 'N/A' }}
               </div>
             </div>
@@ -506,14 +506,14 @@
               <div>
                 Model Namespaces
               </div>
-              <div class="font-normal text-gray-600">
+              <div class="font-normal text-text-secondary">
                 {{ cacheStats?.modelNamespaces.join(', ') ?? 'N/A' }}
               </div>
             </div>
             <div class="flex flex-col gap-2 justify-start items-start">
               <span class="text-xs">Clear Cache</span>
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
                 @click="handleClearCache"
               >
                 Clear
@@ -538,13 +538,13 @@
               <div
                 v-if="clearChatHistoryResult"
                 class="text-xs"
-                :class="clearChatHistoryResult.success ? 'text-green-600' : 'text-red-500'"
+                :class="clearChatHistoryResult.success ? 'text-text-success-strong' : 'text-text-critical'"
               >
                 {{ clearChatHistoryResult.success
                   ? `Successfully deleted ${clearChatHistoryResult.deletedCount} chat${clearChatHistoryResult.deletedCount !== 1 ? 's' : ''}`
                   : `Error: ${clearChatHistoryResult.error}` }}
               </div>
-              <div class="text-[10px] text-gray-400 font-light">
+              <div class="text-[10px] text-text-tertiary font-light">
                 This will permanently delete all chat history, context attachments, and metadata. This action cannot be undone.
               </div>
             </div>
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue b/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
index 731c31f4..83997343 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
@@ -119,7 +119,7 @@ onMounted(async () => {
   >
     <template #title>
       <div class="flex items-center gap-3">
-        <div class="size-6 rounded-md flex items-center justify-center overflow-hidden shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]">
+        <div class="size-6 rounded-md flex items-center justify-center overflow-hidden shadow-02">
           <img
             :src="IconLMStudioLogo"
             class="size-6"
@@ -259,7 +259,7 @@ onMounted(async () => {
             >
               <span>{{ t('settings.providers.lm_studio.already_installed') }}</span>
               <button
-                class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
+                class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
                 @click="setupLMStudio"
               >
                 {{ t('settings.ollama.setup') }}
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Card.vue b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Card.vue
index db8980d8..622c13f2 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Card.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex flex-col gap-[6px]">
+  <div class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex flex-col gap-[6px]">
     <div class="flex justify-between items-start gap-1">
       <div class="flex flex-col">
         <div class="flex gap-2 items-center">
@@ -14,7 +14,7 @@
               </div>
               <div v-if="sizeTag">
                 <Tag
-                  class="rounded-full bg-[#F4F4F5] border border-[#E4E4E7] text-[#52525B] flex items-center gap-[3px] px-2 py-0 min-h-6 box-border"
+                  class="rounded-full bg-bg-tag border border-border-strong text-text-secondary flex items-center gap-[3px] px-2 py-0 min-h-6 box-border"
                 >
                   <template #icon>
                     <IconVRam />
@@ -64,7 +64,7 @@
       <Tag
         v-for="tag of tags"
         :key="tag.key"
-        class="rounded-full bg-[#F4F4F5] border border-[#E4E4E7] text-[#52525B] flex items-center gap-[3px] px-2 py-0 min-h-6 box-border"
+        class="rounded-full bg-bg-tag border border-border text-text-secondary flex items-center gap-[3px] px-2 py-0 min-h-6 box-border"
       >
         <template #icon>
           <component :is="tag.icon" />
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
index c81a1ac2..5bdf474a 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
@@ -22,19 +22,19 @@
       </div>
       <div
         v-else-if="lmStudioConnectionStatus === 'connected'"
-        class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
+        class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
       >
         <IconNoActiveModels class="h-4" />
         {{ t('settings.general.running_models.lm_studio_no_active_models') }}
       </div>
       <div
         v-else
-        class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
+        class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
       >
         <IconUnconnected class="h-4" />
         {{ t('settings.general.running_models.not_connected_to_lm_studio') }}
       </div>
-      <div class="rounded-md border border-[#E4E4E7] bg-[#FAFAFA] px-2 py-[3px]">
+      <div class="rounded-md border border-border-strong bg-bg-elevated px-2 py-[3px]">
         <Text
           color="secondary"
           size="xs"
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Ollama.vue b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Ollama.vue
index 3f40f53b..e333353d 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Ollama.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Ollama.vue
@@ -11,7 +11,7 @@
       >
         <div
           v-if="runningModels.length"
-          class="flex flex-col gap-2"
+          class="flex flex-col gap-3"
         >
           <Card
             v-for="model in runningModels"
@@ -29,14 +29,14 @@
         </div>
         <div
           v-else-if="ollamaConnectionStatus === 'connected'"
-          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
         >
           <IconNoActiveModels class="h-4" />
           {{ t('settings.general.running_models.no_active_models') }}
         </div>
         <div
           v-else
-          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
         >
           <IconUnconnected class="h-4" />
           {{ t('settings.general.running_models.not_connected_to_ollama') }}
@@ -49,7 +49,7 @@
       >
         <div
           v-if="ollamaModelList.length"
-          class="flex flex-col gap-2"
+          class="flex flex-col gap-3"
         >
           <Card
             v-for="model in ollamaModelList"
@@ -62,14 +62,14 @@
         </div>
         <div
           v-else-if="ollamaConnectionStatus === 'connected'"
-          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
         >
           <IconNoActiveModels class="h-4" />
           {{ t('settings.general.running_models.no_active_models') }}
         </div>
         <div
           v-else
-          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
         >
           <IconUnconnected class="h-4" />
           {{ t('settings.general.running_models.not_connected_to_ollama') }}
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue b/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
index 60c66504..746e7c6c 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
@@ -10,6 +10,7 @@ import Input from '@/components/Input.vue'
 import Loading from '@/components/Loading.vue'
 import ScrollTarget from '@/components/ScrollTarget.vue'
 import Button from '@/components/ui/Button.vue'
+import Text from '@/components/ui/Text.vue'
 import WarningMessage from '@/components/WarningMessage.vue'
 import { useLogger } from '@/composables/useLogger'
 import { useValueGuard } from '@/composables/useValueGuard'
@@ -121,7 +122,7 @@ onMounted(async () => {
   >
     <template #title>
       <div class="flex items-center gap-3">
-        <div class="size-6 rounded-md flex items-center justify-center overflow-hidden shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]">
+        <div class="size-6 rounded-md flex items-center justify-center overflow-hidden shadow-02 text-text-primary">
           <IconOllamaLogo class="size-5" />
         </div>
         <span class="font-medium text-base">
@@ -248,7 +249,7 @@ onMounted(async () => {
           <ModelManagement v-if="endpointType !== 'web-llm' && ollamaConnectionStatus === 'connected'" />
           <div
             v-if="endpointType !== 'web-llm' && ollamaConnectionStatus !== 'connected'"
-            class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
+            class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
           >
             <IconUnconnected class="h-4" />
             {{ t('settings.general.running_models.not_connected_to_ollama') }}
@@ -265,7 +266,7 @@ onMounted(async () => {
               >
                 <span>{{ t('settings.ollama.already_installed') }}</span>
                 <button
-                  class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
+                  class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
                   @click="setupOllama"
                 >
                   {{ t('settings.ollama.setup') }}
@@ -276,7 +277,7 @@ onMounted(async () => {
                 <a
                   :href="OLLAMA_TUTORIAL_URL"
                   target="_blank"
-                  class="underline whitespace-nowrap hover:text-gray-800 cursor-pointer"
+                  class="underline whitespace-nowrap hover:text-text-primary cursor-pointer text-icon-link"
                 >
                   {{ t('settings.ollama.follow_guide') }}
                 </a>
diff --git a/entrypoints/settings/components/GeneralSettings/index.vue b/entrypoints/settings/components/GeneralSettings/index.vue
index b73cb067..df437dbd 100644
--- a/entrypoints/settings/components/GeneralSettings/index.vue
+++ b/entrypoints/settings/components/GeneralSettings/index.vue
@@ -37,13 +37,14 @@
               <div class="w-52">
                 <UILanguageSelector />
               </div>
-              <div>
-                <Text
-                  color="secondary"
-                  size="xs"
-                >
-                  {{ t('settings.interface.interface_language_desc') }}
-                </Text>
+            </div>
+          </Section>
+          <Section
+            :title="t('settings.interface.theme')"
+          >
+            <div class="flex flex-col gap-1">
+              <div class="w-52">
+                <ThemeSelector />
               </div>
             </div>
           </Section>
@@ -54,13 +55,14 @@
 </template>
 
 <script setup lang="tsx">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import Modal from '@/components/Modal.vue'
-import Text from '@/components/ui/Text.vue'
+import ThemeSelector from '@/components/ThemeSelector.vue'
 import UILanguageSelector from '@/components/UILanguageSelector.vue'
 import { useI18n } from '@/utils/i18n/index'
 import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
+import { useTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useSettingsInitialQuery } from '../../composables/useQuery'
@@ -74,6 +76,7 @@ import OllamaConfiguration from './Blocks/OllamaConfiguration.vue'
 
 const { t } = useI18n()
 const llmBackendStatusStore = useLLMBackendStatusStore()
+const { initializeTheme } = useTheme()
 
 const settingsQuery = useSettingsInitialQuery()
 const settingsRef = ref<HTMLElement | null>(null)
@@ -109,4 +112,8 @@ watch(translationSystemPrompt, (newValue) => {
     translationSystemPromptError.value = ''
   }
 })
+
+onMounted(async () => {
+  await initializeTheme()
+})
 </script>
diff --git a/entrypoints/settings/components/Layout.vue b/entrypoints/settings/components/Layout.vue
index 6e8f5d33..bf9c07c6 100644
--- a/entrypoints/settings/components/Layout.vue
+++ b/entrypoints/settings/components/Layout.vue
@@ -38,8 +38,8 @@ const onClickTitle = () => {
 
 <template>
   <div>
-    <div class="items-center h-15 box-border border-b border-gray-200">
-      <div class="px-6 flex justify-between items-center h-full">
+    <div class="items-center h-15 box-border border-b border-border-light">
+      <div class="px-6 flex justify-between items-center h-full bg-bg-app">
         <div
           class="text-base"
           @click="onClickTitle"
@@ -78,17 +78,17 @@ const onClickTitle = () => {
       </div>
     </div>
     <div class="flex h-[calc(100vh-60px)] overflow-hidden">
-      <div class="w-60 shrink-0 grow-0">
+      <div class="w-60 shrink-0 grow-0 bg-bg-app">
         <Sidebar :debug="enabledDebug" />
       </div>
-      <div class="flex-1 flex justify-center bg-[#F5F6FB] overflow-auto h-full min-w-80 px-4">
+      <div class="flex-1 flex justify-center bg-bg-secondary overflow-auto h-full min-w-80 px-4 text-text-primary">
         <div class="max-w-[640px] min-w-0 grow-1 shrink-1">
           <RouterView v-slot="{ Component }">
             <Suspense>
               <component :is="Component" />
             </Suspense>
           </RouterView>
-          <div class="font-light text-xs text-gray-500 flex flex-col gap-1 py-4">
+          <div class="font-light text-xs text-text-tertiary flex flex-col gap-1 py-4">
             <i18n-t
               keypath="settings.feedback.contact_msg"
               tag="div"
diff --git a/entrypoints/settings/components/OllamaDownloadModal.vue b/entrypoints/settings/components/OllamaDownloadModal.vue
index 8657f043..a1f429b6 100644
--- a/entrypoints/settings/components/OllamaDownloadModal.vue
+++ b/entrypoints/settings/components/OllamaDownloadModal.vue
@@ -19,13 +19,13 @@
       <template #body>
         <div
           v-if="!pulling"
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.description') }}
         </div>
         <div
           v-else
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.downloading') }}
         </div>
@@ -34,13 +34,13 @@
           class="flex gap-2 items-stretch flex-col mt-1"
         >
           <ProgressBar :progress="pulling.completed / (pulling.total || 1)" />
-          <div class="text-xs text-gray-500 flex justify-between items-center">
+          <div class="text-xs text-text-tertiary flex justify-between items-center">
             <div>{{ formatSize(pulling.completed) }}</div>
             <div>{{ pulling.total ? formatSize(pulling.total) : '-' }}</div>
           </div>
         </div>
         <div v-if="pulling?.error">
-          <div class="text-red-500 text-xs flex items-center gap-1">
+          <div class="text-text-critical text-xs flex items-center gap-1">
             <IconWarning class="w-3 h-3 shrink-0" />
             <span class="wrap-anywhere">{{ pulling.error }}</span>
           </div>
diff --git a/entrypoints/settings/components/Sidebar.vue b/entrypoints/settings/components/Sidebar.vue
index d97c6979..9eb080c9 100644
--- a/entrypoints/settings/components/Sidebar.vue
+++ b/entrypoints/settings/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col">
+  <div class="h-full flex flex-col text-text-primary">
     <div
       class="font-bold text-[21px] cursor-default px-6 py-5 leading-[26px]"
     >
@@ -11,7 +11,7 @@
         v-for="menuItem of menu"
         :key="menuItem.to"
         class="rounded-md py-[6px] px-[10px] min-h-8 transition-all text-xs font-medium flex gap-2 items-center"
-        activeClass="bg-[#F5F6FB]"
+        activeClass="bg-bg-selection"
         :to="menuItem.to"
       >
         <div class="flex items-center w-4">
diff --git a/entrypoints/settings/components/TranslationSettings/index.vue b/entrypoints/settings/components/TranslationSettings/index.vue
index dc1b304a..c68fc5d4 100644
--- a/entrypoints/settings/components/TranslationSettings/index.vue
+++ b/entrypoints/settings/components/TranslationSettings/index.vue
@@ -17,7 +17,7 @@
             <Selector
               v-model="targetLocale"
               :options="translationLanguageOptions"
-              dropdownClass="text-xs text-black w-52"
+              dropdownClass="text-xs text-text-primary w-52"
               dropdownAlign="left"
             />
           </Section>
diff --git a/entrypoints/settings/components/WebLLMDownloadModal.vue b/entrypoints/settings/components/WebLLMDownloadModal.vue
index 480a4c81..2ca4beb3 100644
--- a/entrypoints/settings/components/WebLLMDownloadModal.vue
+++ b/entrypoints/settings/components/WebLLMDownloadModal.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="bg-white text-black py-4 px-6 rounded-md max-w-full flex flex-col w-[340px] text-xs">
+  <div class="bg-bg-primary text-text-primary py-4 px-6 rounded-md max-w-full flex flex-col w-[340px] text-xs">
     <div class="font-bold text-base">
       {{ webLLMInitializeProgress.started ? t('settings.model_downloader.downloading_model', {model: DEFAULT_MODEL.name}) :t('settings.model_downloader.download_model', {model: DEFAULT_MODEL.name}) }}
       ({{ formatSize(DEFAULT_MODEL.weightsBinSize) }})
     </div>
     <div
       v-if="!webLLMInitializeProgress.started"
-      class="text-gray-600 text-sm"
+      class="text-text-secondary text-sm"
     >
       {{ t('settings.webllm_downloader.description', {model: DEFAULT_MODEL.name, size: formatSize(DEFAULT_MODEL.weightsBinSize)}) }}
     </div>
     <div
       v-else
-      class="text-gray-600 text-sm"
+      class="text-text-secondary text-sm"
     >
       {{ t('settings.model_downloader.downloading') }}
     </div>
@@ -22,7 +22,7 @@
     >
       <ProgressBar :progress="webLLMInitializeProgress.downloaded / (webLLMInitializeProgress.total || 1)" />
       <div class="flex gap-2 items-stretch flex-col">
-        <div class="text-[10px] text-gray-500 flex justify-between items-center">
+        <div class="text-[10px] text-text-tertiary flex justify-between items-center">
           <div>{{ formatSize(webLLMInitializeProgress.downloaded) }}</div>
           <div>{{ formatSize(webLLMInitializeProgress.total) }}</div>
         </div>
@@ -49,7 +49,7 @@
     </div>
     <div
       v-if="!supportedWebLLM.supported"
-      class="text-red-500 text-[10px] flex items-center gap-2 justify-start"
+      class="text-text-critical text-[10px] flex items-center gap-2 justify-start"
     >
       <IconWarning class="w-3 h-3" />
       {{ t('errors.webllm_not_supported') }}
diff --git a/entrypoints/sidepanel/components/AttachmentSelector.vue b/entrypoints/sidepanel/components/AttachmentSelector.vue
index 79453747..4b446b7e 100644
--- a/entrypoints/sidepanel/components/AttachmentSelector.vue
+++ b/entrypoints/sidepanel/components/AttachmentSelector.vue
@@ -13,12 +13,12 @@
         ref="selectorListContainer"
         class="absolute top-0 h-0 w-full z-50"
       >
-        <div class="translate-y-[calc(-100%-16px)] bg-bg-component rounded-lg shadow-01 p-1 w-full">
+        <div class="translate-y-[calc(-100%-16px)] bg-bg-component rounded-lg shadow-01 p-1 w-full text-text-primary">
           <div class="flex flex-col">
             <div class="w-full mb-px">
               <div
                 class="w-full flex items-center gap-1 px-1 py-2 cursor-pointer rounded-sm"
-                :class="[isAllTabSelected ? 'bg-[#DFE1E5]' : 'hover:bg-[#EAECEF]']"
+                :class="[isAllTabSelected ? 'bg-bg-selection' : 'hover:bg-bg-hover']"
                 @click="selectAllTabs"
               >
                 <IconTab class="w-4 h-4" />
@@ -39,7 +39,7 @@
                   v-for="tab in allTabs"
                   :key="tab.tabId"
                   class="flex flex-col px-1 py-2 cursor-pointer rounded-sm"
-                  :class="[isTabSelected(tab) ? 'bg-[#DFE1E5]' : 'hover:bg-[#EAECEF]']"
+                  :class="[isTabSelected(tab) ? 'bg-bg-selection' : 'hover:bg-bg-hover']"
                   @click="toggleSelectTab(tab)"
                 >
                   <div
@@ -48,11 +48,11 @@
                     <ExternalImage
                       :src="tab.faviconUrl"
                       alt=""
-                      class="w-4 h-4 rounded-full grow-0 shrink-0 bg-gray-300"
+                      class="w-4 h-4 rounded-full grow-0 shrink-0 bg-[var(--color-border-light)]"
                       fallbackClass="bg-transparent"
                     >
                       <template #fallback>
-                        <IconWeb class="w-4 h-4 rounded-full grow-0 shrink-0 text-[#6E757C]" />
+                        <IconWeb class="w-4 h-4 rounded-full grow-0 shrink-0 text-text-tertiary" />
                       </template>
                     </ExternalImage>
                     <div
@@ -68,7 +68,7 @@
             <Divider class="w-auto -mx-1 my-1" />
             <div class="w-full mb-px">
               <div
-                class="w-full flex items-center gap-1 px-1 py-1 min-h-7 cursor-pointer rounded-sm hover:bg-[#EAECEF]"
+                class="w-full flex items-center gap-1 px-1 py-1 min-h-7 cursor-pointer rounded-sm hover:bg-bg-hover"
                 @click="selectFile()"
               >
                 <IconAttachmentUpload class="w-4 h-4" />
@@ -89,9 +89,9 @@
       <div
         v-for="(message, index) in errorMessages"
         :key="index"
-        class="p-2 rounded-lg bg-[#27272A] flex items-center gap-2 max-w-11/12"
+        class="p-2 rounded-lg bg-bg-overlay-contrast flex items-center gap-2 max-w-11/12"
       >
-        <IconWarningSolid class="w-5 h-5 shrink-0" />
+        <IconWarningSolid class="w-5 h-5 shrink-0 text-text-warning" />
         <Text
           size="small"
           class="font-medium text-white min-w-0 wrap-anywhere"
@@ -106,21 +106,21 @@
         class="shrink-0 grow-0 h-6 w-6 grid place-items-center"
         @click="showSelector"
       >
-        <IconAdd class="cursor-pointer text-black" />
+        <IconAdd class="cursor-pointer text-[var(--color-foreground-base)]" />
       </Button>
       <ScrollContainer
         ref="tabsContainerRef"
         class="shrink grow min-w-0"
         itemContainerClass="flex gap-2 w-max items-center"
         :redirect="{ vertical: 'horizontal', horizontal: 'horizontal' }"
-        :arrivalShadow="{ left: { color: '#F5F6FB', size: 60 }, right: { color: '#F5F6FB', size: 60 } }"
+        :arrivalShadow="{ left: { color: 'var(--color-bg-app)', size: 60 }, right: { color: 'var(--color-bg-app)', size: 60 } }"
       >
         <div
           v-for="(attachment, index) in attachmentsToShow"
           :key="index"
           class="items-center gap-2 grow-0 text-xs shrink-0"
         >
-          <Tag class="inline-flex bg-[#F4F4F5] border border-[#E4E4E7]">
+          <Tag class="inline-flex bg-bg-tertiary border border-border">
             <template #icon>
               <div
                 v-if="attachment.type === 'tab'"
@@ -129,11 +129,11 @@
                 <ExternalImage
                   :src="attachment.value.faviconUrl"
                   alt=""
-                  class="w-3 h-3 rounded-full bg-gray-300"
+                  class="w-3 h-3 rounded-full bg-[var(--color-border-light)]"
                   fallbackClass="bg-transparent"
                 >
                   <template #fallback>
-                    <IconWeb class="rounded-full text-[#6E757C]" />
+                    <IconWeb class="rounded-full text-text-tertiary" />
                   </template>
                 </ExternalImage>
               </div>
@@ -141,13 +141,13 @@
                 v-else-if="attachment.type === 'image'"
                 class="flex items-center justify-center w-3 h-4 shrink-0 grow-0 ml-[2px]"
               >
-                <IconAttachmentImage class="w-3 h-3 text-[#52525B]" />
+                <IconAttachmentImage class="w-3 h-3 text-text-secondary" />
               </div>
               <div
                 v-else-if="attachment.type === 'pdf'"
                 class="flex items-center justify-center w-3 h-4 shrink-0 grow-0 ml-[2px]"
               >
-                <IconAttachmentPDF class="w-3 h-3 text-[#52525B]" />
+                <IconAttachmentPDF class="w-3 h-3 text-text-secondary" />
               </div>
               <div
                 v-else-if="attachment.type === 'loading'"
@@ -155,7 +155,7 @@
               >
                 <Loading
                   :size="12"
-                  strokeColor="#52525B]"
+                  strokeColor="var(--color-text-secondary)"
                 />
               </div>
               <ExhaustiveError v-else />
@@ -163,14 +163,14 @@
             <template #text>
               <span
                 :title="attachment.type === 'tab' ? attachment.value.title : attachment.value.name"
-                class="text-xs text-[#52525B] whitespace-nowrap max-w-28 overflow-hidden text-ellipsis"
+                class="text-xs text-text-secondary whitespace-nowrap max-w-28 overflow-hidden text-ellipsis"
               >
                 {{ attachment.type === 'tab' ? attachment.value.title : attachment.value.name }}
               </span>
             </template>
             <template #button>
               <button
-                class="cursor-pointer hover:text-[#71717A] text-gray-400 shrink-0"
+                class="cursor-pointer hover:text-text-tertiary text-text-quaternary shrink-0"
                 @click="removeAttachment(attachment)"
               >
                 <IconClose class="w-4" />
diff --git a/entrypoints/sidepanel/components/Chat/Messages/Action.vue b/entrypoints/sidepanel/components/Chat/Messages/Action.vue
index c86123f0..36d2e00c 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/Action.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/Action.vue
@@ -18,7 +18,7 @@
     >
       <Text
         size="medium"
-        class="wrap-anywhere"
+        class="wrap-anywhere text-text-primary"
       >
         {{ message.titleAction.content }}
       </Text>
@@ -33,7 +33,7 @@
       <div
         v-for="(action, idx) in message.actions"
         :key="idx"
-        class="mt-1 text-sm rounded-lg relative inline-block max-w-full bg-white p-2 text-text-primary cursor-pointer hover:bg-gray-100 transition-all"
+        class="mt-1 text-sm rounded-lg relative inline-block max-w-full bg-bg-clickable p-2 text-text-primary cursor-pointer hover:bg-bg-hover transition-all"
         :class="disabled ? 'opacity-50 pointer-events-none' : ''"
         @click="
           (ev) =>
@@ -45,7 +45,10 @@
             v-if="action.icon"
             class="shrink-0 grow-0"
           >
-            <div v-html="getIconSvg(action.icon)" />
+            <div
+              class="p-1 border border-border-quick-action bg-bg-quick-action rounded-[4px] text-icon-quick-action"
+              v-html="getIconSvg(action.icon)"
+            />
           </div>
           <MarkdownViewer
             class="shrink grow"
diff --git a/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue b/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
index 36e06f8c..71125500 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
@@ -35,7 +35,7 @@
         v-else
         class="shrink-0 grow-0 self-start mt-[3px] size-5 p-0.5"
       >
-        <IconTickCircle class="w-4 text-success" />
+        <IconTickCircle class="w-4 text-accent-success" />
       </div>
       <div :class="classNames('grow min-w-0 flex', task.details?.expanded ? 'flex-col' : 'flex-row')">
         <div class="flex grow gap-1 w-full justify-between items-center text-text-secondary">
@@ -55,7 +55,7 @@
         </div>
         <div
           v-if="task.details?.expanded"
-          class="bg-white text-[#596066] rounded-md py-2 px-3 mt-[6px]"
+          class="bg-bg-primary text-text-secondary rounded-md py-2 px-3 mt-[6px]"
         >
           <MarkdownViewer
             :fadeInAnimation="!task.done"
diff --git a/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue b/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
index 2c9a3480..0f6b30c0 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
@@ -12,7 +12,7 @@
         v-if="message.isError"
         class="grow-0 shrink-0"
       >
-        <IconWarning class="w-4 text-[#FDA58F]" />
+        <IconWarning class="w-4 text-text-caution" />
       </div>
       <div class="max-w-full flex-1 flex flex-col gap-1">
         <div
@@ -31,7 +31,7 @@
               class="flex items-center gap-1.5 overflow-hidden whitespace-nowrap"
             >
               <div class="shrink-0 grow-0 size-5 p-0.5">
-                <IconTickCircle class="w-4 text-success shrink-0" />
+                <IconTickCircle class="w-4 text-accent-success shrink-0" />
               </div>
               <Text color="primary">
                 {{ t('chat.messages.thought_for_seconds', Math.ceil(message.reasoningTime / 1000), { named: { second: Math.ceil(message.reasoningTime / 1000) } }) }}
@@ -78,8 +78,8 @@
           ref="scrollContainerRef"
           :containerClass="classNames('overscroll-auto overflow-auto transition-height duration-200 [interpolate-size:allow-keywords] wrap-anywhere pl-6', showClampedReasoning ? 'h-[3.3em] leading-[1.5em]' : 'h-auto')"
           :arrivalShadow="{
-            top: { color: '#F5F6FB', size: 12, offset: 8 },
-            bottom: { color: '#F5F6FB', size: 12, offset: 8 }
+            top: { color: 'var(--color-bg-app)', size: 12, offset: 8 },
+            bottom: { color: 'var(--color-bg-app)', size: 12, offset: 8 }
           }"
           :autoSnap="{bottom: (showClampedReasoning && !message.done) ? true : false}"
         >
diff --git a/entrypoints/sidepanel/components/Chat/Messages/Task.vue b/entrypoints/sidepanel/components/Chat/Messages/Task.vue
index 675d23c7..e68fa5de 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/Task.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/Task.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('text-sm rounded-md relative inline-block max-w-full bg-white p-2', props.class, level === 0 ? 'p-3' : 'p-0')">
+  <div :class="classNames('text-sm rounded-md relative inline-block max-w-full bg-bg-primary p-2', props.class, level === 0 ? 'p-3' : 'p-0')">
     <Text :color="level === 0 ? 'placeholder' : 'primary'">
       <div
         v-if="message.content"
diff --git a/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue b/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
index adc612bf..1a63873c 100644
--- a/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
+++ b/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
@@ -3,7 +3,7 @@
     <div
       class="flex items-center gap-1 px-1 py-1 min-h-6 rounded-sm cursor-pointer"
       :class="[
-        isOnlineSearchEnabled ? 'bg-[#DEFFEB] text-[#5B5B5B]' : 'text-[#AEB5BD]',
+        isOnlineSearchEnabled ? 'bg-bg-success-subtle text-text-secondary' : 'text-text-placeholder',
       ]"
       @click="toggleOnlineSearch"
     >
diff --git a/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue b/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
index 2260f21f..a7a94c69 100644
--- a/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
+++ b/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
@@ -7,7 +7,7 @@
           'cursor-not-allowed opacity-50': !isModelSupportsThinking || !isThinkingToggleable,
           'cursor-pointer': isModelSupportsThinking && isThinkingToggleable,
         },
-        isThinkingEnabled ? 'bg-[#DEFFEB] text-[#5B5B5B]' : 'text-[#AEB5BD]',
+        isThinkingEnabled ? 'bg-bg-success-subtle text-text-secondary' : 'text-text-placeholder',
       ]"
       @click="toggleThinking"
     >
diff --git a/entrypoints/sidepanel/components/Chat/index.vue b/entrypoints/sidepanel/components/Chat/index.vue
index 5ea48d4c..4b280d42 100644
--- a/entrypoints/sidepanel/components/Chat/index.vue
+++ b/entrypoints/sidepanel/components/Chat/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-[#F5F6FB]"
+    class="bg-bg-app"
     @messageAction="actionEventHandler"
   >
     <ScrollContainer
@@ -8,8 +8,8 @@
       :autoSnap="{ bottom: true }"
       :style="{ height: `calc(100% - ${inputContainerHeight}px)` }"
       :arrivalShadow="{
-        top: { color: '#F5F6FB', size: 36 },
-        bottom: { color: '#F5F6FB', size: 36 }
+        top: { color: 'var(--color-bg-app)', size: 36 },
+        bottom: { color: 'var(--color-bg-app)', size: 36 }
       }"
     >
       <div class="flex flex-col gap-2 px-4 py-4 pt-2">
@@ -23,7 +23,7 @@
             v-if="item.role === 'user'"
             class="flex flex-col items-end"
           >
-            <div class="text-sm inline-block bg-[#24B960] rounded-md p-3 max-w-full">
+            <div class="text-sm inline-block bg-accent-primary rounded-md p-3 max-w-full">
               <div class="wrap-anywhere text-white">
                 <MarkdownViewer :text="item.displayContent ?? item.content" />
               </div>
@@ -59,7 +59,7 @@
           v-model:attachmentStorage="contextAttachmentStorage"
         />
       </div>
-      <div class="border-[#E4E4E7] border rounded-md bg-[#E9E9EC]">
+      <div class="border-border-chat-input border rounded-md bg-bg-secondary">
         <div>
           <ModelSelector
             containerClass="h-[30px] pl-3"
@@ -68,12 +68,12 @@
             triggerStyle="ghost"
           />
         </div>
-        <div class="gap-1 flex relative border-[#E4E4E7] border rounded-md bg-white px-3 pt-2 pb-9 -m-px max-h-36">
+        <div class="gap-1 flex relative bg-bg-chat-input rounded-md px-3 pt-2 pb-9 max-h-36">
           <ScrollContainer
             class="overflow-hidden w-full"
             :arrivalShadow="{
-              top: { color: '#FFFFFF', size: 12, offset: 8 },
-              bottom: { color: '#FFFFFF', size: 12, offset: 8 }
+              top: { color: 'var(--color-bg-primary', size: 12, offset: 8 },
+              bottom: { color: 'var(--color-bg-primary', size: 12, offset: 8 }
             }"
           >
             <div class="h-max min-h-[48px] place-items-center">
@@ -106,18 +106,18 @@
               <Button
                 v-if="chat.isAnswering()"
                 variant="secondary"
-                class="size-6 rounded-md flex items-center justify-center hover:bg-[#E4E7EB]/80 bg-[#E4E7EB] cursor-pointer shadow-none"
+                class="size-6 rounded-md flex items-center justify-center hover:bg-[color:var(--color-border-strong)]/80 bg-[var(--color-border-strong)] cursor-pointer shadow-none"
                 @click="onStop"
               >
                 <IconStop class="size-[15px] text-white" />
               </Button>
               <button
                 v-else
-                :class="classNames('size-6 rounded-md flex items-center justify-center', allowAsk ? 'hover:bg-[#24B960]/80 bg-[#24B960] cursor-pointer' : 'cursor-not-allowed')"
+                :class="classNames('size-6 rounded-md flex items-center justify-center', allowAsk ? 'hover:bg-accent-primary-hover bg-accent-primary cursor-pointer' : 'cursor-not-allowed')"
                 :disabled="!allowAsk"
                 @click="onSubmit"
               >
-                <IconSendFill :class="classNames('size-[15px]', allowAsk ? 'text-white' : 'text-[#9EA3A8]')" />
+                <IconSendFill :class="classNames('size-[15px]', allowAsk ? 'text-white' : 'text-text-quaternary')" />
               </button>
             </div>
           </div>
diff --git a/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue b/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
index 26ef3734..716cca60 100644
--- a/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
+++ b/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
@@ -3,8 +3,8 @@
     :class="[
       'flex items-center justify-between p-2 rounded-lg cursor-pointer transition-colors group',
       isCurrent
-        ? 'bg-white hover:bg-white/80'
-        : 'bg-transparent hover:bg-white/80'
+        ? 'bg-bg-clickable hover:bg-bg-hover'
+        : 'bg-transparent hover:bg-bg-hover'
     ]"
     @click="handleClick"
   >
@@ -14,14 +14,14 @@
         v-if="isPinned && !isEditing"
         class="flex-shrink-0"
       >
-        <IconStarFilled class="w-4 h-4 text-[#F7C103] fill-current" />
+        <IconStarFilled class="w-4 h-4 text-text-warning fill-current" />
       </div>
 
       <!-- Chat Title -->
       <div class="flex-1 min-w-0 px-1 py-0.5">
         <div
           v-if="!isEditing"
-          class="text-[13px] font-medium text-black truncate"
+          class="text-[13px] font-medium text-text-primary truncate"
         >
           {{ chat.title || t('chat_history.untitled_chat') }}
         </div>
@@ -34,7 +34,7 @@
             v-model="editTitle"
             :maxlength="MAX_TITLE_LENGTH"
             wrapperClass="w-full"
-            class="w-full rounded-md px-2 py-1.5 text-[13px]"
+            class="w-full rounded-md px-2 py-1.5 text-[13px] text-text-primary"
             @blur="handleSave"
             @keydown.enter="handleSave"
             @keydown.escape="handleCancel"
@@ -80,31 +80,31 @@
         <!-- Dropdown Menu -->
         <div
           v-if="props.isMenuOpen"
-          class="absolute right-0 mt-3 p-1 bg-white border border-gray-200 rounded-lg shadow-lg z-30"
+          class="absolute right-0 mt-3 p-1 bg-bg-primary border border-border-light rounded-lg shadow-01 z-30"
         >
           <button
-            class="w-full px-2 py-1.5 text-left text-[13px] text-foreground-base hover:bg-gray-100 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
+            class="w-full px-2 py-1.5 text-left text-[13px] text-text-primary hover:bg-bg-hover flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
             @click.stop="handleRename"
           >
             <IconEditPencil class="w-4 h-4" />
             {{ t('chat_history.rename') }}
           </button>
           <button
-            class="w-full px-2 py-1.5 text-left text-[13px] text-foreground-base hover:bg-gray-100 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
+            class="w-full px-2 py-1.5 text-left text-[13px] text-text-primary hover:bg-bg-hover flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
             @click.stop="handleToggleStar"
           >
             <IconStarFilled
               v-if="!isPinned"
-              class="w-4 h-4 text-[#F7C103] fill-current"
+              class="w-4 h-4 text-text-warning fill-current"
             />
             <IconStarOutline
               v-else
-              class="w-4 h-4 text-[#F7C103]"
+              class="w-4 h-4 text-text-warning"
             />
             {{ isPinned ? t('chat_history.unpin') : t('chat_history.pin') }}
           </button>
           <button
-            class="w-full px-2 py-1.5 text-left text-[13px] text-[#992121] hover:bg-red-50 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
+            class="w-full px-2 py-1.5 text-left text-[13px] text-text-critical hover:bg-[color:var(--color-danger)]/10 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
             @click.stop="handleDelete"
           >
             <IconTrash class="w-4 h-4" />
diff --git a/entrypoints/sidepanel/components/ChatHistory/index.vue b/entrypoints/sidepanel/components/ChatHistory/index.vue
index 060f020d..141ce62c 100644
--- a/entrypoints/sidepanel/components/ChatHistory/index.vue
+++ b/entrypoints/sidepanel/components/ChatHistory/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col bg-[#F5F6FB] relative">
+  <div class="h-full flex flex-col bg-bg-app relative">
     <!-- Transparent overlay when menu is open -->
     <div
       v-if="openMenuChatId"
@@ -11,8 +11,8 @@
     <ScrollContainer
       class="w-full h-full overflow-hidden"
       :arrivalShadow="{
-        top: { color: '#F5F6FB', size: 48 },
-        bottom: { color: '#F5F6FB', size: 48 }
+        top: { color: 'var(--color-bg-app)', size: 48 },
+        bottom: { color: 'var(--color-bg-app)', size: 48 }
       }"
     >
       <div class="px-4 py-2 space-y-2">
@@ -72,7 +72,7 @@
       <!-- Empty State -->
       <div
         v-if="recentChats.length === 0 && pinnedChats.length === 0"
-        class="text-center text-[#9EA3A8] mt-[30vh]"
+        class="text-center text-text-quaternary mt-[30vh]"
       >
         <div class="flex flex-col items-center h-full justify-center">
           <IconChatEmpty class="w-10 mb-6" />
diff --git a/entrypoints/sidepanel/components/Main.vue b/entrypoints/sidepanel/components/Main.vue
index 2cc69a76..9a311257 100644
--- a/entrypoints/sidepanel/components/Main.vue
+++ b/entrypoints/sidepanel/components/Main.vue
@@ -2,10 +2,10 @@
   <div>
     <div
       ref="topRef"
-      class="bg-[#F5F6FB]"
+      class="bg-bg-app"
     >
       <div class="h-12 px-4 flex items-center justify-between w-full">
-        <div class="flex items-center gap-2 grow overflow-hidden max-w-[70%]">
+        <div class="flex items-center gap-2 grow overflow-hidden max-w-[70%] text-text-primary">
           <div class="size-6 flex items-center justify-center">
             <Logo
               class="font-bold text-base"
@@ -15,7 +15,7 @@
           <!-- Show chat history button -->
           <Tooltip :content="t('tooltips.chat_history')">
             <div
-              class="p-1 cursor-pointer hover:text-gray-500"
+              class="p-1 cursor-pointer hover:text-text-tertiary"
               @click="onOpenChatHistory"
             >
               <IconChatHistory
@@ -27,7 +27,7 @@
           <!-- Show new chat button -->
           <Tooltip :content="t('tooltips.new_chat')">
             <div
-              class="p-1 cursor-pointer hover:text-gray-500"
+              class="p-1 cursor-pointer hover:text-text-tertiary"
               @click="onNewChat"
             >
               <IconNewChat
@@ -36,10 +36,10 @@
             </div>
           </Tooltip>
         </div>
-        <div class="flex items-center gap-2 shrink-0">
+        <div class="flex items-center gap-2 shrink-0 text-text-primary">
           <Tooltip :content="t('tooltips.settings')">
             <div
-              class="p-1 cursor-pointer hover:text-gray-500"
+              class="p-1 cursor-pointer hover:text-text-tertiary"
               @click="onClickSetting"
             >
               <IconSetting
@@ -77,10 +77,10 @@
       >
         <!-- Drawer content with header -->
         <Motion
-          class="absolute right-0 top-0 bottom-0 w-full bg-white shadow-xl"
+          class="absolute right-0 top-0 bottom-0 w-full bg-bg-primary shadow-01"
         >
           <!-- Header -->
-          <div class="bg-[#F5F6FB]">
+          <div class="bg-bg-app text-text-primary">
             <div class="h-12 px-4 flex items-center justify-between w-full">
               <div class="flex items-center gap-2 grow overflow-hidden">
                 <div
@@ -93,7 +93,7 @@
                   </div>
                   <Tooltip :content="t('tooltips.back')">
                     <div
-                      class="p-1 cursor-pointer hover:text-gray-500"
+                      class="p-1 cursor-pointer hover:text-text-tertiary"
                       @click="onCloseChatHistory"
                     >
                       <IconBack class="size-4 shrink-0" />
@@ -102,7 +102,7 @@
                   <!-- Show new chat button -->
                   <Tooltip :content="t('tooltips.new_chat')">
                     <div
-                      class="p-1 cursor-pointer hover:text-gray-500"
+                      class="p-1 cursor-pointer hover:text-text-tertiary"
                       @click="() => {
                         onNewChat()
                         onCloseChatHistory()
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue b/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
index 48614fad..9118ad6e 100644
--- a/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
@@ -19,13 +19,13 @@
       <template #body>
         <div
           v-if="!pulling"
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.description') }}
         </div>
         <div
           v-else
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.downloading') }}
         </div>
@@ -34,13 +34,13 @@
           class="flex gap-2 items-stretch flex-col mt-1"
         >
           <ProgressBar :progress="pulling.completed / (pulling.total || 1)" />
-          <div class="text-xs text-gray-500 flex justify-between items-center">
+          <div class="text-xs text-text-tertiary flex justify-between items-center">
             <div>{{ formatSize(pulling.completed) }}</div>
             <div>{{ pulling.total ? formatSize(pulling.total) : '-' }}</div>
           </div>
         </div>
         <div v-if="pulling?.error">
-          <div class="text-red-500 text-xs flex items-center gap-1">
+          <div class="text-text-critical text-xs flex items-center gap-1">
             <IconWarning class="w-3 h-3 shrink-0" />
             <span class="wrap-anywhere">{{ pulling.error }}</span>
           </div>
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue b/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
index ca3dc26d..a11b6df8 100644
--- a/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="px-3 py-3 flex flex-col gap-3 items-stretch rounded-lg bg-white"
+    class="px-3 py-3 flex flex-col gap-3 items-stretch rounded-lg bg-bg-primary"
   >
     <div class="text-xs font-bold flex items-center justify-center">
       <StatusBadge
@@ -27,7 +27,7 @@
         v-model="selectedModel"
         class="mt-2"
         containerClass="h-8 py-2"
-        dropdownClass="text-xs text-black w-60"
+        dropdownClass="text-xs text-text-primary w-60"
         dropdownAlign="left"
         :options="options"
       >
@@ -62,7 +62,7 @@
               </div>
               <span
                 v-if="option.value?.size"
-                class="text-gray-500 font-light whitespace-nowrap"
+                class="text-text-tertiary font-light whitespace-nowrap"
               >
                 ({{ formatSize(option.value.size) }})
               </span>
@@ -96,7 +96,7 @@
           <a
             :href="tutorialUrl"
             target="_blank"
-            class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
+            class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
           >
             {{ t('onboarding.guide.learn_about_models') }}
           </a>
@@ -106,7 +106,7 @@
           <a
             :href="searchUrl"
             target="_blank"
-            class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
+            class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
           >
             {{ t('onboarding.guide.browse_more_models') }}
           </a>
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
index a107d7dc..db014aa1 100644
--- a/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
@@ -2,7 +2,7 @@
   <div
     class="px-4 py-4 flex flex-col gap-3 items-stretch"
   >
-    <div class="text-[#24B960] font-medium text-xs">
+    <div class="text-text-success-strong font-medium text-xs">
       {{ t('onboarding.guide.step1') }}
     </div>
     <div class="shrink-0 grow-0 text-[15px] font-semibold flex flex-col gap-4">
@@ -11,11 +11,11 @@
       </div>
       <div
         class="flex items-center justify-between gap-3 min-h-13 py-1 px-4 rounded-lg cursor-pointer border-2 text-[15px]"
-        :class="[selectedEndpointType === 'ollama' ? 'border-[#24B960]' : 'border-[#E4E4E7]']"
+        :class="[selectedEndpointType === 'ollama' ? 'border-[color:var(--color-border-accent)]' : 'border-border-strong']"
         @click="selectedEndpointType = 'ollama'"
       >
         <div class="whitespace-nowrap flex items-center gap-2">
-          <div class="size-5 rounded-md flex items-center justify-center overflow-hidden shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]">
+          <div class="size-5 rounded-md flex items-center justify-center overflow-hidden shadow-02 text-text-primary">
             <IconOllamaLogo class="size-4" />
           </div>
           <span class="font-medium text-base">
@@ -28,11 +28,11 @@
       </div>
       <div
         class="flex items-center justify-between gap-3 min-h-13 py-1 px-4 rounded-lg cursor-pointer border-2 text-[15px]"
-        :class="[selectedEndpointType === 'lm-studio' ? 'border-[#24B960]' : 'border-[#E4E4E7]']"
+        :class="[selectedEndpointType === 'lm-studio' ? 'border-[color:var(--color-border-accent)]' : 'border-border-strong']"
         @click="selectedEndpointType = 'lm-studio'"
       >
         <div class="whitespace-nowrap flex items-center gap-2">
-          <div class="size-5 rounded-md flex items-center justify-center overflow-hidden shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]">
+          <div class="size-5 rounded-md flex items-center justify-center overflow-hidden shadow-02">
             <img
               :src="IconLMStudioLogo"
               class="size-5"
@@ -111,7 +111,7 @@
             <div class="flex gap-1">
               <span>{{ t('onboarding.guide.already_installed', { endpointType: selectedEndpointName }) }}</span>
               <button
-                class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
+                class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
                 @click="onClickOpenSettings"
               >
                 {{ t('onboarding.guide.setup') }}
@@ -125,7 +125,7 @@
               <a
                 :href="tutorialUrl"
                 target="_blank"
-                class="underline whitespace-nowrap hover:text-gray-800 cursor-pointer"
+                class="underline whitespace-nowrap hover:text-text-primary cursor-pointer text-icon-link"
               >
                 {{ t('onboarding.guide.follow_our_tutorial') }}
               </a>
diff --git a/entrypoints/sidepanel/components/Onboarding/SloganCard.vue b/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
index 6651747f..c7bfda75 100644
--- a/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center justify-start bg-gradient-to-b from-[#D5F4E1] to-[#FFFFFF] to-40% rounded-lg overflow-hidden pb-4">
+  <div class="flex flex-col items-center justify-start bg-gradient-to-b from-[var(--color-gradient-onboarding-start)] to-[var(--color-gradient-onboarding-end)] to-40% rounded-lg overflow-hidden pb-4">
     <div class="text-center max-w-full">
       <ImageElements class="max-w-full h-auto" />
       <div class="font-semibold text-sm mt-5">
diff --git a/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
index 4f50de41..04079613 100644
--- a/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-6 flex flex-col gap-[10px] items-stretch bg-[#F2F2F2] rounded-lg m-[11px]"
+    class="p-6 flex flex-col gap-[10px] items-stretch bg-bg-neutral-subtle rounded-lg m-[11px]"
   >
     <div class="text-[15px] font-semibold flex items-center gap-1">
       {{ t('onboarding.webllm_tutorial.title') }}
@@ -36,7 +36,7 @@
     </Button>
     <div
       v-if="!supportWebLLM.supported"
-      class="text-red-500 text-[10px] flex items-center gap-2 justify-start"
+      class="text-text-critical text-[10px] flex items-center gap-2 justify-start"
     >
       <IconWarning class="w-3 h-3" />
       {{ t('onboarding.webllm_tutorial.not_support_webllm') }}
diff --git a/entrypoints/sidepanel/components/Onboarding/index.vue b/entrypoints/sidepanel/components/Onboarding/index.vue
index c68fba1a..a32f3478 100644
--- a/entrypoints/sidepanel/components/Onboarding/index.vue
+++ b/entrypoints/sidepanel/components/Onboarding/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-if="isShow"
-    class="bg-[#F5F6FB]"
+    class="bg-bg-app"
   >
     <div ref="topRef">
       <div class="h-11 px-3 flex items-center justify-start">
         <div class="text-center" />
         <div class="absolute right-4 h-full flex items-center gap-4">
           <IconClose
-            class="w-4 h-4 cursor-pointer hover:text-gray-500"
+            class="w-4 h-4 cursor-pointer hover:text-text-tertiary"
             @click="onModelDownloaderFinished"
           />
         </div>
@@ -30,7 +30,7 @@
         <SloganCard />
         <div
           v-if="panel === 'tutorial'"
-          class="bg-white rounded-lg overflow-hidden grow flex flex-col justify-between font"
+          class="bg-bg-primary rounded-lg overflow-hidden grow flex flex-col justify-between font"
         >
           <BackendSelectionTutorialCard
             @installed="onBackendInstalled"
diff --git a/entrypoints/sidepanel/utils/chat/side-effects.ts b/entrypoints/sidepanel/utils/chat/side-effects.ts
index edaa1e70..e03b0980 100644
--- a/entrypoints/sidepanel/utils/chat/side-effects.ts
+++ b/entrypoints/sidepanel/utils/chat/side-effects.ts
@@ -12,7 +12,7 @@ async function appendOrUpdateQuickActionsIfNeeded(chat: Chat) {
   const { t } = await useGlobalI18n()
   const userConfig = await getUserConfig()
   const actionsRef = userConfig.chat.quickActions.actions.toRef()
-  const icons = ['summarizeBoxed', 'highlightBoxed', 'searchBoxed'] as const
+  const icons = ['summarizeAction', 'highlightAction', 'searchAction'] as const
   const actions: ActionMessageV1['actions'] = actionsRef.value.map((action, index) => {
     const defaultTitle = t(actionsRef.defaultValue[index]?.defaultTitleKey)
     return {
diff --git a/entrypoints/sidepanel/utils/chat/texts.ts b/entrypoints/sidepanel/utils/chat/texts.ts
index d403b01e..284a2a39 100644
--- a/entrypoints/sidepanel/utils/chat/texts.ts
+++ b/entrypoints/sidepanel/utils/chat/texts.ts
@@ -8,6 +8,6 @@ export const welcomeMessage = (t: ComposerTranslation) => {
   return `
 ${makeParagraph(t('onboarding.welcome_msg.title'), { class: 'text-base font-normal' })}
 
-${makeContainer(t('onboarding.welcome_msg.body'), { class: 'text-xs text-[#596066]' })}
+${makeContainer(t('onboarding.welcome_msg.body'), { class: 'text-xs text-text-secondary' })}
 `.trim()
 }
diff --git a/entrypoints/sidepanel/utils/chat/tool-calls/index.ts b/entrypoints/sidepanel/utils/chat/tool-calls/index.ts
index f078768d..1d4ffc3c 100644
--- a/entrypoints/sidepanel/utils/chat/tool-calls/index.ts
+++ b/entrypoints/sidepanel/utils/chat/tool-calls/index.ts
@@ -62,8 +62,14 @@ export const executeSearchOnline: AgentToolCallExecute<'search_online'> = async
   taskMsg.details = {
     content: filteredLinks.map((link) => {
       const faviconUrl = link.favicon?.startsWith('data:') ? link.favicon : undefined
-      const faviconPart = faviconUrl ? makeRawHtmlTag('img', '', { src: faviconUrl, style: 'width: 16px; height: 16px;' }) : makeIcon('web', { color: '#596066' })
-      const linkPart = makeRawHtmlTag('a', link.title || link.url, { href: link.url, target: '_blank', style: 'color: #596066; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' })
+      const faviconPart = faviconUrl
+        ? makeRawHtmlTag('img', '', { src: faviconUrl, style: 'width: 16px; height: 16px;' })
+        : makeIcon('web', { color: 'var(--color-text-secondary, #596066)' })
+      const linkPart = makeRawHtmlTag('a', link.title || link.url, {
+        href: link.url,
+        target: '_blank',
+        style: 'color: var(--color-text-secondary, #596066); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;',
+      })
       return makeRawHtmlTag('div', `${faviconPart} ${linkPart}`, { style: 'display: flex; align-items: center; gap: 8px;' })
     }).join('\n'),
     expanded: true,
diff --git a/entrypoints/sidepanel/utils/markdown/content.ts b/entrypoints/sidepanel/utils/markdown/content.ts
index 7bddba67..cb0f199c 100644
--- a/entrypoints/sidepanel/utils/markdown/content.ts
+++ b/entrypoints/sidepanel/utils/markdown/content.ts
@@ -2,13 +2,16 @@ import IconDownload from '@/assets/icons/md-download.svg?raw'
 import IconEdit from '@/assets/icons/md-edit.svg?raw'
 import IconFileSuccess from '@/assets/icons/md-file-success.svg?raw'
 import IconFind from '@/assets/icons/md-find.svg?raw'
+import IconHighlightAction from '@/assets/icons/md-highlight-action.svg?raw'
 import IconHighlightBoxed from '@/assets/icons/md-highlight-boxed.svg?raw'
 import IconLink from '@/assets/icons/md-link.svg?raw'
 import IconQuickModified from '@/assets/icons/md-quick-action-modified.svg?raw'
 import IconSearch from '@/assets/icons/md-search.svg?raw'
+import IconSearchAction from '@/assets/icons/md-search-action.svg?raw'
 import IconSearchBoxed from '@/assets/icons/md-search-boxed.svg?raw'
 import IconSearchColored from '@/assets/icons/md-search-colored.svg?raw'
 import IconStar from '@/assets/icons/md-star.svg?raw'
+import IconSummarizeAction from '@/assets/icons/md-summarize-action.svg?raw'
 import IconSummarizeBoxed from '@/assets/icons/md-summarize-boxed.svg?raw'
 import IconTick from '@/assets/icons/md-tick.svg?raw'
 import IconTickColored from '@/assets/icons/md-tick-colored.svg?raw'
@@ -33,6 +36,9 @@ const iconMap = {
   translationBoxed: IconTranslationBoxed,
   writingBoxed: IconWritingBoxed,
   highlightBoxed: IconHighlightBoxed,
+  summarizeAction: IconSummarizeAction,
+  highlightAction: IconHighlightAction,
+  searchAction: IconSearchAction,
   edit: IconEdit,
   quickActionModifiedBoxed: IconQuickModified,
   searchBoxed: IconSearchBoxed,
diff --git a/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts b/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts
index fef1f7bb..8a3aa9cf 100644
--- a/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts
+++ b/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts
@@ -354,18 +354,24 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.tintedHighlight: {
-      element.style.color = isBGDark ? '#A8B4FF' : '#2724D8'
+      element.style.color = isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #2724D8)'
       break
     }
     case TranslationDisplayStyle.overlay: {
-      element.style.backgroundColor = isBGDark ? 'rgba(255, 255, 255, 0.16)' : 'rgba(0,0,0,0.08)'
+      element.style.backgroundColor = isBGDark
+        ? 'var(--color-overlay-subtle-on-dark, rgba(255, 255, 255, 0.16))'
+        : 'var(--color-overlay-subtle-on-light, rgba(0, 0, 0, 0.08))'
       element.style.borderRadius = '8px'
       element.style.padding = '8px 12px'
       break
     }
     case TranslationDisplayStyle.tintedOverlay: {
       const innerElement = document.createElement('span')
-      innerElement.style.backgroundColor = isBGDark ? 'rgba(200, 200, 200, 0.3)' : 'rgba(74, 101, 243, 0.1)'
+      innerElement.style.backgroundColor = isBGDark
+        ? 'var(--color-translation-overlay-dark, rgba(200, 200, 200, 0.3))'
+        : 'var(--color-translation-overlay-light, rgba(74, 101, 243, 0.1))'
       innerElement.innerHTML = element.innerHTML
       innerElement.classList.add(translationTargetInnerClass)
       element.innerHTML = ''
@@ -373,11 +379,15 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.wavyLine: {
-      applyUnderlineStyle(element, 'wavy', isBGDark ? '#A8B4FF' : '#322EE5')
+      applyUnderlineStyle(element, 'wavy', isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #322EE5)')
       break
     }
     case TranslationDisplayStyle.dashedLine: {
-      applyUnderlineStyle(element, 'dashed', isBGDark ? 'rgba(255, 255, 255, 0.56)' : 'rgba(0,0,0,0.32)')
+      applyUnderlineStyle(element, 'dashed', isBGDark
+        ? 'var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : 'var(--color-translation-underline-light, rgba(0,0,0,0.32))')
       break
     }
     case TranslationDisplayStyle.divider: {
@@ -386,7 +396,9 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       divider.classList.add(translationTargetDividerClass)
       divider.style.width = '48px'
       divider.style.marginTop = '8px'
-      divider.style.borderBottom = isBGDark ? '1px dashed rgba(255, 255, 255, 0.56)' : '1px dashed rgba(0, 0, 0, 0.32)'
+      divider.style.borderBottom = isBGDark
+        ? '1px dashed var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : '1px dashed var(--color-translation-underline-light, rgba(0, 0, 0, 0.32))'
 
       element.before(divider)
       break
diff --git a/locales/de.json b/locales/de.json
index c53a5321..4bed1a13 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "Schnittstelle",
       "interface_language": "Schnittstellensprache",
-      "interface_language_desc": "Wählen Sie die Anzeigesprache für die NativeMind-Benutzeroberfläche"
+      "theme": "Design",
+      "theme_light": "Hell",
+      "theme_dark": "Dunkel",
+      "theme_system": "System"
     },
     "header": {
       "starts_on_github": "Sterne auf GitHub",
diff --git a/locales/en.json b/locales/en.json
index 1e51300b..bb7f63b7 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -189,7 +189,10 @@
     "interface": {
       "title": "Interface",
       "interface_language": "Interface Language",
-      "interface_language_desc": "Choose the display language for NativeMind interface"
+      "theme": "Theme",
+      "theme_light": "Light",
+      "theme_dark": "Dark",
+      "theme_system": "System"
     },
     "header": {
       "starts_on_github": "Stars on GitHub",
diff --git a/locales/es.json b/locales/es.json
index 7419190f..407df534 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -347,7 +347,10 @@
     "interface": {
       "title": "Interfaz",
       "interface_language": "Idioma de la Interfaz",
-      "interface_language_desc": "Elige el idioma de visualización para la interfaz de NativeMind"
+      "theme": "Tema",
+      "theme_light": "Claro",
+      "theme_dark": "Oscuro",
+      "theme_system": "Sistema"
     },
     "header": {
       "starts_on_github": "Estrellas en GitHub",
diff --git a/locales/fr.json b/locales/fr.json
index e7163807..c4af18c9 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "Interface",
       "interface_language": "Langue d'interface",
-      "interface_language_desc": "Choisissez la langue d'affichage pour l'interface NativeMind"
+      "theme": "Thème",
+      "theme_light": "Clair",
+      "theme_dark": "Sombre",
+      "theme_system": "Système"
     },
     "header": {
       "starts_on_github": "Étoiles sur GitHub",
diff --git a/locales/id.json b/locales/id.json
index 4b93d891..62f80ebd 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "Antarmuka",
       "interface_language": "Bahasa Antarmuka",
-      "interface_language_desc": "Pilih bahasa tampilan untuk antarmuka NativeMind"
+      "theme": "Tema",
+      "theme_light": "Terang",
+      "theme_dark": "Gelap",
+      "theme_system": "Sistem"
     },
     "header": {
       "starts_on_github": "Bintang di GitHub",
diff --git a/locales/ja.json b/locales/ja.json
index afb94cc2..62204399 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "インターフェース",
       "interface_language": "インターフェース言語",
-      "interface_language_desc": "NativeMindインターフェースの表示言語を選択してください"
+      "theme": "テーマ",
+      "theme_light": "ライト",
+      "theme_dark": "ダーク",
+      "theme_system": "システム"
     },
     "header": {
       "starts_on_github": "GitHubでスター",
diff --git a/locales/ko.json b/locales/ko.json
index 3e24ac01..f540d346 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "인터페이스",
       "interface_language": "인터페이스 언어",
-      "interface_language_desc": "NativeMind 인터페이스의 표시 언어를 선택하세요"
+      "theme": "테마",
+      "theme_light": "라이트",
+      "theme_dark": "다크",
+      "theme_system": "시스템"
     },
     "header": {
       "starts_on_github": "GitHub에서 별점 주기",
diff --git a/locales/pt.json b/locales/pt.json
index cd988996..80f399ca 100644
--- a/locales/pt.json
+++ b/locales/pt.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "Interface",
       "interface_language": "Idioma da Interface",
-      "interface_language_desc": "Escolha o idioma de exibição para a interface do NativeMind"
+      "theme": "Tema",
+      "theme_light": "Claro",
+      "theme_dark": "Escuro",
+      "theme_system": "Sistema"
     },
     "header": {
       "starts_on_github": "Estrelas no GitHub",
diff --git a/locales/ru.json b/locales/ru.json
index 67230d33..f227ef08 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "Интерфейс",
       "interface_language": "Язык интерфейса",
-      "interface_language_desc": "Выберите язык отображения для интерфейса NativeMind"
+      "theme": "Тема",
+      "theme_light": "Светлая",
+      "theme_dark": "Темная",
+      "theme_system": "Системная"
     },
     "header": {
       "starts_on_github": "Звезды на GitHub",
diff --git a/locales/th.json b/locales/th.json
index e9973bdc..b14dc42d 100644
--- a/locales/th.json
+++ b/locales/th.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "อินเทอร์เฟซ",
       "interface_language": "ภาษาของอินเทอร์เฟซ",
-      "interface_language_desc": "เลือกภาษาที่แสดงสำหรับส่วนติดต่อผู้ใช้ NativeMind"
+      "theme": "ธีม",
+      "theme_light": "สว่าง",
+      "theme_dark": "มืด",
+      "theme_system": "ระบบ"
     },
     "header": {
       "starts_on_github": "ให้ดาวบน GitHub",
diff --git a/locales/vi.json b/locales/vi.json
index e058eeea..8961408d 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "Giao diện",
       "interface_language": "Ngôn ngữ giao diện",
-      "interface_language_desc": "Chọn ngôn ngữ hiển thị cho giao diện NativeMind"
+      "theme": "Giao diện",
+      "theme_light": "Sáng",
+      "theme_dark": "Tối",
+      "theme_system": "Hệ thống"
     },
     "header": {
       "starts_on_github": "Sao trên GitHub",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index c0debea8..b7c68d34 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -179,7 +179,10 @@
     "interface": {
       "title": "界面",
       "interface_language": "界面语言",
-      "interface_language_desc": "选择 NativeMind 界面的显示语言"
+      "theme": "主题",
+      "theme_light": "浅色",
+      "theme_dark": "深色",
+      "theme_system": "系统"
     },
     "header": {
       "starts_on_github": "Stars on GitHub",
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index 1cd62325..8ceb6575 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -322,7 +322,10 @@
     "interface": {
       "title": "介面",
       "interface_language": "介面語言",
-      "interface_language_desc": "選擇 NativeMind 介面的顯示語言"
+      "theme": "主題",
+      "theme_light": "淺色",
+      "theme_dark": "深色",
+      "theme_system": "系統"
     },
     "header": {
       "starts_on_github": "Stars on GitHub",
diff --git a/styles/style.css b/styles/style.css
index bdeffc77..c67d7cbd 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -71,26 +71,221 @@
 
   --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
 
-  /* Colors only used in UI component should not be used in business component */
+  /* Light mode colors */
   --color-text-primary: #1f2326;
   --color-text-secondary: #596066;
-  --color-text-tertiary: #747a80;
+  --color-text-tertiary: #71717a;
   --color-text-placeholder: #aeb5bd;
   --color-text-disabled: #aeb5bd;
   --color-text-quaternary: #9ea3a8;
+  --color-text-info: #1565c0;
+  --color-text-success-strong: #03943d;
+  --color-text-critical: #992121;
+  --color-text-warning: #f7c103;
+  --color-text-caution: #fda58f;
+  --color-text-link-hover: #0b6bbf;
+
+  --color-icon-link: #0d80f2;
+  --color-icon-muted: #71717a;
+  --color-icon-warning: #f7c103;
+  --color-icon-caution: #fda58f;
+  --color-icon-quick-action: #596066;
+
+  --color-bg-app: #f5f6fb;
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #e9e9ec;
   --color-bg-component: hsla(0, 0%, 98%, 1);
-  --color-icon-link: #0f62fe;
-  --color-danger: #bf2a2a;
+  --color-bg-tertiary: #fafafa;
+  --color-bg-tag: #f4f4f5;
+  --color-bg-selection: #dfe1e5;
+  --color-bg-hover: #eaecef;
+  --color-bg-divider: #747a80;
+
+  --color-bg-info-subtle: #e5f3ff;
+  --color-bg-success-subtle: #dcffea;
+  --color-bg-warning-subtle: #fbf8f4;
+  --color-bg-overlay-contrast: #27272a;
+  --color-bg-neutral-subtle: #f2f2f2;
+
+  /* Specific colors */
+  --color-bg-clickable: #ffffff;
+  --color-bg-quick-action: #f5f6f7;
+  --color-bg-chat-input: #ffffff;
+
+  --color-foreground-base: #18181b;
+  --color-foreground-contrast: #000000;
+
+  --color-border: #e5e7eb;
+  --color-border-light: #0000001a;
+  --color-border-strong: #e4e4e7;
+  --color-border-selection: #24b96080;
+  --color-border-accent: #24b960;
+  --color-border-critical: #e11d48;
+  --color-border-critical-soft: #e11d4826;
+  --color-border-warning: #e53232;
+  --color-border-disabled: #a0a0a0;
+  --color-border-hairline: #0000000d;
+  --color-border-overlay: #18181b3d;
+  --color-border-quick-action: #0000001f;
+  --color-border-chat-input: #e4e4e7;
+  --color-divider: #0000001a;
+
+  --color-surface-disabled: #cfd4d9;
+
+  --color-overlay-scrim: #0000008b;
+  --color-overlay-muted: #00000017;
+  --color-overlay-strong: #00000066;
+  --color-overlay-subtle-on-light: rgba(0, 0, 0, 0.08);
+  --color-overlay-subtle-on-dark: rgba(255, 255, 255, 0.16);
+  --color-overlay-muted-on-dark: rgba(255, 255, 255, 0.32);
+
+  --color-shadow-soft: #0000000a;
+  --color-shadow-medium: #00000014;
+  --color-shadow-strong: #0000001f;
+  --color-shadow-contrast: #00000066;
+  --color-shadow-inset-highlight: #ffffff33;
+  --color-shadow-ambient: rgba(0, 0, 0, 0.2);
+
+  --color-accent-primary: #24b960;
+  --color-accent-primary-hover: #089641;
+  --color-accent-primary-shadow: #0e6b33;
+  --color-accent-primary-disabled: #8a8a8a;
+  --color-accent-success: #60c959;
+
   --color-success: #60c959;
+  --color-danger: #bf2a2a;
   --color-quaternary: #bdc2c7;
 
-  --color-bg-hover: #eaecef;
+  --color-gradient-onboarding-start: #d5f4e1;
+  --color-gradient-onboarding-end: #ffffff;
 
-  --color-foreground-base: #18181b;
+  --color-translation-highlight: #2724d8;
+  --color-translation-highlight-contrast: #a8b4ff;
+  --color-translation-underline-light: rgba(0, 0, 0, 0.32);
+  --color-translation-underline-dark: rgba(255, 255, 255, 0.56);
+  --color-translation-overlay-light: rgba(74, 101, 243, 0.1);
+  --color-translation-overlay-dark: rgba(200, 200, 200, 0.3);
+
+  --color-scroll-thumb: #e4e4e7;
+  --color-mask-disabled: #ffffffaf;
+  --color-arrival-shadow: #92929225;
+  --color-loading-track: #222;
+  --color-progress-accent: #24b960;
+
+  --shadow-01: 0px 8px 16px 0px var(--color-shadow-medium),
+    0px 4px 8px 0px var(--color-shadow-medium),
+    0px 0px 0px 1px var(--color-shadow-medium);
+  --shadow-02: 0px 0px 0px 1px var(--color-shadow-medium),
+    0px 1px 2px 0px var(--color-shadow-strong);
+}
+
+/* Dark mode colors */
+.dark {
+  --color-text-primary: #f8f9fa;
+  --color-text-secondary: #eaecef;
+  --color-text-tertiary: #8b949e;
+  --color-text-placeholder: #6e7681;
+  --color-text-disabled: #6e7681;
+  --color-text-quaternary: #7d8590;
+  --color-text-info: #8ab4ff;
+  --color-text-success-strong: #56d364;
+  --color-text-critical: #f85149;
+  --color-text-warning: #ffb900;
+  --color-text-caution: #f7c103;
+  --color-text-link-hover: #78a6ff;
+
+  --color-icon-link: #58a6ff;
+  --color-icon-muted: #8b949e;
+  --color-icon-warning: #ffb900;
+  --color-icon-caution: #f7c103;
+  --color-icon-quick-action: #878c92;
+
+  --color-bg-app: #121212;
+  --color-bg-primary: #101010;
+  --color-bg-secondary: #212124;
+  --color-bg-component: #212124;
+  --color-bg-tertiary: #212124;
+  --color-bg-tag: #3f3f46;
+  --color-bg-selection: #212124;
+  --color-bg-hover: #2a2a2a;
+  --color-bg-divider: #878c92;
+
+  --color-bg-info-subtle: #033867;
+  --color-bg-success-subtle: #1b3c2a;
+  --color-bg-warning-subtle: #2f2313;
+  --color-bg-overlay-contrast: #1f2326;
+  --color-bg-neutral-subtle: #1f2326;
+
+  /* Specific colors */
+  --color-bg-clickable: #212124;
+  --color-bg-quick-action: #212124;
+  --color-bg-chat-input: #18181b;
+
+  --color-foreground-base: #f0f6fc;
+  --color-foreground-contrast: #ffffff;
+
+  --color-border: #2a2a2a;
+  --color-border-light: #212124;
+  --color-border-strong: #3c434d;
+  --color-border-selection: #24b96080;
+  --color-border-accent: #24b960;
+  --color-border-critical: #f85149;
+  --color-border-critical-soft: #f8514926;
+  --color-border-warning: #ffaf00;
+  --color-border-disabled: #3c434d;
+  --color-border-hairline: #262a31;
+  --color-border-overlay: #f8f9fa33;
+  --color-border-quick-action: #ffffff1f;
+  --color-border-chat-input: #232326;
+  --color-divider: #212124;
+
+  --color-surface-disabled: #2f363d;
+
+  --color-overlay-scrim: #000000bf;
+  --color-overlay-muted: rgba(255, 255, 255, 0.08);
+  --color-overlay-strong: #00000080;
+  --color-overlay-subtle-on-light: rgba(0, 0, 0, 0.24);
+  --color-overlay-subtle-on-dark: rgba(255, 255, 255, 0.16);
+  --color-overlay-muted-on-dark: rgba(255, 255, 255, 0.32);
+
+  --color-shadow-soft: #0000001f;
+  --color-shadow-medium: #ffffff14;
+  --color-shadow-strong: #0000001f;
+  --color-shadow-contrast: #0000008a;
+  --color-shadow-inset-highlight: #ffffff1a;
+  --color-shadow-ambient: rgba(0, 0, 0, 0.4);
+
+  --color-accent-primary: #20a655;
+  --color-accent-primary-hover: #089641;
+  --color-accent-primary-shadow: #0e6b33;
+  --color-accent-primary-disabled: #3c434d;
+  --color-accent-success: #56d364;
+
+  --color-success: #56d364;
+  --color-danger: #f85149;
+  --color-quaternary: #30363d;
+
+  --color-gradient-onboarding-start: #1b3125;
+  --color-gradient-onboarding-end: #161b22;
+
+  --color-translation-highlight: #a8b4ff;
+  --color-translation-highlight-contrast: #2724d8;
+  --color-translation-underline-light: rgba(255, 255, 255, 0.56);
+  --color-translation-underline-dark: rgba(0, 0, 0, 0.32);
+  --color-translation-overlay-light: rgba(200, 200, 200, 0.3);
+  --color-translation-overlay-dark: rgba(74, 101, 243, 0.1);
+
+  --color-scroll-thumb: #30363d;
+  --color-mask-disabled: rgba(13, 17, 23, 0.7);
+  --color-arrival-shadow: rgba(0, 0, 0, 0.32);
+  --color-loading-track: #30363d;
+  --color-progress-accent: #20a655;
 
-  --shadow-01: 0px 8px 16px 0px #00000014, 0px 4px 8px 0px #00000014,
-    0px 0px 0px 1px #00000014;
-  --shadow-02: 0px 0px 0px 1px #00000014, 0px 1px 2px 0px #0000001f;
+  --shadow-01: 0px 8px 16px 0px var(--color-shadow-medium),
+    0px 4px 8px 0px var(--color-shadow-medium),
+    0px 0px 0px 1px var(--color-shadow-medium);
+  --shadow-02: 0px 0px 0px 1px var(--color-shadow-medium),
+    0px 1px 2px 0px var(--color-shadow-strong);
 }
 
 .nativemind-style-boundary .scrollbar-hide {
diff --git a/tests/html/writing-tools/input.html b/tests/html/writing-tools/input.html
index e9d6bf6a..79169d04 100644
--- a/tests/html/writing-tools/input.html
+++ b/tests/html/writing-tools/input.html
@@ -11,7 +11,7 @@
   <div style="display: flex; flex-direction: column; gap: 10px; padding: 20px;">
     <input type="text" placeholder="Type here..." />
     <textarea placeholder="Type here..."></textarea>
-    <div contenteditable="true" style="border: 1px solid #ccc; padding: 10px; width: 300px; height: 100px;">
+    <div contenteditable="true" style="border: 1px solid var(--color-border, #ccc); padding: 10px; width: 300px; height: 100px;">
       This is a contenteditable div. You can type here.
     </div>
     <input type="password" placeholder="Password input" />
diff --git a/utils/icon.ts b/utils/icon.ts
index 07e175fc..4b84e6c4 100644
--- a/utils/icon.ts
+++ b/utils/icon.ts
@@ -2,13 +2,16 @@ import IconDownload from '@/assets/icons/md-download.svg?raw'
 import IconEdit from '@/assets/icons/md-edit.svg?raw'
 import IconFileSuccess from '@/assets/icons/md-file-success.svg?raw'
 import IconFind from '@/assets/icons/md-find.svg?raw'
+import IconHighlightAction from '@/assets/icons/md-highlight-action.svg?raw'
 import IconHighlightBoxed from '@/assets/icons/md-highlight-boxed.svg?raw'
 import IconLink from '@/assets/icons/md-link.svg?raw'
 import IconQuickModified from '@/assets/icons/md-quick-action-modified.svg?raw'
 import IconSearch from '@/assets/icons/md-search.svg?raw'
+import IconSearchAction from '@/assets/icons/md-search-action.svg?raw'
 import IconSearchBoxed from '@/assets/icons/md-search-boxed.svg?raw'
 import IconSearchColored from '@/assets/icons/md-search-colored.svg?raw'
 import IconStar from '@/assets/icons/md-star.svg?raw'
+import IconSummarizeAction from '@/assets/icons/md-summarize-action.svg?raw'
 import IconSummarizeBoxed from '@/assets/icons/md-summarize-boxed.svg?raw'
 import IconTick from '@/assets/icons/md-tick.svg?raw'
 import IconTickColored from '@/assets/icons/md-tick-colored.svg?raw'
@@ -39,6 +42,9 @@ export const iconMap = {
   translationBoxed: IconTranslationBoxed,
   writingBoxed: IconWritingBoxed,
   highlightBoxed: IconHighlightBoxed,
+  summarizeAction: IconSummarizeAction,
+  highlightAction: IconHighlightAction,
+  searchAction: IconSearchAction,
   edit: IconEdit,
   quickActionModifiedBoxed: IconQuickModified,
   searchBoxed: IconSearchBoxed,
diff --git a/utils/theme/composable.ts b/utils/theme/composable.ts
new file mode 100644
index 00000000..4cbffcd4
--- /dev/null
+++ b/utils/theme/composable.ts
@@ -0,0 +1,98 @@
+import { computed, ref, watch } from 'vue'
+
+import { getUserConfig, type ThemeMode } from '../user-config'
+
+export type GmailTheme = 'light' | 'dark'
+
+const themeStore = ref<Awaited<ReturnType<typeof getUserConfig>>['ui']['theme'] | null>(null)
+const isInitialized = ref(false)
+
+async function initializeTheme() {
+  if (!themeStore.value) {
+    const config = await getUserConfig()
+    themeStore.value = config.ui.theme
+    isInitialized.value = true
+  }
+  return themeStore.value
+}
+
+export const getDocumentTheme = (): GmailTheme => {
+  if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
+    return 'dark'
+  }
+  return 'light'
+}
+
+export function useTheme() {
+  const systemTheme = ref<'light' | 'dark'>(
+    typeof window !== 'undefined' && window.matchMedia
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : 'light',
+  )
+
+  // Listen for system theme changes
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = (e: MediaQueryListEvent) => {
+      systemTheme.value = e.matches ? 'dark' : 'light'
+    }
+    mediaQuery.addEventListener('change', handleChange)
+  }
+
+  const themeMode = computed({
+    get: () => themeStore.value?.mode.get() ?? 'system',
+    set: (mode: ThemeMode) => {
+      if (themeStore.value) {
+        themeStore.value.mode.set(mode)
+      }
+    },
+  })
+
+  const currentTheme = computed(() => {
+    const mode = themeMode.value
+    if (mode === 'system') {
+      return systemTheme.value
+    }
+    return mode
+  })
+
+  const isDark = computed(() => currentTheme.value === 'dark')
+
+  const setTheme = (mode: ThemeMode) => {
+    themeMode.value = mode
+  }
+
+  const toggleTheme = () => {
+    const current = themeMode.value
+    if (current === 'system') {
+      setTheme(systemTheme.value === 'dark' ? 'light' : 'dark')
+    }
+    else {
+      setTheme(current === 'dark' ? 'light' : 'dark')
+    }
+  }
+
+  // Apply theme class to document and shadow roots
+  watch(currentTheme, (theme) => {
+    if (typeof document !== 'undefined') {
+      const root = document.documentElement
+      if (theme === 'dark') {
+        root.classList.add('dark')
+      }
+      else {
+        root.classList.remove('dark')
+      }
+    }
+  }, { immediate: true })
+
+  return {
+    themeMode,
+    currentTheme,
+    isDark,
+    systemTheme,
+    isInitialized,
+    setTheme,
+    toggleTheme,
+    initializeTheme,
+  }
+}
diff --git a/utils/theme/index.ts b/utils/theme/index.ts
new file mode 100644
index 00000000..51e1d435
--- /dev/null
+++ b/utils/theme/index.ts
@@ -0,0 +1,2 @@
+export { type ThemeMode } from '../user-config'
+export { getDocumentTheme, type GmailTheme, useTheme } from './composable'
diff --git a/utils/user-config/index.ts b/utils/user-config/index.ts
index 7d5dddfc..12b14fcd 100644
--- a/utils/user-config/index.ts
+++ b/utils/user-config/index.ts
@@ -13,6 +13,8 @@ import { lazyInitialize } from '../memo'
 import { forRuntimes } from '../runtime'
 import { ByteSize } from '../sizes'
 import { DEFAULT_CHAT_SYSTEM_PROMPT, DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE, DEFAULT_CHAT_TITLE_GENERATION_SYSTEM_PROMPT, DEFAULT_GMAIL_COMPOSE_SYSTEM_PROMPT, DEFAULT_GMAIL_REPLY_SYSTEM_PROMPT, DEFAULT_GMAIL_SUMMARY_SYSTEM_PROMPT, DEFAULT_TRANSLATOR_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_LIST_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_PROOFREAD_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_REWRITE_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_SPARKLE_SYSTEM_PROMPT } from './defaults'
+
+export type ThemeMode = 'light' | 'dark' | 'system'
 import { Config } from './helpers'
 
 const log = logger.child('user-config')
@@ -166,6 +168,9 @@ export async function _getUserConfig() {
       },
     },
     ui: {
+      theme: {
+        mode: await new Config('ui.theme.mode').default('system' as ThemeMode).build(),
+      },
       pinSidebar: await new Config('ui.pinSidebar').default(false).build(),
       onboarding: {
         version: await new Config('ui.onboarding.version').default(0).build(),

From 097d35ce24538c81039e0b5231513cd18b9b79a2 Mon Sep 17 00:00:00 2001
From: NekoWings <NekoWings@outlook.com>
Date: Wed, 24 Sep 2025 11:48:02 +0800
Subject: [PATCH 2/9] feat(theme): refactor theme management to use composables
 and improve type definitions

---
 components/RootProvider.vue                       |  2 +-
 components/ThemeSelector.vue                      |  2 +-
 composables/theme/index.ts                        |  1 +
 .../theme/useTheme.ts                             | 15 ++++-----------
 .../content/components/GmailTools/index.vue       |  2 +-
 .../content/components/WritingTools/index.vue     |  2 +-
 .../content/utils/page-injection/gmail-tools.ts   |  5 +++--
 .../settings/components/GeneralSettings/index.vue |  2 +-
 types/theme/index.ts                              |  2 ++
 utils/theme/index.ts                              | 10 ++++++++--
 utils/user-config/index.ts                        |  5 ++---
 11 files changed, 25 insertions(+), 23 deletions(-)
 create mode 100644 composables/theme/index.ts
 rename utils/theme/composable.ts => composables/theme/useTheme.ts (85%)
 create mode 100644 types/theme/index.ts

diff --git a/components/RootProvider.vue b/components/RootProvider.vue
index 9d1689b9..18302747 100644
--- a/components/RootProvider.vue
+++ b/components/RootProvider.vue
@@ -5,8 +5,8 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 
+import { useTheme } from '@/composables/theme'
 import { useInjectContext } from '@/composables/useInjectContext'
-import { useTheme } from '@/utils/theme'
 
 const props = defineProps<{
   rootElement: HTMLElement
diff --git a/components/ThemeSelector.vue b/components/ThemeSelector.vue
index fb18e2d0..7478975b 100644
--- a/components/ThemeSelector.vue
+++ b/components/ThemeSelector.vue
@@ -13,8 +13,8 @@
 
 import { computed } from 'vue'
 
+import { useTheme } from '@/composables/theme'
 import { useI18n } from '@/utils/i18n/index'
-import { useTheme } from '@/utils/theme'
 
 import Selector from './Selector.vue'
 
diff --git a/composables/theme/index.ts b/composables/theme/index.ts
new file mode 100644
index 00000000..e11fc1f7
--- /dev/null
+++ b/composables/theme/index.ts
@@ -0,0 +1 @@
+export { useTheme } from './useTheme'
diff --git a/utils/theme/composable.ts b/composables/theme/useTheme.ts
similarity index 85%
rename from utils/theme/composable.ts
rename to composables/theme/useTheme.ts
index 4cbffcd4..3207b0ad 100644
--- a/utils/theme/composable.ts
+++ b/composables/theme/useTheme.ts
@@ -1,8 +1,8 @@
 import { computed, ref, watch } from 'vue'
 
-import { getUserConfig, type ThemeMode } from '../user-config'
+import { ThemeModeType } from '@/types/theme'
 
-export type GmailTheme = 'light' | 'dark'
+import { getUserConfig } from '../../utils/user-config'
 
 const themeStore = ref<Awaited<ReturnType<typeof getUserConfig>>['ui']['theme'] | null>(null)
 const isInitialized = ref(false)
@@ -16,13 +16,6 @@ async function initializeTheme() {
   return themeStore.value
 }
 
-export const getDocumentTheme = (): GmailTheme => {
-  if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
-    return 'dark'
-  }
-  return 'light'
-}
-
 export function useTheme() {
   const systemTheme = ref<'light' | 'dark'>(
     typeof window !== 'undefined' && window.matchMedia
@@ -41,7 +34,7 @@ export function useTheme() {
 
   const themeMode = computed({
     get: () => themeStore.value?.mode.get() ?? 'system',
-    set: (mode: ThemeMode) => {
+    set: (mode: ThemeModeType) => {
       if (themeStore.value) {
         themeStore.value.mode.set(mode)
       }
@@ -58,7 +51,7 @@ export function useTheme() {
 
   const isDark = computed(() => currentTheme.value === 'dark')
 
-  const setTheme = (mode: ThemeMode) => {
+  const setTheme = (mode: ThemeModeType) => {
     themeMode.value = mode
   }
 
diff --git a/entrypoints/content/components/GmailTools/index.vue b/entrypoints/content/components/GmailTools/index.vue
index c61f653f..9a0f3ae9 100644
--- a/entrypoints/content/components/GmailTools/index.vue
+++ b/entrypoints/content/components/GmailTools/index.vue
@@ -50,10 +50,10 @@ import { useElementBounding } from '@vueuse/core'
 import { computed, onMounted, ref, shallowRef, watchEffect } from 'vue'
 import { ShadowRoot as ShadowRootComponent } from 'vue-shadow-dom'
 
+import { useTheme } from '@/composables/theme'
 import { useDraggable } from '@/composables/useDraggable'
 import { useLogger } from '@/composables/useLogger'
 import { injectStyleSheetToDocument, loadContentScriptStyleSheet } from '@/utils/css'
-import { useTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useRootElement } from '../../composables/useRootElement'
diff --git a/entrypoints/content/components/WritingTools/index.vue b/entrypoints/content/components/WritingTools/index.vue
index fac61822..1f1be57b 100644
--- a/entrypoints/content/components/WritingTools/index.vue
+++ b/entrypoints/content/components/WritingTools/index.vue
@@ -29,11 +29,11 @@
 import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { ShadowRoot as ShadowRootComponent } from 'vue-shadow-dom'
 
+import { useTheme } from '@/composables/theme'
 import { useLogger } from '@/composables/useLogger'
 import { useFocusedElements } from '@/composables/useObserverElements'
 import { injectStyleSheetToDocument, loadContentScriptStyleSheet } from '@/utils/css'
 import { isContentEditableElement, isEditorFrameworkElement, shouldExcludeEditableElement } from '@/utils/selection'
-import { useTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useRootElement } from '../../composables/useRootElement'
diff --git a/entrypoints/content/utils/page-injection/gmail-tools.ts b/entrypoints/content/utils/page-injection/gmail-tools.ts
index 149d9e93..f984b93a 100644
--- a/entrypoints/content/utils/page-injection/gmail-tools.ts
+++ b/entrypoints/content/utils/page-injection/gmail-tools.ts
@@ -3,11 +3,12 @@ import { useI18n } from 'vue-i18n'
 
 import LogoSvg from '@/assets/icons/logo-custom-color.svg?raw'
 import { useDocumentLoaded } from '@/composables/useDocumentLoaded'
+import { ThemeType } from '@/types/theme'
 import Logger from '@/utils/logger'
 import { c2bRpc } from '@/utils/rpc'
 import { toggleContainer } from '@/utils/rpc/content-main-world-fns'
 import { sleep } from '@/utils/sleep'
-import { getDocumentTheme, GmailTheme } from '@/utils/theme'
+import { getDocumentTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useGmailDetector } from '../../composables/useGmailDetector'
@@ -32,7 +33,7 @@ type GmailButtonThemeColors = {
   spinnerShadow: string
 }
 
-const GMAIL_BUTTON_THEME_COLORS: Record<GmailTheme, GmailButtonThemeColors> = {
+const GMAIL_BUTTON_THEME_COLORS: Record<ThemeType, GmailButtonThemeColors> = {
   light: {
     background: '#FBF8F4',
     text: '#596066',
diff --git a/entrypoints/settings/components/GeneralSettings/index.vue b/entrypoints/settings/components/GeneralSettings/index.vue
index df437dbd..2beaa682 100644
--- a/entrypoints/settings/components/GeneralSettings/index.vue
+++ b/entrypoints/settings/components/GeneralSettings/index.vue
@@ -60,9 +60,9 @@ import { onMounted, ref, watch } from 'vue'
 import Modal from '@/components/Modal.vue'
 import ThemeSelector from '@/components/ThemeSelector.vue'
 import UILanguageSelector from '@/components/UILanguageSelector.vue'
+import { useTheme } from '@/composables/theme'
 import { useI18n } from '@/utils/i18n/index'
 import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
-import { useTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useSettingsInitialQuery } from '../../composables/useQuery'
diff --git a/types/theme/index.ts b/types/theme/index.ts
new file mode 100644
index 00000000..a7335240
--- /dev/null
+++ b/types/theme/index.ts
@@ -0,0 +1,2 @@
+export type ThemeModeType = 'light' | 'dark' | 'system'
+export type ThemeType = 'light' | 'dark'
diff --git a/utils/theme/index.ts b/utils/theme/index.ts
index 51e1d435..a9bb6f72 100644
--- a/utils/theme/index.ts
+++ b/utils/theme/index.ts
@@ -1,2 +1,8 @@
-export { type ThemeMode } from '../user-config'
-export { getDocumentTheme, type GmailTheme, useTheme } from './composable'
+import { ThemeType } from '@/types/theme'
+
+export const getDocumentTheme = (): ThemeType => {
+  if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
+    return 'dark'
+  }
+  return 'light'
+}
diff --git a/utils/user-config/index.ts b/utils/user-config/index.ts
index 12b14fcd..cc5fcb2f 100644
--- a/utils/user-config/index.ts
+++ b/utils/user-config/index.ts
@@ -1,6 +1,7 @@
 import { computed } from 'vue'
 import { browser } from 'wxt/browser'
 
+import { ThemeModeType } from '@/types/theme'
 import { c2bRpc } from '@/utils/rpc'
 
 import { SupportedLocaleCode } from '../i18n/constants'
@@ -13,8 +14,6 @@ import { lazyInitialize } from '../memo'
 import { forRuntimes } from '../runtime'
 import { ByteSize } from '../sizes'
 import { DEFAULT_CHAT_SYSTEM_PROMPT, DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE, DEFAULT_CHAT_TITLE_GENERATION_SYSTEM_PROMPT, DEFAULT_GMAIL_COMPOSE_SYSTEM_PROMPT, DEFAULT_GMAIL_REPLY_SYSTEM_PROMPT, DEFAULT_GMAIL_SUMMARY_SYSTEM_PROMPT, DEFAULT_TRANSLATOR_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_LIST_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_PROOFREAD_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_REWRITE_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_SPARKLE_SYSTEM_PROMPT } from './defaults'
-
-export type ThemeMode = 'light' | 'dark' | 'system'
 import { Config } from './helpers'
 
 const log = logger.child('user-config')
@@ -169,7 +168,7 @@ export async function _getUserConfig() {
     },
     ui: {
       theme: {
-        mode: await new Config('ui.theme.mode').default('system' as ThemeMode).build(),
+        mode: await new Config('ui.theme.mode').default('system' as ThemeModeType).build(),
       },
       pinSidebar: await new Config('ui.pinSidebar').default(false).build(),
       onboarding: {

From 603469773cf6aae80feb3014d576d605306d2519 Mon Sep 17 00:00:00 2001
From: nekowings <nekowings@outlook.com>
Date: Wed, 24 Sep 2025 16:26:10 +0800
Subject: [PATCH 3/9] fix: revert unnecessary darkmode changes

---
 tests/html/writing-tools/input.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/html/writing-tools/input.html b/tests/html/writing-tools/input.html
index 79169d04..e9d6bf6a 100644
--- a/tests/html/writing-tools/input.html
+++ b/tests/html/writing-tools/input.html
@@ -11,7 +11,7 @@
   <div style="display: flex; flex-direction: column; gap: 10px; padding: 20px;">
     <input type="text" placeholder="Type here..." />
     <textarea placeholder="Type here..."></textarea>
-    <div contenteditable="true" style="border: 1px solid var(--color-border, #ccc); padding: 10px; width: 300px; height: 100px;">
+    <div contenteditable="true" style="border: 1px solid #ccc; padding: 10px; width: 300px; height: 100px;">
       This is a contenteditable div. You can type here.
     </div>
     <input type="password" placeholder="Password input" />

From 0a4dc4599ff5ddea4e20659e0ca56b443025374c Mon Sep 17 00:00:00 2001
From: nekowings <nekowings@outlook.com>
Date: Wed, 24 Sep 2025 16:37:31 +0800
Subject: [PATCH 4/9] fix(theme): update theme handling to use data attributes
 instead of directly adding a class to the document to avoid affecting the
 original page, and use useEventListener to handle event listener unmounting.

---
 composables/theme/useTheme.ts                 | 12 +++------
 .../content/components/GmailTools/index.vue   |  2 +-
 .../content/components/WritingTools/index.vue |  2 +-
 .../utils/page-injection/gmail-tools.ts       | 25 ++++++++-----------
 styles/style.css                              |  2 +-
 5 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/composables/theme/useTheme.ts b/composables/theme/useTheme.ts
index 3207b0ad..c36a666f 100644
--- a/composables/theme/useTheme.ts
+++ b/composables/theme/useTheme.ts
@@ -1,3 +1,4 @@
+import { useEventListener } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
 import { ThemeModeType } from '@/types/theme'
@@ -29,7 +30,7 @@ export function useTheme() {
     const handleChange = (e: MediaQueryListEvent) => {
       systemTheme.value = e.matches ? 'dark' : 'light'
     }
-    mediaQuery.addEventListener('change', handleChange)
+    useEventListener(mediaQuery, 'change', handleChange)
   }
 
   const themeMode = computed({
@@ -65,16 +66,11 @@ export function useTheme() {
     }
   }
 
-  // Apply theme class to document and shadow roots
+  // Apply theme data attribute to document
   watch(currentTheme, (theme) => {
     if (typeof document !== 'undefined') {
       const root = document.documentElement
-      if (theme === 'dark') {
-        root.classList.add('dark')
-      }
-      else {
-        root.classList.remove('dark')
-      }
+      root.setAttribute('data-nm-theme', theme)
     }
   }, { immediate: true })
 
diff --git a/entrypoints/content/components/GmailTools/index.vue b/entrypoints/content/components/GmailTools/index.vue
index 9a0f3ae9..5c53eff0 100644
--- a/entrypoints/content/components/GmailTools/index.vue
+++ b/entrypoints/content/components/GmailTools/index.vue
@@ -11,7 +11,7 @@
       >
         <div
           class="container bg-bg-primary text-text-primary font-inter"
-          :class="{ 'dark': currentTheme === 'dark' }"
+          :data-nm-theme="currentTheme"
         >
           <div
             v-if="showReplyCard"
diff --git a/entrypoints/content/components/WritingTools/index.vue b/entrypoints/content/components/WritingTools/index.vue
index 1f1be57b..f65c31df 100644
--- a/entrypoints/content/components/WritingTools/index.vue
+++ b/entrypoints/content/components/WritingTools/index.vue
@@ -11,7 +11,7 @@
       >
         <div
           class="container bg-bg-primary text-text-primary font-inter"
-          :class="{ 'dark': currentTheme === 'dark' }"
+          :data-nm-theme="currentTheme"
         >
           <EditableEntry
             v-for="(el, idx) in elements"
diff --git a/entrypoints/content/utils/page-injection/gmail-tools.ts b/entrypoints/content/utils/page-injection/gmail-tools.ts
index f984b93a..afbcb9e5 100644
--- a/entrypoints/content/utils/page-injection/gmail-tools.ts
+++ b/entrypoints/content/utils/page-injection/gmail-tools.ts
@@ -105,23 +105,23 @@ function buildGmailButtonStyles(className: string, options: GmailButtonStyleOpti
 }
 
 /* Dark mode styles */
-.${className}.dark {
+.${className}[data-nm-theme="dark"] {
   background: ${darkColors.background};
   color: ${darkColors.text};
   box-shadow: ${darkColors.baseShadow};
 }
 
-.${className}.dark:hover:not(:disabled) {
+.${className}[data-nm-theme="dark"]:hover:not(:disabled) {
   background: ${darkColors.hoverBackground};
   box-shadow: ${darkColors.hoverShadow};
 }
 
-.${className}.dark:disabled {
+.${className}[data-nm-theme="dark"]:disabled {
   background: ${darkColors.disabledBackground};
   color: ${darkColors.disabledText};
 }
 
-.${className}.dark svg {
+.${className}[data-nm-theme="dark"] svg {
   color: ${darkColors.text};
 }
 `
@@ -158,7 +158,7 @@ ${baseRules}
   animation-delay: calc(var(--delay) * var(--bar-number));
 }
 
-.${className}.dark .nativemind-loading-spinner .bar {
+.${className}[data-nm-theme="dark"] .nativemind-loading-spinner .bar {
   background: ${darkColors.spinnerBar};
   box-shadow: 0 0 1px ${darkColors.spinnerShadow};
 }
@@ -196,9 +196,8 @@ function makeSummaryButton(threadElement: HTMLElement, buttonText: string, exter
   }
 
   const currentTheme = getDocumentTheme()
-  button.className = currentTheme === 'dark'
-    ? `${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS} dark`
-    : NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS
+  button.className = NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS
+  button.setAttribute('data-nm-theme', currentTheme)
 
   button.addEventListener('mousedown', async (ev) => {
     // Return early if button is disabled
@@ -271,9 +270,8 @@ function makeReplyButton(buttonText: string) {
   })
 
   const currentTheme = getDocumentTheme()
-  button.className = currentTheme === 'dark'
-    ? `${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS} dark`
-    : NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS
+  button.className = NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS
+  button.setAttribute('data-nm-theme', currentTheme)
 
   button.addEventListener('click', async (ev) => {
     ev.stopImmediatePropagation()
@@ -317,9 +315,8 @@ function makeComposeButton(buttonText: string) {
   })
 
   const currentTheme = getDocumentTheme()
-  button.className = currentTheme === 'dark'
-    ? `${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS} dark`
-    : NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS
+  button.className = NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS
+  button.setAttribute('data-nm-theme', currentTheme)
 
   button.addEventListener('click', async (ev) => {
     ev.stopImmediatePropagation()
diff --git a/styles/style.css b/styles/style.css
index c67d7cbd..2959a224 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -180,7 +180,7 @@
 }
 
 /* Dark mode colors */
-.dark {
+[data-nm-theme="dark"] {
   --color-text-primary: #f8f9fa;
   --color-text-secondary: #eaecef;
   --color-text-tertiary: #8b949e;

From 5c34142a8fbfdbf0d35aefe91eb9569a76d98a4c Mon Sep 17 00:00:00 2001
From: nekowings <nekowings@outlook.com>
Date: Wed, 24 Sep 2025 16:44:52 +0800
Subject: [PATCH 5/9] feat(theme): refactor&fix styles and class names across
 components for consistency and clarity

- Consolidate color variables and remove unused colors.
- Standardize color references according to Tailwind conventions.
- Fix some UI color schemes.
---
 components/Input.vue                          |  6 +--
 components/Loading.vue                        |  2 +-
 components/MarkdownViewer.vue                 |  4 +-
 components/Modal.vue                          |  4 +-
 components/ModelLogo.vue                      |  2 +-
 components/ScrollTarget.vue                   |  2 +-
 components/StatusBadge.vue                    |  6 +--
 components/Textarea.vue                       |  2 +-
 components/ToastGroup.vue                     |  2 +-
 components/ui/Button.vue                      |  4 +-
 components/ui/Divider.vue                     |  2 +-
 components/ui/Tooltip.vue                     |  8 ++-
 composables/useConfirm.tsx                    |  2 +-
 .../GmailTools/GmailComposeCard.vue           | 14 +++---
 .../components/GmailTools/GmailReplyCard.vue  |  8 +--
 .../WritingTools/SuggestionCard.vue           |  4 +-
 entrypoints/settings/components/Block.vue     |  2 +-
 .../components/DebugSettings/index.vue        |  8 +--
 .../Blocks/LMStudioConfiguration.vue          |  2 +-
 .../Blocks/ModelManagement/LMStudio.vue       |  2 +-
 .../Blocks/OllamaConfiguration.vue            |  4 +-
 .../components/OllamaDownloadModal.vue        |  2 +-
 .../components/WebLLMDownloadModal.vue        |  2 +-
 .../components/AttachmentSelector.vue         |  8 +--
 .../Chat/Messages/AgentTaskGroup.vue          |  2 +-
 .../components/Chat/Messages/Assistant.vue    |  2 +-
 .../components/Chat/OnlineSearchSwitch.vue    |  2 +-
 .../components/Chat/ThinkingModeSwitch.vue    |  2 +-
 .../sidepanel/components/Chat/index.vue       |  4 +-
 .../components/ChatHistory/ChatItem.vue       |  8 +--
 .../Onboarding/BackendDownloadModal.vue       |  2 +-
 .../Onboarding/BackendModelDownloader.vue     |  4 +-
 .../BackendSelectionTutorialCard.vue          | 10 ++--
 .../components/Onboarding/SloganCard.vue      |  2 +-
 .../Onboarding/WebLLMTutorialCard.vue         |  2 +-
 styles/style.css                              | 49 ++++++++++---------
 36 files changed, 96 insertions(+), 95 deletions(-)

diff --git a/components/Input.vue b/components/Input.vue
index 1a61e592..eb709a2a 100644
--- a/components/Input.vue
+++ b/components/Input.vue
@@ -11,16 +11,16 @@
         props.class,
         props.disabled ? 'opacity-50' : '',
         props.error
-          ? 'shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)] focus:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
+          ? 'shadow-[0px_0px_0px_3px_var(--color-border-c),0px_0px_0px_1px_var(--color-border-critical)] focus:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
           : '',
         isOverLimit
-          ? 'shadow-[0px_0px_0px_1px_var(--color-border-warning)] focus:shadow-[0px_0px_0px_1px_var(--color-border-warning)]'
+          ? 'shadow-[0px_0px_0px_1px_var(--color-warning)] focus:shadow-[0px_0px_0px_1px_var(--color-warning)]'
           : '',
       )"
     >
     <div
       v-if="isOverLimit"
-      class="mt-2 text-xs leading-4 text-[var(--color-border-warning)] self-start"
+      class="mt-2 text-xs leading-4 text-danger self-start"
     >
       {{ $t('errors.max_characters_error', { count: maxlength }) }}
     </div>
diff --git a/components/Loading.vue b/components/Loading.vue
index b8e10478..8e0e3a39 100644
--- a/components/Loading.vue
+++ b/components/Loading.vue
@@ -16,7 +16,7 @@
     class="shrink-0 grow-0"
   >
     <IconLoadingDone
-      class="text-accent-success"
+      class="text-success"
       :style="{ width: size + 'px', height: size + 'px' }"
     />
   </div>
diff --git a/components/MarkdownViewer.vue b/components/MarkdownViewer.vue
index 05f8a033..ed9d2c28 100644
--- a/components/MarkdownViewer.vue
+++ b/components/MarkdownViewer.vue
@@ -50,7 +50,7 @@ const inlineDirective: DirectiveConfig = {
       const url = token.attrs?.url
       const icon = token.attrs?.icon
       const iconHtml = icon ? `<span class="inline-block mr-1" style="vertical-align: -3px;">${IconMDLink}</span>` : ''
-      return `<a target="_blank" href="${url}" title="${text}" rel="noopener" class="text-icon-link hover:text-[var(--color-text-link-hover)]">${iconHtml}${text}</a>`
+      return `<a target="_blank" href="${url}" title="${text}" rel="noopener" class="text-text-link hover:text-link-hover">${iconHtml}${text}</a>`
     }
     else if (token.meta.name === 'icon') {
       const iconName = token.text as IconName
@@ -173,7 +173,7 @@ renderer.link = ({ href, title, text }) => {
   anchor.textContent = text
   anchor.target = '_blank'
   anchor.rel = 'noopener noreferrer'
-  anchor.className = 'text-icon-link hover:text-[var(--color-text-link-hover)] underline'
+  anchor.className = 'text-text-link hover:text-text-link-hover underline'
   return anchor.outerHTML
 }
 
diff --git a/components/Modal.vue b/components/Modal.vue
index a49276da..cb339188 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -13,8 +13,8 @@
       <slot name="mask">
         <div
           v-if="!noMask"
-          class="mask absolute inset-0"
-          :class="classNames('bg-[var(--color-overlay-scrim)]', maskClass, fadeInOpacityAnimation)"
+          class="mask absolute inset-0 bg-overlay-scrim"
+          :class="classNames(maskClass, fadeInOpacityAnimation)"
         />
       </slot>
       <div
diff --git a/components/ModelLogo.vue b/components/ModelLogo.vue
index 96147405..53ad5dcb 100644
--- a/components/ModelLogo.vue
+++ b/components/ModelLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('flex items-center justify-center w-4 h-4 rounded-full border border-[var(--color-border-hairline)] bg-white', props.class)">
+  <div :class="classNames('flex items-center justify-center w-4 h-4 rounded-full border border-border-hairline bg-white', props.class)">
     <component
       :is="iconComponent"
       class="max-w-3/4 max-h-3/4 w-3/4"
diff --git a/components/ScrollTarget.vue b/components/ScrollTarget.vue
index 2e9debdd..3878f5da 100644
--- a/components/ScrollTarget.vue
+++ b/components/ScrollTarget.vue
@@ -2,7 +2,7 @@
   <div
     ref="targetRef"
     :class="{
-      'outline-2 outline-[color:var(--color-border-strong)] outline-offset-4 outline-dashed rounded-md': highlighting,
+      'outline-2 outline-border-strong outline-offset-4 outline-dashed rounded-md': highlighting,
     }"
   >
     <slot />
diff --git a/components/StatusBadge.vue b/components/StatusBadge.vue
index 52310f87..f00c7822 100644
--- a/components/StatusBadge.vue
+++ b/components/StatusBadge.vue
@@ -4,9 +4,9 @@
       <div
         class="w-2 h-2 rounded-xs border"
         :class="{
-          'bg-accent-success border-[var(--color-border-overlay)]': status === 'success',
-          'bg-[var(--color-text-warning)] border-[var(--color-border-overlay)]': status === 'warning',
-          'bg-[var(--color-danger)] border-[var(--color-border-overlay)]': status === 'error',
+          'bg-success border-border-overlay': status === 'success',
+          'bg-warning border-border-overlay': status === 'warning',
+          'bg-danger border-border-overlay': status === 'error',
         }"
       />
       <Text
diff --git a/components/Textarea.vue b/components/Textarea.vue
index 0174b2f5..41a389d8 100644
--- a/components/Textarea.vue
+++ b/components/Textarea.vue
@@ -22,7 +22,7 @@
       <!-- Reset to default button -->
       <button
         v-if="showResetButton"
-        class="text-[11px] leading-[16px] text-icon-link hover:text-[var(--color-text-link-hover)] font-normal cursor-pointer flex items-center gap-1"
+        class="text-[11px] leading-[16px] text-text-link hover:text-text-link-hover font-normal cursor-pointer flex items-center gap-1"
         @click="resetToDefault"
       >
         {{ t('textarea.reset_to_default') }}
diff --git a/components/ToastGroup.vue b/components/ToastGroup.vue
index a7bd9b30..2e978c6f 100644
--- a/components/ToastGroup.vue
+++ b/components/ToastGroup.vue
@@ -13,7 +13,7 @@
         <div>
           <IconWarning
             v-if="toast.options.type === 'error'"
-            class="w-4 h-4 text-text-critical"
+            class="w-4 h-4 text-danger"
           />
           <Logo v-else />
         </div>
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index 5fdb513c..f78670d0 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -40,8 +40,8 @@ const classMapping = {
 }
 
 const disableClassMapping = {
-  primary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-[var(--color-accent-primary-disabled)] text-text-disabled`,
-  secondary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-[var(--color-surface-disabled)] text-text-disabled`,
+  primary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-accent-primary-disabled text-text-disabled`,
+  secondary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-color-surface-disabled text-text-disabled`,
 }
 
 const buttonClass = computed(() => `rounded-md cursor-pointer ${classMapping[props.variant]} ${props.disabled ? disableClassMapping[props.variant] : ''}`)
diff --git a/components/ui/Divider.vue b/components/ui/Divider.vue
index 87bd8d6d..186f1a55 100644
--- a/components/ui/Divider.vue
+++ b/components/ui/Divider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('w-full h-px bg-[var(--color-divider)]', props.class)" />
+  <div :class="classNames('w-full h-px bg-divider', props.class)" />
 </template>
 
 <script setup lang="ts">
diff --git a/components/ui/Tooltip.vue b/components/ui/Tooltip.vue
index 18ff7e7e..004e8323 100644
--- a/components/ui/Tooltip.vue
+++ b/components/ui/Tooltip.vue
@@ -27,7 +27,7 @@
         role="tooltip"
         :aria-hidden="!isVisible"
         :class="classNames(
-          'absolute z-50 rounded-[8px] border border-[color:var(--color-border-hairline)] bg-bg-primary px-3 py-2 text-xs leading-[14px] text-balance text-text-primary shadow-[0_0_2px_0_var(--color-shadow-medium),0_2px_16px_0_var(--color-shadow-medium)] whitespace-nowrap',
+          'absolute z-50 rounded-[8px] border border-border-hairline bg-bg-primary px-3 py-2 text-xs leading-[14px] text-balance text-text-primary shadow-[0_0_2px_0_var(--color-shadow-medium),0_2px_16px_0_var(--color-shadow-medium)] whitespace-nowrap',
           props.class
         )"
         :style="{
@@ -41,13 +41,11 @@
         <template v-if="props.showArrow">
           <div
             v-if="actualPosition === 'top'"
-            class="absolute left-1/2 -translate-x-1/2 bottom-[-4px] w-2 h-2 rotate-45 border-l border-b bg-bg-primary"
-            style="border-color: var(--color-border-hairline)"
+            class="absolute left-1/2 -translate-x-1/2 bottom-[-4px] w-2 h-2 rotate-45 border-l border-b bg-bg-primary border-border-hairline"
           />
           <div
             v-else-if="actualPosition === 'bottom'"
-            class="absolute left-1/2 -translate-x-1/2 top-[-4px] w-2 h-2 rotate-45 border-l border-t bg-bg-primary"
-            style="border-color: var(--color-border-hairline)"
+            class="absolute left-1/2 -translate-x-1/2 top-[-4px] w-2 h-2 rotate-45 border-l border-t bg-bg-primary border-border-hairline"
           />
         </template>
       </div>
diff --git a/composables/useConfirm.tsx b/composables/useConfirm.tsx
index eedf7f89..6ec417a9 100644
--- a/composables/useConfirm.tsx
+++ b/composables/useConfirm.tsx
@@ -65,7 +65,7 @@ export const initConfirmModal: (rootEl: HTMLElement) => Plugin = (rootEl) => {
             modelValue
             closeByMask
             noCloseButton
-            maskClass="bg-[var(--color-overlay-muted)]"
+            maskClass="bg-overlay-muted"
             onClose={cancel}
           >
             <div class="p-1">
diff --git a/entrypoints/content/components/GmailTools/GmailComposeCard.vue b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
index a82546b7..99875c64 100644
--- a/entrypoints/content/components/GmailTools/GmailComposeCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
@@ -46,17 +46,17 @@
               v-else
               class="relative"
             >
-              <div class="text-text-info text-sm mr-10">
+              <div class="text-text-blue text-sm mr-10">
                 {{ optimizedSubject }}
               </div>
               <!-- Copy Button for Subject -->
               <button
                 v-if="optimizedSubject.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-[color:var(--color-bg-primary)]/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-bg-primary/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.compose.copy_subject_to_clipboard')"
                 @click="copySubjectToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-text-info" />
+                <CopyIcon class="w-4 h-4 text-text-blue" />
               </button>
             </div>
           </div>
@@ -65,7 +65,7 @@
 
       <!-- Email Body Section -->
       <div class="body-section p-3">
-        <div class="bg-bg-success-subtle rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-accent-green rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus !== 'pending' && runningStatus !== 'streaming'"
@@ -93,17 +93,17 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-text-success-strong mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
+                class="text-text-accent mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
                 :text="optimizedBody"
               />
               <!-- Copy Button for Body -->
               <button
                 v-if="optimizedBody.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-[color:var(--color-bg-primary)]/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-bg-primary/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.compose.copy_body_to_clipboard')"
                 @click="copyBodyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-text-success-strong" />
+                <CopyIcon class="w-4 h-4 text-text-accent" />
               </button>
             </div>
           </div>
diff --git a/entrypoints/content/components/GmailTools/GmailReplyCard.vue b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
index 3126b9bb..7044ef23 100644
--- a/entrypoints/content/components/GmailTools/GmailReplyCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
@@ -17,7 +17,7 @@
       </div>
       <Divider />
       <div class="output p-3 rounded-md">
-        <div class="bg-bg-success-subtle rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-accent-green rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus === 'idle'"
@@ -36,17 +36,17 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-text-success-strong mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
+                class="text-text-accent mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
                 :text="output"
               />
               <!-- Copy Button -->
               <button
                 v-if="output.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-[color:var(--color-bg-primary)]/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-bg-primary/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.reply.copy_to_clipboard')"
                 @click="copyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-text-success-strong" />
+                <CopyIcon class="w-4 h-4 text-text-accent" />
               </button>
             </div>
           </div>
diff --git a/entrypoints/content/components/WritingTools/SuggestionCard.vue b/entrypoints/content/components/WritingTools/SuggestionCard.vue
index b832ecd4..dbea7d2a 100644
--- a/entrypoints/content/components/WritingTools/SuggestionCard.vue
+++ b/entrypoints/content/components/WritingTools/SuggestionCard.vue
@@ -44,7 +44,7 @@
       </div>
       <Divider />
       <div class="output p-3 rounded-md">
-        <div class="bg-bg-success-subtle rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-accent-green rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus === 'idle'"
@@ -63,7 +63,7 @@
               class="max-h-[min(90vh,500px)] overflow-y-auto"
             >
               <MarkdownViewer
-                class="text-text-success-strong"
+                class="text-text-accent"
                 :text="output"
               />
             </div>
diff --git a/entrypoints/settings/components/Block.vue b/entrypoints/settings/components/Block.vue
index 5fd7aa52..469f1a92 100644
--- a/entrypoints/settings/components/Block.vue
+++ b/entrypoints/settings/components/Block.vue
@@ -2,7 +2,7 @@
   <div class="p-4 bg-bg-primary rounded-lg relative overflow-hidden">
     <div
       v-if="disabled"
-      class="disable mask z-10 absolute inset-0 bg-[var(--color-mask-disabled)]"
+      class="disable mask z-10 absolute inset-0 bg-mask-disabled"
     />
     <div
       class="flex justify-between items-center"
diff --git a/entrypoints/settings/components/DebugSettings/index.vue b/entrypoints/settings/components/DebugSettings/index.vue
index 23906848..e652a166 100644
--- a/entrypoints/settings/components/DebugSettings/index.vue
+++ b/entrypoints/settings/components/DebugSettings/index.vue
@@ -131,7 +131,7 @@
                   </span>
                   <span class="font-light"> ({{ pullingModel.status }}) </span>
                   <button
-                    class="text-icon-link hover:text-text-info font-normal text-xs ml-2 cursor-pointer"
+                    class="text-text-link hover:text-text-link-hover font-normal text-xs ml-2 cursor-pointer"
                     @click="pullingModel.abort"
                   >
                     {{ pullingModel.status !== 'success' ? 'stop' : 'clear' }}
@@ -139,7 +139,7 @@
                 </div>
                 <div
                   v-if="pullingModel.error"
-                  class="font-light text-[8px] text-text-critical"
+                  class="font-light text-[8px] text-danger"
                 >
                   {{ pullingModel.error }}
                 </div>
@@ -165,7 +165,7 @@
                 <div>translator system prompt</div>
                 <div
                   v-if="translationSystemPromptError"
-                  class="text-text-critical text-[8px]"
+                  class="text-danger text-[8px]"
                 >
                   ({{ translationSystemPromptError }})
                 </div>
@@ -538,7 +538,7 @@
               <div
                 v-if="clearChatHistoryResult"
                 class="text-xs"
-                :class="clearChatHistoryResult.success ? 'text-text-success-strong' : 'text-text-critical'"
+                :class="clearChatHistoryResult.success ? 'text-success' : 'text-danger'"
               >
                 {{ clearChatHistoryResult.success
                   ? `Successfully deleted ${clearChatHistoryResult.deletedCount} chat${clearChatHistoryResult.deletedCount !== 1 ? 's' : ''}`
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue b/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
index 83997343..33743ab6 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
@@ -259,7 +259,7 @@ onMounted(async () => {
             >
               <span>{{ t('settings.providers.lm_studio.already_installed') }}</span>
               <button
-                class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
+                class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
                 @click="setupLMStudio"
               >
                 {{ t('settings.ollama.setup') }}
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
index 5bdf474a..3d605330 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
@@ -34,7 +34,7 @@
         <IconUnconnected class="h-4" />
         {{ t('settings.general.running_models.not_connected_to_lm_studio') }}
       </div>
-      <div class="rounded-md border border-border-strong bg-bg-elevated px-2 py-[3px]">
+      <div class="rounded-md border border-border-strong bg-bg-component px-2 py-[3px]">
         <Text
           color="secondary"
           size="xs"
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue b/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
index 746e7c6c..acb45853 100644
--- a/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
@@ -266,7 +266,7 @@ onMounted(async () => {
               >
                 <span>{{ t('settings.ollama.already_installed') }}</span>
                 <button
-                  class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
+                  class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
                   @click="setupOllama"
                 >
                   {{ t('settings.ollama.setup') }}
@@ -277,7 +277,7 @@ onMounted(async () => {
                 <a
                   :href="OLLAMA_TUTORIAL_URL"
                   target="_blank"
-                  class="underline whitespace-nowrap hover:text-text-primary cursor-pointer text-icon-link"
+                  class="underline whitespace-nowrap hover:text-text-primary cursor-pointer text-text-link"
                 >
                   {{ t('settings.ollama.follow_guide') }}
                 </a>
diff --git a/entrypoints/settings/components/OllamaDownloadModal.vue b/entrypoints/settings/components/OllamaDownloadModal.vue
index a1f429b6..f46ca162 100644
--- a/entrypoints/settings/components/OllamaDownloadModal.vue
+++ b/entrypoints/settings/components/OllamaDownloadModal.vue
@@ -40,7 +40,7 @@
           </div>
         </div>
         <div v-if="pulling?.error">
-          <div class="text-text-critical text-xs flex items-center gap-1">
+          <div class="text-danger text-xs flex items-center gap-1">
             <IconWarning class="w-3 h-3 shrink-0" />
             <span class="wrap-anywhere">{{ pulling.error }}</span>
           </div>
diff --git a/entrypoints/settings/components/WebLLMDownloadModal.vue b/entrypoints/settings/components/WebLLMDownloadModal.vue
index 2ca4beb3..639af863 100644
--- a/entrypoints/settings/components/WebLLMDownloadModal.vue
+++ b/entrypoints/settings/components/WebLLMDownloadModal.vue
@@ -49,7 +49,7 @@
     </div>
     <div
       v-if="!supportedWebLLM.supported"
-      class="text-text-critical text-[10px] flex items-center gap-2 justify-start"
+      class="text-danger text-[10px] flex items-center gap-2 justify-start"
     >
       <IconWarning class="w-3 h-3" />
       {{ t('errors.webllm_not_supported') }}
diff --git a/entrypoints/sidepanel/components/AttachmentSelector.vue b/entrypoints/sidepanel/components/AttachmentSelector.vue
index 4b446b7e..17c35072 100644
--- a/entrypoints/sidepanel/components/AttachmentSelector.vue
+++ b/entrypoints/sidepanel/components/AttachmentSelector.vue
@@ -48,7 +48,7 @@
                     <ExternalImage
                       :src="tab.faviconUrl"
                       alt=""
-                      class="w-4 h-4 rounded-full grow-0 shrink-0 bg-[var(--color-border-light)]"
+                      class="w-4 h-4 rounded-full grow-0 shrink-0 bg-border-light"
                       fallbackClass="bg-transparent"
                     >
                       <template #fallback>
@@ -91,7 +91,7 @@
         :key="index"
         class="p-2 rounded-lg bg-bg-overlay-contrast flex items-center gap-2 max-w-11/12"
       >
-        <IconWarningSolid class="w-5 h-5 shrink-0 text-text-warning" />
+        <IconWarningSolid class="w-5 h-5 shrink-0 text-warning" />
         <Text
           size="small"
           class="font-medium text-white min-w-0 wrap-anywhere"
@@ -106,7 +106,7 @@
         class="shrink-0 grow-0 h-6 w-6 grid place-items-center"
         @click="showSelector"
       >
-        <IconAdd class="cursor-pointer text-[var(--color-foreground-base)]" />
+        <IconAdd class="cursor-pointer text-foreground-base" />
       </Button>
       <ScrollContainer
         ref="tabsContainerRef"
@@ -129,7 +129,7 @@
                 <ExternalImage
                   :src="attachment.value.faviconUrl"
                   alt=""
-                  class="w-3 h-3 rounded-full bg-[var(--color-border-light)]"
+                  class="w-3 h-3 rounded-full bg-border-light"
                   fallbackClass="bg-transparent"
                 >
                   <template #fallback>
diff --git a/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue b/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
index 71125500..e4abdc0a 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
@@ -35,7 +35,7 @@
         v-else
         class="shrink-0 grow-0 self-start mt-[3px] size-5 p-0.5"
       >
-        <IconTickCircle class="w-4 text-accent-success" />
+        <IconTickCircle class="w-4 text-success" />
       </div>
       <div :class="classNames('grow min-w-0 flex', task.details?.expanded ? 'flex-col' : 'flex-row')">
         <div class="flex grow gap-1 w-full justify-between items-center text-text-secondary">
diff --git a/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue b/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
index 0f6b30c0..ccf66043 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
@@ -31,7 +31,7 @@
               class="flex items-center gap-1.5 overflow-hidden whitespace-nowrap"
             >
               <div class="shrink-0 grow-0 size-5 p-0.5">
-                <IconTickCircle class="w-4 text-accent-success shrink-0" />
+                <IconTickCircle class="w-4 text-success shrink-0" />
               </div>
               <Text color="primary">
                 {{ t('chat.messages.thought_for_seconds', Math.ceil(message.reasoningTime / 1000), { named: { second: Math.ceil(message.reasoningTime / 1000) } }) }}
diff --git a/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue b/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
index 1a63873c..8fcea4fa 100644
--- a/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
+++ b/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
@@ -3,7 +3,7 @@
     <div
       class="flex items-center gap-1 px-1 py-1 min-h-6 rounded-sm cursor-pointer"
       :class="[
-        isOnlineSearchEnabled ? 'bg-bg-success-subtle text-text-secondary' : 'text-text-placeholder',
+        isOnlineSearchEnabled ? 'bg-bg-accent-green text-text-secondary' : 'text-text-placeholder',
       ]"
       @click="toggleOnlineSearch"
     >
diff --git a/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue b/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
index a7a94c69..4c0a923f 100644
--- a/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
+++ b/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
@@ -7,7 +7,7 @@
           'cursor-not-allowed opacity-50': !isModelSupportsThinking || !isThinkingToggleable,
           'cursor-pointer': isModelSupportsThinking && isThinkingToggleable,
         },
-        isThinkingEnabled ? 'bg-bg-success-subtle text-text-secondary' : 'text-text-placeholder',
+        isThinkingEnabled ? 'bg-bg-accent-green text-text-secondary' : 'text-text-placeholder',
       ]"
       @click="toggleThinking"
     >
diff --git a/entrypoints/sidepanel/components/Chat/index.vue b/entrypoints/sidepanel/components/Chat/index.vue
index 4b280d42..47cadcdf 100644
--- a/entrypoints/sidepanel/components/Chat/index.vue
+++ b/entrypoints/sidepanel/components/Chat/index.vue
@@ -68,7 +68,7 @@
             triggerStyle="ghost"
           />
         </div>
-        <div class="gap-1 flex relative bg-bg-chat-input rounded-md px-3 pt-2 pb-9 max-h-36">
+        <div class="gap-1 flex relative border border-border-chat-input bg-bg-chat-input rounded-md px-3 pt-2 pb-9 max-h-36">
           <ScrollContainer
             class="overflow-hidden w-full"
             :arrivalShadow="{
@@ -106,7 +106,7 @@
               <Button
                 v-if="chat.isAnswering()"
                 variant="secondary"
-                class="size-6 rounded-md flex items-center justify-center hover:bg-[color:var(--color-border-strong)]/80 bg-[var(--color-border-strong)] cursor-pointer shadow-none"
+                class="size-6 rounded-md flex items-center justify-center hover:bg-border-strong/80 bg-border-strong cursor-pointer shadow-none"
                 @click="onStop"
               >
                 <IconStop class="size-[15px] text-white" />
diff --git a/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue b/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
index 716cca60..90bb8902 100644
--- a/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
+++ b/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
@@ -14,7 +14,7 @@
         v-if="isPinned && !isEditing"
         class="flex-shrink-0"
       >
-        <IconStarFilled class="w-4 h-4 text-text-warning fill-current" />
+        <IconStarFilled class="w-4 h-4 text-warning fill-current" />
       </div>
 
       <!-- Chat Title -->
@@ -95,16 +95,16 @@
           >
             <IconStarFilled
               v-if="!isPinned"
-              class="w-4 h-4 text-text-warning fill-current"
+              class="w-4 h-4 text-warning fill-current"
             />
             <IconStarOutline
               v-else
-              class="w-4 h-4 text-text-warning"
+              class="w-4 h-4 text-warning"
             />
             {{ isPinned ? t('chat_history.unpin') : t('chat_history.pin') }}
           </button>
           <button
-            class="w-full px-2 py-1.5 text-left text-[13px] text-text-critical hover:bg-[color:var(--color-danger)]/10 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
+            class="w-full px-2 py-1.5 text-left text-[13px] text-text-critical hover:bg-danger/10 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
             @click.stop="handleDelete"
           >
             <IconTrash class="w-4 h-4" />
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue b/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
index 9118ad6e..7d1c7f0e 100644
--- a/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
@@ -40,7 +40,7 @@
           </div>
         </div>
         <div v-if="pulling?.error">
-          <div class="text-text-critical text-xs flex items-center gap-1">
+          <div class="text-danger text-xs flex items-center gap-1">
             <IconWarning class="w-3 h-3 shrink-0" />
             <span class="wrap-anywhere">{{ pulling.error }}</span>
           </div>
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue b/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
index a11b6df8..70dfa1de 100644
--- a/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
@@ -96,7 +96,7 @@
           <a
             :href="tutorialUrl"
             target="_blank"
-            class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
+            class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
           >
             {{ t('onboarding.guide.learn_about_models') }}
           </a>
@@ -106,7 +106,7 @@
           <a
             :href="searchUrl"
             target="_blank"
-            class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
+            class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
           >
             {{ t('onboarding.guide.browse_more_models') }}
           </a>
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
index db014aa1..dd978c91 100644
--- a/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
@@ -2,7 +2,7 @@
   <div
     class="px-4 py-4 flex flex-col gap-3 items-stretch"
   >
-    <div class="text-text-success-strong font-medium text-xs">
+    <div class="text-text-accent font-medium text-xs">
       {{ t('onboarding.guide.step1') }}
     </div>
     <div class="shrink-0 grow-0 text-[15px] font-semibold flex flex-col gap-4">
@@ -11,7 +11,7 @@
       </div>
       <div
         class="flex items-center justify-between gap-3 min-h-13 py-1 px-4 rounded-lg cursor-pointer border-2 text-[15px]"
-        :class="[selectedEndpointType === 'ollama' ? 'border-[color:var(--color-border-accent)]' : 'border-border-strong']"
+        :class="[selectedEndpointType === 'ollama' ? 'border-border-accent' : 'border-border-strong']"
         @click="selectedEndpointType = 'ollama'"
       >
         <div class="whitespace-nowrap flex items-center gap-2">
@@ -28,7 +28,7 @@
       </div>
       <div
         class="flex items-center justify-between gap-3 min-h-13 py-1 px-4 rounded-lg cursor-pointer border-2 text-[15px]"
-        :class="[selectedEndpointType === 'lm-studio' ? 'border-[color:var(--color-border-accent)]' : 'border-border-strong']"
+        :class="[selectedEndpointType === 'lm-studio' ? 'border-border-accent' : 'border-border-strong']"
         @click="selectedEndpointType = 'lm-studio'"
       >
         <div class="whitespace-nowrap flex items-center gap-2">
@@ -111,7 +111,7 @@
             <div class="flex gap-1">
               <span>{{ t('onboarding.guide.already_installed', { endpointType: selectedEndpointName }) }}</span>
               <button
-                class="whitespace-nowrap hover:text-text-primary text-icon-link cursor-pointer"
+                class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
                 @click="onClickOpenSettings"
               >
                 {{ t('onboarding.guide.setup') }}
@@ -125,7 +125,7 @@
               <a
                 :href="tutorialUrl"
                 target="_blank"
-                class="underline whitespace-nowrap hover:text-text-primary cursor-pointer text-icon-link"
+                class="underline whitespace-nowrap hover:text-text-primary cursor-pointer text-text-link"
               >
                 {{ t('onboarding.guide.follow_our_tutorial') }}
               </a>
diff --git a/entrypoints/sidepanel/components/Onboarding/SloganCard.vue b/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
index c7bfda75..5c19b768 100644
--- a/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center justify-start bg-gradient-to-b from-[var(--color-gradient-onboarding-start)] to-[var(--color-gradient-onboarding-end)] to-40% rounded-lg overflow-hidden pb-4">
+  <div class="flex flex-col items-center justify-start bg-gradient-to-b from-gradient-onboarding-start to-gradient-onboarding-end to-40% rounded-lg overflow-hidden pb-4">
     <div class="text-center max-w-full">
       <ImageElements class="max-w-full h-auto" />
       <div class="font-semibold text-sm mt-5">
diff --git a/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
index 04079613..9f94debc 100644
--- a/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
@@ -36,7 +36,7 @@
     </Button>
     <div
       v-if="!supportWebLLM.supported"
-      class="text-text-critical text-[10px] flex items-center gap-2 justify-start"
+      class="text-danger text-[10px] flex items-center gap-2 justify-start"
     >
       <IconWarning class="w-3 h-3" />
       {{ t('onboarding.webllm_tutorial.not_support_webllm') }}
diff --git a/styles/style.css b/styles/style.css
index 2959a224..32294a73 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -78,17 +78,15 @@
   --color-text-placeholder: #aeb5bd;
   --color-text-disabled: #aeb5bd;
   --color-text-quaternary: #9ea3a8;
-  --color-text-info: #1565c0;
-  --color-text-success-strong: #03943d;
-  --color-text-critical: #992121;
-  --color-text-warning: #f7c103;
+  --color-text-critical: #BF2A2A;
   --color-text-caution: #fda58f;
+
+  --color-text-link: #0d80f2;
   --color-text-link-hover: #0b6bbf;
 
-  --color-icon-link: #0d80f2;
-  --color-icon-muted: #71717a;
-  --color-icon-warning: #f7c103;
-  --color-icon-caution: #fda58f;
+  --color-text-accent: #03943d;
+  --color-text-blue: #0082FB;
+
   --color-icon-quick-action: #596066;
 
   --color-bg-app: #f5f6fb;
@@ -112,6 +110,8 @@
   --color-bg-quick-action: #f5f6f7;
   --color-bg-chat-input: #ffffff;
 
+  --color-bg-accent-green: #dcffea;
+
   --color-foreground-base: #18181b;
   --color-foreground-contrast: #000000;
 
@@ -150,11 +150,12 @@
   --color-accent-primary-hover: #089641;
   --color-accent-primary-shadow: #0e6b33;
   --color-accent-primary-disabled: #8a8a8a;
-  --color-accent-success: #60c959;
 
   --color-success: #60c959;
+  --color-warning: #f7c103;
   --color-danger: #bf2a2a;
   --color-quaternary: #bdc2c7;
+  --color-danger-soft: #e11d4826;
 
   --color-gradient-onboarding-start: #d5f4e1;
   --color-gradient-onboarding-end: #ffffff;
@@ -187,17 +188,16 @@
   --color-text-placeholder: #6e7681;
   --color-text-disabled: #6e7681;
   --color-text-quaternary: #7d8590;
-  --color-text-info: #8ab4ff;
-  --color-text-success-strong: #56d364;
-  --color-text-critical: #f85149;
-  --color-text-warning: #ffb900;
-  --color-text-caution: #f7c103;
+  --color-text-success: #24b960;
+  --color-text-critical: #BF2A2A;
+  --color-text-caution: #fda58f;
+
+  --color-text-link: #58a6ff;
   --color-text-link-hover: #78a6ff;
 
-  --color-icon-link: #58a6ff;
-  --color-icon-muted: #8b949e;
-  --color-icon-warning: #ffb900;
-  --color-icon-caution: #f7c103;
+  --color-text-accent: #56d364;
+  --color-text-blue: #1565c0;
+
   --color-icon-quick-action: #878c92;
 
   --color-bg-app: #121212;
@@ -219,14 +219,16 @@
   /* Specific colors */
   --color-bg-clickable: #212124;
   --color-bg-quick-action: #212124;
-  --color-bg-chat-input: #18181b;
+  --color-bg-chat-input: #212124;
+
+  --color-bg-accent-green: #1b3c2a;
 
   --color-foreground-base: #f0f6fc;
   --color-foreground-contrast: #ffffff;
 
   --color-border: #2a2a2a;
   --color-border-light: #212124;
-  --color-border-strong: #3c434d;
+  --color-border-strong: #2a2a2a;
   --color-border-selection: #24b96080;
   --color-border-accent: #24b960;
   --color-border-critical: #f85149;
@@ -236,7 +238,7 @@
   --color-border-hairline: #262a31;
   --color-border-overlay: #f8f9fa33;
   --color-border-quick-action: #ffffff1f;
-  --color-border-chat-input: #232326;
+  --color-border-chat-input: #2A2A2A;
   --color-divider: #212124;
 
   --color-surface-disabled: #2f363d;
@@ -259,11 +261,12 @@
   --color-accent-primary-hover: #089641;
   --color-accent-primary-shadow: #0e6b33;
   --color-accent-primary-disabled: #3c434d;
-  --color-accent-success: #56d364;
 
   --color-success: #56d364;
-  --color-danger: #f85149;
+  --color-warning: #ffb900;
+  --color-danger: #bf2a2a;
   --color-quaternary: #30363d;
+  --color-danger-soft: #f8514926;
 
   --color-gradient-onboarding-start: #1b3125;
   --color-gradient-onboarding-end: #161b22;

From 43c3e2e9f402f45b84a86f53a3d659e6ce8ede52 Mon Sep 17 00:00:00 2001
From: Neko Liu <NekoWings@outlook.com>
Date: Wed, 24 Sep 2025 16:49:22 +0800
Subject: [PATCH 6/9] chore(cross-env): update package.json to use cross-env
 for better environment variable management

---
 package.json   | 17 +++++++++--------
 pnpm-lock.yaml | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 66746dfd..70961f55 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,8 @@
   ],
   "type": "module",
   "scripts": {
-    "build:beta": "NODE_ENV=beta wxt build -c wxt.config.beta.ts",
-    "build:beta:firefox": "NODE_ENV=beta wxt build -c wxt.config.beta.ts -b firefox --mv3",
+    "build:beta": "cross-env NODE_ENV=beta wxt build -c wxt.config.beta.ts",
+    "build:beta:firefox": "cross-env NODE_ENV=beta wxt build -c wxt.config.beta.ts -b firefox --mv3",
     "build:prod": "wxt build",
     "build:prod:firefox": "wxt build -b firefox --mv3",
     "build:analyze": "wxt build --analyze",
@@ -38,16 +38,16 @@
     "compile": "vue-tsc --noEmit",
     "test:e2e": "PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=1 playwright test --config=playwright.config.ts",
     "test:unit": "vitest run",
-    "dev": "NODE_ENV=development wxt",
-    "dev:edge": "NODE_ENV=development wxt -b edge",
-    "dev:firefox": "NODE_ENV=development wxt -b firefox --mv3",
+    "dev": "cross-env NODE_ENV=development wxt",
+    "dev:edge": "cross-env NODE_ENV=development wxt -b edge",
+    "dev:firefox": "cross-env NODE_ENV=development wxt -b firefox --mv3",
     "postinstall": "wxt prepare",
     "release:beta": "release-it --preRelease=beta --config .release-it.beta.json",
     "release:prod": "release-it",
     "release:patch": "release-it patch",
-    "zip:beta": "NODE_ENV=beta wxt zip -c wxt.config.beta.ts",
-    "zip:beta:edge": "NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b edge",
-    "zip:beta:firefox": "NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b firefox --mv3",
+    "zip:beta": "cross-env NODE_ENV=beta wxt zip -c wxt.config.beta.ts",
+    "zip:beta:edge": "cross-env NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b edge",
+    "zip:beta:firefox": "cross-env NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b firefox --mv3",
     "zip:prod": "wxt zip",
     "zip:prod:firefox": "wxt zip -b firefox --mv3",
     "prepare": "husky"
@@ -146,6 +146,7 @@
     "@vue/test-utils": "^2.4.6",
     "@webgpu/types": "^0.1.60",
     "@wxt-dev/module-vue": "^1.0.2",
+    "cross-env": "^10.0.0",
     "defu": "^6.1.4",
     "eslint": "^9.26.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0eb4fd92..cdcd534e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,9 @@ importers:
       '@wxt-dev/module-vue':
         specifier: ^1.0.2
         version: 1.0.2(vite@6.3.5(@types/node@24.0.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.87.0)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))(wxt@0.20.6(@types/node@24.0.4)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.1)(sass-embedded@1.87.0)(yaml@2.7.1))
+      cross-env:
+        specifier: ^10.0.0
+        version: 10.0.0
       defu:
         specifier: ^6.1.4
         version: 6.1.4
@@ -560,6 +563,9 @@ packages:
   '@emnapi/runtime@1.4.3':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
+  '@epic-web/invariant@1.0.0':
+    resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
+
   '@esbuild/aix-ppc64@0.25.4':
     resolution: {integrity: sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q==}
     engines: {node: '>=18'}
@@ -2473,6 +2479,11 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  cross-env@10.0.0:
+    resolution: {integrity: sha512-aU8qlEK/nHYtVuN4p7UQgAwVljzMg8hB4YK5ThRqD2l/ziSnryncPNn7bMLt5cFYsKVKBh8HqLqyCoTupEUu7Q==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -6236,6 +6247,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@epic-web/invariant@1.0.0': {}
+
   '@esbuild/aix-ppc64@0.25.4':
     optional: true
 
@@ -8278,6 +8291,11 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  cross-env@10.0.0:
+    dependencies:
+      '@epic-web/invariant': 1.0.0
+      cross-spawn: 7.0.6
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1

From 54ab5a1cea7f926ff0606da791c118e511656e2e Mon Sep 17 00:00:00 2001
From: Neko Liu <NekoWings@outlook.com>
Date: Wed, 24 Sep 2025 16:54:50 +0800
Subject: [PATCH 7/9] fix(Input): correct shadow styles for error state in
 input component

---
 components/Input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Input.vue b/components/Input.vue
index eb709a2a..32830d96 100644
--- a/components/Input.vue
+++ b/components/Input.vue
@@ -11,7 +11,7 @@
         props.class,
         props.disabled ? 'opacity-50' : '',
         props.error
-          ? 'shadow-[0px_0px_0px_3px_var(--color-border-c),0px_0px_0px_1px_var(--color-border-critical)] focus:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
+          ? 'shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)] focus:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
           : '',
         isOverLimit
           ? 'shadow-[0px_0px_0px_1px_var(--color-warning)] focus:shadow-[0px_0px_0px_1px_var(--color-warning)]'

From eaa6f1d695b7a640c46342a66f600bf2e944aa3c Mon Sep 17 00:00:00 2001
From: Neko Liu <NekoWings@outlook.com>
Date: Wed, 24 Sep 2025 17:20:46 +0800
Subject: [PATCH 8/9] fix(ui): improve agent-task ui style on fetching pages

---
 assets/icons/web.svg                      | 4 ++--
 components/MarkdownViewer.vue             | 2 +-
 components/web-components/reading-task.ts | 9 +++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/assets/icons/web.svg b/assets/icons/web.svg
index 58701760..c1c14c9b 100644
--- a/assets/icons/web.svg
+++ b/assets/icons/web.svg
@@ -1,5 +1,5 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M6.03957 10.6453C5.70092 10.6453 5.38161 10.5292 5.08166 10.297C4.78171 10.068 4.51885 9.74543 4.29308 9.32936C4.06731 8.9133 3.88992 8.42629 3.76091 7.86831C3.6319 7.31034 3.56739 6.70398 3.56739 6.04925C3.56739 5.39452 3.6319 4.78655 3.76091 4.22535C3.88992 3.66415 4.06731 3.17552 4.29308 2.75946C4.51885 2.3434 4.7801 2.02087 5.07683 1.79187C5.37678 1.55965 5.69769 1.44354 6.03957 1.44354C6.38468 1.44354 6.7056 1.55965 7.00232 1.79187C7.30227 2.02087 7.56513 2.3434 7.7909 2.75946C8.0199 3.17552 8.19729 3.66415 8.32308 4.22535C8.44886 4.78655 8.51175 5.39452 8.51175 6.04925C8.51175 6.70398 8.44725 7.31034 8.31824 7.86831C8.19245 8.42629 8.01506 8.9133 7.78607 9.32936C7.5603 9.74543 7.29743 10.068 6.99748 10.297C6.70076 10.5292 6.38145 10.6453 6.03957 10.6453ZM6.03957 2.07247C5.80735 2.07247 5.5832 2.17891 5.3671 2.39177C5.15423 2.60464 4.96394 2.89653 4.79623 3.26744C4.63174 3.63512 4.50111 4.05925 4.40435 4.53982C4.30759 5.01716 4.25922 5.5203 4.25922 6.04925C4.25922 6.57497 4.30759 7.07489 4.40435 7.54901C4.50111 8.02312 4.63174 8.44564 4.79623 8.81654C4.96394 9.18423 5.15423 9.4745 5.3671 9.68737C5.5832 9.90347 5.80735 10.0115 6.03957 10.0115C6.27179 10.0115 6.49434 9.90347 6.70721 9.68737C6.9233 9.4745 7.11521 9.18261 7.28292 8.81171C7.45064 8.4408 7.58287 8.01829 7.67963 7.54417C7.77639 7.07005 7.82477 6.57175 7.82477 6.04925C7.82477 5.5203 7.77639 5.01716 7.67963 4.53982C7.58287 4.05925 7.45064 3.63512 7.28292 3.26744C7.11521 2.89653 6.9233 2.60464 6.70721 2.39177C6.49434 2.17891 6.27179 2.07247 6.03957 2.07247ZM5.70576 1.50643H6.38307V10.5534H5.70576V1.50643ZM6.03957 7.73769C6.54594 7.73769 7.0249 7.77962 7.47644 7.86347C7.92798 7.9441 8.33275 8.06021 8.69076 8.2118C9.05199 8.36339 9.34388 8.5424 9.56642 8.74881L9.04877 9.17455C8.83912 9.01329 8.58271 8.87621 8.27953 8.76333C7.97958 8.64722 7.64093 8.56013 7.26357 8.50208C6.88621 8.4408 6.47821 8.41016 6.03957 8.41016C5.60416 8.41016 5.19616 8.4408 4.81558 8.50208C4.43822 8.56013 4.09795 8.64722 3.79477 8.76333C3.49482 8.87621 3.24164 9.01329 3.03522 9.17455L2.51756 8.74881C2.74011 8.5424 3.03038 8.36339 3.38839 8.2118C3.74639 8.06021 4.15117 7.9441 4.60271 7.86347C5.05747 7.77962 5.53643 7.73769 6.03957 7.73769ZM10.476 5.70092V6.37339H1.60803V5.70092H10.476ZM6.03957 4.36565C5.53643 4.36565 5.05747 4.32533 4.60271 4.2447C4.15117 4.16084 3.74639 4.04312 3.38839 3.89153C3.03038 3.73994 2.74011 3.56094 2.51756 3.35452L3.03522 2.92878C3.24486 3.09005 3.49966 3.22874 3.79961 3.34485C4.09956 3.45773 4.43822 3.54481 4.81558 3.60609C5.19616 3.66415 5.60416 3.69318 6.03957 3.69318C6.47821 3.69318 6.88621 3.66415 7.26357 3.60609C7.64093 3.54481 7.97958 3.45773 8.27953 3.34485C8.58271 3.22874 8.83912 3.09005 9.04877 2.92878L9.56642 3.35452C9.34388 3.56094 9.05199 3.73994 8.69076 3.89153C8.33275 4.04312 7.92798 4.16084 7.47644 4.2447C7.0249 4.32533 6.54594 4.36565 6.03957 4.36565ZM6.03957 11.0372C5.34936 11.0372 4.70269 10.9065 4.09956 10.6453C3.49643 10.3873 2.96588 10.0293 2.50788 9.57126C2.04989 9.1165 1.69027 8.58755 1.42903 7.98442C1.171 7.37807 1.04199 6.72978 1.04199 6.03957C1.04199 5.34936 1.171 4.70269 1.42903 4.09956C1.69027 3.49321 2.04989 2.96104 2.50788 2.50305C2.96588 2.04506 3.49643 1.68705 4.09956 1.42903C4.70269 1.171 5.34936 1.04199 6.03957 1.04199C6.72978 1.04199 7.37645 1.171 7.97958 1.42903C8.58594 1.68705 9.11811 2.04506 9.5761 2.50305C10.0341 2.96104 10.3921 3.49321 10.6501 4.09956C10.9114 4.70269 11.042 5.34936 11.042 6.03957C11.042 6.72978 10.9114 7.37807 10.6501 7.98442C10.3921 8.58755 10.0341 9.1165 9.5761 9.57126C9.11811 10.0293 8.58594 10.3873 7.97958 10.6453C7.37645 10.9065 6.72978 11.0372 6.03957 11.0372ZM6.03957 10.2631C6.62335 10.2631 7.17004 10.1518 7.67963 9.92927C8.18923 9.70995 8.63754 9.40838 9.02458 9.02458C9.41161 8.63754 9.71479 8.18923 9.93411 7.67963C10.1534 7.17004 10.2631 6.62335 10.2631 6.03957C10.2631 5.4558 10.1534 4.90911 9.93411 4.39952C9.71479 3.88992 9.41161 3.44161 9.02458 3.05457C8.63754 2.66754 8.18923 2.36436 7.67963 2.14504C7.17004 1.92572 6.62335 1.81606 6.03957 1.81606C5.45902 1.81606 4.91395 1.92572 4.40435 2.14504C3.89476 2.36436 3.44483 2.66754 3.05457 3.05457C2.66754 3.44161 2.36436 3.88992 2.14504 4.39952C1.92895 4.90911 1.8209 5.4558 1.8209 6.03957C1.8209 6.62335 1.92895 7.17004 2.14504 7.67963C2.36436 8.18923 2.66754 8.63754 3.05457 9.02458C3.44483 9.40838 3.89476 9.70995 4.40435 9.92927C4.91395 10.1518 5.45902 10.2631 6.03957 10.2631Z"
+    d="M8.05273 13.6309C7.64258 13.6309 7.25586 13.4902 6.89258 13.209C6.5293 12.9316 6.21094 12.541 5.9375 12.0371C5.66406 11.5332 5.44922 10.9434 5.29297 10.2676C5.13672 9.5918 5.05859 8.85742 5.05859 8.06445C5.05859 7.27148 5.13672 6.53516 5.29297 5.85547C5.44922 5.17578 5.66406 4.58398 5.9375 4.08008C6.21094 3.57617 6.52734 3.18555 6.88672 2.9082C7.25 2.62695 7.63867 2.48633 8.05273 2.48633C8.4707 2.48633 8.85938 2.62695 9.21875 2.9082C9.58203 3.18555 9.90039 3.57617 10.1738 4.08008C10.4512 4.58398 10.666 5.17578 10.8184 5.85547C10.9707 6.53516 11.0469 7.27148 11.0469 8.06445C11.0469 8.85742 10.9688 9.5918 10.8125 10.2676C10.6602 10.9434 10.4453 11.5332 10.168 12.0371C9.89453 12.541 9.57617 12.9316 9.21289 13.209C8.85352 13.4902 8.4668 13.6309 8.05273 13.6309ZM8.05273 3.24805C7.77148 3.24805 7.5 3.37695 7.23828 3.63477C6.98047 3.89258 6.75 4.24609 6.54688 4.69531C6.34766 5.14062 6.18945 5.6543 6.07227 6.23633C5.95508 6.81445 5.89648 7.42383 5.89648 8.06445C5.89648 8.70117 5.95508 9.30664 6.07227 9.88086C6.18945 10.4551 6.34766 10.9668 6.54688 11.416C6.75 11.8613 6.98047 12.2129 7.23828 12.4707C7.5 12.7324 7.77148 12.8633 8.05273 12.8633C8.33398 12.8633 8.60352 12.7324 8.86133 12.4707C9.12305 12.2129 9.35547 11.8594 9.55859 11.4102C9.76172 10.9609 9.92188 10.4492 10.0391 9.875C10.1562 9.30078 10.2148 8.69727 10.2148 8.06445C10.2148 7.42383 10.1562 6.81445 10.0391 6.23633C9.92188 5.6543 9.76172 5.14062 9.55859 4.69531C9.35547 4.24609 9.12305 3.89258 8.86133 3.63477C8.60352 3.37695 8.33398 3.24805 8.05273 3.24805ZM7.64844 2.5625H8.46875V13.5195H7.64844V2.5625ZM8.05273 10.1094C8.66602 10.1094 9.24609 10.1602 9.79297 10.2617C10.3398 10.3594 10.8301 10.5 11.2637 10.6836C11.7012 10.8672 12.0547 11.084 12.3242 11.334L11.6973 11.8496C11.4434 11.6543 11.1328 11.4883 10.7656 11.3516C10.4023 11.2109 9.99219 11.1055 9.53516 11.0352C9.07812 10.9609 8.58398 10.9238 8.05273 10.9238C7.52539 10.9238 7.03125 10.9609 6.57031 11.0352C6.11328 11.1055 5.70117 11.2109 5.33398 11.3516C4.9707 11.4883 4.66406 11.6543 4.41406 11.8496L3.78711 11.334C4.05664 11.084 4.4082 10.8672 4.8418 10.6836C5.27539 10.5 5.76562 10.3594 6.3125 10.2617C6.86328 10.1602 7.44336 10.1094 8.05273 10.1094ZM13.4258 7.64258V8.45703H2.68555V7.64258H13.4258ZM8.05273 6.02539C7.44336 6.02539 6.86328 5.97656 6.3125 5.87891C5.76562 5.77734 5.27539 5.63477 4.8418 5.45117C4.4082 5.26758 4.05664 5.05078 3.78711 4.80078L4.41406 4.28516C4.66797 4.48047 4.97656 4.64844 5.33984 4.78906C5.70312 4.92578 6.11328 5.03125 6.57031 5.10547C7.03125 5.17578 7.52539 5.21094 8.05273 5.21094C8.58398 5.21094 9.07812 5.17578 9.53516 5.10547C9.99219 5.03125 10.4023 4.92578 10.7656 4.78906C11.1328 4.64844 11.4434 4.48047 11.6973 4.28516L12.3242 4.80078C12.0547 5.05078 11.7012 5.26758 11.2637 5.45117C10.8301 5.63477 10.3398 5.77734 9.79297 5.87891C9.24609 5.97656 8.66602 6.02539 8.05273 6.02539ZM8.05273 14.1055C7.2168 14.1055 6.43359 13.9473 5.70312 13.6309C4.97266 13.3184 4.33008 12.8848 3.77539 12.3301C3.2207 11.7793 2.78516 11.1387 2.46875 10.4082C2.15625 9.67383 2 8.88867 2 8.05273C2 7.2168 2.15625 6.43359 2.46875 5.70312C2.78516 4.96875 3.2207 4.32422 3.77539 3.76953C4.33008 3.21484 4.97266 2.78125 5.70312 2.46875C6.43359 2.15625 7.2168 2 8.05273 2C8.88867 2 9.67188 2.15625 10.4023 2.46875C11.1367 2.78125 11.7812 3.21484 12.3359 3.76953C12.8906 4.32422 13.3242 4.96875 13.6367 5.70312C13.9531 6.43359 14.1113 7.2168 14.1113 8.05273C14.1113 8.88867 13.9531 9.67383 13.6367 10.4082C13.3242 11.1387 12.8906 11.7793 12.3359 12.3301C11.7812 12.8848 11.1367 13.3184 10.4023 13.6309C9.67188 13.9473 8.88867 14.1055 8.05273 14.1055ZM8.05273 13.168C8.75977 13.168 9.42188 13.0332 10.0391 12.7637C10.6562 12.498 11.1992 12.1328 11.668 11.668C12.1367 11.1992 12.5039 10.6562 12.7695 10.0391C13.0352 9.42188 13.168 8.75977 13.168 8.05273C13.168 7.3457 13.0352 6.68359 12.7695 6.06641C12.5039 5.44922 12.1367 4.90625 11.668 4.4375C11.1992 3.96875 10.6562 3.60156 10.0391 3.33594C9.42188 3.07031 8.75977 2.9375 8.05273 2.9375C7.34961 2.9375 6.68945 3.07031 6.07227 3.33594C5.45508 3.60156 4.91016 3.96875 4.4375 4.4375C3.96875 4.90625 3.60156 5.44922 3.33594 6.06641C3.07422 6.68359 2.94336 7.3457 2.94336 8.05273C2.94336 8.75977 3.07422 9.42188 3.33594 10.0391C3.60156 10.6562 3.96875 11.1992 4.4375 11.668C4.91016 12.1328 5.45508 12.498 6.07227 12.7637C6.68945 13.0332 7.34961 13.168 8.05273 13.168Z"
     fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/components/MarkdownViewer.vue b/components/MarkdownViewer.vue
index ed9d2c28..d919525d 100644
--- a/components/MarkdownViewer.vue
+++ b/components/MarkdownViewer.vue
@@ -173,7 +173,7 @@ renderer.link = ({ href, title, text }) => {
   anchor.textContent = text
   anchor.target = '_blank'
   anchor.rel = 'noopener noreferrer'
-  anchor.className = 'text-text-link hover:text-text-link-hover underline'
+  anchor.className = 'text-text-primary hover:text-text-primary/80 underline'
   return anchor.outerHTML
 }
 
diff --git a/components/web-components/reading-task.ts b/components/web-components/reading-task.ts
index e4112d27..8cb00816 100644
--- a/components/web-components/reading-task.ts
+++ b/components/web-components/reading-task.ts
@@ -24,7 +24,7 @@ export function register() {
         display: flex;
         flex-direction: row;
         align-items: center;
-        text-size: 14px;
+        font-size: 14px;
         line-height: 20px;
         gap: 6px;
       }
@@ -50,8 +50,8 @@ export function register() {
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 2px 6px;
-        background: var(--color-bg-primary, #ffffff);
+        padding: 0px 4px;
+        background: var(--color-bg-accent-green, #dcffea);
         border-radius: 4px;
         flex: 1;
         overflow: hidden;
@@ -67,6 +67,7 @@ export function register() {
         width: 16px;
         height: 16px;
         flex-shrink: 0;
+        display: flex;
       }
 
       .task-content {
@@ -102,7 +103,7 @@ export function register() {
     private getIconForType(type: string) {
       const iconMappings = {
         search: 'web',
-        page: 'taskFetchPage',
+        page: 'web',
         tab: 'link',
         pdf: 'pdf',
         image: 'taskReadFile',

From e64b99dab89567c74151e55c8076c1c90397bb40 Mon Sep 17 00:00:00 2001
From: Neko Liu <NekoWings@outlook.com>
Date: Wed, 24 Sep 2025 17:32:12 +0800
Subject: [PATCH 9/9] fix(theme): consolidate color variables and remove unused
 colors.

---
 .../GmailTools/GmailComposeCard.vue           |  8 +++----
 .../components/GmailTools/GmailReplyCard.vue  |  4 ++--
 .../WritingTools/SuggestionCard.vue           |  2 +-
 .../BackendSelectionTutorialCard.vue          |  2 +-
 styles/style.css                              | 24 ++++---------------
 5 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/entrypoints/content/components/GmailTools/GmailComposeCard.vue b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
index 99875c64..e5ad6f12 100644
--- a/entrypoints/content/components/GmailTools/GmailComposeCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
@@ -46,7 +46,7 @@
               v-else
               class="relative"
             >
-              <div class="text-text-blue text-sm mr-10">
+              <div class="text-text-accent-blue text-sm mr-10">
                 {{ optimizedSubject }}
               </div>
               <!-- Copy Button for Subject -->
@@ -56,7 +56,7 @@
                 :title="t('gmail_tools.cards.compose.copy_subject_to_clipboard')"
                 @click="copySubjectToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-text-blue" />
+                <CopyIcon class="w-4 h-4 text-text-accent-blue" />
               </button>
             </div>
           </div>
@@ -93,7 +93,7 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-text-accent mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
+                class="text-text-accent-green mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
                 :text="optimizedBody"
               />
               <!-- Copy Button for Body -->
@@ -103,7 +103,7 @@
                 :title="t('gmail_tools.cards.compose.copy_body_to_clipboard')"
                 @click="copyBodyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-text-accent" />
+                <CopyIcon class="w-4 h-4 text-text-accent-green" />
               </button>
             </div>
           </div>
diff --git a/entrypoints/content/components/GmailTools/GmailReplyCard.vue b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
index 7044ef23..d09d8641 100644
--- a/entrypoints/content/components/GmailTools/GmailReplyCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
@@ -36,7 +36,7 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-text-accent mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
+                class="text-text-accent-green mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
                 :text="output"
               />
               <!-- Copy Button -->
@@ -46,7 +46,7 @@
                 :title="t('gmail_tools.cards.reply.copy_to_clipboard')"
                 @click="copyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-text-accent" />
+                <CopyIcon class="w-4 h-4 text-text-accent-green" />
               </button>
             </div>
           </div>
diff --git a/entrypoints/content/components/WritingTools/SuggestionCard.vue b/entrypoints/content/components/WritingTools/SuggestionCard.vue
index dbea7d2a..18a9893b 100644
--- a/entrypoints/content/components/WritingTools/SuggestionCard.vue
+++ b/entrypoints/content/components/WritingTools/SuggestionCard.vue
@@ -63,7 +63,7 @@
               class="max-h-[min(90vh,500px)] overflow-y-auto"
             >
               <MarkdownViewer
-                class="text-text-accent"
+                class="text-text-accent-green"
                 :text="output"
               />
             </div>
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
index dd978c91..da86f770 100644
--- a/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
@@ -2,7 +2,7 @@
   <div
     class="px-4 py-4 flex flex-col gap-3 items-stretch"
   >
-    <div class="text-text-accent font-medium text-xs">
+    <div class="text-text-accent-green font-medium text-xs">
       {{ t('onboarding.guide.step1') }}
     </div>
     <div class="shrink-0 grow-0 text-[15px] font-semibold flex flex-col gap-4">
diff --git a/styles/style.css b/styles/style.css
index 32294a73..70ec0393 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -84,8 +84,8 @@
   --color-text-link: #0d80f2;
   --color-text-link-hover: #0b6bbf;
 
-  --color-text-accent: #03943d;
-  --color-text-blue: #0082FB;
+  --color-text-accent-green: #03943d;
+  --color-text-accent-blue: #0082FB;
 
   --color-icon-quick-action: #596066;
 
@@ -100,8 +100,6 @@
   --color-bg-divider: #747a80;
 
   --color-bg-info-subtle: #e5f3ff;
-  --color-bg-success-subtle: #dcffea;
-  --color-bg-warning-subtle: #fbf8f4;
   --color-bg-overlay-contrast: #27272a;
   --color-bg-neutral-subtle: #f2f2f2;
 
@@ -113,7 +111,6 @@
   --color-bg-accent-green: #dcffea;
 
   --color-foreground-base: #18181b;
-  --color-foreground-contrast: #000000;
 
   --color-border: #e5e7eb;
   --color-border-light: #0000001a;
@@ -122,7 +119,6 @@
   --color-border-accent: #24b960;
   --color-border-critical: #e11d48;
   --color-border-critical-soft: #e11d4826;
-  --color-border-warning: #e53232;
   --color-border-disabled: #a0a0a0;
   --color-border-hairline: #0000000d;
   --color-border-overlay: #18181b3d;
@@ -134,10 +130,8 @@
 
   --color-overlay-scrim: #0000008b;
   --color-overlay-muted: #00000017;
-  --color-overlay-strong: #00000066;
   --color-overlay-subtle-on-light: rgba(0, 0, 0, 0.08);
   --color-overlay-subtle-on-dark: rgba(255, 255, 255, 0.16);
-  --color-overlay-muted-on-dark: rgba(255, 255, 255, 0.32);
 
   --color-shadow-soft: #0000000a;
   --color-shadow-medium: #00000014;
@@ -155,7 +149,6 @@
   --color-warning: #f7c103;
   --color-danger: #bf2a2a;
   --color-quaternary: #bdc2c7;
-  --color-danger-soft: #e11d4826;
 
   --color-gradient-onboarding-start: #d5f4e1;
   --color-gradient-onboarding-end: #ffffff;
@@ -171,7 +164,6 @@
   --color-mask-disabled: #ffffffaf;
   --color-arrival-shadow: #92929225;
   --color-loading-track: #222;
-  --color-progress-accent: #24b960;
 
   --shadow-01: 0px 8px 16px 0px var(--color-shadow-medium),
     0px 4px 8px 0px var(--color-shadow-medium),
@@ -195,8 +187,8 @@
   --color-text-link: #58a6ff;
   --color-text-link-hover: #78a6ff;
 
-  --color-text-accent: #56d364;
-  --color-text-blue: #1565c0;
+  --color-text-accent-green: #56d364;
+  --color-text-accent-blue: #1565c0;
 
   --color-icon-quick-action: #878c92;
 
@@ -211,8 +203,6 @@
   --color-bg-divider: #878c92;
 
   --color-bg-info-subtle: #033867;
-  --color-bg-success-subtle: #1b3c2a;
-  --color-bg-warning-subtle: #2f2313;
   --color-bg-overlay-contrast: #1f2326;
   --color-bg-neutral-subtle: #1f2326;
 
@@ -224,7 +214,6 @@
   --color-bg-accent-green: #1b3c2a;
 
   --color-foreground-base: #f0f6fc;
-  --color-foreground-contrast: #ffffff;
 
   --color-border: #2a2a2a;
   --color-border-light: #212124;
@@ -233,7 +222,6 @@
   --color-border-accent: #24b960;
   --color-border-critical: #f85149;
   --color-border-critical-soft: #f8514926;
-  --color-border-warning: #ffaf00;
   --color-border-disabled: #3c434d;
   --color-border-hairline: #262a31;
   --color-border-overlay: #f8f9fa33;
@@ -245,10 +233,8 @@
 
   --color-overlay-scrim: #000000bf;
   --color-overlay-muted: rgba(255, 255, 255, 0.08);
-  --color-overlay-strong: #00000080;
   --color-overlay-subtle-on-light: rgba(0, 0, 0, 0.24);
   --color-overlay-subtle-on-dark: rgba(255, 255, 255, 0.16);
-  --color-overlay-muted-on-dark: rgba(255, 255, 255, 0.32);
 
   --color-shadow-soft: #0000001f;
   --color-shadow-medium: #ffffff14;
@@ -266,7 +252,6 @@
   --color-warning: #ffb900;
   --color-danger: #bf2a2a;
   --color-quaternary: #30363d;
-  --color-danger-soft: #f8514926;
 
   --color-gradient-onboarding-start: #1b3125;
   --color-gradient-onboarding-end: #161b22;
@@ -282,7 +267,6 @@
   --color-mask-disabled: rgba(13, 17, 23, 0.7);
   --color-arrival-shadow: rgba(0, 0, 0, 0.32);
   --color-loading-track: #30363d;
-  --color-progress-accent: #20a655;
 
   --shadow-01: 0px 8px 16px 0px var(--color-shadow-medium),
     0px 4px 8px 0px var(--color-shadow-medium),