Shopware 6 如何在SCSS中使用主题配置的主色？

• 后台主题设置中配置的主色对应SCSS变量为 $sw-color-brand-primary
• 后台配置的辅助色对应SCSS变量为 $sw-color-brand-secondary
• 两类颜色均自带衍生变量：主色浅色版 $sw-color-brand-primary-light、主色深色版 $sw-color-brand-primary-dark；辅助色浅色版 $sw-color-brand-secondary-light、辅助色深色版 $sw-color-brand-secondary-dark

上述变量无需额外注册，Shopware会自动将后台配置的颜色值注入对应变量，你可以直接在自定义主题的SCSS文件中调用，示例如下：

// 自定义主色按钮样式
.my-custom-btn {
  background: $sw-color-brand-primary;
  border: 1px solid $sw-color-brand-primary-dark;
  &:hover {
    background: $sw-color-brand-primary-dark;
  }
}

// 自定义辅助色标签样式
.my-custom-tag {
  background: $sw-color-brand-secondary;
  color: #ffffff;
}

如果需要获取全部内置预设SCSS变量列表，可以查看Shopware核心Storefront的变量定义文件，路径为 vendor/shopware/storefront/Resources/app/storefront/src/scss/abstract/variables.scss，所有公共预设变量都在该文件中有明确声明。

内容的提问来源于stack exchange，提问作者Daniel