查看JSBox全部的语义化颜色，适配dark mode

JSBox UI Colors.js

const TIPS =
  "如果在请注意对于黑、白、灰、深灰、浅灰等单色，hexCode仅前两位有效，比如#80FF00其实是灰色，#00FF00其实是黑色。\n由于颜色可以动态变化比较复杂，不对此进行修改。";

$app.theme = "auto";

const semanticColors = [
  {
    name: "tintColor",
    description: "主题色"
  },
  {
    name: "primarySurface",
    description: "一级背景"
  },
  {
    name: "secondarySurface",
    description: "二级背景"
  },
  {
    name: "tertiarySurface",
    description: "三级背景"
  },
  {
    name: "primaryText",
    description: "一级文字"
  },
  {
    name: "secondaryText",
    description: "二级文字"
  },
  {
    name: "backgroundColor",
    description: "背景颜色"
  },
  {
    name: "separatorColor",
    description: "分割线颜色"
  },
  {
    name: "groupedBackground",
    description: "grouped 列表背景色"
  },
  {
    name: "insetGroupedBackground",
    description: "insetGrouped 列表背景色"
  }
];

const systemColors = [
  "systemGray2",
  "systemGray3",
  "systemGray4",
  "systemGray5",
  "systemGray6",
  "systemLabel",
  "systemSecondaryLabel",
  "systemTertiaryLabel",
  "systemQuaternaryLabel",
  "systemLink",
  "systemPlaceholderText",
  "systemSeparator",
  "systemOpaqueSeparator",
  "systemBackground",
  "systemSecondaryBackground",
  "systemTertiaryBackground",
  "systemGroupedBackground",
  "systemSecondaryGroupedBackground",
  "systemTertiaryGroupedBackground",
  "systemFill",
  "systemSecondaryFill",
  "systemTertiaryFill",
  "systemQuaternaryFill"
];

const otherStandardColors = [
  {
    name: "tint",
    description: "JSBox 主题色"
  },
  {
    name: "black",
    description: "黑色"
  },
  {
    name: "darkGray",
    description: "深灰"
  },
  {
    name: "lightGray",
    description: "浅灰"
  },
  {
    name: "white",
    description: "白色"
  },
  {
    name: "gray",
    description: "灰色"
  },
  {
    name: "red",
    description: "红色"
  },
  {
    name: "green",
    description: "绿色"
  },
  {
    name: "blue",
    description: "蓝色"
  },
  {
    name: "cyan",
    description: "青色"
  },
  {
    name: "yellow",
    description: "黄色"
  },
  {
    name: "magenta",
    description: "品红"
  },
  {
    name: "orange",
    description: "橙色"
  },
  {
    name: "purple",
    description: "紫色"
  },
  {
    name: "brown",
    description: "棕色"
  },
  {
    name: "clear",
    description: "透明"
  }
];

const otherColors = [
  "aqua",
  "background",
  "darkText",
  "fuchsia",
  "lime",
  "maroon",
  "navy",
  "olive",
  "separator",
  "silver",
  "teal",
  "text"
]


function map(list) {
  return list.map(n => {
    const m =
      typeof n === "string"
        ? {
            name: n,
            description: n
          }
        : n;
    const color = $color(m.name);
    return {
      description: {
        text: m.description,
        autoFontSize: true
      },
      rgba: {
        text: color.hexCode + ", alpha: " + color.components.alpha
      },
      color: {
        bgcolor: color
      },
      name: m.name
    };
  });
}

function getData() {
  return [
    {
      title: "语义化颜色",
      rows: map(semanticColors)
    },
    {
      title: "系统颜色",
      rows: map(systemColors)
    },
    {
      title: "其他标准颜色",
      rows: map(otherStandardColors)
    },
    {
      title: "文档中未标注的其他颜色",
      rows: map(otherColors)
    }
  ];
}

$ui.render({
  views: [
    {
      type: "list",
      props: {
        rowHeight: 60,
        data: getData(),
        template: {
          props: {
            bgcolor: $color("white")
          },
          views: [
            {
              type: "label",
              props: {
                id: "description",
                textColor: $color("black")
              },
              layout: function(make, view) {
                make.top.inset(0);
                make.left.inset(15);
                make.width.equalTo(view.super).dividedBy(2);
                make.height.equalTo(view.super).dividedBy(2);
              }
            },
            {
              type: "label",
              props: {
                id: "rgba",
                font: $font(14),
                textColor: $color("black")
              },
              layout: function(make, view) {
                make.bottom.inset(0);
                make.left.inset(15);
                make.width.equalTo(view.super).dividedBy(2);
                make.height.equalTo(view.super).dividedBy(2);
              }
            },
            {
              props: {
                id: "color"
              },
              layout: function(make, view) {
                make.right.top.bottom.inset(0);
                make.left.equalTo($("description").right);
              }
            }
          ]
        }
      },
      layout: $layout.fillSafeArea,
      events: {
        themeChanged(sender, isDarkMode) {
          sender.data = getData();
        },
        didSelect(sender, indexPath, data) {
          const name = data.name;
          $ui.alert({
            title: name,
            actions: [
              {
                title: "取消"
              },
              {
                title: "复制",
                handler: () => ($clipboard.text = name)
              }
            ]
          });
        }
      }
    }
  ]
});

$app.tips(TIPS);