主题样式

风格

源文件字段
themes/material-x/_config.ymlstyle

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

示例

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

字体字号

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

自定义字体

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

./_config.yml文件中找到或者新增import字段,例如:

1
2
3
4
import:
link:
rel: stylesheet
href: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/Ubuntu/Ubuntu-Regular.ttf

字体源

可以自己根据稳定性和速度决定。选好了字体后需要在source/less/_fonts.less中修改font-family。


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

字号

示例

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;

布局尺寸

源文件
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;

导航栏

示例

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;

圆角

示例

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; // 暗色主题

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 背景色 ----------------
// 导航栏背景,默认和主题色保持一致
@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;
// 链接颜色
@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;



评论