0.1.45

docs/tutorials/line-following.md

@@ -1,6 +1,6 @@
 # Line Following
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Make a program to follow a line using the Color sensor and reflected light. Let's test reflected light to see if it's white or black (on the line), and drive our robot accordingly. 
 

docs/tutorials/make-an-animation.md

@@ -1,6 +1,6 @@
 # Make a custom animation
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Create a custom animation for your @boardname@.
  

docs/tutorials/music-brick.md

@@ -1,6 +1,6 @@
 # Music Brick
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Transform your @boardname@ into a musical instrument!
 

docs/tutorials/object-near.md

@@ -1,6 +1,6 @@
 # Object Near?
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 The digital Ultrasonic Sensor generates sound waves and reads their echoes to detect and measure distance from objects in centimeters. Build a program that will detect when an object is nearby.
 

docs/tutorials/redlight-greenlight.md

@@ -1,6 +1,6 @@
 # Red Light, Green Light
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the ``||sensors:pause color sensor||`` block to play Red Light, Green Light with your @boardname@ robot! 
 

docs/tutorials/run-motors.md

@@ -1,6 +1,6 @@
 # Run motors
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the buttons to start and stop the large and medium motors.
  
@@ -66,8 +66,7 @@ brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
 
 ## Step 5
 
-Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. 
+Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.
-Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.
 
 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@@ -105,9 +104,11 @@ brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
 
 ## Step 7
 
-For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select ``medium motor D``. 
+For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select a ``medium motor`` on port ``D``. 
- 
+
-![Select motor on a port dropdown](/static/tutorials/run-motors/run-motor-dropdown.png)
+| | | |
+|-|-|-|
+| ![Select a motor type dropdown](/static/tutorials/run-motors/run-motor-dropdown.png) | | | ![Select a motor port dropdown](/static/tutorials/run-motors/motor-port-dropdown.png) |
 
 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@@ -203,7 +204,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
 
-# Step 12
+## Step 12
 
 Open the ``||motors:Motors||`` Toolbox drawer. Drag out a ``||motors:stop all motors||`` block onto the Workspace, and drop into the ``||brick:on button||`` enter block.
 

docs/tutorials/security-alert.md

@@ -1,6 +1,6 @@
 # Security Alert
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 The Infrared Sensor uses infrared light waves to detect proximity to the robot. Build an security alert using the infrared sensor. 
  

docs/tutorials/touch-sensor-values.md

@@ -1,6 +1,6 @@
 # Using Touch Sensor Values
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the Touch sensor value to stop a running motor.
 

docs/tutorials/touch-to-run.md

@@ -1,6 +1,6 @@
 # Touch to Run
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the Touch sensor to run a motor.
 

docs/tutorials/wake-up.md

@@ -1,6 +1,6 @@
 # Wake Up!
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Show different moods on your @boardname@.
 

docs/tutorials/what-animal-am-i.md

@@ -1,6 +1,6 @@
 # What Animal Am I?
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Create different animal effects with your @boardname@.
 

docs/tutorials/what-color.md

@@ -1,6 +1,6 @@
 # What Color is it?
 
-## Introduction @fullscreen
+## Introduction @unplugged
 
 Use the Color sensor to detect different colors.
 
@@ -111,7 +111,7 @@ brick.showString("What color?", 1)
 
 ## Step 8
 
