r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Mildly adjust colors in light and dark code editing themes

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-27 19:01:15 -04:00
parent 677148e538
commit 3b62c3b3a7
2 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/styles/components/_p5-dark-codemirror-theme.scss
View file

@ -14,7 +14,7 @@ $p5-dark-lightbrown: #A67F59;
$p5-light-green: #42F48F; $p5-light-green: #42F48F;
$p5-dark-black: #1C1C1C; $p5-dark-black: #1C1C1C;
$p5-dark-pink: #DE4A9B; $p5-dark-pink: #DE4A9B;
$p5-dark-gray: #999999; $p5-dark-gray: #9B9B9B;
$p5-dark-lightblue: #0F9DD7; $p5-dark-lightblue: #0F9DD7;
$p5-dark-darkblue: #318094; $p5-dark-darkblue: #318094;
$p5-dark-white: #FDFDFD; $p5-dark-white: #FDFDFD;

32
client/styles/components/_p5-light-codemirror-theme.scss
View file

@ -10,18 +10,16 @@
//light gray: #f4f4f4 //light gray: #f4f4f4
//dark gray: #b5b5b5 //dark gray: #b5b5b5
$p5-light-lightbrown: #7a5a3a; $p5-light-brown: #7A5A3A;
$p5-light-brown: #704F21;
$p5-light-black: #333333; $p5-light-black: #333333;
$p5-light-pink: #CA445F; $p5-light-pink: #D52889;
$p5-light-gray: #666; $p5-light-gray: #666;
$p5-light-lightblue: #007bbb; $p5-light-blue: #0B7CA9;
$p5-light-darkblue: #306bb4; $p5-light-white: $lighter;
$p5-light-white: #FDFDFD; $p5-light-orange: #A06801;
$p5-light-orange: #9E6700; $p5-light-lightgray: $middle-gray;
$p5-light-lightgray: #E0D7D1; $p5-light-green: #47820A;
$p5-light-darkgray: #666666;
$p5-light-green: #008007;
$p5-light-gutter: #f4f4f4; $p5-light-gutter: #f4f4f4;
$p5-light-number: #b5b5b5; $p5-light-number: #b5b5b5;
@ -34,11 +32,11 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light span .cm-comment { .cm-s-p5-light span .cm-comment {
color: $p5-light-gray; color: $p5-light-lightgray;
} }
.cm-s-p5-light span .cm-def { .cm-s-p5-light span .cm-def {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light span .cm-string { .cm-s-p5-light span .cm-string {
@ -58,7 +56,7 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light span .cm-variable { .cm-s-p5-light span .cm-variable {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light span .cm-variable2 { .cm-s-p5-light span .cm-variable2 {
@ -74,7 +72,7 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light span .cm-operator { .cm-s-p5-light span .cm-operator {
color: $p5-light-lightbrown; color: $p5-light-brown;
} }
.cm-s-p5-light .cm-linenumber { .cm-s-p5-light .cm-linenumber {
@ -105,7 +103,7 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light span .cm-qualifier { .cm-s-p5-light span .cm-qualifier {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light span .cm-tag { .cm-s-p5-light span .cm-tag {
@ -113,7 +111,7 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light span .cm-builtin { .cm-s-p5-light span .cm-builtin {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light span .cm-attribute { .cm-s-p5-light span .cm-attribute {
@ -121,7 +119,7 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light .cm-p5-function { .cm-s-p5-light .cm-p5-function {
color: $p5-light-darkblue; color: $p5-light-blue;
font-weight: bold; font-weight: bold;
} }