Improve colors of Prism theme.
This commit is contained in:
Leo
211
scss/vendors/_prismjs.scss
vendored
211
scss/vendors/_prismjs.scss
vendored
@@ -1,16 +1,16 @@
|
||||
/**
|
||||
* Prism Essence Theme, based on Material Theme.
|
||||
* Essence's Prism Theme, based on Material Theme, but brighter.
|
||||
*
|
||||
* Author: Leo Nguyen
|
||||
*/
|
||||
$prism-bg: hsl(220, 25%, 25%);
|
||||
$prism-gray: hsl(230, 40%, 70%);
|
||||
$prism-red: hsl(0, 100%, 80%);
|
||||
$prism-orange: hsl(15, 90%, 70%);
|
||||
$prism-yellow: hsl(50, 100%, 75%);
|
||||
$prism-green: hsl(100, 80%, 80%);
|
||||
$prism-cyan: hsl(200, 100%, 80%);
|
||||
$prism-blue: hsl(230, 100%, 80%);
|
||||
$prism-bg: hsl(220, 15%, 20%);
|
||||
$prism-gray: hsl(210, 30%, 65%);
|
||||
$prism-red: hsl(0, 100%, 80%);
|
||||
$prism-orange: hsl(25, 100%, 70%);
|
||||
$prism-yellow: hsl(50, 100%, 70%);
|
||||
$prism-green: hsl(100, 80%, 80%);
|
||||
$prism-cyan: hsl(190, 100%, 80%);
|
||||
$prism-blue: hsl(230, 100%, 80%);
|
||||
$prism-purple: hsl(275, 100%, 80%);
|
||||
|
||||
pre {
|
||||
@@ -18,14 +18,10 @@ pre {
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: $prism-bg;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
|
||||
@@ -36,100 +32,105 @@ pre {
|
||||
}
|
||||
}
|
||||
|
||||
/* Purple (keyword) */
|
||||
.token.keyword,
|
||||
.token.important,
|
||||
.token.builtin,
|
||||
.token.atrule {
|
||||
color: $prism-purple;
|
||||
}
|
||||
|
||||
/* Yellow (entity, class) */
|
||||
.token.entity,
|
||||
.token.class,
|
||||
.token.name,
|
||||
.token.class-name,
|
||||
.token.package,
|
||||
.token.scope,
|
||||
.token.attr-name {
|
||||
color: $prism-yellow;
|
||||
}
|
||||
|
||||
/* Blue (function) */
|
||||
.token.function-name,
|
||||
.token.function {
|
||||
color: $prism-blue;
|
||||
}
|
||||
|
||||
/* Red (tag) */
|
||||
.token.tag,
|
||||
.token.namespace,
|
||||
.token.selector,
|
||||
.token.deleted {
|
||||
color: $prism-red;
|
||||
}
|
||||
|
||||
/* Green (string, attribute) */
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.property,
|
||||
.token.attr-value,
|
||||
.token.regex {
|
||||
color: $prism-green;
|
||||
}
|
||||
|
||||
/* Orange (number, literal) */
|
||||
.token.number,
|
||||
.token.boolean,
|
||||
.token.constant {
|
||||
color: $prism-orange;
|
||||
}
|
||||
|
||||
/* Cyan (sign) */
|
||||
.token.symbol,
|
||||
.token.punctuation,
|
||||
.token.operator,
|
||||
.token.url,
|
||||
.token.unit,
|
||||
.token.hexcode,
|
||||
.token.doctype-tag {
|
||||
color: $prism-cyan;
|
||||
}
|
||||
|
||||
/* White (variable, CSS pseudo class) */
|
||||
.token.variable,
|
||||
.token.pseudo-class {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Gray (comment) */
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: $prism-gray;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > span {
|
||||
padding: 0.5em 1em;
|
||||
margin: 0.25em 0.5em;
|
||||
font-size: 0.9em;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.token {
|
||||
/* Red (constant, tag, selector) */
|
||||
&.constant,
|
||||
&.tag,
|
||||
&.selector,
|
||||
&.namespace,
|
||||
&.deleted {
|
||||
color: $prism-red;
|
||||
}
|
||||
|
||||
/* Orange/Red (number, boolean, constant) */
|
||||
&.number,
|
||||
&.boolean {
|
||||
color: $prism-orange;
|
||||
}
|
||||
|
||||
/* Yellow (entity, class) */
|
||||
&.entity,
|
||||
&.class,
|
||||
&.name,
|
||||
&.class-name,
|
||||
&.package,
|
||||
&.scope,
|
||||
&.attr-name {
|
||||
color: $prism-yellow;
|
||||
}
|
||||
|
||||
/* Green (string, attribute) */
|
||||
&.string,
|
||||
&.char,
|
||||
&.property,
|
||||
&.attr-value,
|
||||
&.regex {
|
||||
color: $prism-green;
|
||||
}
|
||||
|
||||
/* Cyan (symbol) */
|
||||
&.symbol,
|
||||
&.punctuation,
|
||||
&.operator,
|
||||
&.url,
|
||||
&.unit,
|
||||
&.hexcode,
|
||||
&.doctype-tag {
|
||||
color: $prism-cyan;
|
||||
}
|
||||
|
||||
/* Blue (function) */
|
||||
&.function-name,
|
||||
&.function {
|
||||
color: $prism-blue;
|
||||
}
|
||||
|
||||
/* Purple (keyword) */
|
||||
&.keyword,
|
||||
&.important,
|
||||
&.builtin,
|
||||
&.atrule {
|
||||
color: $prism-purple;
|
||||
}
|
||||
|
||||
/* White (variable, CSS pseudo class) */
|
||||
&.variable,
|
||||
&.pseudo-class {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Gray (comment) */
|
||||
&.comment,
|
||||
&.block-comment,
|
||||
&.prolog,
|
||||
&.doctype,
|
||||
&.cdata {
|
||||
color: $prism-gray;
|
||||
}
|
||||
|
||||
// &.important,
|
||||
&.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
&.inserted {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user