diff --git a/UI/Templates/AdministrationUI/UIxThemePreview.wox b/UI/Templates/AdministrationUI/UIxThemePreview.wox
index 3a22fb165..4a8420299 100644
--- a/UI/Templates/AdministrationUI/UIxThemePreview.wox
+++ b/UI/Templates/AdministrationUI/UIxThemePreview.wox
@@ -16,9 +16,18 @@
Palettes
Accessible from md-colors and $mdThemingProvider
+
+
+ {{ palette }}
+ {{ ctrl.defaultTheme.colors[palette].name }}
+
+
+
{{ palette }}-{{ hex }}
+ md-colors="{backgroundColor: '{{ palette }}-{{ hex }}'}">
+ {{ palette }}-{{ hex }}
+ {{ ctrl.getColor(palette + '-' + hex) }}
diff --git a/UI/WebServerResources/js/Administration/ThemePreviewController.js b/UI/WebServerResources/js/Administration/ThemePreviewController.js
index a83c50615..b72cdd425 100644
--- a/UI/WebServerResources/js/Administration/ThemePreviewController.js
+++ b/UI/WebServerResources/js/Administration/ThemePreviewController.js
@@ -25,10 +25,11 @@
/**
* @ngInject
*/
- ThemePreviewController.$inject = ['$mdTheming'];
- function ThemePreviewController($mdTheming) {
+ ThemePreviewController.$inject = ['$mdTheming', '$mdColors'];
+ function ThemePreviewController($mdTheming, $mdColors) {
this.defaultTheme = $mdTheming.THEMES[$mdTheming.defaultTheme()];
this.jsonDefaultTheme = JSON.stringify(this.defaultTheme, undefined, 2);
+ this.getColor = $mdColors.getThemeColor;
}
angular