diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index b0baf885..d44fd05d 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -190,6 +190,17 @@ class Preferences extends React.Component {
checked={this.props.theme === 'dark'}
/>
+ this.props.setTheme('contrast')}
+ aria-label="contrast theme on"
+ name="contrast theme"
+ id="contrast-theme-on"
+ className="preference__radio-button"
+ value="contrast"
+ checked={this.props.theme === 'contrast'}
+ />
+
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 4b4a66fb..c4c4c45a 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -81,7 +81,7 @@
margin-bottom: #{28 / $base-font-size}rem;
line-height: #{50 / $base-font-size}rem;
& g {
- fill: getThemifyVariable('primary-text-color');
+ fill: getThemifyVariable('modal-button-color');
}
&:hover {
background-color: getThemifyVariable('button-background-hover-color');
@@ -104,9 +104,10 @@
font-size: #{12 / $base-font-size}rem;
cursor: pointer;
text-align: left;
- margin-bottom: #{5 / $base-font-size}rem;
- border: 0;
padding: 0;
+ margin-bottom: #{5 / $base-font-size}rem;
+ padding-right: #{5 / $base-font-size}rem;
+ border: 0;
list-style-type: none;
}
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 0780f845..8bbe4ebc 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -4,10 +4,13 @@ $base-font-size: 16;
$p5js-pink: #ed225d;
$white: #fff;
$black: #000;
+$yellow: #F5DC23;
$themes: (
light: (
primary-text-color: #333,
+ modal-button-color: #333,
+ heading-text-color: #333,
secondary-text-color: #6b6b6b,
inactive-text-color: #b5b5b5,
background-color: #fbfbfb,
@@ -37,6 +40,8 @@ $themes: (
),
dark: (
primary-text-color: $white,
+ modal-button-color: $white,
+ heading-text-color: $white,
secondary-text-color: #c2c2c2,
inactive-text-color: #7d7d7d,
background-color: #333,
@@ -63,6 +68,37 @@ $themes: (
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #979797,
+ ),
+ contrast: (
+ primary-text-color: $yellow,
+ modal-button-color: #333,
+ heading-text-color: #e1e1e1,
+ secondary-text-color: #e1e1e1,
+ inactive-text-color: #c1c1c1,
+ background-color: #333,
+ button-background-color: $white,
+ button-color: $black,
+ button-border-color: #979797,
+ toolbar-button-color: #333333,
+ toolbar-button-background-color: #C1C1C1,
+ button-background-hover-color: $yellow,
+ button-background-active-color: #f10046,
+ button-hover-color: #333333,
+ button-active-color: #333333,
+ modal-background-color: #444,
+ modal-button-background-color: #C1C1C1,
+ modal-border-color: #949494,
+ icon-color: #a9a9a9,
+ icon-hover-color: $yellow,
+ shadow-color: rgba(0, 0, 0, 0.16),
+ console-background-color: #4f4f4f,
+ console-header-background-color: #3f3f3f,
+ console-header-color: #b5b5b5,
+ ide-border-color: #949494,
+ editor-gutter-color: #454545,
+ file-selected-color: #404040,
+ input-text-color: #333,
+ input-border-color: #979797,
)
);
@@ -71,4 +107,3 @@ $console-error-color: #ff5f52;
$toast-background-color: #979797;
$toast-text-color: $white;
-
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
new file mode 100644
index 00000000..5f60a4fb
--- /dev/null
+++ b/client/styles/components/_p5-contrast-codemirror-theme.scss
@@ -0,0 +1,118 @@
+// brown: #6C4D13
+// black: #333
+// blue: #0F9DD7
+// pink: #D9328F
+// gray: #999999
+// dark blue: #318094
+// white: #fdfdfd
+
+//numbers
+//light gray: #f4f4f4
+//dark gray: #b5b5b5
+
+$p5-contrast-black: #333;
+$p5-contrast-gray: #A0A0A0;
+$p5-contrast-white: #FDFDFD;
+$p5-contrast-darkgray: #333333;
+$p5-contrast-lightgray: #C1C1C1;
+$p5-contrast-blue: #00FFFF;
+$p5-contrast-green: #2DE9B6;
+$p5-contrast-yellow: #F5DC23;
+$p5-contrast-orange: #FFA95D;
+$p5-contrast-pink: #FFA9D9;
+
+$p5-contrast-gutter: #454545;
+$p5-contrast-number: #FDFDFD;
+$p5-contrast-selected: rgba(45, 123, 182, 25);
+$p5-contrast-activeline: #999999;
+
+.cm-s-p5-contrast {
+ background-color: $p5-contrast-black;
+ color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-comment {
+ color: $p5-contrast-lightgray;
+}
+
+.cm-s-p5-contrast .cm-def {
+ color: $p5-contrast-blue;
+}
+
+.cm-s-p5-contrast .cm-string {
+ color: $p5-contrast-green;
+}
+
+.cm-s-p5-contrast .cm-string-2 {
+ color: $p5-contrast-green;
+}
+
+.cm-s-p5-contrast .cm-number {
+ color: $p5-contrast-pink;
+}
+
+.cm-s-p5-contrast .cm-keyword {
+ color: $p5-contrast-yellow;
+}
+
+.cm-s-p5-contrast .cm-variable {
+ color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-variable-2 {
+ color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-property {
+ color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-atom {
+ color: $p5-contrast-pink;
+}
+
+.cm-s-p5-contrast .cm-operator {
+ color: $p5-contrast-lightgray;
+}
+
+.cm-s-p5-contrast .cm-linenumber {
+ color: $p5-contrast-number;
+}
+
+.cm-s-p5-contrast .CodeMirror-selected {
+ background-color: $p5-contrast-selected;
+}
+
+.cm-s-p5-contrast .CodeMirror-activeline-background {
+ background-color: #404040;
+}
+
+.cm-s-p5-contrast .CodeMirror-activeline-gutter {
+ background-color: #454545;
+ border-right: 1px solid #949494;
+}
+
+.cm-s-p5-contrast .cm-error {
+ color: #f00;
+}
+
+.cm-s-p5-contrast .CodeMirror-matchingbracket {
+ outline: 1px solid $p5-contrast-darkgray;
+ color: black !important;
+}
+
+.cm-s-p5-contrast .cm-qualifier {
+ color: $p5-contrast-yellow;
+}
+
+.cm-s-p5-contrast .cm-tag {
+ color: $p5-contrast-orange;
+}
+
+.cm-s-p5-contrast .cm-builtin {
+ color: $p5-contrast-yellow;
+}
+
+.cm-s-p5-contrast .cm-attribute {
+ color: $p5-contrast-white;
+}
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 408fd2fb..55c6ee6a 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -32,6 +32,9 @@
flex-direction: row;
justify-content: space-between;
margin-bottom: #{20 / $base-font-size}rem;
+ @include themify() {
+ color: getThemifyVariable('heading-text-color');
+ }
}
.preference {
@@ -48,6 +51,9 @@
.preference__title {
width: 100%;
margin-bottom: #{10 / $base-font-size}rem;
+ @include themify() {
+ color: getThemifyVariable('heading-text-color');
+ }
}
.preference__subtitle {
@@ -75,9 +81,9 @@
.preference__label {
@include themify() {
- color: getThemifyColor('inactive-text-color');
+ color: getThemifyVariable('inactive-text-color');
&:hover {
- color: getThemifyColor('inactive-text-color');
+ color: getThemifyVariable('primary-text-color');
}
}
margin: 0;
@@ -99,6 +105,7 @@
.preference__option {
@include themify() {
@extend %preference-option;
+ padding-right: #{20 / $base-font-size}rem;
}
}
@@ -111,12 +118,10 @@
.preference__options {
display: flex;
- justify-content: space-between;
- width: #{70 / $base-font-size}rem;
}
.preference__radio-button:checked + .preference__option {
- @include themify() {
+ @include themify() {
//for some reason this won't work for getThemifyVariable
color: map-get($theme-map, 'primary-text-color');
}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 5b41b334..e10c2b62 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -13,6 +13,7 @@
@import 'components/p5-light-codemirror-theme';
@import 'components/p5-dark-codemirror-theme';
+@import 'components/p5-contrast-codemirror-theme';
@import 'components/editor';
@import 'components/nav';
@import 'components/toolbar';