Skip to content

Instantly share code, notes, and snippets.

@cherryblossom000
Last active August 20, 2023 10:16
Show Gist options
  • Save cherryblossom000/6c59a9a2436eaddbe4f388e3ae145e4a to your computer and use it in GitHub Desktop.
Save cherryblossom000/6c59a9a2436eaddbe4f388e3ae145e4a to your computer and use it in GitHub Desktop.
Discord highlight.js theme
: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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment