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

Update dark theme colors

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-22 18:31:04 -04:00
parent e8c3587b41
commit 3461c9619e
4 changed files with 41 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/images/triangle-arrow-down-white.svg
View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5"> <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#FFF">
<g id="libraries" transform="translate(21.000000, 32.000000)"> <g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon> <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 695 B

76
client/styles/abstracts/_variables.scss
View file

@ -53,17 +53,17 @@ $themes: (
button-background-hover-color: $p5js-pink, button-background-hover-color: $p5js-pink,
button-background-active-color: $p5js-active-pink, button-background-active-color: $p5js-active-pink,
button-nav-inactive-color: $middle-gray, button-nav-inactive-color: $middle-gray,
button-hover-color: $white, button-hover-color: $lightest,
button-active-color: $white, button-active-color: $lightest,
modal-background-color: $light, modal-background-color: $light,
preferences-button-background-color: $medium-light, preferences-button-background-color: $medium-light,
modal-border-color: $middle-light, modal-border-color: $middle-light,
icon-color: $middle-gray, icon-color: $middle-gray,
icon-hover-color: $darker, icon-hover-color: $darker,
icon-toast-hover-color: $white, icon-toast-hover-color: $lightest,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: $light, console-background-color: $light,
console-color: $white, console-color: $lightest,
console-header-background-color: $medium-light, console-header-background-color: $medium-light,
console-header-color: $darker, console-header-color: $darker,
console-info-background-color: $lightsteelblue, console-info-background-color: $lightsteelblue,
@ -92,11 +92,11 @@ $themes: (
primary-button-color: $lightest, primary-button-color: $lightest,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: $white, table-button-color: $lightest,
table-button-background-color: $middle-gray, table-button-background-color: $middle-gray,
table-button-active-color: $white, table-button-active-color: $lightest,
table-button-background-active-color: #00A1D3, table-button-background-active-color: #00A1D3,
table-button-hover-color: $white, table-button-hover-color: $lightest,
table-button-background-hover-color: $p5js-pink, table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: $middle-gray, progress-bar-background-color: $middle-gray,
@ -107,51 +107,51 @@ $themes: (
form-input-text-color: $dark, form-input-text-color: $dark,
form-input-placeholder-text-color: $middle-light, form-input-placeholder-text-color: $middle-light,
form-border-color: $middle-light, form-border-color: $middle-light,
form-button-background-color: $white, form-button-background-color: $lightest,
form-button-color: $p5js-active-pink, form-button-color: $p5js-active-pink,
form-button-background-hover-color: $p5js-pink, form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: $p5js-active-pink, form-button-background-active-color: $p5js-active-pink,
form-button-hover-color: $white, form-button-hover-color: $lightest,
form-button-active-color: $white, form-button-active-color: $lightest,
form-navigation-options-color: $middle-dark form-navigation-options-color: $middle-dark
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
heavy-text-color: $lightest, heavy-text-color: $lightest,
primary-text-color: $white, primary-text-color: $lightest,
dropzone-text-color: $black, dropzone-text-color: $black,
modal-button-color: $white, modal-button-color: $lightest,
heading-text-color: $white, heading-text-color: $lightest,
secondary-text-color: #DADADA, secondary-text-color: $medium-light,
inactive-text-color: #b5b5b5, inactive-text-color: $middle-light,
background-color: #333, background-color: $darker,
button-background-color: $white, button-background-color: $lightest,
button-color: $black, button-color: $darkest,
button-border-color: #979797, button-border-color: $middle-gray,
toolbar-button-color: $p5js-pink, toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #424242, toolbar-button-background-color: $medium-dark,
button-background-hover-color: $p5js-pink, button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046, button-background-active-color: $p5js-active-pink,
button-nav-inactive-color: #a0a0a0, button-nav-inactive-color: $middle-light,
button-hover-color: $white, button-hover-color: $lightest,
button-active-color: $white, button-active-color: $lightest,
modal-background-color: #444, modal-background-color: $dark,
preferences-button-background-color: #5f5f5f, preferences-button-background-color: $middle-dark,
modal-border-color: #949494, modal-border-color: $middle-dark,
icon-color: #a9a9a9, icon-color: $middle-light,
icon-hover-color: $white, icon-hover-color: $lightest,
icon-toast-hover-color: $white, icon-toast-hover-color: $lightest,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f, console-background-color: $dark,
console-color: $black, console-color: $lightest,
console-header-background-color: #3f3f3f, console-header-background-color: $medium-dark,
console-header-color: #b5b5b5, console-header-color: $lightest,
console-info-background-color: $lightsteelblue, console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange, console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue, console-debug-background-color: $dodgerblue,
console-error-background-color: $red, console-error-background-color: $red,
ide-border-color: #949494, ide-border-color: $middle-dark,
editor-gutter-color: #363636, editor-gutter-color: $darker,
file-hover-color: #404040, file-hover-color: #404040,
file-selected-color: #404040, file-selected-color: #404040,
input-text-color: #333, input-text-color: #333,
@ -173,13 +173,13 @@ $themes: (
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: $white, table-button-color: $white,
table-button-background-color: #979797, table-button-background-color: $middle-gray,
table-button-active-color: $white, table-button-active-color: $white,
table-button-background-active-color: #00A1D3, table-button-background-active-color: #00A1D3,
table-button-hover-color: $white, table-button-hover-color: $white,
table-button-background-hover-color: $p5js-pink, table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: #979797, progress-bar-background-color: $middle-gray,
progress-bar-active-color: #f10046, progress-bar-active-color: #f10046,
form-title-color: $white, form-title-color: $white,

2
client/styles/components/_console.scss
View file

@ -78,7 +78,7 @@
.preview-console__clear { .preview-console__clear {
@include themify() { @include themify() {
@extend %link; @extend %link;
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('inactive-text-color');
// &:hover { // &:hover {
// color: getThemifyVariable('console-header-color'); // color: getThemifyVariable('console-header-color');
// } // }

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

@ -12,7 +12,7 @@
$p5-dark-lightbrown: #A67F59; $p5-dark-lightbrown: #A67F59;
$p5-light-green: #42F48F; $p5-light-green: #42F48F;
$p5-dark-black: #333; $p5-dark-black: #1C1C1C;
$p5-dark-pink: #D9328F; $p5-dark-pink: #D9328F;
$p5-dark-gray: #999999; $p5-dark-gray: #999999;
$p5-dark-lightblue: #0F9DD7; $p5-dark-lightblue: #0F9DD7;