计软杂谈hexo

This article introduces how to customize your hexo-theme-reimu for versions v1.0.0+ of the theme.

Dynamic Theme Color Adaptation (Experimental Feature in v1.7.0+)

Disabled by default. When enabled, it dynamically generates theme colors based on the dominant color of the article’s banner image, following Google’s Material You design guidelines.

1
2
material_theme:
  enable: false # true | false

Note: When this feature is enabled, the crossorigin="anonymous" attribute will be added to the img element of the banner to fetch the dominant color of the image. Please ensure your image server supports cross-origin access or use a third-party image proxy.

Manual Customizing Theme Colors

The hexo-theme-reimu theme supports customizing theme colors through CSS variables. You can modify the CSS variables under the :root pseudo-class to customize your theme colors.

The variable file is located at source/css/_variables.styl. While you can find all CSS variables in this file, you only need to modify the variables under the following pseudo-classes

v1.8.0 added internal_theme configuration to customize theme colors. You can change the theme colors by modifying the internal_theme configuration in params.yml. The default theme colors are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
internal_theme:
  light:
    --red-0: '#ff0000'
    --red-1: '#ff5252'
    --red-2: '#ff7c7c'
    --red-3: '#ffafaf'
    --red-4: '#ffd0d0'
    --red-5: '#ffecec'
    --red-5-5: '#fff3f3'
    --red-6: '#fff7f7'
    --color-red-6-shadow: 'rgba(255, 78, 78, 0.6)'
    --color-red-3-shadow: 'rgba(255, 78, 78, 0.3)'

    --highlight-nav: '#e6e6e6'
    --highlight-scrollbar: '#d6d6d6'
    --highlight-background: '#f7f7f7'
    --highlight-current-line: '#dadada'
    --highlight-selection: '#e9e9e9'
    --highlight-foreground: '#4d4d4d'
    --highlight-comment: '#7d7d7d'
    --highlight-red: '#c8362b'
    --highlight-orange: '#b66014'
    --highlight-yellow: '#cb911d'
    --highlight-green: '#2ea52e'
    --highlight-aqua: '#479d9d'
    --highlight-blue: '#1973b8'
    --highlight-purple: '#7135ac'
  dark:
    --red-4: 'rgba(255, 208, 208, 0.5)'
    --red-5: 'rgba(255,228,228,0.15)'
    --red-5-5: 'rgba(255,236,236,0.05)'
    --red-6: 'rgba(255, 243, 243, 0.2)'

    --highlight-nav: '#2e353f'
    --highlight-scrollbar: '#454d59'
    --highlight-background: '#22272e'
    --highlight-current-line: '#393939'
    --highlight-selection: '#515151'
    --highlight-foreground: '#cccccc'
    --highlight-comment: '#999999'
    --highlight-red: '#f47067'
    --highlight-orange: '#f69d50'
    --highlight-yellow: '#ffcc66'
    --highlight-green: '#99cc99'
    --highlight-aqua: '#66cccc'
    --highlight-blue: '#54b6ff'
    --highlight-purple: '#dcbdfb'

Customizing Fonts

You can define Google Fonts using the following configuration:

1
2
3
4
5
6
7
8
9
10
# https://fonts.google.com/
font:
  enable: true # Enable Google Fonts
  article:
    - Mulish
    - Noto Serif SC
  code:
    # - Ubuntu Mono
    # - Source Code Pro
    # - JetBrains Mono

In v1.1.0, the local_font configuration was added to define local fonts, which have lower priority than Google Fonts:

1
2
3
4
5
6
7
8
9
10
11
local_font:
  article:
    - "-apple-system"
    - PingFang SC
    - Microsoft YaHei
    - sans-serif
  code:
    - Menlo
    - Monaco
    - Consolas
    - monospace

v1.8.0 added custom_font configuration for defining custom fonts, which has the highest priority:

1
2
3
4
5
6
custom_font:
  enable: true
  article:
    - css: https://fontsapi.zeoseven.com/292/main/result.css # font css
      name: LXGW WenKai # font css
  code:

Customizing Icons

v1.0.0 underwent significant refactoring, exposing many configurations for users to modify the default icons.

Header / Sidebar Icons

The structure of the menu configuration in v1.0.0 has changed, allowing users to customize icons. If the icon is left empty, the default Tai Chi icon will be used. You can fill in a hexadecimal number to customize the icon, supporting both FontAwesome and Icon Font.

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  - name: home
    url: /
    icon: # Leave empty to use the default Tai Chi icon
  - name: archives
    url: /archives
    icon: f0c1 # You can fill in a hexadecimal number to customize the icon, supporting FontAwesome and Icon Font
  - name: about
    url: /about
    icon:
  - name: friend
    url: /friend
    icon:

In v1.0.0, the footer, top, and sponsor configurations have added an icon configuration for customizing icons.

  • url is the path to the icon, relative to css/style.css, so you need to go up one level to find the images folder.
  • rotate determines whether the icon should rotate, default is true.
  • mask determines whether the image should be used as a mask (i.e., only the outline of the PNG image is displayed), default is true.

v1.8.4 icon supports image path, such as /avatar/avatar.webp.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
footer:
  icon:
    url: "../images/taichi.png" # Path relative to css/style.css, so you need to go up one level to find the images folder
    rotate: true
    mask: true

top:
  icon:
    url: "../images/taichi.png"
    rotate: true
    mask: true

sponsor:
  icon:
    url: "../images/taichi.png"
    rotate: true
    mask: true

Loading Icon

In v1.0.0, the preloader configuration has added an icon configuration for customizing the loading icon. If the icon is left empty, the default inline SVG will be used (to ensure fast initial loading). You can fill in a link to customize the loading icon.

It is not recommended to use overly large icons to avoid affecting loading speed.

1
2
3
4
5
preloader:
  enable: true
  text: Praying...
  icon: # Leave empty to use the default inline SVG (for fast initial loading). You can fill in a link to customize the loading icon, e.g., '/images/taichi.png'
  rotate: true

Anchor Icon

In v1.0.0, the anchor_icon configuration was added to customize the anchor icon. By default, the # icon is used. You can fill in a hexadecimal number to customize the icon, supporting both FontAwesome and Icon Font.

1
anchor_icon: # Leave empty to use the default # icon

v1.8.5 anchor_icon supports passing false to hide anchor icon.

Cursor Icon (v1.3.0+)

In v1.3.0, the reimu_cursor.cursor configuration was added to customize the cursor icon. You can fill in a path relative to css/style.css to customize the cursor icon.

1
2
3
4
5
6
reimu_cursor:
  enable: true
  cursor:
    default: ../images/cursor/reimu-cursor-default.png
    pointer: ../images/cursor/reimu-cursor-pointer.png
    text: ../images/cursor/reimu-cursor-text.png

Leave a comment

waline