应用于动态主题的自定义调色板

Posted 2023-03-13

【中文标题】应用于动态主题的自定义调色板

【英文标题】：Custom palette applied to dynamic theme

【发布时间】：2016-12-31 08:50:40

【问题描述】：

我正在尝试动态应用主题。为此，我在网站上输入 HEX 颜色作为主色和强调色，然后生成颜色图等。完成后地图如下所示：

    "50": "8080ff",
    "100": "6666ff",
    "200": "4d4dff",
    "300": "3333ff",
    "400": "1a1aff",
    "500": "0000ff",
    "600": "0000e6",
    "700": "0000cc",
    "800": "0000b3",
    "900": "000099",
    "A100": "9999ff",
    "A200": "b3b3ff",
    "A400": "ccccff",
    "A700": "000080"

然后我使用主题提供程序创建一个全新的调色板（customPrimary 是我上面的对象）：

this.themeProvider.definePalette('customPrimary', customPrimary);

我的this.themeProvider 是我的$mdThemingProvider 发送自我的App.Config.ts，我在其中定义了主题提供程序等等。基本上this.themeProvider = $mdThemingProvider。在您问太多问题之前，请阅读以下内容：https://github.com/angular/material/issues/5502

然后我生成一个新主题并设置调色板等等：

this.themeProvider.theme('whatever').primaryPalette('customPrimary').accentPalette('customAccent');

this.$mdTheming.generateTheme('whatever');

this.themeProvider.setDefaultTheme('whatever');
this.Theme = "whatever";

当我点击页面上的保存按钮时，页面主题变为白色，我收到此错误：

无法读取未定义的属性“颜色”

我无法追溯colors 的定义位置。我当然没有名为colors 的变量。似乎将调色板应用于主题是错误的。似乎有些不对劲。

如果我将调色板更改为 "blue" 之类的东西，它可以正常工作。设置我的自定义调色板不起作用。

我做错了什么？不幸的是，我无法提供示例，因此如果您需要更多信息，请告诉我。谢谢

【问题讨论】：

我试图复制问题但没有成功。我已经根据您的代码创建了一个 CodePen (codepen.io/camden-kid/pen/qNzEWO?editors=1010)，但在单击 Add Theme 按钮时没有收到错误消息。但是有两件事：（1）我不明白这部分 this.Theme = "whatever";，（2）如果我将 whatever 更改为 default，我 确实 会遇到类似的错误 在第 34 行，但我怀疑这并没有真正的帮助。此外，单击按钮时主题似乎没有改变。

@camden_kid 当我执行this.Theme = "whatever"; 时，我会更改应用程序的整体主题。我的身体标签上设置了md-theme="vm.Theme"，所以每当我更改主题（因为我有一个默认主题和一个用户设置）时，主题都会更改为新主题，而不是更新默认主题。另外，我似乎无法让你的工作。当我按下按钮时它不会改变主题。

对不起，我应该把我的最后一行放在第一行。是的，它没有改变主题。我只是想指出我没有得到你的错误。我会更多地研究为什么主题没有改变......

正如关于 GitHub 问题的最后一条评论所述，您必须在配置中定义调色板（我试过了，它确实有效）。动态定义调色板不起作用。 :-(

@camden_kid 这太奇怪了，因为那个人（我链接到的帖子）让它工作了？由于我正在使用 $provide 解析提供程序，它应该可以工作吗？ :O

【参考方案1】：

我想我找到了部分解决方案 - CodePen

有两点需要注意

这似乎只适用于“默认”主题，而不是其他名称 这似乎不会覆盖任何以前的主题设置

经过一些详尽的调查后，我发现 customPrimary 调色板的设置方式与默认调色板的设置方式不同，如果它没有在配置中定义的话。这是我在控制台中查看 $mdThemingProvider 所看到的：

蓝色

customPrimary

所以我决定创建一个名为 workingPrimary 的自定义调色板，它模仿默认调色板数据，即使用具有对比度和值的对象而不是字符串。这似乎有效。所以现在唯一的技巧就是将你的十六进制值转换为对比度/值对象。

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.config(function ($mdThemingProvider, $provide)   
  $mdThemingProvider.generateThemesOnDemand(true);
  $provide.value('themeProvider', $mdThemingProvider);
)

.controller('AppCtrl', function($scope, $mdTheming, themeProvider) 
  var customPrimary = 
    "50": "8080ff",
    "100": "6666ff",
    "200": "4d4dff",
    "300": "3333ff",
    "400": "1a1aff",
    "500": "0000ff",
    "600": "0000e6",
    "700": "0000cc",
    "800": "0000b3",
    "900": "000099",
    "A100": "9999ff",
    "A200": "b3b3ff",
    "A400": "ccccff",
    "A700": "000080"
  

  var workingPrimary = 
    "50": contrast: [0, 0, 0, 0.87], value: [227, 242, 253],
    "100": contrast: [0, 0, 0, 0.87], value: [227, 242, 253],
    "200": contrast: [0, 0, 0, 0.87], value: [227, 242, 253],
    "300": contrast: [0, 0, 0, 0.87], value: [227, 242, 253],
    "400": contrast: [0, 0, 0, 0.87], value: [227, 242, 253],
    "500": contrast: [255, 255, 255, 0.87], value: [100, 100, 253],
    "600": contrast: [255, 255, 255, 0.87], value: [227, 242, 253],
    "700": contrast: [255, 255, 255, 0.87], value: [227, 242, 253],
    "800": contrast: [255, 255, 255, 0.87], value: [227, 242, 253],
    "900": contrast: [255, 255, 255, 0.87], value: [227, 242, 253],
    "A100": contrast: [255, 255, 255, 0.87], value: [227, 242, 253],
    "A200": contrast: [255, 255, 255, 0.87], value: [227, 242, 253],
    "A400": contrast: [255, 255, 255, 0.87], value: [227, 242, 253],
    "A700": contrast: [255, 255, 255, 0.87], value: [227, 242, 253]
  ;

  $scope.addTheme = function () 
    themeProvider.definePalette('customPrimary', customPrimary);

    themeProvider.definePalette('workingPrimary', workingPrimary);
    themeProvider.theme('default').primaryPalette('workingPrimary', "default": "500");
    $mdTheming.generateTheme('default');
    $scope.theme = "default";

    console.log(themeProvider);
  
);

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" md-theme="theme" md-theme-watch>
  <md-button ng-click="addTheme()">Add Theme</md-button>
  <br>
  <md-button class="md-primary">My Primary button</md-button>
</div>

【讨论】：

哦，这很奇怪。明天我回去工作时，我一定会看看它。非常感谢！

@camden_kid 你找到问题了吗？为什么调色板 customPrimary（带颜色代码）不起作用？