Discord highlight.js theme

discord highlight.js theme.css

:root {
	--saturation-factor: 1; /* this varies depending on the user’s settings */
	--primary-dark-200: hsl(210, calc(var(--saturation-factor, 1) * 2.9%), 86.7%);
	--primary-dark-500: hsl(217, calc(var(--saturation-factor, 1) * 7.6%), 33.5%);
	--primary-dark-630: hsl(223, calc(var(--saturation-factor, 1) * 6.9%), 19.8%);
	--primary-light-130: hsl(220, calc(var(--saturation-factor, 1) * 13%), 95.5%);
	--primary-light-300: hsl(210, calc(var(--saturation-factor, 1) * 9.8%), 80%);
	--primary-light-700: hsl(210, calc(var(--saturation-factor, 1) * 9.8%), 20%);
	--primary-light-900: hsl(240, calc(var(--saturation-factor, 1) * 7.7%), 2.5%);
	--white-500: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
}

.theme-dark {
	--background-secondary: var(--primary-dark-630);
	--interactive-active: var(--white-500);
	--interactive-muted: var(--primary-dark-500);
	--text-normal: var(--primary-dark-200);
}

.theme-light {
	--background-secondary: var(--primary-light-130);
	--interactive-active: var(--primary-light-900);
	--interactive-muted: var(--primary-light-300);
	--text-normal: var(--primary-light-700);
}

pre {
	background: var(--background-secondary);
	margin-top: 6px;
}

code {
	font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console,
		Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono,
		Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
	font-size: 0.875rem;
	line-height: 1.125rem;
	margin: 0;
	text-indent: 0;
	white-space: pre-wrap;
}

.hljs-ansi-control-sequence {
	display: none;
}

.hljs-ansi-style-bold {
	font-weight: 700;
}

.hljs-ansi-style-underline {
	text-decoration: underline;
}

.hljs-ansi-foreground-black {
	color: var(--interactive-muted);
}

.hljs-ansi-foreground-black .hljs-ansi-background-black,
.hljs-ansi-foreground-black .hljs-ansi-background-blue,
.hljs-ansi-foreground-black .hljs-ansi-background-cyan,
.hljs-ansi-foreground-black .hljs-ansi-background-green,
.hljs-ansi-foreground-black .hljs-ansi-background-magenta,
.hljs-ansi-foreground-black .hljs-ansi-background-red,
.hljs-ansi-foreground-black .hljs-ansi-background-white,
.hljs-ansi-foreground-black .hljs-ansi-background-yellow {
	color: #073642;
}

.hljs-ansi-foreground-red {
	color: #dc322f;
}

.hljs-ansi-foreground-green {
	color: #859900;
}

.hljs-ansi-foreground-yellow {
	color: #b58900;
}

.hljs-ansi-foreground-blue {
	color: #268bd2;
}

.hljs-ansi-foreground-magenta {
	color: #d33682;
}

.hljs-ansi-foreground-cyan {
	color: #2aa198;
}

.hljs-ansi-foreground-white {
	color: var(--interactive-active);
}

.hljs-ansi-foreground-white .hljs-ansi-background-black,
.hljs-ansi-foreground-white .hljs-ansi-background-blue,
.hljs-ansi-foreground-white .hljs-ansi-background-cyan,
.hljs-ansi-foreground-white .hljs-ansi-background-green,
.hljs-ansi-foreground-white .hljs-ansi-background-magenta,
.hljs-ansi-foreground-white .hljs-ansi-background-red,
.hljs-ansi-foreground-white .hljs-ansi-background-white,
.hljs-ansi-foreground-white .hljs-ansi-background-yellow {
	color: #eee8d5;
}

.hljs-ansi-background-black {
	background-color: #002b36;
}

.hljs-ansi-background-red {
	background-color: #cb4b16;
}

.hljs-ansi-background-green {
	background-color: #586e75;
}

.hljs-ansi-background-yellow {
	background-color: #657b83;
}

.hljs-ansi-background-blue {
	background-color: #839496;
}

.hljs-ansi-background-magenta {
	background-color: #6c71c4;
}

.hljs-ansi-background-cyan {
	background-color: #93a1a1;
}

.hljs-ansi-background-white {
	background-color: #fdf6e3;
}

.hljs {
	display: block;
	overflow-x: auto;
	padding: 0.5em;
	border-radius: 4px;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	color: var(--text-normal);
	background: var(--background-secondary);
}

