之前的文章我们介绍过了CEP面板是用Html+Css来写的，于是主题这块就是要求我们在CSS上进行做文章。通常，我们可以根据自己插件的界面效果来从头开始编写CSS样式文件，那我们就需要拿到Ps这几种不同主题的颜色色值，可以通过如下方法获取
var csInterface = new CSinterface();
var skinInfo = csInterface.getHostEnvironment().appSkinInfo; skinInfo 里头包含了当前主题下面板的颜色色值，对应的数据结构如下，我们可以通过获取到里面的appBarBackgroundColor 和 panelBackgroundColor两个颜色的色值来设置我们的面板，以使得面板颜色和Ps主题颜色保持一致。
app skin info
代码可以这么写
var csInterface = new CSInterface();
var skinInfo = csInterface.getHostEnvironment().appSkinInfo;
var bgColor = skinInfo.panelBackgroundColor.color;
var body = document.getElementById('body');
body.style.backgroundColor = `rgb(${bgColor.red}, ${bgColor.green}, ${bgColor.blue})`;
这样，我们的面板的背景颜色，就可以和Ps融为一体了
panel with same background color
但是到这里，我们只是根据Ps的主题颜色来设置了面板的背景颜色，如果用户切换了主题，面板并不会跟着换，所以我们需要监听Ps的主题切换事件，然后进行动态跟换面板的背景颜色，CSInterface提供了事件监听的功能，并且提供了许多Ps的事件场景，这里我们只需要关心 com.adobe.csxs.events.ThemeColorChanged 事件
var csInterface = new CSInterface();
// 把修改颜色包装成一个函数
function syncTheme() {
var skinInfo = csInterface.getHostEnvironment().appSkinInfo;
var bgColor = skinInfo.panelBackgroundColor.color;
var body = document.getElementById('body');
body.style.backgroundColor = `rgb(${bgColor.red}, ${bgColor.green}, ${bgColor.blue})`;
}
// 通过获取到的颜色来判断当前主题 darkest/dark/gray/white
function getTheme() {
var hostEnv = csInterface.getHostEnvironment();
var bgColor = hostEnv.appSkinInfo.appBarBackgroundColor;
var red = Math.round(bgColor.color.red);
var green = Math.round(bgColor.color.green);
var blue = Math.round(bgColor.color.blue);
var theme;
if (red < 60) {
theme = &#39;darkest&#39;;
} else if (60 <= red && red < 127) {
theme = &#39;dark&#39;;
} else if (127 <= red && red < 200) {
theme = &#39;gray&#39;;
} else {
theme = &#39;white&#39;;
}
return theme;
}
// 动态替换整个Css文件
function syncTheme2() {
var theme = getTheme();
var link = document.getElementById(&#39;theme-link&#39;);
link.href=`./css/topcoat/topcoat-desktop-${theme}.min.css`;
}
下面是对应的一些组件展示效果
发表于 2022-11-28 16:05:25