-In the ``||music::play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 
+In the ``||music:play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 
 
 ```blocks
 sensors.color3.onColorDetected(ColorSensorColor.Red, function () {

package-lock.json

@@ -1,25 +1,25 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.41",
+  "version": "0.1.45",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@types/bluebird": {
       "version": "2.0.33",
       "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-2.0.33.tgz",
-      "integrity": "sha512-iq7ss0qO31YCYeLEPrBoVMDLw1dBotOS7394a+Dj2CSvQNjQfJvryVo9es5ghvQZmIqO7Q0tlCe9YpwTZKOoXg==",
+      "integrity": "sha1-J3wmM9z1qAgDvXGHEMK4VyWWYoU=",
       "dev": true
     },
     "@types/marked": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.3.0.tgz",
-      "integrity": "sha512-CSf9YWJdX1DkTNu9zcNtdCcn6hkRtB5ILjbhRId4ZOQqx30fXmdecuaXhugQL6eyrhuXtaHJ7PHI+Vm7k9ZJjg==",
+      "integrity": "sha1-WDwiPdMzhaHdoBqvd7DNBBHEtSQ=",
       "dev": true
     },
     "@types/node": {
       "version": "8.0.53",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.53.tgz",
-      "integrity": "sha512-54Dm6NwYeiSQmRB1BLXKr5GELi0wFapR1npi8bnZhEcu84d/yQKqnwwXQ56hZ0RUbTG6L5nqDZaN3dgByQXQRQ==",
+      "integrity": "sha1-OWs1r4JvpmqtRyyMt7jV4nf05tg=",
       "dev": true
     },
     "JSONStream": {
@@ -34,7 +34,7 @@
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "integrity": "sha1-+PLIh60Qv2f2NPAFtph/7TF5qsg=",
       "dev": true
     },
     "acorn": {
@@ -361,7 +361,7 @@
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+      "integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo="
     },
     "are-we-there-yet": {
       "version": "1.1.4",
@@ -499,7 +499,7 @@
     "base64-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz",
-      "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw=="
+      "integrity": "sha1-qRlH2h9KUW6jjltOwOw3c2deCIY="
     },
     "bcrypt-pbkdf": {
       "version": "1.0.1",
@@ -763,7 +763,7 @@
     "bufferstreams": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/bufferstreams/-/bufferstreams-1.1.3.tgz",
-      "integrity": "sha512-HaJnVuslRF4g2kSDeyl++AaVizoitCpL9PglzCYwy0uHHyvWerfvEb8jWmYbF1z4kiVFolGomnxSGl+GUQp2jg==",
+      "integrity": "sha1-qFFawCT6kOj6fVjBGxPeofKKvnI=",
       "dev": true,
       "requires": {
         "readable-stream": "2.3.3"
@@ -864,7 +864,7 @@
     "cipher-base": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "integrity": "sha1-h2Dk7MJy9MNjUy+SbYdKriwTl94=",
       "requires": {
         "inherits": "2.0.3",
         "safe-buffer": "5.1.1"
@@ -873,7 +873,7 @@
     "clap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
-      "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==",
+      "integrity": "sha1-TzZ0WzIAhJJVf0ZBLWbVDLmbzlE=",
       "requires": {
         "chalk": "1.1.3"
       }
@@ -1544,7 +1544,7 @@
     "glob": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-      "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+      "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
       "requires": {
         "fs.realpath": "1.0.0",
         "inflight": "1.0.6",
@@ -1654,7 +1654,7 @@
     "hash.js": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz",
-      "integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==",
+      "integrity": "sha1-NA3tvmKQGHFRweodd3o0SJNd+EY=",
       "requires": {
         "inherits": "2.0.3",
         "minimalistic-assert": "1.0.0"
@@ -2277,6 +2277,11 @@
         "object-visit": "1.0.1"
       }
     },
+    "marked": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
+      "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg=="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -2349,7 +2354,7 @@
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
       "requires": {
         "brace-expansion": "1.1.8"
       }
@@ -2541,7 +2546,7 @@
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
       "requires": {
         "are-we-there-yet": "1.1.4",
         "console-control-strings": "1.1.0",
@@ -3279,19 +3284,17 @@
       "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
     },
     "pxt-common-packages": {
-      "version": "0.22.1",
+      "version": "0.22.2",
-      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.22.1.tgz",
+      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.22.2.tgz",
-      "integrity": "sha512-GdqA/7tk1OQbkeMeCiPG4oRocV7lMb9HCya6gp5RuCPLKNpbLaCDHyLsXQGR8sXJOoFqrLjUWaQILbMKhCGNMQ==",
+      "integrity": "sha512-bndrU1Aqig0O504QuaQYICrSQfQF7QFBoOArl0hdY7NWfq2yNJu8CHoW2oKJm+r+LTz150D4XuHjCIGLEv2MBQ==",
       "requires": {
-        "autoprefixer": "6.7.7",
+        "pxt-core": "3.12.18"
-        "pxt-core": "3.12.12",
-        "rtlcss": "2.2.1"
       }
     },
     "pxt-core": {
-      "version": "3.12.12",
+      "version": "3.12.18",
-      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.12.12.tgz",
+      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.12.18.tgz",
-      "integrity": "sha512-o/u+Qxt2Xuid8f6f2KHDYnJ7qcxOvcbiUqxoOMFZrQkgnME7Pekly+mQPn2w1kjpO9M84BX70Mi9ld8dY/nLRg==",
+      "integrity": "sha512-Dd1XHjMjSR6gqf8B2LB7mtppD+VI49wckd/jCK8dHZcjb7RbngqTnfjOuHcDbXfSrvDrGFNzBhYvYaLf70AV7g==",
       "requires": {
         "bluebird": "3.5.1",
         "browserify": "16.2.0",
@@ -3300,6 +3303,7 @@
         "keytar": "4.2.1",
         "less": "2.7.3",
         "lzma": "2.3.2",
+        "marked": "0.3.19",
         "node-hid": "0.5.7",
         "pngjs": "3.3.2",
         "postcss": "6.0.21",
@@ -3468,7 +3472,7 @@
     "readable-stream": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-      "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+      "integrity": "sha1-No8lEtefnUb9/HE0mueHi7weuVw=",
       "requires": {
         "core-util-is": "1.0.2",
         "inherits": "2.0.3",
@@ -3482,7 +3486,7 @@
         "string_decoder": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
           "requires": {
             "safe-buffer": "5.1.1"
           }
@@ -3727,12 +3731,12 @@
     "safe-buffer": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
+      "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM="
     },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
     },
     "semantic-ui-less": {
       "version": "2.2.14",
@@ -4044,7 +4048,7 @@
     "stream-http": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz",
-      "integrity": "sha512-c0yTD2rbQzXtSsFSVhtpvY/vS6u066PcXOX9kBB3mSO76RiUQzL340uJkGBWnlBg4/HZzqiUXtaVA7wcRcJgEw==",
+      "integrity": "sha1-QKBQ7I3DtTsz2ZCUFcAsC/Gr+60=",
       "requires": {
         "builtin-status-codes": "3.0.0",
         "inherits": "2.0.3",
@@ -4195,7 +4199,7 @@
         "commander": {
           "version": "2.12.2",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
-          "integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA==",
+          "integrity": "sha1-D1lGxCftnsDZGka7ne9T5UZQ5VU=",
           "dev": true
         }
       }
@@ -4355,7 +4359,7 @@
         "pako": {
           "version": "1.0.6",
           "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
-          "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==",
+          "integrity": "sha1-AQEhG6pwxLykoPY/Igbpe3368lg=",
           "dev": true
         }
       }
@@ -4510,7 +4514,7 @@
     "uuid": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
-      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g=="
+      "integrity": "sha1-PdPT55Crwk17DToDT/q6vijrvAQ="
     },
     "varstream": {
       "version": "0.3.2",
@@ -4606,7 +4610,7 @@
     "which": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
-      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+      "integrity": "sha1-/wS9/AEO5UfXgL7DjhrBwnd9JTo=",
       "dev": true,
       "requires": {
         "isexe": "2.0.0"
@@ -4615,7 +4619,7 @@
     "wide-align": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+      "integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=",
       "requires": {
         "string-width": "1.0.2"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.1.41",
+  "version": "0.1.45",
   "description": "LEGO MINDSTORMS EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [
@@ -39,8 +39,8 @@
     "webfonts-generator": "^0.4.0"
   },
   "dependencies": {
-    "pxt-common-packages": "0.22.1",
+    "pxt-common-packages": "0.22.7",
-    "pxt-core": "3.12.17"
+    "pxt-core": "3.12.22"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

pxtarget.json

@@ -81,7 +81,6 @@
         "accentColor": "#0089BF",
         "logoUrl": "https://education.lego.com/",
         "logo": "./static/lego_education_logo.png",
-        "highContrastLogo": "./static/lego_education_logo_white.png",
         "docsLogo": "./static/lego-logo.svg",
         "portraitLogo": "./static/lego-logo.svg",
         "footerLogo": "./static/lego-logo.svg",

sim/visuals/board.ts

@@ -101,10 +101,13 @@ namespace pxsim.visuals {
     export const SCREEN_HEIGHT = 128;
     export interface IBoardTheme {
         accent?: string;
+        highContrast?: boolean;
         display?: string;
         buttonOuter?: string;
         buttonUps: string[];
         buttonDown?: string;
+        wireColor?: string;
+        backgroundViewColor?: string;
     }
 
     export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => {
@@ -112,12 +115,21 @@ namespace pxsim.visuals {
             accent: accent,
             buttonOuter: "#979797",
             buttonUps: ["#a8aaa8", "#393939", "#a8aaa8", "#a8aaa8", "#a8aaa8", '#a8aaa8'],
-            buttonDown: "#000"
+            buttonDown: "#000",
+            wireColor: '#5A5A5A',
+            backgroundViewColor: '#d6edff'
         }
     });
 
     export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme {
-        return themes[Math.floor(Math.random() * themes.length)];
+        let theme = themes[Math.floor(Math.random() * themes.length)];
+        if (highContrast) {
+            theme = JSON.parse(JSON.stringify(theme)) as IBoardTheme;
+            theme.highContrast = true;
+            theme.wireColor = '#ffffff';
+            theme.backgroundViewColor = '#ffffff';
+        }
+        return theme;
     }
 
     export interface IBoardProps {
@@ -334,7 +346,7 @@ namespace pxsim.visuals {
             this.style.textContent = EV3_STYLE;
 
             this.layoutView = new LayoutView();
-            this.layoutView.inject(this.element);
+            this.layoutView.inject(this.element, this.props.theme);
 
             const brick = new BrickViewPortrait(-1);
             this.layoutView.setBrick(brick);

sim/visuals/controls/backgroundView.ts

@@ -13,7 +13,7 @@ namespace pxsim.visuals {
                     'x': 0, 'y': 0,
                     'width': '100%',
                     'height': '100%',
-                    'style': `fill: #d6edff; stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
+                    'style': `fill: ${this.theme.backgroundViewColor};stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
                 }) as SVGRectElement;
             return this.backgroundGroup;
         }

sim/visuals/layoutView.ts

@@ -79,8 +79,8 @@ namespace pxsim.visuals {
 
         public setBrick(brick: BrickView) {
             this.brick = brick;
-            this.brick.inject(this.scrollGroup);
+            this.brick.inject(this.scrollGroup, this.theme);
-            this.brickLandscape.inject(this.scrollGroup);
+            this.brickLandscape.inject(this.scrollGroup, this.theme);
             this.brick.setSelected(false);
             this.brickLandscape.setSelected(true);
             this.brickLandscape.setVisible(false);
@@ -212,16 +212,16 @@ namespace pxsim.visuals {
 
             // Inject all wires
             for (let port = 0; port < DAL.NUM_OUTPUTS; port++) {
-                this.outputWires[port].inject(this.scrollGroup);
+                this.outputWires[port].inject(this.scrollGroup, this.theme);
             }
             for (let port = 0; port < DAL.NUM_INPUTS; port++) {
-                this.inputWires[port].inject(this.scrollGroup);
+                this.inputWires[port].inject(this.scrollGroup, this.theme);
             }
 
             // Inject all view containers
             for (let i = 0; i < 4; i++) {
-                this.inputContainers[i].inject(this.scrollGroup);
+                this.inputContainers[i].inject(this.scrollGroup, this.theme);
-                this.outputContainers[i].inject(this.scrollGroup);
+                this.outputContainers[i].inject(this.scrollGroup, this.theme);
             }
 
             // Inject all ports
@@ -253,6 +253,12 @@ namespace pxsim.visuals {
         }
 
         public updateTheme(theme: IBoardTheme) {
+            this.inputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
+            this.outputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
             this.inputs.forEach(n => {
                 n.updateTheme(theme);
             })

sim/visuals/view.ts

@@ -19,8 +19,9 @@ namespace pxsim.visuals {
         public abstract getInnerWidth(): number;
         public abstract getInnerHeight(): number;
 
-        public inject(parent: SVGElement, width?: number, visible = true) {
+        public inject(parent: SVGElement, theme: IBoardTheme, width?: number, visible = true) {
             this.width = width;
+            this.theme = theme;
             parent.appendChild(this.getView());
 
             if (visible) {
@@ -276,7 +277,7 @@ namespace pxsim.visuals {
         }
 
         public addView(view: View) {
-            view.inject(this.element);
+            view.inject(this.element, this.theme);
         }
 
         public clear() {

sim/visuals/wireView.ts

@@ -41,6 +41,11 @@ namespace pxsim.visuals {
             return this.wire;
         }
 
+        public updateThemeCore() {
+            let theme = this.theme;
+            this.path.setAttribute('stroke', theme.wireColor);
+        }
+
         updatePath() {
             if (!this.hasDimensions) return;
             const height = this.endY - this.startY;

targetconfig.json

@@ -15,6 +15,6 @@
         "Maker": "maker"
     },
     "electronManifest": {
-        "latest": "v0.1.36"
+        "latest": "v0.1.40"
     }
 }

theme/style.less

@@ -155,22 +155,6 @@
     }
 }
 
-/** high contrast **/
-.hc {
-    .ui.menu, #downloadArea,
-    .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active {
-        background-color: black !important;
-        color: white !important;
-    }
-    .ui.red.corner.label {
-        border-color: #d4000d!important;
-    }
-    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
-        border-color: white !important;
-    }
-}
-
-
 /*******************************
      Custom icons
 *******************************/