@primaryColor : @pink; @secondaryColor : @grey; @red : #B03060; @orange : #FE9A76; @yellow : #FFD700; @olive : #32CD32; @green : #016936; @teal : #008080; @blue : #0E6EB8; @violet : #EE82EE; @purple : #B413EC; @pink : #FF1493; @brown : #A52A2A; @grey : #A0A0A0; @black : #000000;
主按钮辅助按钮
所有颜色
红色橘色黄色橄榄色绿色蓝绿色蓝色紫罗兰紫色粉色棕色灰色黑色
组件默认值 (Component Defaults)
组件继承默认值site.variables,可以从中专门为其组件重新定义。
比如,你可以决定使用您的网站的品牌颜色而不是默认的灰色复选框。这可以通过调整几个变量就能完成。
/* Checkbox */ @checkboxActiveBackground: @primaryColor; @checkboxActiveBorderColor: @primaryColor; @checkboxActiveCheckColor: @white; /* Focused Checkbox */ @checkboxActiveFocusBackground: @primaryColorFocus; @checkboxActiveFocusBorderColor: @primaryColorFocus; @checkboxActiveFocusCheckColor: @white; @checkboxTransition: none; /* Radio */ @radioActiveBackground: @white; @radioActiveBorderColor: @primaryColor; @radioActiveBulletColor: @primaryColor; /* Focused Radio */ @radioActiveFocusBackground: @white; @radioActiveFocusBorderColor: @primaryColorFocus; @radioActiveFocusBulletColor: @primaryColorFocus; /* Slider */ @sliderOnLineColor: @primaryColor; /* Focused Slider */ @sliderOnFocusLineColor: @primaryColorFocus;
复选框
滑块
使用包主题 (Using Packaged Themes)
下载Semantic UI时,所有组件都将设置为使用默认主题。Semantic UI 使用特殊文件theme.config来控制项目的打包主题配置。
打包的主题适用于每个组件,而不是全局。这意味着您可以为每个组件指定单独的主题,从可用主题中混合和匹配。
默认情况下,theme.config将所有组件值都设置为默认值。要选择主题,只需更改组件以匹配主题名称即可。
比如:
/******************************* Theme Selection *******************************/ /* Global */ @site : 'material'; /* Loads material site defaults */ @reset : 'default'; /* Elements */ @button : 'github'; /* But uses them with GitHub Buttons */ @container : 'default'; @divider : 'default'; @flag : 'default'; @header : 'default'; @icon : 'default'; @image : 'default'; @input : 'default'; @label : 'default'; @list : 'default'; @loader : 'default'; @rail : 'default'; @reveal : 'default'; @segment : 'default'; @step : 'default'; /* Collections */ @breadcrumb : 'default'; @form : 'default'; @grid : 'default'; @menu : 'chubby'; /* Other UI can use different themes as well */ @message : 'default'; @table : 'default'; /* Modules */ @accordion : 'default'; @checkbox : 'default'; @dimmer : 'default'; @dropdown : 'default'; @embed : 'default'; @modal : 'default'; @nag : 'default'; @popup : 'default'; @progress : 'default'; @rating : 'default'; @search : 'default'; @shape : 'default'; @sidebar : 'default'; @sticky : 'default'; @tab : 'default'; @transition : 'default'; /* Views */ @ad : 'default'; @card : 'default'; @comment : 'default'; @feed : 'default'; @item : 'default'; @statistic : 'default';
浏览主题 (Browsing for Themes)
每个UI定义都包含页面顶部的下拉列表,以预览项目中包含的主题。
主题是每个组建的集合,比如说 material 主题可用于菜单,按钮, 和站点, 修改 "material" 的所有的值,将对未包含在该主题中的组件产生错误。

组件构成

定义文件 (Definition File)
每个组件都包含一个源CSS和Javascript文件,用于声明组件变量应如何影响其在屏幕上的显示。定义文件随每个新版本的语义UI更新,其中也可能包含新变量。
对于熟悉CSS的开发人员来说,导航定义文件是一种很好的方式,可以了解主题如何影响组件显示。
这是一个删节版本的按钮 其中包含文件每个部分的说明。