fix(plugin-llms): support dark mode (#2455)

Author: SoonIter

e2e/fixtures/nav-link-items-without-suffix/index.test.ts

@@ -22,6 +22,8 @@ test.describe('Nav should functions well', async () => {
     // ElementHandler is currently discouraged by official
     // use Locator instead
     // Please refer to https://playwright.dev/docs/api/class-elementhandle
+    await page.waitForSelector('.rspress-nav-menu');
+
     _navMenu = page.locator('.rspress-nav-menu');
     navMenuItems = await page.locator('.rspress-nav-menu > *').all();
 

e2e/fixtures/package-manager-tabs/index.test.ts

@@ -20,6 +20,7 @@ test.describe('tabs-component test', async () => {
   test('Index page', async ({ page }) => {
     await page.goto(`http://localhost:${appPort}`);
 
+    await page.waitForSelector('[class^="tab_"] > div > span');
     const tabs = await page.$$('[class^="tab_"] > div > span');
     const tabsText = await Promise.all(
       tabs.map(element => element.textContent()),

packages/plugin-llms/src/runtime/LlmsCopyButton.module.scss

@@ -7,10 +7,10 @@
   gap: 8px;
 
   border-radius: 8px;
-  border: 1px solid #e5e6eb;
-  background: #fff;
+  border: 1px solid var(--rp-c-divider-light);
+  background: var(--rp-c-bg);
+  color: var(--rp-c-text-1);
 
-  color: rgba(0, 0, 0, 0.9);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -20,12 +20,10 @@
     border 0.3s ease,
     opacity 0.3s ease;
   &:hover {
-    background: #f5f5f5;
-    border: 1px solid #e5e6eb;
+    background: var(--rp-c-bg-mute);
   }
   &.loading {
-    background: #f5f5f5;
-    border: 1px solid #e5e6eb;
+    background: var(--rp-c-bg-mute);
     opacity: 0.5;
   }
   &.success {

packages/plugin-llms/src/runtime/LlmsViewOptions.module.scss

@@ -7,10 +7,10 @@
   gap: 8px;
 
   border-radius: 8px;
-  border: 1px solid #e5e6eb;
-  background: #fff;
+  border: 1px solid var(--rp-c-divider-light);
+  background: var(--rp-c-bg);
+  color: var(--rp-c-text-1);
 
-  color: rgba(0, 0, 0, 0.9);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -20,10 +20,10 @@
     background 0.3s ease,
     border 0.3s ease;
   &:hover {
-    background: #f5f5f5;
+    background: var(--rp-c-bg-mute);
   }
   &.active {
-    background: #f5f5f5;
+    background: var(--rp-c-bg-mute);
   }
 }
 
@@ -54,8 +54,10 @@
   align-items: flex-start;
 
   border-radius: 8px;
-  border: 1px solid #e5e6eb;
-  background: #fff;
+  border: 1px solid var(--rp-c-divider-light);
+  background: var(--rp-c-bg);
+  color: var(--rp-c-text-1);
+
   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
 }
 
@@ -73,7 +75,7 @@
   border-radius: 8px;
 
   &:hover {
-    background: #f5f5f5;
+    background: var(--rp-c-bg-mute);
   }
 }
 

packages/plugin-llms/src/runtime/LlmsViewOptions.tsx

@@ -163,7 +163,7 @@ const LlmsViewOptions = ({
           >
             <g
               fill="none"
-              stroke="black"
+              stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"