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>
<defs></defs>
<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)">
<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>

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

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

@ -78,7 +78,7 @@
.preview-console__clear {
@include themify() {
@extend %link;
color: getThemifyVariable('primary-text-color');
color: getThemifyVariable('inactive-text-color');
// &:hover {
// 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-light-green: #42F48F;
$p5-dark-black: #333;
$p5-dark-black: #1C1C1C;
$p5-dark-pink: #D9328F;
$p5-dark-gray: #999999;
$p5-dark-lightblue: #0F9DD7;