diff --git a/components/drawer/demo/render-in-current.md b/components/drawer/demo/render-in-current.md
index 0061a648a3..8ecf57d52f 100644
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -73,7 +73,7 @@ ReactDOM.render(<App />, mountNode);
 ```
 
 <style>
-.site-drawer-render-in-current-wrapper {
+[data-theme="dark"] .site-drawer-render-in-current-wrapper {
   background: #000;
   border: 1px solid #303030;
 }
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index 1c1013918b..9e798a22ab 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -18,7 +18,6 @@ import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
 
 const pStyle = {
   fontSize: 16,
-  color: 'rgba(0,0,0,0.85)',
   lineHeight: '24px',
   display: 'block',
   marginBottom: 16,
@@ -26,18 +25,18 @@ const pStyle = {
 
 const DescriptionItem = ({ title, content }) => (
   <div
+    className="site-description-item-profile-wrapper"
     style={{
       fontSize: 14,
       lineHeight: '22px',
       marginBottom: 7,
-      color: 'rgba(0,0,0,0.65)',
     }}
   >
     <p
+      className="site-description-item-profile-p"
       style={{
         marginRight: 8,
         display: 'inline-block',
-        color: 'rgba(0,0,0,0.85)',
       }}
     >
       {title}:
@@ -100,8 +99,12 @@ class App extends React.Component {
           onClose={this.onClose}
           visible={this.state.visible}
         >
-          <p style={{ ...pStyle, marginBottom: 24 }}>User Profile</p>
-          <p style={pStyle}>Personal</p>
+          <p className="site-description-item-profile-p" style={{ ...pStyle, marginBottom: 24 }}>
+            User Profile
+          </p>
+          <p className="site-description-item-profile-p" style={pStyle}>
+            Personal
+          </p>
           <Row>
             <Col span={12}>
               <DescriptionItem title="Full Name" content="Lily" />
@@ -135,7 +138,9 @@ class App extends React.Component {
             </Col>
           </Row>
           <Divider />
-          <p style={pStyle}>Company</p>
+          <p className="site-description-item-profile-p" style={pStyle}>
+            Company
+          </p>
           <Row>
             <Col span={12}>
               <DescriptionItem title="Position" content="Programmer" />
@@ -161,7 +166,9 @@ class App extends React.Component {
             </Col>
           </Row>
           <Divider />
-          <p style={pStyle}>Contacts</p>
+          <p className="site-description-item-profile-p" style={pStyle}>
+            Contacts
+          </p>
           <Row>
             <Col span={12}>
               <DescriptionItem title="Email" content="AntDesign@example.com" />
@@ -190,3 +197,21 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ```
+
+```css
+.site-description-item-profile-wrapper {
+  color: rgba(0, 0, 0, 0.65);
+}
+.site-description-item-profile-p {
+  color: rgba(0, 0, 0, 0.85);
+}
+```
+
+<style>
+[data-theme="dark"] .site-description-item-profile-p {
+  color: rgba(255,255,255,0.85);
+}
+[data-theme="dark"] .site-description-item-profile-wrapper {
+  color: rgba(255,255,255,0.65);
+}
+</style>