diff --git a/layout/includes/page/tags.pug b/layout/includes/page/tags.pug
index 0e8aa58..17e4ec2 100644
--- a/layout/includes/page/tags.pug
+++ b/layout/includes/page/tags.pug
@@ -1,2 +1,3 @@
+- let { colormode, custom_colors } = theme.aside.card_tags
 .tag-cloud-list.text-center
-  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em', colormode: page.colormode, custom_colors: page.custom_colors})
+  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em', colormode: colormode, custom_colors: custom_colors})
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index 2328850..eaae0be 100644
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -58,13 +58,9 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
 
   const userColors = normalizeColors(custom_colors)
 
-  const resolveColor = (idx) => {
-    if (colormode === 'custom' && userColors && userColors.length) {
-      if (userColors.length === 1) return userColors[0]
-      return userColors[idx % userColors.length]
-    }
-    return getRandomColor()
-  }
+  const resolveColorClass = (idx) => `tag-color-${idx % userColors.length}`
+
+  const generateSizeStyle = (size, unit) => `font-size: ${parseFloat(size.toFixed(2))}${unit};`
 
   const generateStyle = (size, unit, page, color) => {
     const colorStyle = page === 'tags' ? `background-color: ${color};` : `color: ${color};`
@@ -74,7 +70,14 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
   return source.sort(orderby, order).map((tag, idx) => {
     const ratio = length ? sizeMap.get(tag.length) / length : 0
     const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
-    const color = resolveColor(idx)
+
+    if (colormode === 'custom' && userColors && userColors.length) {
+      const colorClass = resolveColorClass(idx)
+      const style = generateSizeStyle(size, unit)
+      return `<a href="${env.url_for(tag.path)}" class="tag-cloud-item ${colorClass}" style="${style}">${tag.name}</a>`
+    }
+
+    const color = getRandomColor()
     const style = generateStyle(size, unit, page, color)
     return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
   }).join('')
diff --git a/source/css/_page/tags.styl b/source/css/_page/tags.styl
index 1b272d6..0a91d9b 100644
--- a/source/css/_page/tags.styl
+++ b/source/css/_page/tags.styl
@@ -89,3 +89,16 @@
 .page-title
   & + .tag-cloud-list
     text-align: left
+
+tag_colors = hexo-config('aside.card_tags.custom_colors')
+
+.tag-cloud-list .tag-cloud-item
+  background-color var(--tag-cloud-color)
+
+.card-tag-cloud .tag-cloud-item
+  color var(--tag-cloud-color)
+
+if tag_colors && length(tag_colors) > 0
+  for c, i in tag_colors
+    .tag-cloud-item.tag-color-{i}
+      --tag-cloud-color convert(c)