```metadata
title: Custom Colors - Xanathar's
description: ''
tags:
  - meta:Theme
systems:
  - 5e
renderer: V3
theme: 5ePHB

```

```css
@import url(https://rawcdn.githack.com/Kaiburr-kath-hound/HomebreweryStyles/86c37513be2e315f717a2e9295bfb8149dc85a80/XanatharFonts.css);

:root {
/* HIGHLIGHT COLOR __________________________________________________________________________ */
/* __________________________________________________________________________________________

Below is the single color that dictates the highlight color of the footer images, chapter headers, chapter horizontal lines. 

You can use color names like "blue", "green", or "black", full list of such colors here: 
https://developer.mozilla.org/en-US/docs/Web/CSS/named-color.

You can also use a hexidecimal color code. You can select and copy such a color from here:
https://www.hexcolortool.com/.
*/

  --theme-color       : forestgreen;
  
/* Below are some preset colors, =selected to look like each of the different color sections in Xanathar's Guide to Everything. */

/* Xanathar's Yellow    #ffce47  */
/* Xanathar's Blue-Gray #798cb4  */
/* Xanathar's Red       #a94d32  */
/* Xanathar's Green     #59a55c  */



/* These next two lines dictate the color of the notes and table rows, respectively. 

Currently they're set to be determined by the theme-color varable above, but you can change them separately here if you like. */
  --note-color            : var(--theme-color);
  --table-color           : var(--theme-color);

/* Xanathar's Note Color  : #f2e5ba */
/* Xanathar's Table Color : #dbdbe1 */







/* METALLIC ELEMENTS ________________________________________________________________________ */
/* __________________________________________________________________________________________

This is a more advanced technique, but these next two values affect only the golden metallic decals around the document. 

* "hue-rotate" is a value that goes from 0 degrees to 359 degrees (360 degrees is the same as 0 degrees) and determines the hue of the color on a color wheel. 
* "saturation" goes from 0 (grayscale) to 1 (normal saturation) to 100+ (crazy bonkers saturated, it hurts your eyes to look at). */
  --hue-rotate  : 0deg;
  --saturation  : 0;



/* METALLIC VALUE PRESETS
Below are some pre-selected values for different appearances. Please play around with any and all of these values, just copy and paste the code from the preset you want and copy it above in the actual code (cotton candy, towards the bottom, is my favorite).

  GOLD
  --hue-rotate  : 0deg;
  --saturation  : 1;


  SILVER
  --hue-rotate  : 0deg;
  --saturation  : 0;


  COPPER
  --hue-rotate  : -20deg;
  --saturation  : 1;
  
  
  PLATINUM
  --hue-rotate  : 190deg;
  --saturation  : 0.3;
  
  
  ROSE GOLD
  --hue-rotate  : -36deg;
  --saturation  : 0.8;
  
  
  FIERY GLOW
  --hue-rotate  : -10deg;
  --saturation  : 3;
  
  
  ICY BLUE
  --hue-rotate  : 160deg;
  --saturation  : 2;
  
  
  COTTON CANDY
  --hue-rotate  : 190deg;
  --saturation  : 4;
  
  
  FAERIE FIRE
  --hue-rotate  : 200deg;
  --saturation  : 15;
  */
  
}


/* HIGHLIGHT COLOR OVERLAYS */
.page .chapter hr::before, 
.page:not(:has(.not))::before,
.page .chapter::after {
  content						  : '';
  position					  : absolute;
  -webkit-mask-size		: 100% 100%;
  background-color    : var(--theme-color);
  background-size			: 100% 100%;
  mix-blend-mode	 		: soft-light; 
}
.page .chapter hr::before {
  width							  : 3.65cm;
  height						  : 0.73mm;
  bottom						  : 0.9mm;
  left							  : 1.25cm;
  z-index						  : -1;
  -webkit-mask-image	: url(https://i.imgur.com/oljEN4i.png);
  z-index							: 1;
  filter              : hue-rotate(calc(-1 * var(--hue-rotate))) 
                        saturate(calc(1 / var(--saturation)));
}
.page:not(:has(.not))::before {
  width							  : 4.743cm;
  height						  : 4.27cm;
  bottom						  : 0;
  left							  : 0;
  -webkit-mask-image	: url(https://i.imgur.com/d2oK43d.png);
  z-index							: 200;
}
.page .chapter::after {
  width							  : 4.58cm;
  height						  : 4.16cm;
  top								  : 10px;
  left							  : 0;
  z-index						  : -1;
  -webkit-mask-image	: url(https://i.imgur.com/Fvb6wSk.png);
  z-index							: 301;
}

/* METALLIC ELEMENT ADJUSTMENTS */ 
.page::after,
.page .chapter::before,
.page [class*="decal"],
.page hr {
  filter            : hue-rotate(var(--hue-rotate)) 
                      saturate(var(--saturation));
}


/* OTHER XANATHAR CODE ____________________________________________________ */
/* ________________________________________________________________________ */

/* PAGE TEXTURE */
.page {
	background-image	: url(https://i.imgur.com/UrB4Mya.jpg);
	background-size		: cover;
	padding-bottom	  : 81px;
}
.page:nth-of-type(odd) {
	background-image	: url(https://i.imgur.com/VjuryuT.jpg);
}

/* FOOTER IMAGE */
.page::after {
	position					  : absolute;
	left							  : 0px;
	bottom						  : 0px;
	height						  : 330px;
	width							  : 100%;
	background-image	  : url(https://i.imgur.com/bapCDAA.png);
	background-position : top;
  transform           : ScaleX(-1);
}
.page:nth-of-type(even)::after {
  transform         : ScaleX(1);
}
.page:nth-of-type(odd)::before {
	transform					: ScaleX(-1);
  left              : unset;
  right             : 0;
}

/*FULL PAGE */
.page:has(.fullpage)::after {
	height						: 100%;
	background-image	: url(https://i.imgur.com/j2kThM4.png);
	transform         : scaleX(1);
}
.page:nth-child(even):has(.fullpage)::after{
	transform         : scaleX(-1);
}
.page .fullpage img {
  position          : absolute;
	top			          : 0; 
	left		          : 0; 
	height	          : 100%;
	min-width         : 100%;
}

/* TABLES & NOTES */
.page table:not(.monster table) tr:nth-child(odd) td {
  background-color    : hsl(from var(--table-color)
             /* hue */  h
      /* saturation */  calc(s * 2 / 3)
       /* lightness */  clamp(80, calc(l * 1.2), 90)
  );
}
.page table th td:first-child,
.page table tr td:first-child {
  padding-left        : 14px;
}

.page .note { 
  border-image				: url(https://i.imgur.com/KtrHa62.png) 14 stretch;
	border-image-outset	: 6px 0px;
	border-image-width  : 11px;
  background-color    : hsl(from var(--note-color)
             /* hue */  h
      /* saturation */  calc(s * 2 / 3)
       /* lightness */  clamp(80, calc(l * 1.2), 90)
  );
}

/* FOOTNOTE AND PAGE NUMBER */
.page .footnote,
.page .pageNumber {
	color				    : #808080;
}
.page .pageNumber {
	left 				    : 26px !important;
	bottom			    : 42px;
	font-size		    : 12px;
	text-align	    : left;
}
.page:nth-child(odd) .footnote,
.page:nth-child(odd) .pageNumber {
  left				    : unset !important;
  text-align	    : right;
}
.page:nth-child(odd) .pageNumber {
  right 			    : 26px;
}
.page:nth-child(odd)  .footnote {
  right						: 74px;
}
.page .footnote{
	left						: 74px;
	bottom					: 49px;
	font-size				: 10px;
	text-transform	: uppercase;
	text-align			: left;
	width						: 400px;
}

/* HORIZONTAL RULES */
.page hr {
	visibility				: visible;
	position					: relative;
  height						: 23px;
  width							: 107%;
  margin						: 4px -11px 8px;
	border						: none;
  background-image	: url(https://i.imgur.com/RdumPuE.png);
  background-size		: 100% 100%;

  &.wide {
    background-image	: url(https://i.imgur.com/fOhtAYm.png);
    width							: 103%;
  }
}

/* WATERCOLOR SPLASHES */
.page [class*="watercolor"] {
  background-color    : hsl(from var(--theme-color)
             /* hue */  h
      /* saturation */  calc(s * 3 / 5)
       /* lightness */  clamp(30, l, 50)
  );
  opacity             : 0.7;
}

/* CROSSHATCH PATTERN (Used in Xanathar's similarly to watercolor splashes) */
.page .crosshatch {
	width						  : 500px;
	height					  : 100%;
	margin					  : -50px;
	background-image  : url(https://i.imgur.com/hqcBD1j.png);
}

/* DECALS */
.page [class*="decal"],
.page .crosshatch {
	content						: '';
	position					: absolute;
	background-size		: contain;
	background-repeat	: no-repeat;
	z-index						: -2 !important;
}

.page [class*="decal"] {
	right							: 0;
}
.page [class*="decal"].left {
	right							: unset;
	left							: 0px;
	transform					: ScaleX(-1);
}
.page .decal2.left,
.page .decal3.left {
	left							: -10px;
}
  .page .decal1 {
		top								: 0;
		height						: 530px;
		width							: 323px;
		background-image	: url(https://i.imgur.com/qArNReE.png);
  }
  .page .decal2 {
		right							: -10px;
		bottom						: 0;
		height						: 530px;
		width							: 530px;
		background-image	: url(https://i.imgur.com/F2r2FA0.png);
		z-index						: 200;
  }
  .page .decal3 {
		top								: -10px;
		height						: 610px;
		width							: 545px;
		background-image	: url(https://i.imgur.com/jZmQXae.png);
  }
  .page .decal4 {
		top								: 0;
		height						: 146px;
		width							: 400px;
		background-image	: url(https://i.imgur.com/VtiR9PM.png);
  }


/* DROP CAP */
.page .chapter+p:first-letter,
.page h1+p:first-letter,
.page .chapter+.quote::first-letter,
.page h1+.quote::first-letter {
	float								: left;
	font-family					: 'SolberaImitationRemake';
	font-size						: 126px;
	line-height					: 1em;
	--shadow-x0					: #f9f8f4 0 0 1.4px;
	--shadow-x1					: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0);
	--shadow-x2					: var(--shadow-x1), var(--shadow-x1), var(--shadow-x1);
	text-shadow					: var(--shadow-x2), var(--shadow-x2), var(--shadow-x2);
	text-transform			: uppercase;
	background					: unset;
	padding							:  24px  4px   2px  40px;
	margin							: -32px  1px -20px -34px;
  
  &::after {
  	background-image		: url(https://i.imgur.com/OXd9IH6.png);
    background-size			: min(83px, 100%) auto;
    background-repeat		: no-repeat;
    background-position	: right 20% center;
  }
}


/* CHAPTERS */
.page .chapter {
	text-align			  : center;
	column-span			  : all;
	display					  : block;
	padding-top			  : 10px;
	padding-bottom	  : 32px;
}
.page .chapter+.quote::first-line,
.page .chapter+p:first-line {
	font-variant 		  : small-caps;
	font-family 		  : BookInsanityRemake;
	font-size				  : 13px;
	text-transform	  : lowercase;
	line-height			  : 14px;
}
.page .chapter h1 {
	font-size				  : 39px;
	letter-spacing	  : 0.5px;
  margin-bottom     : unset;
}

.page:nth-of-type(even) .chapter::before,
.page:nth-of-type(even) .chapter::after {
  transform					: ScaleX(-1);
  left              : unset;
  right             : 0;
}
.page .chapter::before {
	content						: '';
	position					: absolute;
	width							: 100%;
	height						: 214px;
	top								: 0;
	left							: 0;
	z-index						: -1;
	background-image	: url(https://i.imgur.com/DpqGl5t.png);
	background-size		: cover;
}
.page .chapter hr {
	height						: 13px;
	width							: 232px;
	margin						: -2px 216px;
	background-image 	: url(https://i.imgur.com/5z9slfe.png);
}


/* CREDITS PAGE ___________________________________________________ */
/* ________________________________________________________________ */

.page:has(.credits) h1+p::first-letter, 
.page:has(.credits) h1+p::first-line,
.page:has(.credits)::after {
	all	: unset;
}

.page:has(.credits) h1 {
	font-size	: 40px;
}

.page:has(.credits h2), 
.page:has(.credits h5) {
	margin-bottom	:14px;
}

.page:has(.credits) p {
	font-family	: Martel_SansRegular;
	font-style	: normal;
	font-size		: 0.83em;
	line-height	: 1.5em;
	text-indent	: -1em; 
	margin-left	: 1em;
}

.page:has(.credits) strong {
	font-family	: Martel_SansExtraBold;
}

.credits a {
	color				: #999;
	font-weight	: bold;
}

		.page .frontcredit {
			position						: relative;
			right								: 10px;
			width               : 310px;
			height              : 240px;
			margin-top					: 15px;
			margin-bottom				: 100px;
		}

		.page .frontcredit::before {
			content							: '';
			position						: absolute;
			top									: 9px;
			left								: -20px;
			height							: 94.5%;
			width								: 113%;
			background-image		: url(https://i.imgur.com/HKHIW1j.png);
			background-position	: center;
			background-size			: 100% 100%;
			background-repeat		: no-repeat;
		}

		.page .frontcredit img {
			position							: relative;
			top										: 16px;
			left									: -8px;
			min-width							: 105%;
			height								: 213px;
			-webkit-mask-image		: url(https://i.imgur.com/z17DCrf.png);
			-webkit-mask-position	: top;
			-webkit-mask-size			: 325px 213px;
			-webkit-mask-repeat		: no-repeat;
		}

		.page .frontcredit h5 {
			margin-top		: 10px;
			margin-bottom	: -2px;
		}

		.page .frontcredit p {
			text-indent	  : 0; 
			margin-left	  : 0;
		}

.credits .footnote {
	bottom					: 20px;
	left						: 0;
	width						: 100%;
	font-size				: 1em;
	text-transform	: none;
	text-align			: left;
	color						: black;
}

.credits .footnote p {
	padding			    : 4.5em;
	text-indent	    : 0;
}


/* TABLE OF CONTENTS _______________________________________________ */
/* _________________________________________________________________ */

.page:has(.toc) h1 {
	text-align			: left;
}
	
.page .toc h3,
.page .toc h4 {
	font-family			: BookInsanityRemake;
	font-size				: 12px;
	letter-spacing	: 0;
}
  
.page .toc h3 {
	font-weight			: bold;
	border-bottom		: unset;
}

.page .toc h4 {
	margin-top			: 2px;
	color						: black;
}

.page .toc ul h3 span:first-child::after {
	border-bottom   : 0.05cm dotted #000;
}
	
.page .toc ul li + li h3 {
	margin-top	    : 8px;
}

.page .toc.wide {
	columns			    : 3;
  column-gap      : 16px;
}

/* XANATHAR COMMENTS _______________________________________________ */
/* _________________________________________________________________ */

/* The weird notation below just means "apply this code to any class that has the name 'comment' in it" */
.page [class*="comment"] {
	font-family				: Psycho;
	position					: absolute;
	min-height				: 130px;
	max-height				: 350px;
	width							: 340px;
	padding						: 10px 20px 20px 30px;
	background-image	: url(https://i.imgur.com/fSEEBUG.png);
	background-size		: 100% 100%;
	background-repeat	: no-repeat;
	filter						: drop-shadow(1px 3px 5px rgba(140, 140, 140, 0.8));
	z-index						: 205;
}

	.page .comment2 {
		background-image	: url(https://i.imgur.com/VBHXNmb.png);
		min-height				: 90px;
		max-height				: 230px;
		width							: 350px;
		padding						: 15px 20px 20px 25px;
	}
	.page .comment3 {
		background-image	: url(https://i.imgur.com/gAfgytb.png);
		min-height				: 120px;
		max-height				: 250px;
		width							: 360px;
		padding						: 10px 25px 20px 30px;
	}
	.page .comment4 {
		background-image	: url(https://i.imgur.com/s8dkeCL.png);
		min-height				: 75px;
		max-height				: 200px;
		width							: 380px;
		padding						: 12px 25px 20px 30px;
	}
	.page .comment5 {
		background-image	: url(https://i.imgur.com/pbWuP59.png);
		min-height				: 80px;
		max-height				: 180px;
		width							: 375px;
		padding						: 10px 25px 20px 25px;
	}
	.page .comment6 {
		background-image	: url(https://i.imgur.com/EullZt7.png);
		min-height				: 70px;
		max-height				: 200px;
		width							: 370px;
		padding						: 15px 20px 20px 25px;
	}
	.page .comment7 {
		background-image	: url(https://i.imgur.com/u95HaQt.png);
		min-height				: 90px;
		max-height				: 300px;
		width							: 420px;
		padding						: 20px 30px 20px 30px;
	}
	.page .comment8 {
		background-image	: url(https://i.imgur.com/RscZc46.png);
		min-height				: 100px;
		max-height				: 250px;
		width							: 390px;
		padding						: 15px 25px 15px;
	}
	.page .comment9 {
		background-image	: url(https://i.imgur.com/1848blR.png);
		min-height				: 70px;
		max-height				: 150px;
		width							: 385px;
		padding						: 15px 20px 10px 30px;
	}
	.page .comment10 {
		background-image	: url(https://i.imgur.com/qcq9SS6.png);
		min-height				: 90px;
		max-height				: 240px;
		width							: 380px;
		padding						: 25px 20px 20px 30px;
	}
	.page .comment11 {
		background-image	: url(https://i.imgur.com/pXlSnaO.png);
		min-height				: 130px;
		max-height				: 320px;
		width							: 420px;
		padding						: 15px 20px 15px 25px;
	}
	.page .comment12 {
		background-image	: url(https://i.imgur.com/xKUdw4w.png);
		min-height				: 130px;
		max-height				: 325px;
		width							: 400px;
		padding						: 18px 18px 15px 30px;
	}
	.page .comment13 {
		background-image	: url(https://i.imgur.com/aO1BPAR.png);
		min-height				: 80px;
		max-height				: 150px;
		width							: 375px;
		padding						: 18px 18px 15px 30px;
	}
	.page .comment14 {
		background-image	: url(https://i.imgur.com/BTiffB9.png);
		min-height				: 90px;
		max-height				: 220px;
		width							: 380px;
		padding						: 12px 18px 15px 25px;
	}
	.page .comment15 {
		background-image	: url(https://i.imgur.com/0UJI6qY.png);
		min-height				: 80px;
		max-height				: 160px;
		width							: 400px;
		padding						: 18px 25px 20px 35px;
	}
	.page .comment16 {
		background-image	: url(https://i.imgur.com/6HN3nsg.png);
		min-height				: 150px;
		max-height				: 250px;
		width							: 350px;
		padding						: 15px 25px 15px 30px;
	}
	.page .comment17 {
		background-image	: url(https://i.imgur.com/FV6hjtP.png);
		width							: 315px;
		min-height				: 140px;
		max-height				: 250px;
		padding						: 20px 20px 20px 30px;
	}


.page [class*="comment"] p {
	color							: #693a4f;
	font-size					: 24px;
	line-height				: 22px;
	transform					: ScaleY(0.9);
}

.page [class*="comment"] p+p {
	padding-top	      : 6px;
	text-indent	      : 0px;
}

.page [class*="comment"].signature p:last-child {
	position		      : absolute;
	right				      : 35px;
	bottom			      : 15px;
	font-size		      : 24px;
	padding-top	      : 8px;
	text-align	      : right;
	font-weight	      : bold;
	transform		      : scaleY(1.2);
}

.page [class*="comment"] .symbol {
	visibility				: visible;
	position					: relative;
	top								: -13px;
	left							: 45%;
	width							: 26px;
	height						: 25px;
	margin-bottom			: -25px;
	background-image	: url(https://i.imgur.com/wfzlWmX.png);
	background-size		: contain;
	background-repeat	: no-repeat;
	transform					: inherit;
}

/* ARTIST CREDITS */
.page .artist {
  position          : absolute !important;
	bottom						: 100px;
	left							: 60px;
	transform					: rotate(-90deg);
	transform-origin	: bottom left;
  text-align        : left;
	font-family			  : ScalySansSmallCapsRemake;
	font-size				  : 13px;
  text-transform    : lowercase;
	color							: #999;
}
.page:nth-of-type(even):not(:has(.insideCover)) .artist {
	left						  : unset;
	right						  : 60px;
	transform					: rotate(90deg);
	transform-origin	: bottom right;
}

```

