如何基于Liferay配色方案覆盖Bootstrap/Clay主题SCSS变量

可以实现基于Liferay外观（look-and-feel）的配色方案覆盖Clay/Bootstrap的SCSS变量，具体操作步骤如下：

实现步骤 #

1. 在主题配置文件中定义配色方案
   首先修改主题WEB-INF目录下的liferay-look-and-feel.xml文件，声明多套配色方案以及对应的色值配置项，支持设置默认值以及是否允许管理员在后台自定义色值。
2. 修改SCSS变量关联动态CSS变量
   Liferay会自动将配色方案中定义的色值以--lfr-color-{配置项key}的CSS全局变量形式注入到页面中，你只需要将原有静态的SCSS变量改为读取该CSS变量，同时配置 fallback 默认值即可。
3. 后台切换/自定义配色
   主题部署生效后，进入站点配置→外观和感觉→当前主题设置，即可直接切换你定义的多套配色方案，也可在配置项中自定义修改主色、辅助色等属性。

代码示例 #

1. liferay-look-and-feel.xml 配置示例 #

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 7.3.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_7_3_0.dtd">

<look-and-feel>
    <compatibility>
        <version>7.3.0+</version>
    </compatibility>
    <theme id="your-custom-theme" name="你的自定义主题">
        <!-- 默认配色方案 -->
        <color-scheme id="01" name="默认亮色">
            <default-color-scheme>true</default-color-scheme>
            <settings>
                <setting key="primary-color" value="#ff0000" configurable="true" />
                <setting key="secondary-color" value="#00ff00" configurable="true" />
            </settings>
        </color-scheme>
        <!-- 第二套配色方案 -->
        <color-scheme id="02" name="深色模式">
            <settings>
                <setting key="primary-color" value="#4287f5" configurable="true" />
                <setting key="secondary-color" value="#32a852" configurable="true" />
            </settings>
        </color-scheme>
    </theme>
</look-and-feel>

2. _clay_variables.scss 调整后的配置 #

注意：你原示例代码中$primaray为拼写错误，正确写法为$primary，该错误会导致原有配色配置不生效，需先修正。

// 优先读取Liferay注入的CSS变量， fallback为默认色值
$primary: var(--lfr-color-primary-color, #ff0000);
$secondary: var(--lfr-color-secondary-color, #00ff00);

$theme-colors: (
   primary: $primary,
   secondary: $secondary
);

注意事项 #

• 不需要额外修改主题的其他模板或逻辑，Liferay会自动处理配色方案对应CSS变量的注入
• 若不需要允许管理员在后台自定义色值，删除<setting>标签中的configurable="true"属性即可
• 修改配置后需要重新部署主题生效

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