Show your colors
In addition to my previous post about Use Episerver's content icons as site tree icons a colleague of mine pointed out to also colorize the icons in the site tree.
This may be achieved by extending the EpiserverDefaultContenticons.cs with the following class holders:
#region [ Episerver Colors ]
public class EpiColors
{
public const string Inverted = " epi-icon--inverted";
public const string Active = " epi-icon--active";
public const string Success = " epi-icon--success";
public const string Danger = " epi-icon--danger";
public const string Warning = " epi-icon--warning";
public const string Primary = " epi-icon--info";
}
#endregion
#region [ Episerver Color Palettes ]
public class ColorPalettes
{
public const string Fade = " is-disabled";
}
#endregion
Basically we will be adding the Inverted, Active, Info, Success, Danger, Warning and Primary values as CSS values for Episerver to pick up the correct colorized icon. You can find them at the icons section for the ux.episerver.com guidelines
Extend your tree icon interface with the following:
[UIDescriptorRegistration]
public class ContainerTreeIcon : UIDescriptor<IUseContainerTreeIcon>
{
public NewsPageholderTreeIconDescriptor() : base("dijitIcon")
{
// will set the css path by the following: icon > color > fade
IconClass = EpiserverDefaultContentIcons.ActionIcons.Folder + MyContentIcons.Colors.Danger + MyContentIcons.ColorPalettes.Fade;
}
}
}
public interface IUseContainerTreeIcon
{
}
Notice that the class holders EpiColors and ColorPalettes starts with space to separate the css values in the DOM on render. The Fade constant is optional to "dim" the the chosen color in EpiColors. You may only set this for the action icons, not the object and notification icons.
Cool! But what about custom colors?
Yeah, I thought you would end up on that question. We may actually set this but there are some trivial steps to consider before doing so. We can hook up a custom CSS file to load alongside the Episerver system files when the Edit mode is presented. We may then with the help of the CSS property filter determine what color to compose by the help of the available effects for the filter. That will however only be compatible with Chrome and Edge as it is for now. You may check the caniuse.com's filter check browser compatibility for future usage.
Hook up your custom CSS file in the module.config file. If you do not have one for your project, create one and do the following:
<?xml version="1.0" encoding="utf-8"?>
<module>
<assemblies>
<add assembly="assemblyname" />
</assemblies>
<clientResources>
<add name="epi-cms.widgets.base" path="Styles/CustomColors/MyCustomColors.css" resourceType="Style" sortIndex="1" />
</clientResources>
</module>
Be sure to place your custom CSS file under the ClientResources folder, since that is the default path Episerver will search for, and then the Styles/CustomColors folder as in this example.
Here comes the tricky part. So to adjust your colors for desired outcome we need to take a base color value and use it as a color mixing with the help of filter effects. Luckily for you I have created a bunch of them by replicating the htmlcolorcodes.com's color names. They are however not 100% covered and efficient to their color name (whom are web safe) since all of the desired colors were in need of a color conversions. Thankfully Barrett Sonntag's codepen could help a bit on the way.
Here is my custom CSS file (very long code snippet):
MyCustomColors.css
/**
* CONTENTS
*
* ABOUT
* Reference to names............... http://htmlcolorcodes.com/color-names/
* Generate RGB to HSL.............. https://codepen.io/sosuke/pen/Pjoqqp
*
* COLOR GROUPS
* Red.............................Red HTML color names
* Pink............................Pink HTML color names
* Orange..........................Orange HTML color names
* Yellow..........................Yellow HTML color names
* Purple..........................Purple HTML color names
* Green...........................Green HTML color names
* Blue............................Blue HTML color names
* Brown...........................Brown HTML color names
* White...........................White HTML color names
* Gray............................Gray HTML color names
*
*/
/*------------------------------------*\
#COLOR GROUPS
\*------------------------------------*/
/**
* Red HTML color names
*/
.custom-color-indianred {
-webkit-filter: invert(51%) sepia(48%) saturate(4340%) hue-rotate(331deg) brightness(97%) contrast(64%);
filter: invert(51%) sepia(48%) saturate(4340%) hue-rotate(331deg) brightness(97%) contrast(64%);
}
.custom-color-lightcoral {
-webkit-filter: invert(47%) sepia(93%) saturate(265%) hue-rotate(314deg) brightness(102%) contrast(104%);
filter: invert(47%) sepia(93%) saturate(265%) hue-rotate(314deg) brightness(102%) contrast(104%);
}
.custom-color-salmon {
-webkit-filter: invert(65%) sepia(82%) saturate(2200%) hue-rotate(316deg) brightness(109%) contrast(135%);
filter: invert(65%) sepia(82%) saturate(2200%) hue-rotate(316deg) brightness(109%) contrast(135%);
}
.custom-color-darksalmon {
-webkit-filter: invert(59%) sepia(98%) saturate(230%) hue-rotate(327deg) brightness(95%) contrast(92%);
filter: invert(59%) sepia(98%) saturate(230%) hue-rotate(327deg) brightness(95%) contrast(92%);
}
.custom-color-lightsalmon {
-webkit-filter: invert(68%) sepia(76%) saturate(446%) hue-rotate(317deg) brightness(101%) contrast(101%);
filter: invert(68%) sepia(76%) saturate(446%) hue-rotate(317deg) brightness(101%) contrast(101%);
}
.custom-color-crimson {
-webkit-filter: invert(15%) sepia(87%) saturate(4772%) hue-rotate(341deg) brightness(89%) contrast(94%);
filter: invert(15%) sepia(87%) saturate(4772%) hue-rotate(341deg) brightness(89%) contrast(94%);
}
.custom-color-red {
-webkit-filter: invert(19%) sepia(99%) saturate(7295%) hue-rotate(359deg) brightness(110%) contrast(112%);
filter: invert(19%) sepia(99%) saturate(7295%) hue-rotate(359deg) brightness(110%) contrast(112%);
}
.custom-color-firebrick {
-webkit-filter: invert(21%) sepia(67%) saturate(5227%) hue-rotate(354deg) brightness(74%) contrast(83%);
filter: invert(21%) sepia(67%) saturate(5227%) hue-rotate(354deg) brightness(74%) contrast(83%);
}
.custom-color-darkred {
-webkit-filter: invert(11%) sepia(90%) saturate(7292%) hue-rotate(30deg) brightness(70%) contrast(125%);
filter: invert(11%) sepia(90%) saturate(7292%) hue-rotate(30deg) brightness(70%) contrast(125%);
}
/**
* Pink HTML color codes
*/
.custom-color-pink {
-webkit-filter: invert(95%) sepia(87%) saturate(5286%) hue-rotate(287deg) brightness(107%) contrast(113%);
filter: invert(95%) sepia(87%) saturate(5286%) hue-rotate(287deg) brightness(107%) contrast(113%);
}
.custom-color-lightpink {
-webkit-filter: invert(88%) sepia(88%) saturate(5681%) hue-rotate(287deg) brightness(106%) contrast(100%);
filter: invert(88%) sepia(88%) saturate(5681%) hue-rotate(287deg) brightness(106%) contrast(100%);
}
.custom-color-hotpink {
-webkit-filter: invert(54%) sepia(85%) saturate(1182%) hue-rotate(296deg) brightness(103%) contrast(101%);
filter: invert(54%) sepia(85%) saturate(1182%) hue-rotate(296deg) brightness(103%) contrast(101%);
}
.custom-color-deeppink {
-webkit-filter: invert(19%) sepia(83%) saturate(3738%) hue-rotate(315deg) brightness(101%) contrast(102%);
filter: invert(19%) sepia(83%) saturate(3738%) hue-rotate(315deg) brightness(101%) contrast(102%);
}
.custom-color-mediumvioletred {
-webkit-filter: invert(29%) sepia(99%) saturate(7440%) hue-rotate(313deg) brightness(84%) contrast(89%);
filter: invert(29%) sepia(99%) saturate(7440%) hue-rotate(313deg) brightness(84%) contrast(89%);
}
.custom-color-palevioletred {
-webkit-filter: invert(69%) sepia(92%) saturate(2107%) hue-rotate(298deg) brightness(92%) contrast(86%);
filter: invert(69%) sepia(92%) saturate(2107%) hue-rotate(298deg) brightness(92%) contrast(86%);
}
/**
* Orange HTML color codes
*/
.custom-color-coral {
-webkit-filter: invert(60%) sepia(81%) saturate(1789%) hue-rotate(327deg) brightness(104%) contrast(101%);
filter: invert(60%) sepia(81%) saturate(1789%) hue-rotate(327deg) brightness(104%) contrast(101%);
}
.custom-color-tomato {
-webkit-filter: invert(47%) sepia(84%) saturate(1167%) hue-rotate(329deg) brightness(99%) contrast(111%);
filter: invert(47%) sepia(84%) saturate(1167%) hue-rotate(329deg) brightness(99%) contrast(111%);
}
.custom-color-orangered {
-webkit-filter: invert(50%) sepia(79%) saturate(1490%) hue-rotate(2deg) brightness(105%) contrast(106%);
filter: invert(50%) sepia(79%) saturate(1490%) hue-rotate(2deg) brightness(105%) contrast(106%);
}
.custom-color-darkorange {
-webkit-filter: invert(54%) sepia(85%) saturate(1807%) hue-rotate(360deg) brightness(101%) contrast(106%);
filter: invert(54%) sepia(85%) saturate(1807%) hue-rotate(360deg) brightness(101%) contrast(106%);
}
.custom-color-orange {
-webkit-filter: invert(59%) sepia(88%) saturate(1480%) hue-rotate(1deg) brightness(105%) contrast(104%);
filter: invert(59%) sepia(88%) saturate(1480%) hue-rotate(1deg) brightness(105%) contrast(104%);
}
/**
* Yellow HTML color codes
*/
.custom-color-gold {
-webkit-filter: invert(71%) sepia(87%) saturate(638%) hue-rotate(360deg) brightness(105%) contrast(104%);
filter: invert(71%) sepia(87%) saturate(638%) hue-rotate(360deg) brightness(105%) contrast(104%);
}
.custom-color-yellow {
-webkit-filter: invert(81%) sepia(87%) saturate(3737%) hue-rotate(356deg) brightness(110%) contrast(108%);
filter: invert(81%) sepia(87%) saturate(3737%) hue-rotate(356deg) brightness(110%) contrast(108%);
}
.custom-color-palegoldenrod {
-webkit-filter: invert(96%) sepia(81%) saturate(488%) hue-rotate(330deg) brightness(103%) contrast(87%);
filter: invert(96%) sepia(81%) saturate(488%) hue-rotate(330deg) brightness(103%) contrast(87%);
}
.custom-color-khaki {
-webkit-filter: invert(60%) sepia(36%) saturate(4359%) hue-rotate(308deg) brightness(125%) contrast(88%);
filter: invert(60%) sepia(36%) saturate(4359%) hue-rotate(308deg) brightness(125%) contrast(88%);
}
.custom-color-darkkhaki {
-webkit-filter: invert(79%) sepia(12%) saturate(1149%) hue-rotate(248deg) brightness(89%) contrast(92%);
filter: invert(79%) sepia(12%) saturate(1149%) hue-rotate(248deg) brightness(89%) contrast(92%);
}
/**
* Purple HTML color codes
*/
.custom-color-lavender {
-webkit-filter: invert(99%) sepia(65%) saturate(7477%) hue-rotate(180deg) brightness(107%) contrast(95%);
filter: invert(99%) sepia(65%) saturate(7477%) hue-rotate(180deg) brightness(107%) contrast(95%);
}
.custom-color-thistle {
-webkit-filter: invert(93%) sepia(64%) saturate(7346%) hue-rotate(99deg) brightness(92%) contrast(86%);
filter: invert(93%) sepia(64%) saturate(7346%) hue-rotate(99deg) brightness(92%) contrast(86%)
}
.custom-color-plum {
-webkit-filter: invert(88%) sepia(90%) saturate(3915%) hue-rotate(216deg) brightness(91%) contrast(89%);
filter: invert(88%) sepia(90%) saturate(3915%) hue-rotate(216deg) brightness(91%) contrast(89%);
}
.custom-color-violet {
-webkit-filter: invert(60%) sepia(81%) saturate(684%) hue-rotate(245deg) brightness(105%) contrast(87%);
filter: invert(60%) sepia(81%) saturate(684%) hue-rotate(245deg) brightness(105%) contrast(87%);
}
.custom-color-orchid {
-webkit-filter: invert(61%) sepia(78%) saturate(600%) hue-rotate(246deg) brightness(89%) contrast(90%);
filter: invert(61%) sepia(78%) saturate(600%) hue-rotate(246deg) brightness(89%) contrast(90%);
}
.custom-color-fuchsia {
-webkit-filter: invert(17%) sepia(97%) saturate(3874%) hue-rotate(294deg) brightness(115%) contrast(125%);
filter: invert(17%) sepia(97%) saturate(3874%) hue-rotate(294deg) brightness(115%) contrast(125%);
}
.custom-color-magenta {
-webkit-filter: invert(23%) sepia(97%) saturate(5284%) hue-rotate(297deg) brightness(118%) contrast(125%);
filter: invert(23%) sepia(97%) saturate(5284%) hue-rotate(297deg) brightness(118%) contrast(125%);
}
.custom-color-mediumorchid {
-webkit-filter: invert(45%) sepia(99%) saturate(2344%) hue-rotate(254deg) brightness(88%) contrast(85%);
filter: invert(45%) sepia(99%) saturate(2344%) hue-rotate(254deg) brightness(88%) contrast(85%);
}
.custom-color-mediumpurple {
-webkit-filter: invert(59%) sepia(99%) saturate(2885%) hue-rotate(222deg) brightness(90%) contrast(91%);
filter: invert(59%) sepia(99%) saturate(2885%) hue-rotate(222deg) brightness(90%) contrast(91%);
}
.custom-color-rebeccapurple {
-webkit-filter: invert(23%) sepia(69%) saturate(1276%) hue-rotate(243deg) brightness(92%) contrast(98%);
filter: invert(23%) sepia(69%) saturate(1276%) hue-rotate(243deg) brightness(92%) contrast(98%);
}
.custom-color-blueviolet {
-webkit-filter: invert(17%) sepia(94%) saturate(4177%) hue-rotate(269deg) brightness(93%) contrast(90%);
filter: invert(17%) sepia(94%) saturate(4177%) hue-rotate(269deg) brightness(93%) contrast(90%);
}
.custom-color-darkviolet {
-webkit-filter: invert(17%) sepia(96%) saturate(7457%) hue-rotate(284deg) brightness(84%) contrast(118%);
filter: invert(17%) sepia(96%) saturate(7457%) hue-rotate(284deg) brightness(84%) contrast(118%);
}
.custom-color-darkorchid {
-webkit-filter: invert(31%) sepia(80%) saturate(1460%) hue-rotate(258deg) brightness(84%) contrast(107%);
filter: invert(31%) sepia(80%) saturate(1460%) hue-rotate(258deg) brightness(84%) contrast(107%);
}
.custom-color-darkmagenta {
-webkit-filter: invert(10%) sepia(100%) saturate(6089%) hue-rotate(297deg) brightness(59%) contrast(105%);
filter: invert(10%) sepia(100%) saturate(6089%) hue-rotate(297deg) brightness(59%) contrast(105%);
}
.custom-color-basepurple {
-webkit-filter: invert(12%) sepia(48%) saturate(7462%) hue-rotate(293deg) brightness(86%) contrast(111%);
filter: invert(12%) sepia(48%) saturate(7462%) hue-rotate(293deg) brightness(86%) contrast(111%);
}
.custom-color-indigo {
-webkit-filter: invert(12%) sepia(52%) saturate(4794%) hue-rotate(268deg) brightness(91%) contrast(124%);
filter: invert(12%) sepia(52%) saturate(4794%) hue-rotate(268deg) brightness(91%) contrast(124%);
}
.custom-color-slateblue {
-webkit-filter: invert(27%) sepia(68%) saturate(1569%) hue-rotate(229deg) brightness(105%) contrast(80%);
filter: invert(27%) sepia(68%) saturate(1569%) hue-rotate(229deg) brightness(105%) contrast(80%);
}
.custom-color-darkslateblue {
-webkit-filter: invert(21%) sepia(90%) saturate(795%) hue-rotate(219deg) brightness(75%) contrast(91%);
filter: invert(21%) sepia(90%) saturate(795%) hue-rotate(219deg) brightness(75%) contrast(91%);
}
.custom-color-mediumslateblue {
-webkit-filter: invert(34%) sepia(77%) saturate(1059%) hue-rotate(222deg) brightness(109%) contrast(87%);
filter: invert(34%) sepia(77%) saturate(1059%) hue-rotate(222deg) brightness(109%) contrast(87%);
}
/**
* Green HTML color codes
*/
.custom-color-greenyellow {
-webkit-filter: invert(65%) sepia(100%) saturate(331%) hue-rotate(38deg) brightness(135%) contrast(104%);
filter: invert(65%) sepia(100%) saturate(331%) hue-rotate(38deg) brightness(135%) contrast(104%);
}
.custom-color-chartreuse {
-webkit-filter: invert(90%) sepia(72%) saturate(2632%) hue-rotate(22deg) brightness(94%) contrast(116%);
filter: invert(90%) sepia(72%) saturate(2632%) hue-rotate(22deg) brightness(94%) contrast(116%);
}
.custom-color-lawngreen {
-webkit-filter: invert(91%) sepia(82%) saturate(1530%) hue-rotate(31deg) brightness(101%) contrast(117%);
filter: invert(91%) sepia(82%) saturate(1530%) hue-rotate(31deg) brightness(101%) contrast(117%);
}
.custom-color-lime {
-webkit-filter: invert(51%) sepia(66%) saturate(3101%) hue-rotate(90deg) brightness(123%) contrast(122%);
filter: invert(51%) sepia(66%) saturate(3101%) hue-rotate(90deg) brightness(123%) contrast(122%);
}
.custom-color-limegreen {
-webkit-filter: invert(53%) sepia(94%) saturate(435%) hue-rotate(71deg) brightness(102%) contrast(87%);
filter: invert(53%) sepia(94%) saturate(435%) hue-rotate(71deg) brightness(102%) contrast(87%);
}
.custom-color-palegreen {
-webkit-filter: invert(93%) sepia(9%) saturate(2161%) hue-rotate(-91deg) brightness(105%) contrast(113%);
filter: invert(93%) sepia(9%) saturate(2161%) hue-rotate(-91deg) brightness(105%) contrast(113%);
}
.custom-color-lightgreen {
-webkit-filter: invert(89%) sepia(92%) saturate(375%) hue-rotate(49deg) brightness(119%) contrast(87%);
filter: invert(89%) sepia(92%) saturate(375%) hue-rotate(49deg) brightness(119%) contrast(87%);
}
.custom-color-mediumspringgreen {
-webkit-filter: invert(76%) sepia(83%) saturate(1852%) hue-rotate(98deg) brightness(98%) contrast(101%);
filter: invert(76%) sepia(83%) saturate(1852%) hue-rotate(98deg) brightness(98%) contrast(101%);
}
.custom-color-springgreen {
-webkit-filter: invert(73%) sepia(84%) saturate(1314%) hue-rotate(89deg) brightness(101%) contrast(104%);
filter: invert(73%) sepia(84%) saturate(1314%) hue-rotate(89deg) brightness(101%) contrast(104%);
}
.custom-color-mediumseagreen {
-webkit-filter: invert(55%) sepia(85%) saturate(315%) hue-rotate(94deg) brightness(91%) contrast(90%);
filter: invert(55%) sepia(85%) saturate(315%) hue-rotate(94deg) brightness(91%) contrast(90%);
}
.custom-color-seagreen {
-webkit-filter: invert(47%) sepia(37%) saturate(678%) hue-rotate(94deg) brightness(89%) contrast(92%);
filter: invert(47%) sepia(37%) saturate(678%) hue-rotate(94deg) brightness(89%) contrast(92%);
}
.custom-color-forestgreen {
-webkit-filter: invert(38%) sepia(61%) saturate(811%) hue-rotate(74deg) brightness(96%) contrast(86%);
filter: invert(38%) sepia(61%) saturate(811%) hue-rotate(74deg) brightness(96%) contrast(86%);
}
.custom-color-green {
-webkit-filter: invert(22%) sepia(98%) saturate(4008%) hue-rotate(107deg) brightness(94%) contrast(102%);
filter: invert(22%) sepia(98%) saturate(4008%) hue-rotate(107deg) brightness(94%) contrast(102%);
}
.custom-color-darkgreen {
-webkit-filter: invert(18%) sepia(90%) saturate(7499%) hue-rotate(93deg) brightness(94%) contrast(105%);
filter: invert(18%) sepia(90%) saturate(7499%) hue-rotate(93deg) brightness(94%) contrast(105%);
}
.custom-color-yellowgreen {
-webkit-filter: invert(64%) sepia(83%) saturate(374%) hue-rotate(37deg) brightness(99%) contrast(89%);
filter: invert(64%) sepia(83%) saturate(374%) hue-rotate(37deg) brightness(99%) contrast(89%);
}
.custom-color-olivedrab {
-webkit-filter: invert(45%) sepia(85%) saturate(370%) hue-rotate(38deg) brightness(94%) contrast(90%);
filter: invert(45%) sepia(85%) saturate(370%) hue-rotate(38deg) brightness(94%) contrast(90%);
}
.custom-color-olive {
-webkit-filter: invert(40%) sepia(93%) saturate(3051%) hue-rotate(46deg) brightness(98%) contrast(102%);
filter: invert(40%) sepia(93%) saturate(3051%) hue-rotate(46deg) brightness(98%) contrast(102%);
}
.custom-color-darkolivegreen {
-webkit-filter: invert(33%) sepia(90%) saturate(274%) hue-rotate(40deg) brightness(92%) contrast(88%);
filter: invert(33%) sepia(90%) saturate(274%) hue-rotate(40deg) brightness(92%) contrast(88%);
}
.custom-color-mediumaquamarine {
-webkit-filter: invert(73%) sepia(4%) saturate(4503%) hue-rotate(337deg) brightness(103%) contrast(80%);
filter: invert(73%) sepia(4%) saturate(4503%) hue-rotate(337deg) brightness(103%) contrast(80%);
}
.custom-color-darkseagreen {
-webkit-filter: invert(47%) sepia(30%) saturate(345%) hue-rotate(68deg) brightness(95%) contrast(87%);
filter: invert(47%) sepia(30%) saturate(345%) hue-rotate(68deg) brightness(95%) contrast(87%);
}
.custom-color-lightseagreen {
-webkit-filter: invert(54%) sepia(65%) saturate(528%) hue-rotate(128deg) brightness(96%) contrast(83%);
filter: invert(54%) sepia(65%) saturate(528%) hue-rotate(128deg) brightness(96%) contrast(83%);
}
.custom-color-darkcyan {
-webkit-filter: invert(26%) sepia(91%) saturate(2892%) hue-rotate(164deg) brightness(96%) contrast(101%);
filter: invert(26%) sepia(91%) saturate(2892%) hue-rotate(164deg) brightness(96%) contrast(101%);
}
.custom-color-teal {
-webkit-filter: invert(25%) sepia(92%) saturate(3612%) hue-rotate(167deg) brightness(92%) contrast(101%);
filter: invert(25%) sepia(92%) saturate(3612%) hue-rotate(167deg) brightness(92%) contrast(101%);
}
/**
* Blue HTML color codes
*/
.custom-color-aqua {
-webkit-filter: invert(97%) sepia(91%) saturate(5269%) hue-rotate(106deg) brightness(106%) contrast(106%);
filter: invert(97%) sepia(91%) saturate(5269%) hue-rotate(106deg) brightness(106%) contrast(106%);
}
.custom-color-cyan {
-webkit-filter: invert(85%) sepia(81%) saturate(3179%) hue-rotate(105deg) brightness(100%) contrast(108%);
filter: invert(85%) sepia(81%) saturate(3179%) hue-rotate(105deg) brightness(100%) contrast(108%);
}
.custom-color-lightcyan {
-webkit-filter: invert(100%) sepia(86%) saturate(374%) hue-rotate(118deg) brightness(200%) contrast(111%);
filter: invert(100%) sepia(86%) saturate(374%) hue-rotate(118deg) brightness(200%) contrast(111%);
}
.custom-color-aquamarine {
-webkit-filter: invert(90%) sepia(13%) saturate(1344%) hue-rotate(342deg) brightness(105%) contrast(108%);
filter: invert(90%) sepia(13%) saturate(1344%) hue-rotate(342deg) brightness(105%) contrast(108%);
}
.custom-color-turquoise {
-webkit-filter: invert(70%) sepia(87%) saturate(328%) hue-rotate(118deg) brightness(94%) contrast(93%);
filter: invert(70%) sepia(87%) saturate(328%) hue-rotate(118deg) brightness(94%) contrast(93%);
}
.custom-color-mediumturquoise {
-webkit-filter: invert(62%) sepia(87%) saturate(281%) hue-rotate(129deg) brightness(97%) contrast(94%);
filter: invert(62%) sepia(87%) saturate(281%) hue-rotate(129deg) brightness(97%) contrast(94%);
}
.custom-color-darkturquoise {
-webkit-filter: invert(52%) sepia(97%) saturate(1175%) hue-rotate(139deg) brightness(101%) contrast(100%);
filter: invert(52%) sepia(97%) saturate(1175%) hue-rotate(139deg) brightness(101%) contrast(100%);
}
.custom-color-cadetblue {
-webkit-filter: invert(54%) sepia(44%) saturate(338%) hue-rotate(133deg) brightness(98%) contrast(84%);
filter: invert(54%) sepia(44%) saturate(338%) hue-rotate(133deg) brightness(98%) contrast(84%);
}
.custom-color-steelblue {
-webkit-filter: invert(46%) sepia(85%) saturate(327%) hue-rotate(165deg) brightness(86%) contrast(89%);
filter: invert(46%) sepia(85%) saturate(327%) hue-rotate(165deg) brightness(86%) contrast(89%);
}
.custom-color-lightsteelblue {
-webkit-filter: invert(96%) sepia(87%) saturate(5467%) hue-rotate(176deg) brightness(86%) contrast(104%);
filter: invert(96%) sepia(87%) saturate(5467%) hue-rotate(176deg) brightness(86%) contrast(104%);
}
.custom-color-powderblue {
-webkit-filter: invert(86%) sepia(6%) saturate(2934%) hue-rotate(174deg) brightness(112%) contrast(80%);
filter: invert(86%) sepia(6%) saturate(2934%) hue-rotate(174deg) brightness(112%) contrast(80%);
}
.custom-color-deepskyblue {
-webkit-filter: invert(50%) sepia(88%) saturate(946%) hue-rotate(158deg) brightness(100%) contrast(104%);
filter: invert(50%) sepia(88%) saturate(946%) hue-rotate(158deg) brightness(100%) contrast(104%);
}
.custom-color-dodgerblue {
-webkit-filter: invert(44%) sepia(60%) saturate(3737%) hue-rotate(196deg) brightness(107%) contrast(101%);
filter: invert(44%) sepia(60%) saturate(3737%) hue-rotate(196deg) brightness(107%) contrast(101%);
}
.custom-color-cornflowerblue {
-webkit-filter: invert(60%) sepia(71%) saturate(2629%) hue-rotate(194deg) brightness(98%) contrast(89%);
filter: invert(60%) sepia(71%) saturate(2629%) hue-rotate(194deg) brightness(98%) contrast(89%);
}
.custom-color-mediumslateblue {
-webkit-filter: invert(47%) sepia(100%) saturate(3515%) hue-rotate(229deg) brightness(99%) contrast(89%);
filter: invert(47%) sepia(100%) saturate(3515%) hue-rotate(229deg) brightness(99%) contrast(89%);
}
.custom-color-royalblue {
-webkit-filter: invert(51%) sepia(77%) saturate(5609%) hue-rotate(216deg) brightness(92%) contrast(90%);
filter: invert(51%) sepia(77%) saturate(5609%) hue-rotate(216deg) brightness(92%) contrast(90%);
}
.custom-color-blue {
-webkit-filter: invert(9%) sepia(99%) saturate(7349%) hue-rotate(248deg) brightness(90%) contrast(145%);
filter: invert(9%) sepia(99%) saturate(7349%) hue-rotate(248deg) brightness(90%) contrast(145%);
}
.custom-color-mediumblue {
-webkit-filter: invert(13%) sepia(71%) saturate(3398%) hue-rotate(229deg) brightness(107%) contrast(189%);
filter: invert(13%) sepia(71%) saturate(3398%) hue-rotate(229deg) brightness(107%) contrast(189%);
}
.custom-color-darkblue {
-webkit-filter: invert(11%) sepia(95%) saturate(6286%) hue-rotate(246deg) brightness(54%) contrast(126%);
filter: invert(11%) sepia(95%) saturate(6286%) hue-rotate(246deg) brightness(54%) contrast(126%);
}
.custom-color-navy {
-webkit-filter: invert(17%) sepia(32%) saturate(7440%) hue-rotate(236deg) brightness(63%) contrast(135%);
filter: invert(17%) sepia(32%) saturate(7440%) hue-rotate(236deg) brightness(63%) contrast(135%);
}
.custom-color-midnightblue {
-webkit-filter: invert(10%) sepia(81%) saturate(3911%) hue-rotate(240deg) brightness(74%) contrast(100%);
filter: invert(10%) sepia(81%) saturate(3911%) hue-rotate(240deg) brightness(74%) contrast(100%);
}
/**
* Brown HTML color codes
*/
.custom-color-blanchedalmond {
-webkit-filter: invert(90%) sepia(91%) saturate(338%) hue-rotate(302deg) brightness(146%) contrast(101%);
filter: invert(90%) sepia(91%) saturate(338%) hue-rotate(302deg) brightness(146%) contrast(101%);
}
.custom-color-wheat {
-webkit-filter: invert(98%) sepia(86%) saturate(866%) hue-rotate(306deg) brightness(145%) contrast(120%);
filter: invert(98%) sepia(86%) saturate(866%) hue-rotate(306deg) brightness(145%) contrast(120%);
}
.custom-color-burlywood {
-webkit-filter: invert(85%) sepia(15%) saturate(988%) hue-rotate(231deg) brightness(90%) contrast(92%);
filter: invert(85%) sepia(15%) saturate(988%) hue-rotate(231deg) brightness(90%) contrast(92%);
}
.custom-color-tan {
-webkit-filter: invert(97%) sepia(69%) saturate(904%) hue-rotate(236deg) brightness(86%) contrast(89%);
filter: invert(97%) sepia(69%) saturate(904%) hue-rotate(236deg) brightness(86%) contrast(89%);
}
.custom-color-sandybrown {
-webkit-filter: invert(80%) sepia(78%) saturate(3224%) hue-rotate(317deg) brightness(106%) contrast(91%);
filter: invert(80%) sepia(78%) saturate(3224%) hue-rotate(317deg) brightness(106%) contrast(91%);
}
.custom-color-goldenrod {
-webkit-filter: invert(62%) sepia(92%) saturate(414%) hue-rotate(2deg) brightness(93%) contrast(86%);
filter: invert(62%) sepia(92%) saturate(414%) hue-rotate(2deg) brightness(93%) contrast(86%);
}
.custom-color-darkengoldenrod {
-webkit-filter: invert(56%) sepia(74%) saturate(509%) hue-rotate(5deg) brightness(83%) contrast(98%);
filter: invert(56%) sepia(74%) saturate(509%) hue-rotate(5deg) brightness(83%) contrast(98%);
}
.custom-color-peru {
-webkit-filter: invert(54%) sepia(75%) saturate(424%) hue-rotate(348deg) brightness(91%) contrast(82%);
filter: invert(54%) sepia(75%) saturate(424%) hue-rotate(348deg) brightness(91%) contrast(82%);
}
.custom-color-chocolate {
-webkit-filter: invert(52%) sepia(67%) saturate(1900%) hue-rotate(349deg) brightness(86%) contrast(91%);
filter: invert(52%) sepia(67%) saturate(1900%) hue-rotate(349deg) brightness(86%) contrast(91%);
}
.custom-color-saddlebrown {
-webkit-filter: invert(28%) sepia(72%) saturate(855%) hue-rotate(350deg) brightness(68%) contrast(92%);
filter: invert(28%) sepia(72%) saturate(855%) hue-rotate(350deg) brightness(68%) contrast(92%);
}
.custom-color-sienna {
-webkit-filter: invert(32%) sepia(94%) saturate(621%) hue-rotate(340deg) brightness(81%) contrast(66%);
filter: invert(32%) sepia(94%) saturate(621%) hue-rotate(340deg) brightness(81%) contrast(66%);
}
.custom-color-brown {
-webkit-filter: invert(17%) sepia(49%) saturate(5719%) hue-rotate(351deg) brightness(77%) contrast(78%);
filter: invert(17%) sepia(49%) saturate(5719%) hue-rotate(351deg) brightness(77%) contrast(78%);
}
.custom-color-maroon {
-webkit-filter: invert(8%) sepia(91%) saturate(6783%) hue-rotate(12deg) brightness(75%) contrast(111%);
filter: invert(8%) sepia(91%) saturate(6783%) hue-rotate(12deg) brightness(75%) contrast(111%);
}
/**
* Gray HTML color codes
*/
.custom-color-gainsboro {
-webkit-filter: invert(77%) sepia(40%) saturate(5%) hue-rotate(336deg) brightness(146%) contrast(94%);
filter: invert(77%) sepia(40%) saturate(5%) hue-rotate(336deg) brightness(146%) contrast(94%);
}
.custom-color-lightgray {
-webkit-filter: invert(74%) sepia(64%) saturate(1%) hue-rotate(338deg) brightness(131%) contrast(94%);
filter: invert(74%) sepia(64%) saturate(1%) hue-rotate(338deg) brightness(131%) contrast(94%);
}
.custom-color-silver {
-webkit-filter: invert(80%) sepia(1%) saturate(0%) hue-rotate(95deg) brightness(125%) contrast(91%);
filter: invert(80%) sepia(1%) saturate(0%) hue-rotate(95deg) brightness(125%) contrast(91%);
}
.custom-color-darkgray {
-webkit-filter: invert(54%) sepia(77%) saturate(7%) hue-rotate(13deg) brightness(105%) contrast(100%);
filter: invert(54%) sepia(77%) saturate(7%) hue-rotate(13deg) brightness(105%) contrast(100%);
}
.custom-color-gray {
-webkit-filter: invert(54%) sepia(0%) saturate(0%) hue-rotate(38deg) brightness(93%) contrast(89%);
filter: invert(54%) sepia(0%) saturate(0%) hue-rotate(38deg) brightness(93%) contrast(89%);
}
.custom-color-dimgray {
-webkit-filter: invert(42%) sepia(0%) saturate(1%) hue-rotate(188deg) brightness(95%) contrast(88%);
filter: invert(42%) sepia(0%) saturate(1%) hue-rotate(188deg) brightness(95%) contrast(88%);
}
.custom-color-lightslategray {
-webkit-filter: invert(51%) sepia(23%) saturate(282%) hue-rotate(169deg) brightness(99%) contrast(95%);
filter: invert(51%) sepia(23%) saturate(282%) hue-rotate(169deg) brightness(99%) contrast(95%);
}
.custom-color-slategray {
-webkit-filter: invert(51%) sepia(15%) saturate(458%) hue-rotate(169deg) brightness(93%) contrast(87%);
filter: invert(51%) sepia(15%) saturate(458%) hue-rotate(169deg) brightness(93%) contrast(87%);
}
.custom-color-darkslategray {
-webkit-filter: invert(26%) sepia(58%) saturate(264%) hue-rotate(131deg) brightness(59%) contrast(104%);
filter: invert(26%) sepia(58%) saturate(264%) hue-rotate(131deg) brightness(59%) contrast(104%);
}
.custom-color-black {
-webkit-filter: invert(0%) sepia(90%) saturate(7500%) hue-rotate(157deg) brightness(0%) contrast(108%);
filter: invert(0%) sepia(90%) saturate(7500%) hue-rotate(157deg) brightness(0%) contrast(108%);
}
Next step is to create a class holder with proper naming conventions and point to the CSS class names you just created. As you can see below, MyContentIcons is an inheritance from the former blog post of EpiserverContentIcons. We will use the danger color (#ed4c1c) from Episerver as our color mixing base.
Here comes another long section of code...
public class MyContentIcons : EpiserverContentIcons
{
/// <summary>
/// Use Episerver's danger icon (orange, #ed4c1c)
/// as base for HSL mixing
/// </summary>
public class BaseColors
{
public const string BaseColor = EpiColors.Danger + " custom-color-";
}
public class CustomColors
{
#region [ Red HTML color names ]
public class Red
{
public const string IndianRed = BaseColors.BaseColor + "indianred";
public const string LightCoral = BaseColors.BaseColor + "lightcoral";
public const string Salmon = BaseColors.BaseColor + "salmon";
public const string DarkSalmon = BaseColors.BaseColor + "darksalmon";
public const string LightSalmon = BaseColors.BaseColor + "lightsalmon";
public const string Crimson = BaseColors.BaseColor + "crimson";
public const string BasicRed = BaseColors.BaseColor + "red";
public const string FireBrick = BaseColors.BaseColor + "firebrick";
public const string DarkRed = BaseColors.BaseColor + "darkred";
}
#endregion
#region [ Pink HTML color names ]
public class Pink
{
public const string BasePink = BaseColors.BaseColor + "pink";
public const string LightPink = BaseColors.BaseColor + "lightpink";
public const string HotPink = BaseColors.BaseColor + "hotpink";
public const string DeepPink = BaseColors.BaseColor + "deeppink";
public const string MediumVioletred = BaseColors.BaseColor + "mediumvioletred";
public const string PaleVioletred = BaseColors.BaseColor + "palevioletred";
}
#endregion
#region [ Orange HTML color names ]
public class Orange
{
public const string Coral = BaseColors.BaseColor + "coral";
public const string Tomato = BaseColors.BaseColor + "tomato";
public const string OrangeRed = BaseColors.BaseColor + "orangered";
public const string DarkOrange = BaseColors.BaseColor + "darkorange";
public const string BaseOrange = BaseColors.BaseColor + "orange";
}
#endregion
#region [ Yellow HTML color names ]
public class Yellow
{
public const string Gold = BaseColors.BaseColor + "gold";
public const string BaseYellow = BaseColors.BaseColor + "yellow";
public const string LightYellow = BaseColors.BaseColor + "lightyellow";
public const string LemonChiffon = BaseColors.BaseColor + "lemonchiffon";
public const string LightGoldenRodYellow = BaseColors.BaseColor + "lightgoldenrodyellow";
public const string PapayaWhip = BaseColors.BaseColor + "papayawhip";
public const string Moccasin = BaseColors.BaseColor + "moccasin";
public const string PeachPuff = BaseColors.BaseColor + "peachpuff";
public const string PaleGoldenRod = BaseColors.BaseColor + "palegoldenrod";
public const string Khaki = BaseColors.BaseColor + "khaki";
public const string DarkKhaki = BaseColors.BaseColor + "dharkkhaki";
}
#endregion
#region [ Purple HTML color names ]
public class Purple
{
public const string Lavender = BaseColors.BaseColor + "lavender";
public const string Thistle = BaseColors.BaseColor + "thistle";
public const string Plum = BaseColors.BaseColor + "plum";
public const string Violet = BaseColors.BaseColor + "violet";
public const string Orchid = BaseColors.BaseColor + "orchid";
public const string Fuchsia = BaseColors.BaseColor + "fuchsia";
public const string Magenta = BaseColors.BaseColor + "magenta";
public const string MediumOrchid = BaseColors.BaseColor + "mediumorchid";
public const string MediumPurple = BaseColors.BaseColor + "mediumpurple";
public const string RebeccaPurple = BaseColors.BaseColor + "rebeccapurple";
public const string BlueViolet = BaseColors.BaseColor + "blueviolet";
public const string DarkViolet = BaseColors.BaseColor + "darkviolet";
public const string DarkOrchid = BaseColors.BaseColor + "darkorchid";
public const string DarkMagenta = BaseColors.BaseColor + "darkmagenta";
public const string BasePurple = BaseColors.BaseColor + "purple";
public const string Indigo = BaseColors.BaseColor + "indigo";
public const string SlateBlue = BaseColors.BaseColor + "slateblue";
public const string DarkSlateBlue = BaseColors.BaseColor + "darkslateblue";
public const string MediumSlateBlue = BaseColors.BaseColor + "mediumslateblue";
}
#endregion
#region [ Green HTML color names ]
public class Green
{
public const string GreenYellow = BaseColors.BaseColor + "greenyellow";
public const string ChartReuse = BaseColors.BaseColor + "chartreuse";
public const string LawnGreen = BaseColors.BaseColor + "lawngreen";
public const string Lime = BaseColors.BaseColor + "lime";
public const string LimeGreen = BaseColors.BaseColor + "limegreen";
public const string PaleGreen = BaseColors.BaseColor + "palegreen";
public const string LightGreen = BaseColors.BaseColor + "lightgreen";
public const string MediumSpringGreen = BaseColors.BaseColor + "mediumspringgreen";
public const string SpringGreen = BaseColors.BaseColor + "springgreen";
public const string MediumSeaGreen = BaseColors.BaseColor + "mediumseagreen";
public const string SeaGreen = BaseColors.BaseColor + "seagreen";
public const string ForestGreen = BaseColors.BaseColor + "forestgreen";
public const string BaseGreen = BaseColors.BaseColor + "green";
public const string DarkGreen = BaseColors.BaseColor + "darkgreen";
public const string YellowGreen = BaseColors.BaseColor + "yellowgreen";
public const string OliveDrab = BaseColors.BaseColor + "olivedrab";
public const string Olive = BaseColors.BaseColor + "olive";
public const string DarkOliveGreen = BaseColors.BaseColor + "darkolivegreen";
public const string MediumAquaMarine = BaseColors.BaseColor + "mediumaquamarine";
public const string DarkSeaGreen = BaseColors.BaseColor + "darkseagreen";
public const string LightSeaGreen = BaseColors.BaseColor + "lightseagreen";
public const string DarkCyan = BaseColors.BaseColor + "darkcyan";
public const string Teal = BaseColors.BaseColor + "teal";
}
#endregion
#region [ Blue HTML color names ]
public class Blue
{
public const string Aqua = BaseColors.BaseColor + "aqua";
public const string Cyan = BaseColors.BaseColor + "cyan";
public const string LightCyan = BaseColors.BaseColor + "lightcyan";
public const string Turquoise = BaseColors.BaseColor + "turquoise";
public const string MediumTurquoise = BaseColors.BaseColor + "mediumturquoise";
public const string DarkTurquoise = BaseColors.BaseColor + "darkturquoise";
public const string CadetBlue = BaseColors.BaseColor + "cadetblue";
public const string SteelBlue = BaseColors.BaseColor + "steelblue";
public const string LightSteelBlue = BaseColors.BaseColor + "lightsteelblue";
public const string PowderBlue = BaseColors.BaseColor + "powderblue";
public const string DeepSkyBlue = BaseColors.BaseColor + "deepskyblue";
public const string DodgerBlue = BaseColors.BaseColor + "dodgerblue";
public const string CornFlowerBlue = BaseColors.BaseColor + "cornflowerblue";
public const string MediumSlateBlue = BaseColors.BaseColor + "mediumslateblue";
public const string RoyalBlue = BaseColors.BaseColor + "royalblue";
public const string BaseBlue = BaseColors.BaseColor + "blue";
public const string MediumBlue = BaseColors.BaseColor + "mediumblue";
public const string Navy = BaseColors.BaseColor + "navy";
public const string MidnightBlue = BaseColors.BaseColor + "midnightblue";
}
#endregion
#region [ Brown HTML color names ]
public class Brown
{
public const string BlancheDalmond = BaseColors.BaseColor + "blanchedalmond";
public const string Wheat = BaseColors.BaseColor + "wheat";
public const string BurlyWood = BaseColors.BaseColor + "burlywood";
public const string Tan = BaseColors.BaseColor + "tan";
public const string SandyBrown = BaseColors.BaseColor + "sandybrown";
public const string GoldenRod = BaseColors.BaseColor + "goldenrod";
public const string DarkGoldenRod = BaseColors.BaseColor + "darkgoldenrod";
public const string Peru = BaseColors.BaseColor + "peru";
public const string Chocolate = BaseColors.BaseColor + "chocolate";
public const string SaddleBrown = BaseColors.BaseColor + "saddlebrown";
public const string Sienna = BaseColors.BaseColor + "sienna";
public const string BaseBrown = BaseColors.BaseColor + "brown";
public const string Maroon = BaseColors.BaseColor + "maroon";
}
#endregion
#region [ White HTML color names ]
public class White
{
public const string BaseWhite = BaseColors.BaseColor + "white";
public const string Snow = BaseColors.BaseColor + "snow";
public const string HoneyDew = BaseColors.BaseColor + "honeydew";
public const string MintCream = BaseColors.BaseColor + "mintcream";
public const string Azure = BaseColors.BaseColor + "azure";
public const string AliceBlue = BaseColors.BaseColor + "aliceblue";
public const string GhostWhite = BaseColors.BaseColor + "ghostwhite";
public const string WhiteSmoke = BaseColors.BaseColor + "whitesmoke";
public const string SeaShell = BaseColors.BaseColor + "seashell";
public const string Beige = BaseColors.BaseColor + "beige";
public const string OldLace = BaseColors.BaseColor + "oldlace";
public const string FloralWhite = BaseColors.BaseColor + "floralwhite";
public const string Ivory = BaseColors.BaseColor + "ivory";
public const string AntiqueWhite = BaseColors.BaseColor + "antiquewhite";
public const string Linen = BaseColors.BaseColor + "linen";
public const string LavenderBlush = BaseColors.BaseColor + "lavenderblush";
public const string MistyRose = BaseColors.BaseColor + "mistyrose";
}
#endregion
#region [ Gray HTML color names ]
public class Gray
{
public const string GainsBoro = BaseColors.BaseColor + "gainsboro";
public const string LightGray = BaseColors.BaseColor + "lightgray";
public const string Silver = BaseColors.BaseColor + "silver";
public const string DarkGray = BaseColors.BaseColor + "darkgray";
public const string BaseGray = BaseColors.BaseColor + "gray";
public const string DimGray = BaseColors.BaseColor + "dimgray";
public const string LightSlateGray = BaseColors.BaseColor + "lightslategray";
public const string SlateGray = BaseColors.BaseColor + "slategray";
public const string DarkSlateGray = BaseColors.BaseColor + "darkslategray";
public const string BaseBlack = BaseColors.BaseColor + "black";
}
#endregion
}
}
Phew... lot's of constants! However, final step! To set the CSS class path to the DOM, use the following approach on your interface class:
[UIDescriptorRegistration]
public class ContainerTreeIconDescriptor : UIDescriptor<IUseContainerTreeIcon>
{
public ContainerTreeIconDescriptor() : base("dijitIcon")
{
IconClass = DovContentIcons.ActionIcons.Folder + CustomColors.Red.IndianRed;
}
}
public interface IUseContainerTreeIcon
{
}
That's it! Hopefully Episerver will not change their color values in a near future, so this should be pretty bullet proof to use.
Having a hard time finding out which color to choose when implementing this feature for your icons? Then you should read JenReviews' article and get inspired about choosing the perfect color for your implementation.
You may also find this link useful for beginning with basic color understanding in html.
Time to show your Picasso-skills and broaden your creative mind!