<!---
Here is a link to all my other Homebrewery templates, if you're interested:

https://homebrewery.naturalcrit.com/user/KaiburrKathHound?sort=alpha&dir=asc

Also, here's my Ko-fi page if you want to support what I do!
https://ko-fi.com/kaiburrkathhound
--->


{{chapter
# Chapter X
___
# Custom-Colored Highlights
}}

This document shows how you can change all the highlight colors of your brew by changing only a single of code. If you want your document to have pink, purple, white, black, or any color highlights, then all you have to do is change the name of the `--theme-color` value! You can highlight your brew with any color you'd like, and each of the elements will respond accordingly. 




To get started, just click {{nav SOURCE <i class='fas fa-code'></i>}} button to the top right of this page, and click {{nav CLONE TO NEW <i class='fas fa-clone'></i>}}. Once you have your new document pulled up, go to the Style Editor tab (which is the little black paintbrush above the white portion on the left side of the new screen). 

Once you are there, follow the directions in the Style Editor! Enjoy :)

___
{wide}


### Are Headers Affected?
No, Headers are not affected by any of this code. Only the drop cap (the big letter above), tables, notes, and watercolor stains are changed by this code. Luckily, Headers have much easier colors to change:

If you want to change the header color, add the following line of code somewhere to the Syle Editor:

