Question

似乎没有明确的 Spartacus 自定义店面或自定义样式/主题示例。

我想了解如何实现自定义主题，其中我们有不同的颜色和主题默认值。我找不到有关如何使用 Spartacus 正确执行此操作的任何示例。我错过了什么吗？

任何反馈将不胜感激。

我所期望的一个例子：

src/styles.scss

/* You can add global styles to this file, and also import other style files */

$styleVersion: 3.2;

// change theme-colors here
$primary: #000;
$secondary: #000;
$success: #5dac06;
$danger: #db0002;
$warning: #ffc107;
$info: #17a2b8;
$light: #d3d6db;
$dark: #000;
$background: #f4f4f4;
$inverse: #ffffff;
$text: #212738;

@import '~@spartacus/styles/index';

引导程序默认值不会被覆盖。任何人都可以简单地分享一个我应该如何与斯巴达克斯一起做这件事的例子。

Answer 1

如果其他人可能需要此信息，我会发布此信息。原来我已经接近了，我只需要添加一个额外的部分：

/* 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 变量。现在 CSS 已正确编译，无需覆盖 css。

Answer 2

昨天我尝试了新的 3.2 版本，发现覆盖主题变量的“旧”方式不再有效。但是我也找不到任何关于它为什么不再起作用以及现在应该如何完成的文档。我唯一能发现的是我可以覆盖 CSS 自定义属性。但前提是我将其设置为重要。它有效，但这不是正确的方法。有人有进一步的信息吗？


$styleVersion: 3.2;

:root {
  --cx-color-primary: dodgerblue !important;
}

@import '~@spartacus/styles/index';

Spartacus Storefront 自定义主题示例？更改颜色和引导变量？

2 个答案: