相同的主题但不同的颜色可供选择答案

【问题标题】：Same theme but different colors to choose from相同的主题但不同的颜色可供选择
【发布时间】：2020-06-22 21:31:33
【问题描述】：

最后我的应用程序快完成了，我想切换到其他主题，我想坚持 Modern 并且只更改颜色组合。我可能的选择是：

a) 将 Theme 复制到 ModernA、ModernB 等并更改 Color.js

b) 将状态应用于颜色以根据某些条件选择它们

c) 在运行时更改它们（如果可能）

哪种方法是我最简单且最好的方法？和一个 sn-p 将非常感激。

【问题讨论】：

标签： qooxdoo

【解决方案1】：

最好的方法是创建一个新主题并重用现代主题；例如：

source/class/myapp/MyModern.js:

qx.Theme.define("myapp.MyModern", {
  title : "My Modern",

  meta : {
    color : myapp.MyColor,
    decoration : qx.theme.modern.Decoration,
    font : qx.theme.modern.Font,
    appearance : qx.theme.modern.Appearance,
    icon : qx.theme.icon.Tango
  }
});

和source/class/myapp/MyColor.js:

qx.Theme.define("myapp.MyColor", {
    extend : qx.theme.modern.Color,

    colors : {
        // Add your custom colour overrides here
    }
});

通过在MyColor 类中使用extend 关键字，您将从普通的现代颜色开始，然后可以根据需要选择覆盖颜色

【讨论】：

【解决方案2】：

选项 C 可以通过在运行时创建一个编辑过的颜色主题来实现：

// First, get the current Color theme 
var currentcolor = qx.theme.manager.Color.getInstance().getTheme();

// Change any or all color entries. This can be as dynamic as you want. Get a user defined color from a color picker control. Create Shades based off of a primary color, etc.
currentcolor.colors.themePrimary = "#00ffd4"; // Or a value from the ColorPicker widget

// Now define a new Color theme with the updated colors
qx.Theme.define("NewColor",
{        
   colors : currentcolor.colors
});

// Set the new Color theme (button used below as an example)
button.addListener("execute", function(e) {
  qx.theme.manager.Color.getInstance().setTheme(qx.Theme.getByName("NewColor"));
});

【讨论】：