```
.page { h1, h2, h3, h4 {
  color     : green; /* or change "green" to any color */ }
}

```

::

### What about the H3 Underline?
The yellow underline beneath the h3 header can be changed with the following code:

```
.page h3 {
  border-bottom : 2px solid blue; /* or change "blue" to any color */
}

```

::

### How do I get rid of the colors in the corner, it's on my image!
You can include the ".not" class anywhere on the page you want. The colors will disappear on that page only:


```
{{not}}

```

:

Make sure to iunclude that class in the BREW EDITOR, not the style editor

\column

### Table Example

##### Character Advancement
| Experience Points | Level | Proficiency Bonus |
|:------------------|:-----:|:-----------------:|
| 0                 | 1     | +2                |
| 300               | 2     | +2                |
| 900               | 3     | +2                |
| 2,700             | 4     | +2                |
| 6,500             | 5     | +3                |
| 14,000            | 6     | +3                |

### Note Example
:
{{note
##### Time to Drop Knowledge
Use notes to point out some interesting information.

**Tables and lists** both work within a note.
}}

{{watercolor11,top:20px,right:30px,width:300px,opacity:40%}}


<style>
/* THE FOLLOWING CODE IS UNNECESSARY FOR THE COLOR EFFECTS, feel free to delete it. */
.nav {
  font-family       : 'opensans';
  padding           : 2px 3px;
  margin            : -3px 2px;
  border-radius     : 3px;
  font-weight       : bold;
  background-color  : #444;
  color             : white;
}
</style>


