Fix darkmode tag-cloud color

_config.yml

@@ -305,12 +305,11 @@ post_navigation: left
 
 # TagCloud settings for tags page.
 tagcloud:
-  # All values below are same as default, change them by yourself.
   min: 12 # Minimun font size in px
   max: 30 # Maxium font size in px
-  start: "#ccc" # Start color (hex, rgba, hsla or color keywords)
-  end: "#111" # End color (hex, rgba, hsla or color keywords)
-  amount: 200 # Amount of tags, change it if you have more than 200 tags
+  amount: 200 # Total amount of tags
+  orderby: name # Order of tags
+  order: 1 # Sort order
 
 # Google Calendar
 # Share your recent schedule to others via calendar page.

layout/page.njk

@@ -34,13 +34,13 @@
               {{ _p('counter.tag_cloud', site.tags.length) }}
             </div>
             <div class="tag-cloud-tags">
-              {{ tagcloud({
-                min_font   : theme.tagcloud.min,
-                max_font   : theme.tagcloud.max,
-                amount     : theme.tagcloud.amount,
-                color      : true,
-                start_color: theme.tagcloud.start,
-                end_color  : theme.tagcloud.end})
+              {{ next_tagcloud({
+                min_font: theme.tagcloud.min,
+                max_font: theme.tagcloud.max,
+                amount  : theme.tagcloud.amount,
+                orderby : theme.tagcloud.orderby,
+                order   : theme.tagcloud.order
+                })
               }}
             </div>
           </div>

scripts/helpers/tagcloud.js

@@ -0,0 +1,54 @@
+/* global hexo */
+
+'use strict';
+
+hexo.extend.helper.register('next_tagcloud', function(options) {
+  let tags = this.site.tags;
+
+  if (!tags || !tags.length) return '';
+  options = options || {};
+
+  const min = options.min_font || 10;
+  const max = options.max_font || 20;
+  const orderby = options.orderby || 'name';
+  const order = options.order || 1;
+  const unit = options.unit || 'px';
+  const { transform } = options;
+  const separator = options.separator || ' ';
+  const result = [];
+
+  // Sort the tags
+  if (orderby === 'random' || orderby === 'rand') {
+    tags = tags.random();
+  } else {
+    tags = tags.sort(orderby, order);
+  }
+
+  // Limit the number of tags
+  if (options.amount) {
+    tags = tags.limit(options.amount);
+  }
+
+  const sizes = [];
+
+  tags.sort('length').forEach(tag => {
+    const { length } = tag;
+    if (sizes.includes(length)) return;
+
+    sizes.push(length);
+  });
+
+  const length = sizes.length - 1;
+
+  tags.forEach(tag => {
+    const ratio = length ? sizes.indexOf(tag.length) / length : 0;
+    const size = min + ((max - min) * ratio);
+    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`;
+
+    result.push(
+      `<a href="${this.url_for(tag.path)}" style="${style}" class="tag-cloud-${Math.round(ratio * 10)}">${transform ? transform(tag.name) : tag.name}</a>`
+    );
+  });
+
+  return result.join(separator);
+});

source/css/_common/components/pages/tag-cloud.styl

@@ -4,9 +4,25 @@
   a {
     display: inline-block;
     margin: 10px;
+  }
+}
 
-    &:hover {
-      color: var(--link-hover-color) !important;
+for $tag-cloud in (0 .. 10) {
+  $tag-cloud-color = mix($tag-cloud-end, $tag-cloud-start, $tag-cloud * 10);
+  .tag-cloud-{$tag-cloud} {
+    border-bottom: 1px solid $tag-cloud-color;
+    color: $tag-cloud-color;
+  }
+}
+
+if (hexo-config('darkmode')) {
+  @media (prefers-color-scheme: dark) {
+    for $tag-cloud in (0 .. 10) {
+      $tag-cloud-color = mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
+      .tag-cloud-{$tag-cloud} {
+        border-bottom: 1px solid $tag-cloud-color;
+        color: $tag-cloud-color;
+      }
     }
   }
 }

source/css/_variables/base.styl

@@ -221,6 +221,14 @@ $posts-collapse-margin          = 35px;
 $posts-collapse-margin-mobile   = 0px;
 
 
+// Tag Cloud
+// --------------------------------------------------
+$tag-cloud-start      = #aaa;
+$tag-cloud-end        = #111;
+$tag-cloud-start-dark = #555;
+$tag-cloud-end-dark   = #eee;
+
+
 // Sidebar
 // Variables for sidebar section elements.
 // --------------------------------------------------