chore: dropdown context-menu demo supports dark mode (#39859)

components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -2889,8 +2889,8 @@ Array [
 exports[`renders ./components/dropdown/demo/context-menu.tsx extend context correctly 1`] = `
 Array [
   <div
-    class="ant-dropdown-trigger site-dropdown-context-menu"
-    style="text-align:center;height:200px;line-height:200px"
+    class="ant-dropdown-trigger"
+    style="color:rgba(0, 0, 0, 0.45);background:#f5f5f5;height:200px;text-align:center;line-height:200px"
   >
     Right Click on here
   </div>,

components/dropdown/__tests__/__snapshots__/demo.test.ts.snap

@@ -150,8 +150,8 @@ exports[`renders ./components/dropdown/demo/basic.tsx correctly 1`] = `
 
 exports[`renders ./components/dropdown/demo/context-menu.tsx correctly 1`] = `
 <div
-  class="ant-dropdown-trigger site-dropdown-context-menu"
-  style="text-align:center;height:200px;line-height:200px"
+  class="ant-dropdown-trigger"
+  style="color:rgba(0, 0, 0, 0.45);background:#f5f5f5;height:200px;text-align:center;line-height:200px"
 >
   Right Click on here
 </div>

components/dropdown/demo/context-menu.md

@@ -5,17 +5,3 @@
 ## en-US
 
 The default trigger mode is `hover`, you can change it to `contextMenu`.
-
-```css
-.site-dropdown-context-menu {
-  color: #777;
-  background: #f7f7f7;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-dropdown-context-menu {
-    background: #141414;
-    color: rgba(255,255,255,.65);
-  }
-</style>

components/dropdown/demo/context-menu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
+import { Dropdown, theme } from 'antd';
 
 const items: MenuProps['items'] = [
   {
@@ -17,19 +17,26 @@ const items: MenuProps['items'] = [
   },
 ];
 
-const App: React.FC = () => (
-  <Dropdown menu={{ items }} trigger={['contextMenu']}>
-    <div
-      className="site-dropdown-context-menu"
-      style={{
-        textAlign: 'center',
-        height: 200,
-        lineHeight: '200px',
-      }}
-    >
-      Right Click on here
-    </div>
-  </Dropdown>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgLayout, colorTextTertiary },
+  } = theme.useToken();
+
+  return (
+    <Dropdown menu={{ items }} trigger={['contextMenu']}>
+      <div
+        style={{
+          color: colorTextTertiary,
+          background: colorBgLayout,
+          height: 200,
+          textAlign: 'center',
+          lineHeight: '200px',
+        }}
+      >
+        Right Click on here
+      </div>
+    </Dropdown>
+  );
+};
 
 export default App;