{{pageNumber,auto}}
{{footnote CHAPTER X | SECTION NAME}}
\page

<!---
This page is an example of how to use the "not" class; which is just a way of excluding the theme color from appearing on the page (try deleting ",not" from the code below; you'll see the current theme color disrupting the tarrasque image).
--->

{{fullpage,not
![image](https://i.imgur.com/HuuFsV2.jpg)
}}


{{comment16,right:10px,bottom:50px,transform:rotate(-5deg),min-height:100px

"Tarrasque Rampage" <br> by [Craig Spearing](https://craigspearing.com/){color:inherit}, @Wizards of the Coast
{font-size:30px,line-height:0.9em,text-transform:uppercase}
}}



\page

{{decal1}}
{{comment4,right:-20px,top:305px,transform:rotate(2deg)
:
DECAL 1
{text-align:center,font-size:70px}
}}

{{decal2}}
{{comment9,right:20px,bottom:405px,transform:rotate(-8deg)
:
DECAL 2
{text-align:center,font-size:70px}
}}

{{decal3,left}}
{{comment2,left:10px,top:205px,transform:rotate(-2deg)
:
DECAL 3
{text-align:center,font-size:70px}
}}

{{decal4,left,top:600px}}
{{comment6,left:-60px,bottom:275px,transform:rotate(8deg)
:
DECAL 4
{text-align:center,font-size:70px}
}}


{{pageNumber,auto}}
{{footnote CHAPTER X | SECTION NAME}}