SAP Spartacus 自定义 theme 实现思路

StackOverflow 讨论

一个例子。

/* You can add global styles to this file, and also import other style files */$styleVersion: 3.2;// change theme-colors here
$primary: #38a8ae !default;
$secondary: #148181 !default;
$success: #5dac06 !default;
$danger: #e51f34 !default;
$warning: #ffc107 !default;
$info: #17a2b8 !default;
$light: #d3d6db !default;
$dark: #161C23 !default;
$background: #f4f4f4 !default;
$inverse: #ffffff !default;
$text: #000000 !default;
$transparent: transparent !default;
$visual-focus: #6d9df7 !default;
$background-focus: rgba(80, 176, 244, 0.1);$theme-colors: ('primary': $primary,'secondary': $secondary,'success': $success,'danger': $danger,'warning': $warning,'info': $info,'light': $light,'dark': $dark,'background': $background,'inverse': $inverse,'text': $text,'transparent': $transparent,'visual-focus': $visual-focus,'background-focus': $background-focus,
);@import '~@spartacus/styles/index';

需要添加变量 $theme-colors，赋以自定义颜色值。

I needed to add the variable with the updated colours.

SAP Spartacus 自定义 theme 实现思路相关推荐

SAP Spartacus自定义指令cxOutlet的工作原理
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
关于 SAP Spartacus 的 Theme 颜色主题
Storefront Themes Spartacus 包括两个店面主题,Sparta 和 Santorini. 每个主题都有不同的字体大小和颜色. 斯巴达主题以红色和字体为特色,而圣托里尼主题以蓝色 ...
SAP Spartacus 的页面设计思路
CMS提供了page structure,但不提供clear layout definition. 所谓CMS page structure,即CMS只提供了一个有序清单,包含了slots和Compo ...
SAP Spartacus 自定义 PageResolver 的用法
前置阅读: Angular路由里的resolve接口的使用方法有网友遇到一个问题: How to add my custom page resolver instead of Spartacus p ...
SAP Spartacus 自定义 Component 的使用 - SimpleResponsiveBannerComponent
(1) 使用命令行创建一个新的Angular Component: banner Component的实现: 通过构造函数参数注入cms Component data. 而Component的html ...
SAP Spartacus 自定义Popover指令，如何实现弹出对话框自动关闭功能
Popover Component的 appendToBody如果设置成true: 则其 DOM 元素会出现在 body 节点的末尾: 当我点击屏幕任意空白位置时,这个Popover 对话框会自动消 ...
SAP Spartacus自定义Component的Not found问题
同样是自定义route指向的自定义Component,custom和contact的行为不同: custom path,会看到home下出现not found的标志: 而contact不会,原因是因为 ...
如何在SAP Spartacus自定义Component里消费数据
直接在自定义Component里使用data来访问Component数据: <p>begin of my image!</p> <img [src]="'htt ...
如何在 SAP Spartacus 自定义 UI 里使用标准 UI 的上下文数据 - let 关键字的用法
语法:let-<变量名> 自定义UI: <ng-template cxOutletRef="header" cxOutletPos="before&qu ...

SAP Spartacus 自定义 theme 实现思路

SAP Spartacus 自定义 theme 实现思路相关推荐

最新文章

热门文章