diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index f7c647e..b87dee8 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -38,6 +38,7 @@ module.exports = {
         ['script', { src: 'https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js' }],
         ['script', { src: 'https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js' }],
     ],
+    theme: 'vuepress-theme-dplayer',
     themeConfig: {
         repo: 'MoePlayer/DPlayer',
         editLinks: true,
diff --git a/docs/.vuepress/theme/components/CarbonAds.vue b/docs/.vuepress/theme/components/CarbonAds.vue
new file mode 100644
index 0000000..107fad8
--- /dev/null
+++ b/docs/.vuepress/theme/components/CarbonAds.vue
@@ -0,0 +1,65 @@
+<script>
+export default {
+  name: 'CarbonAds',
+
+  watch: {
+    '$route' (to, from) {
+      if (
+        to.path !== from.path
+        // Only reload if the ad has been loaded
+        // otherwise it's possible that the script is appended but
+        // the ads are not loaded yet. This would result in duplicated ads.
+        && this.$el.querySelector('#carbonads')
+      ) {
+        this.$el.innerHTML = ''
+        this.load()
+      }
+    }
+  },
+
+  mounted () {
+    this.load()
+  },
+
+  methods: {
+    load () {
+      const s = document.createElement('script')
+      s.id = '_carbonads_js'
+      s.src = `//cdn.carbonads.com/carbon.js?serve=CEAI6277&placement=dplayerjsorg`
+      this.$el.appendChild(s)
+    }
+  },
+
+  render (h) {
+    return h('div', { class: 'carbon-ads' })
+  }
+}
+</script>
+
+<style lang="stylus">
+.carbon-ads
+  min-height 102px
+  padding 1.5rem 1.5rem 0
+  margin-bottom -0.5rem
+  font-size 0.75rem
+  a
+    color #444
+    font-weight normal
+    display inline
+  .carbon-img
+    float left
+    margin-right 1rem
+    border 1px solid $borderColor
+    img
+      display block
+  .carbon-poweredby
+    color #999
+    display block
+    margin-top 0.5em
+
+@media (max-width: $MQMobile)
+  .carbon-ads
+    .carbon-img img
+      width 100px
+      height 77px
+</style>
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
new file mode 100644
index 0000000..a85dc0e
--- /dev/null
+++ b/docs/.vuepress/theme/index.js
@@ -0,0 +1,3 @@
+module.exports = {
+    extend: '@vuepress/theme-default',
+};
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
new file mode 100644
index 0000000..9463595
--- /dev/null
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -0,0 +1,21 @@
+<template>
+  <ParentLayout>
+    <template #sidebar-top>
+      <CarbonAds />
+    </template>
+  </ParentLayout>
+</template>
+
+<script>
+import ParentLayout from '@parent-theme/layouts/Layout.vue'
+import CarbonAds from '@theme/components/CarbonAds.vue'
+
+export default {
+  name: 'Layout',
+
+  components: {
+    ParentLayout,
+    CarbonAds,
+  }
+}
+</script>
diff --git a/docs/.vuepress/theme/package.json b/docs/.vuepress/theme/package.json
new file mode 100644
index 0000000..a0eca59
--- /dev/null
+++ b/docs/.vuepress/theme/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "vuepress-theme-dplayer",
+    "main": "index.js"
+}