SAP Spartacus 自定义 theme 实现思路

简介: 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.

目录
相关文章
|
前端开发 UED 开发者
SAP Spartacus 开源项目中 $skipComponentStyles 的作用介绍
SAP Spartacus 开源项目中 $skipComponentStyles 的作用介绍
186 0
SAP 电商云 Spartacus UI Configurable Product 的页面设置(3)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
SAP 电商云 Spartacus UI Configurable Product 的页面设置(2)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
|
XML 测试技术 区块链
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细(2)
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细(1)
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细
|
缓存 Java C++
SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
107 0
|
网络架构
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试
|
JavaScript Java Shell
SAP 电商云 Spartacus UI External Route 的模块实现概述(2)
SAP 电商云 Spartacus UI External Route 的模块实现概述