两个文件视为主题的默认设计文件：design.json 和 design.css。
design.json 指定组件的样式
design.css 提供类值的定义（例如颜色和字体）
这些文件位于主题结构中的 /designs/default/ 目录中。
design.json 文件
design.json 文件具有以下结构：
{
"componentStyles": {
"scs-image": {
"styles": []
},
"scs-map": {
"styles": []
},
"scs-title": {
"styles": []
},
"scs-paragraph": {
"styles": []
},
"scs-divider": {
"styles": []
},
"scs-button": {
"styles": []
},
"scs-app": {
"styles": []
},
"scs-spacer": {
},
"scs-gallery": {
"styles": []
},
"scs-youtube": {
"styles": []
},
"scs-socialbar": {
"styles": []
},
"scs-document": {
"styles": []
}
}
}
每个 "styles":[] 条目都可以包含特定组件的样式列表。例如，标题组件提供以下默认样式：
"styles": [{
"name": "COMP_STYLE_FLAT",
"class": "scs-title-default-style"
},
{
"name": "COMP_STYLE_HIGHLIGHT",
"class": "scs-title-style-2"
},
{
"name": "COMP_STYLE_DIVIDER",
"class": "scs-title-style-3"
}
]
注：
如果为组件创建定制样式并将其映射到design.json 中的样式，则无需像随系统提供的那些样式那样使用完整名称。只需指定要使用的字符串。例如，名称不使用 "COMP_STYLE_BOX"，仅使用 "Box"。这意味着仅名称 "Box"（而不是 "COMP_STYLE_BOX"）将显示在该组件“设置”面板的样式选项卡的列表中。名称值映射到要在用户界面中显示的实际词语，例如：
"COMP_STYLE_FLAT": "Flat",
"COMP_STYLE_HIGHLIGHT": "Highlight",
"COMP_STYLE_DIVIDER": "Divider",
design.css 文件
design.css 文件提供类值的定义。这里有几个示例。
.scs-title-default-style {
color: #333333;
display: block;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: normal; }
.scs-title-style-2 {
background-color: #DEF300;
color: #333333;
font-family: adobe-clean, sans-serif;
padding-top: 2em;
padding-bottom: 2em; }
.scs-button-default-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
color: #0572ce;
box-shadow: inset 0 1px 0 #f7f8f9;
text-shadow: 0 1px 0 #f7f8f9; }
.scs-button-default-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #fff;
box-shadow: inset 0 1px 0 #0572ce;
text-shadow: 0 1px 0 #0572ce; }