diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index b4dd8c6..0fa4a03 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react'
 import { Route } from 'react-router-dom'
 import { hot } from 'react-hot-loader'
+import classnames from 'classnames'
 import { I18nProps } from '@models'
+import { isClashX } from '@lib/jsBridge'
 import './App.scss'
 
 import Overview from '@containers/Overview'
@@ -26,7 +28,7 @@ export default class App extends React.Component<AppProps, {}> {
         ]
 
         return (
-            <div className="app">
+            <div className={classnames('app', { 'clash-x': !isClashX() })}>
                 <SlideBar routes={routes} />
                 <div className="page-container">
                     {
diff --git a/src/containers/Sidebar/style.scss b/src/containers/Sidebar/style.scss
index 6e2ae0f..0b767f2 100644
--- a/src/containers/Sidebar/style.scss
+++ b/src/containers/Sidebar/style.scss
@@ -36,7 +36,7 @@
         > a,
         a:active,
         a:visited {
-            color: $color-gray;
+            color: $color-gray-darken;
             text-decoration: none;
         }
 
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 87e46a9..6e82100 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -26,6 +26,10 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
+.app.clash-x {
+    background: #f4f5f6;
+}
+
 .page-container {
     width: 100%;
     margin: 20px 0;