主题样式

风格

字段:style

默认提供了两种风格,一种是导航栏和标题栏背景是主题色,另一种是导航栏和标题栏背景与下方文本区域同色。

在主题的配置文件中:

1
2
# style: material    # 导航栏和标题栏背景是主题色
style: pure # 导航栏和标题栏背景与文本区域同色

字体字号

源文件字段功能
themes/material-x/source/less/_fonts.less@fontfamily_base@fontfamily_code@fontfamily_logofont-family设置

自定义字体

可以使用本地字体和任意CDN字体。CDN字体的使用方法:

在 themes/material-x/source/less/_fonts.less 文件中:

1
2
3
4
5
6
7
@font-face{
font-family: 'Varela Round';
src: url(https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/VarelaRound/VarelaRound-Regular.ttf);
font-weight: normal;
font-style: normal;
}
@fontfamily_base: 'Varela Round', ...

字体源


目前主题默认使用的字体源@xaoxuu/cdn-fonts是我专门为存放字体建的一个仓库,由jsdelivr提供CDN服务,目前已经收录20余种精选字体。如果你想添加某个喜爱的字体,可以提交到这里:https://github.com/xaoxuu/cdn-fonts/

字号

在 themes/material-x/source/less/_fonts.less 文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// base
@fontsize_base: 16px;
@fontsize_small: @fontsize_base * 0.875;
@lineheight_base: 1.7;
// title
@fontsize_h1: @fontsize_base * 1.5;
@fontsize_h2: @fontsize_base * 1.4;
@fontsize_h3: @fontsize_base * 1.2;
@fontsize_h4: @fontsize_base * 1.1;
@fontsize_h5: @fontsize_base * 1;
@fontsize_h6: @fontsize_small;
// article
@fontsize_article_title: @fontsize_h1 * 1.2;
@fontsize_article_title_phone: @fontsize_h2;

文字对齐方向

取值含义
left靠左
center居中
right靠右
justify两端对齐

在 themes/material-x/source/less/_layout.less 文件中:

1
2
3
@text_align_h1: left;
@text_align_h2: left;
@text_align_h3: left;

布局尺寸

在 themes/material-x/source/less/_layout.less 文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 间距
@gap: 20px;

@on_modal_threshold: 680px;
@on_phone: 820px;
@on_laptop: 990px;
@on_desktop: 1200px;
// container
@width_container: 1200px;
// post
@width_post_max: 980px;
// 侧边栏宽度
@width_sidebar: 285px;
// 搜索框的宽度,建议和侧边栏宽度保持一致
@width_searchbar: @width_sidebar;
// 一个cell的高度
@height_cell: 36px;

导航栏

在 themes/material-x/source/less/_layout.less 文件中:

1
2
3
4
5
6
7
// 导航栏高度
@height_navbar: 54px;
@fontsize_logo: 1.3em;
@fontsize_header_switcher: 1.3em;
@fontsize_header: 1em;
// 定位条和页面加载的进度条的高度
@loading_height: 4px;

圆角

在 themes/material-x/source/less/_layout.less 文件中:

1
2
3
4
5
6
// 0px: 极端,2px:硬朗,4px:常规,8px:圆润,16px:温柔
@border_radius: 8px; // 圆角半径,可以根据心情随时调整风格
@border_radius_left_line: 4px; // 左边的竖线的宽度
@border_radius_code_block: 4px; // 代码块的圆角及其滚动条的宽度

@border_radius_searchbar: 4px; // 搜索框的圆角半径,可以根据心情随时调整风格

配色

一个简单的例子

在 themes/material-x/source/less/_color.less 文件中:

1
2
3
4
5
6
7
8
// 网页背景颜色
@theme_background: #EFEFEF;
// @theme_background: #454545; // 暗色主题
// 主题色
@theme_main: #1BC3FB;
// 卡片背景颜色
@theme_cardbg: white;
// @theme_cardbg: #555; // 暗色主题

如果你想更自由地定制颜色,可以修改这里的几项

在 themes/material-x/source/less/_color.less 文件中:

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
// 背景色 ----------------
// 导航栏背景,默认和主题色保持一致
@color_bg_navbar: @theme_main;
// 代码的背景色
@color_bg_code: fade(@color_md_blue, 10%);
// 代码块的背景色
@color_bg_code_block: fade(@color_md_blue, 10%);
// 引用的颜色
@color_bg_quote: @color_mac_maximize;
// 选中部分文字的背景颜色
@color_bg_selection: fade(@color_md_blue, 20%);

// 文字颜色 ----------------
// 标题文字颜色(h1/h2)
@color_text_header: @theme_main;
// 标题文字颜色(h3)
@color_text_h3: darken(@color_text_main, 20%);
// 链接颜色
@color_text_link: @color_md_deep_orange;
// 链接高亮颜色
@color_text_highlight: @theme_main;
// 在主题色中显示的文本(一般为白或深灰)
@color_text_in_header: white;
// 正文文字颜色
@color_text_main: @dark;
// @color_text_main: white; // 暗色主题

阴影

在 themes/material-x/source/less/_defines.less 文件中:

1
2
3
4
// 卡片正常状态的阴影
@boxshadow_card_normal: @boxshadow_base_1, @boxshadow_base_2;
// 卡片漂浮起来时的阴影
@boxshadow_card_raised: @boxshadow_base_2, @boxshadow_base_4, @boxshadow_base_8, @boxshadow_base_16;



评论