.theme-dark .hljs-doctag,
.theme-dark .hljs-keyword,
.theme-dark .hljs-meta .hljs-keyword,
.theme-dark .hljs-template-tag,
.theme-dark .hljs-template-variable,
.theme-dark .hljs-type,
.theme-dark .hljs-variable.language_ {
	color: #ff7b72;
}

.theme-dark .hljs-title,
.theme-dark .hljs-title.class_,
.theme-dark .hljs-title.class_.inherited__,
.theme-dark .hljs-title.function_ {
	color: #d2a8ff;
}

.theme-dark .hljs-attr,
.theme-dark .hljs-attribute,
.theme-dark .hljs-literal,
.theme-dark .hljs-meta,
.theme-dark .hljs-number,
.theme-dark .hljs-operator,
.theme-dark .hljs-selector-attr,
.theme-dark .hljs-selector-class,
.theme-dark .hljs-selector-id,
.theme-dark .hljs-variable {
	color: #79c0ff;
}

.theme-dark .hljs-meta .hljs-string,
.theme-dark .hljs-regexp,
.theme-dark .hljs-string {
	color: #a5d6ff;
}

.theme-dark .hljs-built_in,
.theme-dark .hljs-symbol {
	color: #ffa657;
}

.theme-dark .hljs-code,
.theme-dark .hljs-comment,
.theme-dark .hljs-formula {
	color: #8b949e;
}

.theme-dark .hljs-name,
.theme-dark .hljs-quote,
.theme-dark .hljs-selector-pseudo,
.theme-dark .hljs-selector-tag {
	color: #7ee787;
}

.theme-dark .hljs-subst {
	color: #c9d1d9;
}

.theme-dark .hljs-section {
	color: #1f6feb;
	font-weight: 700;
}

.theme-dark .hljs-bullet {
	color: #f2cc60;
}

.theme-dark .hljs-emphasis {
	color: #c9d1d9;
	font-style: italic;
}

.theme-dark .hljs-strong {
	color: #c9d1d9;
	font-weight: 700;
}

.theme-dark .hljs-addition {
	color: #aff5b4;
	background-color: #033a16;
}

.theme-dark .hljs-deletion {
	color: #ffdcd7;
	background-color: #67060c;
}

.theme-light .hljs-doctag,
.theme-light .hljs-keyword,
.theme-light .hljs-meta .hljs-keyword,
.theme-light .hljs-template-tag,
.theme-light .hljs-template-variable,
.theme-light .hljs-type,
.theme-light .hljs-variable.language_ {
	color: #d73a49;
}

.theme-light .hljs-title,
.theme-light .hljs-title.class_,
.theme-light .hljs-title.class_.inherited__,
.theme-light .hljs-title.function_ {
	color: #6f42c1;
}

.theme-light .hljs-attr,
.theme-light .hljs-attribute,
.theme-light .hljs-literal,
.theme-light .hljs-meta,
.theme-light .hljs-number,
.theme-light .hljs-operator,
.theme-light .hljs-selector-attr,
.theme-light .hljs-selector-class,
.theme-light .hljs-selector-id,
.theme-light .hljs-variable {
	color: #005cc5;
}

.theme-light .hljs-meta .hljs-string,
.theme-light .hljs-regexp,
.theme-light .hljs-string {
	color: #032f62;
}

.theme-light .hljs-built_in,
.theme-light .hljs-symbol {
	color: #e36209;
}

.theme-light .hljs-code,
.theme-light .hljs-comment,
.theme-light .hljs-formula {
	color: #6a737d;
}

.theme-light .hljs-name,
.theme-light .hljs-quote,
.theme-light .hljs-selector-pseudo,
.theme-light .hljs-selector-tag {
	color: #22863a;
}

.theme-light .hljs-subst {
	color: #24292e;
}

.theme-light .hljs-section {
	color: #005cc5;
	font-weight: 700;
}

.theme-light .hljs-bullet {
	color: #735c0f;
}

.theme-light .hljs-emphasis {
	color: #24292e;
	font-style: italic;
}

.theme-light .hljs-strong {
	color: #24292e;
	font-weight: 700;
}

.theme-light .hljs-addition {
	color: #22863a;
	background-color: #f0fff4;
}

.theme-light .hljs-deletion {
	color: #b31d28;
	background-color: #ffeef0;
}

Discord just updated their ui and completely changed their highlighterjs theme.

Yes, I am aware of this. I’ll update this gist and https://github.com/cherryblossom000/discord-syntax-highlighting soon when I get the time.

@BossDaily I've updated https://discord-syntax-highlighting.vercel.app. I won't be maintaining this gist anymore, just look at CSS in https://github.com/cherryblossom000/discord-syntax-highlighting/tree/main/src