主题 Theme
在本文中，我们将学习如何用 VTable 中的主题配置项（theme 主题）来定制和美化数据表格的展示效果。
主题控制着表格的外观，使表格更具美感，并对数据分析有一定的帮助。需要注意的是：主题 theme 是从整体设置表格的样式，另外还可以通过style来分别对每一列去设置样式。
主题支持对表头，表身及外边框等模块的静态样式进行设置，设置内容包括：字体，字号，颜色，背景色，单元格分割线粗细及颜色；也支持对单元格各个交互效果模块的动态样式配置，例如: 鼠标悬浮或者选中时各个单元格的样式配置。具体可查看配置项。
theme 样式对应结构
参考下图可学习常用的配置项
表头主题
表头（header）是表格展示的重要组成部分，其样式直接影响着整个表格的视觉效果。配置项为theme.headerStyle。我们可以通过修改其中的配置项，实现对表头单元格背景色、边框、文字样式等方面的调整。例如：
-
指定表头单元格的背景色：可以通过
theme.headerStyle.bgColor来设置表头单元格的背景色，支持字符串（直接指定颜色值）、函数（根据条件返回颜色值）以及 CanvasGradient 和 CanvasPattern 对象。 -
定义表头单元格的内边距：可以通过
theme.headerStyle.padding来设置表头单元格的内边距，支持数值（统一设置四个方向的内边距）和数组（分别设置上右下左四个方向的内边距）。 -
调整表头单元格内文字的水平对齐方式：可以通过
theme.headerStyle.textAlign来设置文字的水平对齐方式，支持left、right和center。
如果是透视表，需要对不同的表头配置不同的主题的时候，可以通过theme.rowHeaderStyle，theme.cornerHeaderStyle来分别配置。
body 主题
body 主题主要负责数据单元格的样式配置，通过theme.bodyStyle来指定。
通过修改 body 主题的配置项，可以实现个性化的数据单元格样式。类似于表头主题，也可以定制背景色、内边距、文字样式等属性。
其他模块主题样式
除了表头和 body 主题之外，VTable 还提供了一系列其他细分模块的主题配置项，如：
-
框架样式：通过
theme.frameStyle来设置表格整体边框颜色、宽度、线条样式、阴影效果等属性。 -
列宽调整样式：通过
theme.columnResize来设置列宽拖拽条的颜色、宽度等。 -
滚动条样式：通过
theme.scrollStyle来设置滚动条轨道的颜色、滑块的颜色以及宽度等。 -
拖拽位置标记线样式：通过
theme.dragHeaderSplitLine来设置拖拽表格换位分割线的样式。
通过对这些模块进行个性化定制，可以实现更加丰富多样的表格样式。
交互效果
通过设置 hover 背景色，设置鼠标 hover 到单元格时的背景效果。
通过设置 selectionStyle 来设置单元格被选中时的高亮边框及背景色。
内置主题
VTable 中内置一套默认主题/DEFAULT，一套 ARCO 风格，一套暗黑主题/DARK，一套鲜明主题/BRIGHT，一套极简主题/SIMPLIFY
默认主题示例代码
具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DEFAULT.ts
// 使用默认主题
option.theme = VTable.themes.DEFAULT;
const tableInstance = new VTable.ListTable(option);
ARCO 主题示例代码
// 使用默认主题
option.theme = VTable.themes.ARCO;
const tableInstance = new VTable.ListTable(option);
暗黑主 题示例代码
具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DARK.ts
// 使用默认主题
option.theme = VTable.themes.DARK;
const tableInstance = new VTable.ListTable(option);
鲜明主题示例代码
具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/BRIGHT.ts
// 使用默认主题
option.theme = VTable.themes.BRIGHT;
const tableInstance = new VTable.ListTable(option);
极简主题示例代码
具体配置内容可查看：https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/SIMPLIFY.ts
// 使用默认主题
option.theme = VTable.themes.SIMPLIFY;
const tableInstance = new VTable.ListTable(option);
自定义主题
如果满足不了需求，可以在某个主题基础上扩展，或者完全自定义。、
扩展自定义
如针对 DEFAULT 进行扩展
option.theme = VTable.themes.DEFAULT.extends({ headerStyle:{ color: 'red'}})
const tableInstance = new vTable.ListTable(option);
全量自定义主题
总之，在 VTable 中，通过灵活运用主题配置项，我们可以轻松打造出专属的、符合需求的数据表格样式。请参照本教程，结合实际场景进行合理配置，发挥 VTable 强大的主题定制能力。