Current Prism Syntax Highlighter Theme

In a previous post I covered how I added Prism syntax highlighter to this blog to style the posted code blocks. It really makes a world of difference in the readability of code within the posts on here, so I decided to design my own Prism theme. Since cyan is my default accent color, I started there. The cyan-based hues I used are at 160, 180, 200 degrees, and the magenta is at 300 degrees, with varying levels of lightness to balance their overall visual contrast. Cyan and magenta are subtractive primary colors, so I named the theme “subtractive” and I think it has a fun 80’s neon/synthwave vibe. The theme is live on the blog now, and the CSS is posted below. I’ll update this post over time, as the theme will most likely evolve.

/* subtractive - a theme for PrismJS */
:root {
	--block-color: #252525;
}
code[class*="language-"],
pre[class*="language-"] {
	color: #e7e7e7;
	background: none;
	font-family: Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: 0.937rem;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
/* code blocks */
pre[class*="language-"] {
	padding: 1rem;
	overflow: auto;
	border-radius: 0;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: var(--block-color);
}
/* inline code */
:not(pre) > code[class*="language-"] {
	border-radius: 0.25rem;
	padding: 1px 4px;
	white-space: normal;
}
/* minified code blocks */
pre.minified code {
	word-wrap: break-word;
	word-break: break-all;
	white-space: pre-wrap;
}
/* scrollbars */
pre::-webkit-scrollbar {
	height: 0.66rem;
	width: 0.66rem;
}
pre::-webkit-scrollbar-thumb {
	background-color: #595959;
}
pre::-webkit-scrollbar-track {
	background-color: #404040;
}
/* tokens */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #6f6f6f;
}
.token.punctuation {
	color: #ebeba2;
}
.namespace {
	opacity: 0.7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #66ccff;
}
.token.boolean,
.token.number {
	color: #66ccff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #00f7f7;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #66ccff;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #2effb9;
}
.token.keyword {
	color: #ff89ff;
}
.token.regex,
.token.important {
	color: #ff89ff;
	font-weight: 400;
}
.token.italic {
	font-style: italic;
}
.token.entity {
	cursor: help;
}
.prism-titlename {
	float: right;
	margin: -0.85rem -0.75rem;
	font-size: 0.66rem;
	text-transform: uppercase;
	color: #7f7f7f;
}

Note that (in the theme above) a lot of the token classes are grouped to single colors, so the color pallet could be easily expanded if needed.