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

Merge pull request #1342 from Eswaraprasadp/modify/dark-theme

Browse source 
Modify dark theme
This commit is contained in:
Cassie Tarakajian 2020-04-01 13:24:05 -04:00 committed by GitHub
commit 2744ea4334
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,75 +14,77 @@ $p5-dark-lightbrown: #A67F59;
$p5-light-green: #42F48F; $p5-light-green: #42F48F;
$p5-dark-black: #333; $p5-dark-black: #333;
$p5-dark-pink: #D9328F; $p5-dark-pink: #D9328F;
$p5-dark-gray: #A0A0A0; $p5-dark-gray: #999999;
$p5-dark-lightblue: #00A1D3; $p5-dark-lightblue: #0F9DD7;
$p5-dark-darkblue: #2D7BB6; $p5-dark-darkblue: #318094;
$p5-dark-white: #FDFDFD; $p5-dark-white: #FDFDFD;
$p5-dark-orange: #EE9900; $p5-dark-orange: #EE9900;
$p5-dark-lightgray: #E0D7D1; $p5-dark-lightgray: #E0D7D1;
$p5-dark-darkgray: #666666; $p5-dark-darkgray: #666666;
$p5-dark-green: #58a10b; $p5-dark-green: #58a10b;
$p5-dark-goldbrown: #b58317; $p5-dark-goldbrown: #b58318;
$p5-dark-gutter: #f4f4f4; $p5-dark-gutter: #f4f4f4;
$p5-dark-number: #b5b5b5; $p5-dark-number: #b5b5b5;
$p5-dark-selected: rgba(45, 123, 182, 25); $p5-dark-selected: rgba(45, 123, 182, 25);
$p5-dark-activeline: rgb(207, 207, 207); $p5-dark-activeline: rgb(207, 207, 207);
$p5-dark-error: #df3a3d;
.cm-s-p5-dark { .cm-s-p5-dark {
background-color: $p5-dark-black; background-color: $p5-dark-black;
color: $p5-dark-white; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-comment { .cm-s-p5-dark span.cm-comment {
color: $p5-dark-gray; color: $p5-dark-gray;
} }
.cm-s-p5-dark .cm-def { .cm-s-p5-dark span.cm-def {
color: $p5-dark-darkblue;
}
.cm-s-p5-dark .cm-string {
color: $p5-dark-green;
}
.cm-s-p5-dark .cm-string-2 {
color: $p5-dark-orange;
}
.cm-s-p5-dark .cm-number {
color: $p5-dark-white;
}
.cm-s-p5-dark .cm-keyword {
color: $p5-dark-goldbrown;
}
.cm-s-p5-dark .cm-variable {
color: $p5-dark-lightblue; color: $p5-dark-lightblue;
} }
.cm-s-p5-dark .cm-variable-2 { .cm-s-p5-dark span.cm-string {
color: $p5-dark-green;
}
.cm-s-p5-dark span.cm-string-2 {
color: $p5-dark-orange;
}
.cm-s-p5-dark span.cm-number {
color: $p5-dark-white; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-property { .cm-s-p5-dark span.cm-keyword {
color: $p5-dark-goldbrown;
}
.cm-s-p5-dark span.cm-variable {
color: $p5-dark-lightblue;
}
.cm-s-p5-dark span.cm-variable-2 {
color: $p5-dark-white; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-atom { .cm-s-p5-dark span.cm-property {
color: $p5-dark-white;
}
.cm-s-p5-dark span.cm-atom {
color: $p5-dark-pink; color: $p5-dark-pink;
} }
.cm-s-p5-dark .cm-operator { .cm-s-p5-dark span.cm-operator {
color: $p5-dark-lightbrown; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-linenumber { .cm-s-p5-dark .cm-linenumber {
color: $p5-dark-number; color: $p5-dark-number;
} }
.cm-s-p5-dark .CodeMirror-selected { .cm-s-p5-dark div.CodeMirror-selected {
background-color: $p5-dark-selected; background-color: $p5-dark-selected;
} }
@ -95,34 +97,36 @@ $p5-dark-activeline: rgb(207, 207, 207);
border-right: 1px solid #949494; border-right: 1px solid #949494;
} }
.cm-s-p5-dark .cm-error { .cm-s-p5-dark span.CodeMirror-matchingbracket {
color: #f00;
}
.cm-s-p5-dark .CodeMirror-matchingbracket {
outline: 1px solid $p5-dark-gray; outline: 1px solid $p5-dark-gray;
outline-offset: 1px; outline-offset: 1px;
color: $p5-dark-white !important; color: $p5-dark-white !important;
} }
.cm-s-p5-dark .cm-qualifier { .cm-s-p5-dark span.cm-qualifier {
color: $p5-dark-lightblue; color: $p5-dark-lightblue;
} }
.cm-s-p5-dark .cm-tag { .cm-s-p5-dark span.cm-tag {
color: $p5-dark-pink; color: $p5-dark-pink;
} }
.cm-s-p5-dark .cm-builtin { .cm-s-p5-dark span.cm-error {
color: $p5-dark-lightblue; color: $p5-dark-error;
} }
.cm-s-p5-dark .cm-attribute { .cm-s-p5-dark span.cm-builtin {
color: $p5-dark-lightblue;
font-weight: bold;
}
.cm-s-p5-dark span.cm-attribute {
color: $p5-dark-lightblue; color: $p5-dark-lightblue;
} }
.cm-s-p5-dark .cm-p5-function { .cm-s-p5-dark .cm-p5-function {
color: $p5-dark-darkblue; color: $p5-dark-lightblue;
font-weight: bold !important;
} }
.cm-s-p5-dark .cm-p5-variable { .cm-s-p5-dark .cm-p5-variable {